ASP.NET 2.0 Master Page主题以及皮肤使用
<p >1.Style Themes and Skin<p >ASP.Net 2.0 新应用样式<p ><p >ASP.Net 2.0包含大量用于定制外观的新特性。其中，服务器端控件提供Style对象模型，用于定制字体、边界、背景前景颜色、宽度、高度等等信息。同时，控件还支持使用CSS定制其外观。还可以把所有这些定制在一些skin文件里，并把这些描述控件外观的skin文件放置在theme文件夹中，反复使用<p ><p >为控件定制风格<p ><p >ü为HTML控件定制外观<p ><p >CSS是一套统一的描述标记，这套标记是相对于HTML相对独立的，这套标记使用很多特殊的符号来定制一些自己的外观描述方式。比如，CSS可以方便的描述一个文字的大小，尺寸，宽度，高度，文字的前景演示背景颜色，以及控件的各种各样的属性。CSS是一套开放性国际标准，目前被各个浏览器广泛兼容，我们在.NET中可以方便的引入CSS为我们的控件定制外观。<p ><p >? 对于HTML控件，可以使用CSS来定制其外观，无论是客户端的HTML控件还是服务器端HTML控件，其定制方法都一样<p ><p >? CSS既可以直接定制每个控件的显示风格，也可以定制一种风格并命名为一个类，只需要指定一个控件的显示风格是该类即可。<p ><p >? 代码示例：通过CSS定制显示HTML控件<p ><p >一种方式：在控件定义过程中使用style定义，如下：<p ><p >Click me!<p ><p ><p ><p > <p ><p > Item 1<p ><p > Item 2<p ><p > Item 3<p ><p > <p ><p > <p ><p > Option 1<p ><p > Option 2<p ><p > Option 3<p ><p > <p ><p >第二种方式是我们把CSS先提前定制出来，然后把控件指定他的style。如下定义：（放在里面）<p ><p > <p ><p > .spanstyle <p ><p > { <p ><p > font: 12pt verdana; <p ><p > font-weight:700;<p ><p > color:orange;<p ><p > }<p ><p > .buttonstyle <p ><p > { <p ><p > font: 8pt verdana;<p ><p > background-color:lightgreen;<p ><p > border-color:black;<p ><p > width:100 <p ><p > }<p ><p > .inputstyle <p ><p > { <p ><p > font: 14pt verdana;<p ><p > background-color:yellow;<p ><p > border-style:dashed;<p ><p > border-color:red;<p ><p > width:300; <p ><p > }<p ><p > .selectstyle <p ><p > { <p ><p > font: 14pt verdana;<p ><p > background-color:lightblue;<p ><p > color:purple; <p ><p > }<p ><p > .radiostyle <p ><p > { <p ><p > width:50;<p ><p > background-color:red;<p ><p > zoom:200% <p ><p > }<p ><p > <p ><p >然后我们在定义控件的时候，调用前面设计的类。调用方式如下：<p ><p ><p ><p >Click me!<p ><p ><p ><p ><p ><p > Item 1<p ><p > Item 2<p ><p > Item 3<p ><p > <p ><p > Option 1<p ><p >第二种方法显然比第一种要好，把描述风格都写在前面并命名。同时，把控件样式设计和其他工作分离开来。<p ><p >ü 为服务器端控件定制外观<p ><p >? 使用CSS定制WebControll<p ><p >使用CSS同样可以定制web控件<p ><p >? Web控件的CSS示例<p ><p >定义类：<p ><p > <p ><p > .beige { background-color:beige }<p ><p > <p >使用定义的样式：<p ><p > <p ><p > Default Desktop<p ><p > My Stock Portfolio<p ><p > My Contact List<p ><p > <p ><p >? 服务器端控件的属性定制<p ><p >服务器端控件同样可以通过设置其属性来实现对其模式的设定<p ><p >? 日历显示演示<p ><p ><p ><p > <p ><p >l 日历控件的子属性<p ><p >ü 除去标准外观属性，日历控件还有它特有的子属性，<p ><p >这些子属性直接控制显示日历控件的一些特性，例如DayStyle. WeekendSytle,TodayDayStyle,SeledtDayStyle,OtherDayStyle<p ><p >ü 日历控件子显示模式示例（两种设置方法比较：两种方法效果完全一样！第二种看起来更加的直观）<p ><p > <p ><p > BackColor="Beige"<p ><p > ForeColor="Brown"<p ><p > BorderWidth="3"<p ><p > Border<p ><p > BorderColor="Black"<p ><p > Height="450"<p ><p > Width="450"<p ><p > Font-Size="12pt"<p ><p > Font-Name="Tahoma,Arial"<p ><p > Font-Underline="false"<p ><p > CellSpacing=2<p ><p > CellPadding=2<p ><p > ShowGridLines=true ]<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p >l 使用Theme文件夹<p ><p >Theme文件夹是用来存放各种skin的文件夹。Skin是一个特殊的文件，它记录了控件的各种外观属性，并定义为一个单独的文件，只需要对一个页面指定其Theme，页面控件中的控件就会按照skin定义中的显示模式显示。<p ><p >l 没有使用Theme的页面<p ><p >结构复杂，格式混乱，不容易修改和阅读。<p ><p >头部分：[%@ Page Language="VB" %]<p ><p >Body部分：<p ><p ><p ><p > <p ><p > <p ><p > <p ><p > Page with No Theme Applied<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > This is some example text: The quick brown fox jumped over the lazy dog.<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > " ID="SqlDataSource1"<p ><p > runat="server" SelectCommand="SELECT , , , FROM "]<p ><p > <p ><p > <p ><p > <p ><p ><p ><p >l 使用Theme的页面<p ><p >结构清晰，便于修改和阅读，便于复用。<p ><p >头部分：[%@ Page Language="VB" Theme="Theme1" %] （这种情况下是在Theme1中只有一个skin文件）<p ><p >Body部分：<p ><p ><p ><p > <p ><p > <p ><p > <p ><p > Page with Example Theme Applied<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > This is some example text: The quick brown fox jumped over the lazy dog.<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > " ID="SqlDataSource1"<p ><p > runat="server" SelectCommand="SELECT , , , FROM "]<p ><p > <p ><p > <p ><p > <p ><p ><p ><p >"App_Themes"Theme1"ExampleSkin.skin部分：<p ><p ><p ><p ><p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p ><p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p >将样式从页面里面抽出样式保存在Theme，使用时直接调用就可以了。<p ><p >l 为skin命名<p ><p > 一个Theme可以包含很多skin文件，对同一个控件的显示模式也可以有不同的定义，可以通过指定控件的skin id属性，指定控件所使用的skin。这样，就可以方便的改变控件的外观了。<p ><p >l Skin选择示例（同一个Theme中还有多个skin的情况！）<p ><p >头部分：[%@ Page Language="VB" Theme="Theme2" %]<p ><p >Body部分：<p ><p ><p ><p > <p ><p > <p ><p > Named Skins<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p >Label.skin部分：<p ><p >//默认样式<p ><p >//特殊样式，调用时，通过SkinID调用<p ><p >Calendar.skin部分：<p ><p ><p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p ><p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p >l 注意事项<p ><p > 一旦使用Theme=定义了一个页面的theme，页面中对控件进行的属性设置会失败，<p ><p >如果希望页面中属性设置生效，需要在定义Theme的时候使用SytleSheetTheme=来代替直接使用Theme。<p ><p >l 定义Theme示例<p ><p >ü 使用Theme定义<p ><p >[%@ Page Language="VB" Theme="Theme2" %]<p ><p >ü 使用SytleSheetTheme定义<p ><p >[%@ Page Language="VB" StyleSheetTheme="Theme2" %]<p ><p >l 使用代码访问Theme<p ><p >客户端调用样式方式。<p ><p >[%@ Page Language="VB" %]<p ><p ><p ><p > Protected Sub Page_PreInit()<p ><p > Page.Theme = Server.HtmlEncode(Request.QueryString("Theme"))<p ><p > End Sub<p ><p ><p ><p ><p ><p ><p ><p > Assigning a Theme in Code<p ><p ><p ><p ><p ><p > <p ><p > <p ><p > Assigning a Theme in Code <p ><p > Theme A <p ><p > Theme B<p ><p > <p ><p > <p ><p ><p ><p ><p ><p > 通过使用代码，可以为页面指定Theme，需要注意：CSS也可以作为主题的一部分来作为定义！<p ><p >l 代码指定theme示例<p ><p >l 定义Theme模板<p ><p > 可以把几个固定的模块定义为一个Theme反复使用。这种模块不单包括控件的显示模式，还包括控件的摆放模式。<p ><p >l 登陆控件示例<p ><p >头文件部分：[%@ Page Language="VB" Theme="MyTheme" %]<p ><p >Body部分：<p ><p ><p ><p > <p ><p > <p ><p > <p ><p > Defining a Template in a Theme<p ><p > <p ><p > <p ><p > <p ><p ><p ><p >MyTheme"Template.Skin部分：<p ><p ><p ><p > <p ><p > Please log in to this site:<p ><p > <p ><p > <p ><p > <p ><p > User Name:<p ><p > <p ><p > <p ><p > *<p ><p > <p ><p > <p ><p > <p ><p > Password:<p ><p > <p ><p > <p ><p > *<p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p > <p ><p ><p ><p >2. Master Page<p ><p >l 使用Master Page<p ><p > 如同使用Theme可以格式化整个网站各个控件的显示模式一样，Master Page可以用来定义网站中不同网页的相同部分，例如整个网站都包括同样的格局，同样的页头，同样的页脚，同样的导航栏。这个时候可以把这些控件定义在一个Master Page上。其他网页只需要继承这个Master Page即可。<p ><p >l Master Page的使用<p ><p > Master Page的基本定义和其他页面并没有不同，主要的区别在于，Master Page包含一个ContentPlaceHolder，这个控件定义了一些可以被其他页面继承的区域，该区域可以被其他页面用来摆放自己的控件。<p ><p >l Master Page示例<p ><p >新建一个网站-]新建一个母版页-]广告控件选择数据源，新建一个XML数据源。。。。-]新建一个Web窗体(勾选 选择母版页)-]添加自定义控件-]运行调试。<p ><p >3. 总结<p ><p >l 关于如何把一些控件的样式统一保存起来；<p ><p >l 如何将控件不同的样式指定出来（SkinID）；<p ><p >l 介绍母版页相关内容。<p ><P align=right></P><p align="center"></p></p>
页:
[1]