Chapter 6-1 6-2
6-2 l ASP.NET 6-1 (theme) ASP.NET (skin).skin ButtonLabelHyperLink (cascading style sheet).css TreeView 1. 2. (page theme) (global theme) IIS
l 6-3 6-1-1 (page theme) (global theme) App_Themes App_Themes 1 2 n (skin) (CSS)
6-4 l ASP.NET IIS aspnet_client\system_web\ \Themes.NET Framework Themes IIS 1 2 n (skin) (CSS) IIS (skin).skin Button BackColorForeColorFontBorderStyle TextClick <asp:button runat="server" SkinID="" ="" /> (default skin) SkinID Button <asp:button runat="server" BackColor="Navy" BorderStyle="Dashed" ForeColor="Yellow" /> Button BackColorBorderStyleForeColor "Navy""Dashed" "Yellow"
l 6-5 (named skin) SkinID SkinID SkinID Button SkinID "RedButton" Button <asp:button runat="server" SkinID="RedButton" BackColor="red" ForeColor="White"/> SkinID <asp:button runat="server" BackColor="Navy" BorderStyle="Dashed" ForeColor="Yellow" /> <asp:button runat="server" SkinID="RedButton" BackColor="red" ForeColor="White"/> Button Button SkinID Button SkinID="RedButton" Button Button
6-6 l ASP.NET 1. Themes ASP.NET [] Themes [] \ [ ASP.NET ] \ [] 2. App_Themes Visual Studio App_Themes Theme1 3. [] 2. Theme1 [] \ [] SkinFile1.skin 1 [Visual C#] 3 SkinFile1.skin 2 [] 4 [] 4. <asp:button runat="server" BackColor="Navy" BorderStyle="Dashed" ForeColor="Yellow" /> <asp:button runat="server" SkinID="RedButton" BackColor="red" ForeColor="White"/>
l 6-7 1. Themes [] App_Themes\ Theme1 [] \ [] StyleSheet1.css 2. 01 ~ 04 06 ~ 08 10 ~ 12 14 ~ 16 \Themes\App_Themes\Theme1\StyleSheet1.css 01:body{ 02: background-color:lightyellow; 03: color:blue; 04:} 05: 06:a{ 07: color:orange; 08:} 09: 10:a:hover{ 11: color:fuchsia; 12:} 13: 14:a:visited{ 15: color:green; 16:}
6-8 l ASP.NET 6-1-2 @Page <%@ Page Theme="" %> <%@ Page StyleSheetTheme="" %> @Page Web.config <configuration> <system.web> <pages theme="" /> </system.web> </configuration> <configuration> <system.web> <pages StyleSheetTheme="" /> </system.web> </configuration> @Page <%@ Page EnableTheming="False" %>
l 6-9 EnableTheming <asp: runat="server" ID="" EnableTheming="False" /> (global theme) SkinID ID "Button1" SkinID ID "Button2" SkinID "RedButton" <asp:button ID="Button1" runat="server" Text="" /> <asp:button ID="Button2" runat="server" SkinID="RedButton" Text="" /> Theme StyleSheetTheme Theme StyleSheetTheme
6-10 l ASP.NET 1. Themes prac1.aspx ASP.NET 2. @Page Theme="Theme1" Theme1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="prac1.aspx.cs" Inherits="prac1" Theme="Theme1" %> 3. Button HyperLink [SkinID] "RedButton" 4.
l 6-11 6-2 (master page) (master page).master ContentPlaceHolder ContentPlaceHolder (content page) ASP.NET.aspx ASP.NET Content Content ContentPlaceHolderID ContentPlaceHolder
6-12 l ASP.NET 6-2-1.master ASP.NET <html><head><body><form> ASP.NET @Page @Master <%@ Master Language="C#" AutoEventWireup="true" %> ContentPlaceHolder <asp:contentplaceholder runat="server" ID="" /> 1. Master ASP.NET 2. [] \ [] MasterPage.master 1 [Visual C#] 3 MasterPage.master 2 [] 4 []
l 6-13 3. Visual Studio ContentPlaceHolder (head) (body) <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html> 1. ContentPlaceHolder [] \ [ ] ContentPlaceHolder
6-14 l ASP.NET 2. [] [] 31[] 980 980 [] 3. [] \ [] \ [] [] [] 2 [] 4. 320px ContentPlaceHolder
l 6-15 \Master\MasterPage.master <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> <style type="text/css">.auto-style1 {width:980px;}.auto-style2 {width:320px;} </style> </head> <body> <form id="form1" runat="server"> <div> <table class="auto-style1"> <tr> <td colspan="2"> </td> </tr> <tr> <td class="auto-style2"> </td> <td><asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder></td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </div> </form> </body> </html> ContentPlaceHolder
6-16 l ASP.NET 1. image [ImageUrl] "~/img1.jpg" 2. 0800-000-001 3. BulletedList page1.aspx ~ page5.aspx a b c d ContentPlaceHolder () 4. page1.aspx ~ page5.aspx ASP.NET BulletedList 5 Menu TreeViewSiteMapPath
l 6-17 6-2-2.aspx ASP.NET <html><head><body><form> @Page MasterPageFile <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> @Page Web.config <configuration> <system.web> <pages masterpagefile="" /> </system.web> </configuration> Content Content ContentPlaceHolderID Content ContentPlaceHolder <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> HTML </asp:content>
6-18 l ASP.NET 1. Master [] \ [] Default.aspx ASP.NET 1 [Visual C#] 2 [Web ] 3 Default.aspx 4 [] 5 [] 6 7 []
l 6-19 2. 3. ContentPlaceHolder image [ImageUrl] "~/img2.jpg"
6-20 l ASP.NET 4. Visual Studio Content <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <p> 3000 </p> <p><asp:image ID="Image3" runat="server" ImageUrl="~/img2.jpg" /></p> </asp:content> 5.
l 6-21 ( )1. ASP.NET A. B. C. D. ( )2. A..skin B..css C..master D..aspx ( )3. (global theme) IIS A. B. ( )4. A. Content B. SkinID C. StyleSheetTheme D. EnableTheming ( )5. A. ContentPlaceHolder B. Content C. MasterPage D. StyleSheetTheme
6-22 l ASP.NET ( )6. ASP.NET A..master B. <html><head><body><form> C. D. ASP.NET @Page @Master ( )7. A. ContentPlaceHolder B. Content C. SkinID D. MasterPageFile ( )8. A. App_Themes B. C. D. EnableTheming