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

1. Style Themes and Skin

l ASP.Net 2.0 新应用样式

ASP.Net 2.0包含大量用于定制外观的新特性。其中，服务器端控件提供Style对象模型，用于定制字体、边界、背景前景颜色、宽度、高度等等信息。同时，控件还支持使用CSS定制其外观。还可以把所有这些定制在一些skin文件里，并把这些描述控件外观的skin文件放置在theme文件夹中，反复使用

l 为控件定制风格

ü 为HTML控件定制外观

CSS是一套统一的描述标记，这套标记是相对于HTML相对独立的，这套标记使用很多特殊的符号来定制一些自己的外观描述方式。比如，CSS可以方便的描述一个文字的大小，尺寸，宽度，高度，文字的前景演示背景颜色，以及控件的各种各样的属性。CSS是一套开放性国际标准，目前被各个浏览器广泛兼容，我们在.NET中可以方便的引入CSS为我们的控件定制外观。

Ø 对于HTML控件，可以使用CSS来定制其外观，无论是客户端的HTML控件还是服务器端HTML控件，其定制方法都一样

Ø CSS既可以直接定制每个控件的显示风格，也可以定制一种风格并命名为一个类，只需要指定一个控件的显示风格是该类即可。

Ø 代码示例：通过CSS定制显示HTML控件

一种方式：在控件定义过程中使用style定义，如下：

<button id="Button1" style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server">Click me!</button>

</select>

<input id="Radio1" type="radio" name="Mode" checked style="width:50;background-color:red;zoom:200%" runat="server"/>Option 1<br>

<input id="Radio2" type="radio" name="Mode" style="width:50;background-color:red;zoom:200%" runat="server"/>Option 2<br>

<input id="Radio3" type="radio" name="Mode" style="width:50;background-color:red;zoom:200%" runat="server"/>Option 3

</span>

第二种方式是我们把CSS先提前定制出来，然后把控件指定他的style。如下定义：（放在<head></head>里面）

<style>

.spanstyle

{

font: 12pt verdana;

font-weight:700;

color:orange;

}

.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>

然后我们在定义控件的时候，调用前面设计的类。调用方式如下：

<button id="Button1" class="buttonstyle" runat="server">Click me!</button>

</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:DropDownList ID="DropDownList1" class="beige" runat="server">

<ASP:ListItem>Default Desktop</ASP:ListItem>

<ASP:ListItem>My Stock Portfolio</ASP:ListItem>

<ASP:ListItem>My Contact List</ASP:ListItem>

</ASP:DropDownList>

Ø 服务器端控件的属性定制

服务器端控件同样可以通过设置其属性来实现对其模式的设定

Ø 日历显示演示

<ASP:Calendar ID="Calendar1" runat="server" />

<ASP:Calendar ID="Calendar2" runat="server"

BackColor="Beige"

ForeColor="Brown"

BorderWidth="3"

BorderStyle="Solid"

BorderColor="Black"

Height="450"

Width="450"

Font-Size="12pt"

Font-Names="Tahoma,Arial"

Font-Underline="false"

CellSpacing=2

CellPadding=2

ShowGridLines=true

l 日历控件的子属性

ü 除去标准外观属性，日历控件还有它特有的子属性，这些子属性直接控制显示日历控件的一些特性，例如DayStyle. WeekendSytle,TodayDayStyle,SeledtDayStyle,OtherDayStyle

ü 日历控件子显示模式示例（两种设置方法比较：两种方法效果完全一样！第二种看起来更加的直观）

<ASP:Calendar ID="Calendar1" runat="server"

BackColor="Beige"

ForeColor="Brown"

BorderWidth="3"

BorderStyle="Solid"

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"

BorderStyle="Solid"

BorderColor="Black"

Height="450"

Width="450"

Font-Size="12pt"

Font-Name="Tahoma,Arial"

Font-Underline="false"

CellSpacing=2

CellPadding=2

ShowGridLines=true

</ASP:Calendar>

l 使用Theme文件夹

Theme文件夹是用来存放各种skin的文件夹。Skin是一个特殊的文件，它记录了控件的各种外观属性，并定义为一个单独的文件，只需要对一个页面指定其Theme，页面控件中的控件就会按照skin定义中的显示模式显示。

l 没有使用Theme的页面

结构复杂，格式混乱，不容易修改和阅读。

头部分：<%@ Page Language="VB" %>

Body部分：

<body>

<div>

<h3>

Page with No Theme Applied</h3>

<asp:Label ID="Label1" runat="server" Text="Hello 1" Font-Bold="true" ForeColor="orange" /><br />

<asp:Label ID="Label2" runat="server" Text="Hello 2" Font-Bold="true" ForeColor="orange" /><br />

<asp:Label 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" BorderStyle="Solid" CellSpacing="1"

Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" ID="Calendar1"

NextPrevFormat="ShortMonth" runat="server" Width="330px">

<TitleStyle BackColor="#333399" BorderStyle="Solid" 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">

<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>

l 使用Theme的页面

结构清晰，便于修改和阅读，便于复用。

头部分：<%@ Page Language="VB" Theme="Theme1" %> （这种情况下是在Theme1中只有一个skin文件）

Body部分：

<body>

<div>

<h3>

Page with Example Theme Applied</h3>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />

<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />

<asp:Label 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">

<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:Label Font-Bold="true" ForeColor="orange" runat="server" />

<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1"

Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px"

NextPrevFormat="ShortMonth" Width="330px" runat="server">

<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt"

ForeColor="White" Height="12pt" />

</asp:Calendar>

<asp:GridView CellPadding="4"

ForeColor="#333333" GridLines="None" Width="461px" runat="server">

</asp:GridView>

将样式从页面里面抽出样式保存在Theme，使用时直接调用就可以了。

l 为skin命名

一个Theme可以包含很多skin文件，对同一个控件的显示模式也可以有不同的定义，可以通过指定控件的skin id属性，指定控件所使用的skin。这样，就可以方便的改变控件的外观了。

l Skin选择示例（同一个Theme中还有多个skin的情况！）

头部分：<%@ Page Language="VB" Theme="Theme2" %>

Body部分：

<body>

<div>

<h3>Named Skins</h3>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />

<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />

<asp:Label 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">

</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">

</asp:Calendar>

l 注意事项

一旦使用Theme=定义了一个页面的theme，页面中对控件进行的属性设置会失败，如果希望页面中属性设置生效，需要在定义Theme的时候使用SytleSheetTheme=来代替直接使用Theme。

l 定义Theme示例

ü 使用Theme定义

<%@ Page Language="VB" Theme="Theme2" %>

ü 使用SytleSheetTheme定义

<%@ Page Language="VB" StyleSheetTheme="Theme2" %>

l 使用代码访问Theme

客户端调用样式方式。

<%@ Page Language="VB" %>

Protected Sub Page_PreInit()

Page.Theme = Server.HtmlEncode(Request.QueryString("Theme"))

End Sub

</script>

<title>Assigning a Theme in Code</title>

</head>

<body>

<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>

<div>

<h2>

Defining a Template in a Theme</h2>

<asp:Login ID="Login1" runat="server"/>

</div>

</form>

</body>

MyTheme"Template.Skin部分：

<asp:Login runat="server">

<i>Please log in to this site:</i><br /><br />

<tr>

<td>

<asp:Label Font-Bold="true" AssociatedControlID="UserName" ID="UserNameLabel" runat="server">User Name:</asp:Label>

<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:Label Font-Bold="true" AssociatedControlID="Password" ID="PasswordLabel" runat="server">Password:</asp:Label>

<br />

<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Password is required."

ID="PasswordRequired" runat="server" ToolTip="Password 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:Literal EnableViewState="False" ID="FailureText" runat="server"></asp:Literal>

</LayoutTemplate>

</asp:Login>

2. Master Page

l 使用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 介绍母版页相关内容。

posted @ 2009-05-09 01:07 棋木空间阅读(1268) 评论(2) 编辑收藏举报

刷新页面返回顶部

棋木空间

学习笔记

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

公告