1、使用样式、外观和主题,ASP.NET 2.0 开发技术,2,引言,一个站点的美观与否直接影响站点的受欢迎度。人们更倾向于访问界面美观的站点。如何统一整个网站的风格？,ASP.NET 2.0 开发技术,3,教学目的,了解主题的概念、分类掌握皮肤概念及创建皮肤文件方法掌握在Web.config文件中配置主题的方法掌握动态加载主题的方法,ASP.NET 2.0 开发技术,4,主题,由控件的外观、样式组成的集合，由一个文件组构成，存放在App_Themes文件夹下。主题包括：皮肤文件（.Skin）、CSS文件(.CSS)、图片、其它资源等。主题的作用：统一设置Web页面的外观。,ASP.NET 2.0
2、 开发技术,5,CSS,CSS不是核心的.NET标准，但是Visual Studio对它提供了丰富的支持使用样式表能做什么？标准化布局，可以快速格式化新页面而不会带来细微的错误或差异。把格式信息分离，不必跟踪所有的页面或重新编译代码就可以修改格式。,ASP.NET 2.0 开发技术,6,主题与CSS的比较,相似点允许定义一组作用于多个页面中的控件的样式特性。 不同点主题基于控件而不是HTML 主题允许定义和重用几乎所有的控件属性 CSS只是直接作用于HTML的样式特性 主题应用在服务器上主题作用到页面时，格式化后的最终页面被传送给用户。使用样式表时，浏览器同时接收到页面和样式信息并在客户端合并
3、它们。可以通过配置文件来应用主题 不必修改任何一个页面就可以对整个文件及或整个网站应用主题 主题不会像CSS那样级联 CSS：内联样式优先采用主题：主题里定义的值会覆盖控件的属性。可以通过提高页面属性的优先级来改变，这样主题的行为将更像样式表。,ASP.NET 2.0 开发技术,7,共存，取代？,取决于用户的选择分工协作CSS文件：HTML控件和页面的样式属性主题：服务器控件的样式属性,ASP.NET 2.0 开发技术,8,主题组成元素,皮肤文件CSS文件图片和其他资源,ASP.NET 2.0 开发技术,9,皮肤文件,*.skin，主题的核心内容，用于定义页面中服务器控件的外观可以包含一到多个
4、皮肤文件只包含一组你希望标准化的属性 例：说明：runat = server部分是必需的，其他所有部分都是可选的，而id特性不允许在主题里使用。,ASP.NET 2.0 开发技术,10,主题文件夹,所有的主题都是应用程序相关的。要在Web应用程序里使用主题，必须创建一个定义它的文件夹，这个文件夹必须放在一个叫做App_Themes的文件夹里，而它又必须位于Web应用程序的最上层。一个叫做SuperCommerce的Web应用程序可以在SuperCommerceApp_ThemesFunkyTheme文件夹里有一个FunkyTheme主题。应用程序可以定义多个主题，只要每个主题都在一个单独的文件
5、夹里。对于一个给定的页面，每次只能有一个主题处于活动状态。,ASP.NET 2.0 开发技术,11,要让主题真正有效，必须在主题文件夹里创建至少一个皮肤文件。 把复杂控件（如数据控件）的控件标签单独放在皮肤文件里比较有意义。,ASP.NET 2.0 开发技术,12,按应用范围分类,应用程序主题（局部主题）全 局 主 题c:Inetpubwwwrootaspnet_clientSystem_web v2.0.50727Themes目录（假设c:Inetpubwwwroot是IIS Web服务器的根，且这是默认设置）建议使用本地主题。,13,定义主题,ASP.NET 2.0 开发技术,14,1、创
6、建皮肤文件,控件皮肤类型默认皮肤应用于同一类型的所有控件唯一已命名皮肤包含SkinID属性多个SkinID不重复对控件属性的要求控件具有EnableTheming属性属性类型简单属性复杂属性：集合属性、模板属性等,ASP.NET 2.0 开发技术,15,定义皮肤,ASP.NET 2.0 开发技术,16,定义已命名皮肤, ,演示1,使用已命名皮肤,ASP.NET 2.0 开发技术,17,2、为主题添加CSS文件,要在主题里使用样式表，首先必须把样式表放入主题文件夹。ASP.NET在这个文件夹里搜索所有的.css文件并把它们动态地绑定到所有使用主题的页面。缺点要求页面头部定义标记（Visual S
7、tudio生成的默认值）在主题里使用的样式表个数不受限制,演示2,ASP.NET 2.0 开发技术,18,3、在主题中使用图片,把图片作为主题的一部分从而重用它们。例如，想把一幅图片用于整个网站的OK按钮，另外一幅图片用于所有Cancel按钮。 在外观文件里添加图片的引用时，一定要保证图片的URL相对于主题文件夹而不是页面所在的文件夹。主题应用到控件时，ASP.NET自动在URL开始处插入ThemesThemeName,演示3,19,应用主题,ASP.NET 2.0 开发技术,20,1、在页级别应用主题,Before,After,主题冲突 如果控件的属性和主题定义的属性产生冲突，总是优先使用主
8、题定义的属性。 改变优先级：在 Page 指 令 里 用StyleSheetTheme 特 性 替 代Theme 特 性。属性在页面生命周期中生效的时间不同Theme属性生效晚StyleSheetTheme属性生效早共存与优先级StyleSheetTheme 控件属性 Theme,演示4,ASP.NET 2.0 开发技术,21,2、在站点中应用主题, ,在web.confg文件的元素里为应用程序配置主题。如果希望主题不会覆盖冲突的控件属性，则应该使用样式表行为，使用styleSheetTheme属性代替theme属性。,ASP.NET 2.0 开发技术,22,3、动态加载主题,void Pag
9、e_PreInit (Object sender, EventArgs e) Page.Theme = mytheme ;,目的：用户可配置外观方法：在代码里动态设置Page.Theme属性或Page.StyleSheet属性。只能在PreInit事件中设置。问题：不能及时响应用户选择。,演示5,ASP.NET 2.0 开发技术,23,动态加载主题-例子,protected void Page_PreInit(object sender, EventArgs e) string myTheme; if (Request.QueryStringTheme = null) myTheme = re
10、d; else myTheme = Request.QueryStringTheme.ToString(); switch(myTheme) case blue:this.Theme=blue;break; case red: this.Theme = red; break; ,protected void Button1_Click(object sender, EventArgs e) /显示红色主题Response.Redirect(Default.aspx?Theme=red); protected void Button2_Click(object sender, EventArgs
11、 e) /显示蓝色主题Response.Redirect(Default.aspx?Theme=blue); ,ASP.NET 2.0 开发技术,24,EnableTheming属性,所有页面及服务器控件均支持此属性默认值为 true将EnableTheming属性设置为false可以为单独的控件或者整个页面禁止主题功能,ASP.NET 2.0 开发技术,25,总结,主题的概念、分类什么是皮肤，如何创建皮肤文件什么是样式，如何创建样式文件如何在Web.config文件中进行主题的配置动态加载主题的方法,ASP.NET 2.0 开发技术,26,作业,请同学生设计一个门户网站的首页，动态改改Logo、页面控件的颜色和样式。,
