ASP.NET 2.0 Master Page主题以及皮肤使用

haidong · 发表于 2010-2-25 10:51:07

1.Style Themes and SkinASP.Net 2.0 新应用样式ASP.Net 2.0包含大量用于定制外观的新特性。其中，服务器端控件提供Style对象模型，用于定制字体、边界、背景前景颜色、宽度、高度等等信息。同时，控件还支持使用CSS定制其外观。还可以把所有这些定制在一些skin文件里，并把这些描述控件外观的skin文件放置在theme文件夹中，反复使用为控件定制风格ü为HTML控件定制外观CSS是一套统一的描述标记，这套标记是相对于HTML相对独立的，这套标记使用很多特殊的符号来定制一些自己的外观描述方式。比如，CSS可以方便的描述一个文字的大小，尺寸，宽度，高度，文字的前景演示背景颜色，以及控件的各种各样的属性。CSS是一套开放性国际标准，目前被各个浏览器广泛兼容，我们在.NET中可以方便的引入CSS为我们的控件定制外观。? 对于HTML控件，可以使用CSS来定制其外观，无论是客户端的HTML控件还是服务器端HTML控件，其定制方法都一样? CSS既可以直接定制每个控件的显示风格，也可以定制一种风格并命名为一个类，只需要指定一个控件的显示风格是该类即可。? 代码示例：通过CSS定制显示HTML控件一种方式：在控件定义过程中使用style定义，如下：[button id="Button1" runat="server"]Click me![/button][input id="Text1" type="text" value="One, Two, Three" runat="server"/] [select id="Select1" runat="server"] [option]Item 1[/option] [option]Item 2[/option] [option]Item 3[/option] [/select] [span ] [input id="Radio1" type="radio" name="Mode" checked runat="server"/]Option 1[br] [input id="Radio2" type="radio" name="Mode" runat="server"/]Option 2[br] [input id="Radio3" type="radio" name="Mode" runat="server"/]Option 3 [/span]第二种方式是我们把CSS先提前定制出来，然后把控件指定他的style。如下定义：（放在[head][/head]里面） [style] .spanstyle { font: 12pt verdana; font-weight:700; color

range; } .buttonstyle { font: 8pt verdana; background-color:lightgreen; border-color:black; width:100 } .inputstyle { font: 14pt verdana; background-color:yellow; border-style:dashed; border-color:red; width:300; } .selectstyle { font: 14pt verdana; background-color:lightblue; color:purple; } .radiostyle { width:50; background-color:red; zoom:200% } [/style]然后我们在定义控件的时候，调用前面设计的类。调用方式如下：[span id="Span1" class="spanstyle" runat="server"][button id="Button1" class="buttonstyle" runat="server"]Click me![/button][input id="Text1" type="text" value="One, Two, Three" class="inputstyle" runat="server"/][select id="Select1" class="selectstyle" runat="server"] [option]Item 1[/option] [option]Item 2[/option] [option]Item 3[/option] [/select] [input id="Radio1" type="radio" name="Mode" checked class="radiostyle" runat="server"/]Option 1[br]第二种方法显然比第一种要好，把描述风格都写在前面并命名。同时，把控件样式设计和其他工作分离开来。ü 为服务器端控件定制外观? 使用CSS定制WebControll使用CSS同样可以定制web控件? Web控件的CSS示例定义类： [style] .beige { background-color:beige } [/style]使用定义的样式： [ASP

ropDownList ID="DropDownList1" class="beige" runat="server"] [ASP

istItem]Default Desktop[/ASP

istItem] [ASP

istItem]My Stock Portfolio[/ASP

istItem] [ASP

istItem]My Contact List[/ASP

istItem] [/ASP

ropDownList]? 服务器端控件的属性定制服务器端控件同样可以通过设置其属性来实现对其模式的设定? 日历显示演示[ASP:Calendar ID="Calendar1" runat="server" /] [ASP:Calendar ID="Calendar2" runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" Border BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Names="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true /]l 日历控件的子属性ü 除去标准外观属性，日历控件还有它特有的子属性，[ccid_page/]这些子属性直接控制显示日历控件的一些特性，例如DayStyle. WeekendSytle,TodayDayStyle,SeledtDayStyle,OtherDayStyleü 日历控件子显示模式示例（两种设置方法比较：两种方法效果完全一样！第二种看起来更加的直观） [ASP:Calendar ID="Calendar1" runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" Border BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Names="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true TitleStyle-BorderColor="darkolivegreen" TitleStyle-BorderWidth="3" TitleStyle-BackColor="olivedrab" TitleStyle-Height="50px" DayHeaderStyle-BorderColor="darkolivegreen" DayHeaderStyle-BorderWidth="3" DayHeaderStyle-BackColor="olivedrab" DayHeaderStyle-ForeColor="black" DayHeaderStyle-Height="20px" DayStyle-Width="50px" DayStyle-Height="50px" TodayDayStyle-BorderWidth="3" WeekEndDayStyle-BackColor="palegoldenrod" WeekEndDayStyle-Width="50px" WeekEndDayStyle-Height="50px" SelectedDayStyle-BorderColor="firebrick" SelectedDayStyle-BorderWidth="3" OtherMonthDayStyle-Width="50px" OtherMonthDayStyle-Height="50px" /] BackColor="Beige" ForeColor="Brown" BorderWidth="3" Border BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true ] [TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" /] [DayHeaderStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" ForeColor="black" Height="20px" /] [WeekEndDayStyle BackColor="palegoldenrod" Width="50px" Height="50px" /] [DayStyle Width="50px" Height="50px" /] [TodayDayStyle BorderWidth="3" /] [SelectedDayStyle BorderColor="firebrick" BorderWidth="3" /] [OtherMonthDayStyle Width="50px" Height="50px" /] [/ASP:Calendar]l 使用Theme文件夹Theme文件夹是用来存放各种skin的文件夹。Skin是一个特殊的文件，它记录了控件的各种外观属性，并定义为一个单独的文件，只需要对一个页面指定其Theme，页面控件中的控件就会按照skin定义中的显示模式显示。l 没有使用Theme的页面结构复杂，格式混乱，不容易修改和阅读。头部分：[%@ Page Language="VB" %]Body部分：[body] [form id="form1" runat="server"] [div] [h3] Page with No Theme Applied[/h3] [asp

abel ID="Label1" runat="server" Text="Hello 1" Font-Bold="true" ForeColor="orange" /][br /] [asp

abel ID="Label2" runat="server" Text="Hello 2" Font-Bold="true" ForeColor="orange" /][br /] [asp

abel ID="Label3" runat="server" Text="Hello 3" Font-Bold="true" ForeColor="orange" /][br /] [br /] This is some example text: The quick brown fox jumped over the lazy dog.[br /] [br /] [asp:Calendar BackColor="White" BorderColor="Black" Border CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" ID="Calendar1" NextPrevFormat="ShortMonth" runat="server" Width="330px"] [SelectedDayStyle BackColor="#333399" ForeColor="White" /] [OtherMonthDayStyle ForeColor="#999999" /] [TodayDayStyle BackColor="#999999" ForeColor="White" /] [DayStyle BackColor="#CCCCCC" /] [NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /] [DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /] [TitleStyle BackColor="#333399" Border Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /] [/asp:Calendar] [br /] [asp:GridView AutoGenerateColumns="False" CellPadding="4" DataKeyNames="au_id" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" ID="GridView1" runat="server" Width="461px"] [FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /] [Columns] [asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" /] [asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" /] [asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" /] [asp:BoundField DataField="state" HeaderText="state" SortExpression="state" /] [/Columns] [RowStyle BackColor="#E3EAEB" /] [PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /] [SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /] [HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /] [EditRowStyle BackColor="#7C6F57" /] [AlternatingRowStyle BackColor="White" /] [/asp:GridView] [asp:SqlDataSource ConnectionString="[%$ ConnectionStrings:pubsConnectionString %]" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]"] [/asp:SqlDataSource] [/div] [/form][/body]l 使用Theme的页面结构清晰，便于修改和阅读，便于复用。头部分：[%@ Page Language="VB" Theme="Theme1" %] （这种情况下是在Theme1中只有一个skin文件）Body部分：[body] [form id="form1" runat="server"] [div] [h3] Page with Example Theme Applied[/h3] [asp

abel ID="Label1" runat="server" Text="Hello 1" /][br /] [asp

abel ID="Label2" runat="server" Text="Hello 2" /][br /] [asp

abel ID="Label3" runat="server" Text="Hello 3" /][br /] [br /] This is some example text: The quick brown fox jumped over the lazy dog.[br /] [br /] [asp:Calendar ID="Calendar1" runat="server"/] [br /] [asp:GridView ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="au_id" runat="server"] [Columns] [asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" /] [asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" /] [asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" /] [asp:BoundField DataField="state" HeaderText="state" SortExpression="state" /] [/Columns] [/asp:GridView] [asp:SqlDataSource ConnectionString="[%$ ConnectionStrings:pubsConnectionString %]" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]"] [/asp:SqlDataSource] [/div] [/form][/body]"App_Themes"Theme1"ExampleSkin.skin部分：[asp

abel Font-Bold="true" ForeColor="orange" runat="server" /][asp:Calendar BackColor="White" BorderColor="Black" Border CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="330px" runat="server"] [SelectedDayStyle BackColor="#333399" ForeColor="White" /] [OtherMonthDayStyle ForeColor="#999999" /] [TodayDayStyle BackColor="#999999" ForeColor="White" /] [DayStyle BackColor="#CCCCCC" /] [NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /] [DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /] [TitleStyle BackColor="#333399" Border Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /][/asp:Calendar][asp:GridView CellPadding="4" ForeColor="#333333" GridLines="None" Width="461px" runat="server"] [FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /] [RowStyle BackColor="#E3EAEB" /] [PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /] [SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /] [HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /] [EditRowStyle BackColor="#7C6F57" /] [AlternatingRowStyle BackColor="White" /][/asp:GridView]将样式从页面里面抽出样式保存在Theme，使用时直接调用就可以了。l 为skin命名 一个Theme可以包含很多skin文件，对同一个控件的显示模式也可以有不同的定义，可以通过指定控件的skin id属性，指定控件所使用的skin。这样，就可以方便的改变控件的外观了。l Skin选择示例（同一个Theme中还有多个skin的情况！）头部分：[%@ Page Language="VB" Theme="Theme2" %]Body部分：[body] [form id="form1" runat="server"] [div] [h3]Named Skins[/h3] [asp

abel ID="Label1" runat="server" Text="Hello 1" /][br /] [asp

abel ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /][br /] [asp

abel ID="Label3" runat="server" Text="Hello 3" /][br /] [br /] [asp:Calendar ID="Calendar1" runat="server"/] [br /] [asp:Calendar ID="Calendar2" SkinID="Simple" runat="server"/] [/div] [/form][/body]Label.skin部分：[asp:label runat="server" font-bold="true" forecolor="orange" /]//默认样式[asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" /]//特殊样式，调用时，通过SkinID调用Calendar.skin部分：[asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px"] [SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /] [SelectorStyle BackColor="#FFCC66" /] [OtherMonthDayStyle ForeColor="#CC9966" /] [TodayDayStyle BackColor="#FFCC66" ForeColor="White" /] [NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /] [DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /] [TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /][/asp:Calendar][asp:Calendar SkinID="Simple" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"] [SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /] [SelectorStyle BackColor="#CCCCCC" /] [WeekendDayStyle BackColor="#FFFFCC" /] [OtherMonthDayStyle ForeColor="#808080" /] [TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /] [NextPrevStyle VerticalAlign="Bottom" /] [DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /] [TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /][/asp:Calendar]l 注意事项 一旦使用Theme=定义了一个页面的theme，页面中对控件进行的属性设置会失败，[ccid_page/]如果希望页面中属性设置生效，需要在定义Theme的时候使用SytleSheetTheme=来代替直接使用Theme。l 定义Theme示例ü 使用Theme定义[%@ Page Language="VB" Theme="Theme2" %]ü 使用SytleSheetTheme定义[%@ Page Language="VB" StyleSheetTheme="Theme2" %]l 使用代码访问Theme客户端调用样式方式。[%@ Page Language="VB" %][script runat="server"] Protected Sub Page_PreInit() Page.Theme = Server.HtmlEncode(Request.QueryString("Theme")) End Sub[/script][html xmlns="http://www.w3.org/1999/xhtml"][head id="Head1" runat="server"] [title]Assigning a Theme in Code[/title][/head][body] [form id="form1" runat="server"] [div] [h2]Assigning a Theme in Code[/h2] [a href="CodeTheme.aspx?Theme=ThemeA"]Theme A[/a] [a href="CodeTheme.aspx?Theme=ThemeB"]Theme B[/a] [/div] [/form][/body][/html] 通过使用代码，可以为页面指定Theme，需要注意：CSS也可以作为主题的一部分来作为定义！l 代码指定theme示例l 定义Theme模板 可以把几个固定的模块定义为一个Theme反复使用。这种模块不单包括控件的显示模式，还包括控件的摆放模式。l 登陆控件示例头文件部分：[%@ Page Language="VB" Theme="MyTheme" %]Body部分：[body] [form id="form1" runat="server"] [div] [h2] Defining a Template in a Theme[/h2] [asp

ogin ID="Login1" runat="server"/] [/div] [/form][/body]MyTheme"Template.Skin部分：[asp

ogin runat="server"] [LayoutTemplate] Please log in to this site:[br /][br /] [table border="0" cellpadding="10" bgcolor="beige"] [tr] [td] [asp

abel Font-Bold="true" AssociatedControlID="UserName" ID="UserNameLabel" runat="server"]User Name:[/asp

abel] [br /] [asp:TextBox ID="UserName" runat="server"][/asp:TextBox] [asp:RequiredFieldValidator ControlToValidate="UserName" ErrorMessage="User Name is required." ID="UserNameRequired" runat="server" ToolTip="User Name is required." ValidationGroup="Login1"]*[/asp:RequiredFieldValidator] [/tr] [tr] [td] [asp

abel Font-Bold="true" AssociatedControlID="

assword" ID="

asswordLabel" runat="server"]Password:[/asp

abel] [br /] [asp:TextBox ID="

assword" runat="server" TextMode="

assword"][/asp:TextBox] [asp:RequiredFieldValidator ControlToValidate="

assword" ErrorMessage="

assword is required." ID="

asswordRequired" runat="server" ToolTip="

assword is required." ValidationGroup="Login1"]*[/asp:RequiredFieldValidator] [/td] [/tr] [tr] [td] [asp:Button CommandName="Login" ID="LoginButton" runat="server" Text="Log In" ValidationGroup="Login1" /] [/td] [/tr] [/table] [br /] [asp

iteral EnableViewState="False" ID="FailureText" runat="server"][/asp

iteral] [/LayoutTemplate][/asp

ogin]2. Master Pagel 使用Master Page 如同使用Theme可以格式化整个网站各个控件的显示模式一样，Master Page可以用来定义网站中不同网页的相同部分，例如整个网站都包括同样的格局，同样的页头，同样的页脚，同样的导航栏。这个时候可以把这些控件定义在一个Master Page上。其他网页只需要继承这个Master Page即可。l Master Page的使用 Master Page的基本定义和其他页面并没有不同，主要的区别在于，Master Page包含一个ContentPlaceHolder，这个控件定义了一些可以被其他页面继承的区域，该区域可以被其他页面用来摆放自己的控件。l Master Page示例新建一个网站-]新建一个母版页-]广告控件选择数据源，新建一个XML数据源。。。。-]新建一个Web窗体(勾选选择母版页)-]添加自定义控件-]运行调试。3. 总结l 关于如何把一些控件的样式统一保存起来；l 如何将控件不同的样式指定出来（SkinID）；l 介绍母版页相关内容。<

align=right>

账号		自动登录	找回密码
密码			论坛注册

ASP.NET 2.0 Master Page主题以及皮肤使用

浏览过的版块

客服中心

投诉建议