1 / 18

主题与样式

主题与样式. 重点内容： 创建主题的方法 将主题应用于整个程序 主题文件控制 Html 控件的方法 在页面中更换主题的方法. 主题样式. 在本章中将首先讲述网站显示风格的设计。随着网站功能的增强，网站逐渐变得庞大起来。现在一个网站包括几十、上百个网页已是常事。这种情况下，如何简化对众多网页的设计和维护，特别是如何解决好对一批具有同一风格网页界面的设计和维护，就成为了比较普遍的难题。 ASP.NET 2.0 提供的主题样式技术，从统一控件的外貌、局部再到全局风格的一致提供了最佳的解决方案。本章将讲述这种技术。. 主 题. 1 概述

urbain
Download Presentation

主题与样式

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 主题与样式 • 重点内容： • 创建主题的方法 • 将主题应用于整个程序 • 主题文件控制Html控件的方法 • 在页面中更换主题的方法

  2. 主题样式 • 在本章中将首先讲述网站显示风格的设计。随着网站功能的增强，网站逐渐变得庞大起来。现在一个网站包括几十、上百个网页已是常事。这种情况下，如何简化对众多网页的设计和维护，特别是如何解决好对一批具有同一风格网页界面的设计和维护，就成为了比较普遍的难题。ASP.NET 2.0提供的主题样式技术，从统一控件的外貌、局部再到全局风格的一致提供了最佳的解决方案。本章将讲述这种技术。

  3. 主 题 • 1 概述 • 2 创建主题的方法 • 3 同一控件多种定义的方法 • 4 将主题文件应用于整个应用程序 • 5.主题文件控制Html控件的方法 • 6.在页面中更换主题的方法 • 7. stylesheettheme　和 theme 的区别

  4. 概述 • 主题(Theme)是ASP.NET 2.0提供的一种新技术。利用主题可以为一批服务器控件定义外貌。例如，可以定义一批TextBox或者Button服务器控件的底色、前景色；定义buildlist控件的样式等。主题与级联样式表(CSS)不同。级联样式表只能用来定义HTML的标记。而主题可以用来定义服务器控件。如果将两者结合就可以定义不同类型的控件。

  5. 1.2 创建主题的方法 系统为创建主题制定了一些规则，但没有提供什么特殊的工具。这些规则是：对控件显示属性的定义必须放在以“.skin”为后缀的皮肤文件中，而皮肤文件必须放在“主题目录”下，而主题目录又必须放在专用目录App_Themes的下面。每个专用目录下可以放多个主题目录；每个主题目录下面可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中定义的显示属性才能够起作用。 下面举例说明创建的过程。 (1) 右击网站名，选择【添加文件夹】命令，然后选择【主题文件夹】项，系统将会在应用程序的根目录下自动生成一个专用目录App_Themes，并且在这个专用目录下放置主题文件夹，这里给文件夹取名为Themes1。 (2) 右击主题文件夹名，在弹出的菜单中选择【外观文件】。 (3) 弹出一皮肤文件的框架，可以给该文件改名，但是文件的后缀必须是“.skin”，这里取名为SkinFile.skin。 专用目录、主题目录、皮肤文件三者之间的关系如图16.1所示。 (4) 在皮肤文件(这里是SkinFile.skin)中给TextBox和Button两种控件定义显示的语句如下。

  6. <asp:TextBox • BackColor = "Orange" • ForeColor = "DarkGreen" • Runat = "server" /> • <asp:Button • BackColor = "Orange" • ForeColor = "DarkGreen" • Font-Bold = "true“ 图16.1 专用目录、主题目录和皮肤文件的关系 • Runat= "server" /> • 文件中将两种控件的背景色都定义成Orange，前景色定义成DarkGreen。对Button 控件的字体定义成粗体。 • 值得注意的是，有的控件(如LoginView、User Control等)不能用skin文件定义外貌。能够定义的控件也只能定义它们的外貌属性，其他行为属性(如AutoPostBack属性等)不能在这里定义。 • (5) 在同一个主题目录下，不管定义了多少个皮肤文件，系统都会自动将它们合并成为一个文件。 • (6) 项目中凡需要使用本主题的网页，都需要在网页的定义语句增加“Theme = [主题目录]”的属性，例如： • <%@ Page Theme="Themes1"… %> • 在设计阶段，并看不出皮肤文件中定义的作用，只有当程序运行时，在浏览器中才能够看到控件外貌的变化。图16.2就是TextBox和Button控件在上述定义中显示的界面。

  7. 1.2 创建主题的方法 图16.2 用皮肤文件定义控件的外貌

  8. 1.2 创建主题的方法 图16.1 专用目录、主题目录和皮肤文件的关系

  9. 1.3 同一控件多种定义的方法 有时需要对同一种控件定义多种显示风格，此时可以在皮肤文件中，在控件显示的定义中用SkinID属性来区别。例如，在TextBox.skin文件中对TextBox的显示定义了三种显示风格： <asp:TextBox BackColor="Green" Runat="Server" /> <asp:TextBox SkinID="BlueTextBox" BackColor="Blue" Runat="Server" /> <asp:TextBox SkinID="RedTextBox" BackColor="Red" Runat="Server" />

  10. 1.3 同一控件多种定义的方法 其中第一个定义为默认的定义，中间不包括SkinID。该定义将作用于所有不注明SkinID的TextBox控件。第二和第三个定义中都包括SkinID属性，这些定义只能作用于SkinID相同的TextBox控件。 在网页中为了使用主题，应该做出相应的定义。例如： <%@ Page Theme="Themes1" %> <html> <head runat="server"> <title>用皮肤文件定义TextBox的外貌</title> </head> <body> <form id="form1" runat="server"> <asp:TextBox id="TextBox1" Runat="Server" /> <br /> 实际上每个常用服务器控件的属性窗口中都有一个SkinID属性，通过该属性的下拉列表可以直接确定在皮肤文件中的选项。

  11. <asp:TextBox • id="TextBox2" • SkinID="BlueTextBox" • Runat="Server" /> • <br />图16.3 不同定义下的三个TextBox控件 • <asp:TextBox • id="TextBox3" • SkinID="RedTextBox" • Runat="Server" /> • </form> • </body> • </html> • 程序运行中三个TextBox控件分别显示不同的风格。情况如图16.3所示。 图16.3 不同定义下的三个TextBox控件

  12. 1.4 将主题文件应用于整个应用程序 • 为了将主题文件应用于整个应用项目，可以在应用项目根目录下的Web.config文件中进行定义。例如，要将Themes1主题目录应用于应用项目的所有文件中，可以在Web.confiog文件中定义如下： <configuration> <system.web> <pages theme="Themes1" /> </system.web> </configuration> 这样就不用在每个网页中定义使用的主题文件了。

  13. 1.5主题文件控制Html控件 本示例用于介绍为主题添加CSS文件的实现方法，其内容包括为页面背景、页面中所有超链接文本和普通HTML文本框创建样式。

  14. 在主题文件夹中添加CSS样式表 body { background-color: silver; } A:link { color: Blue; text-decoration: underline; } A:visited { color: Blue; text-decoration: underline; } A:hover { color: Red; text-decoration: none; } INPUT { background-color: Orange; }

  15. 1.6通过下拉列表选择主题 • 本示例说明了实现动态加载主题的实现方法。这种方法的核心是在Page_PreInit事件处理程序中设置Page对象的Theme属性值。

  16. /*分为五个步骤*/ • void Page_PreInit(Object sender, EventArgs e) • { • //设置页面所设置的主题 • string theme=""; • if (Request.QueryString["theme"] == null) • //2.接收参数值，并且判断参数值的内容 • { • theme = "Red";//3.将参数值的内容赋值给变量theme • } • else • { • theme = Request.QueryString["theme"]; • } • Page.Theme = theme;//4.将变量theme的值赋值给本网页的主题样式page.theme，这样日历的色彩被改变了

  17. //设置DropDownList控件的选中项 • /*ListItem item = DropDownList1.Items.FindByValue(theme);//定义item使之成为变量theme在下拉列表框中对应的项 • if (item != null) • { • item.Selected = true; • }*///item有三种可能，第一种是无参数，那么此段代码不值行，下拉列表框仍然是默认的红色项为被选中状态 • //第二种可能为参数是RED，执行这段代码后，页面为红色被选中 • //第三种可能为参数是BLUE，执行这段代码后，页面为蓝色被先中 • } • void SelectedIndexChanged(Object sender, EventArgs e) • { • //获取DropDownList选中项值，并进行页面重定向 • string url = Request.Path + "?theme=" + DropDownList1.SelectedItem.Value;//1.客户更改下拉列表框后产生参数值并使页面刷新 • Response.Redirect(url); • }

  18. 1.7 stylesheettheme　和 theme 的区别 stylesheettheme　和 theme属性可以同时应用，起应用方法基本都是一样的，只是执行的优先级不同 1、如果页面单独使用stylesheettheme属性指定主题，那么内容页内定义的控件属性将覆盖sylesheettheme定义的控件属性 2、如果页面单独使用theme属性，那么只执行theme属性所定义的主题，内容页内定义的属性将不起作用 3、如果页面内同时定义stylesheettheme和theme属性指定主题，那么优先级是　stylesheettheme >> 内容页内定义的属性>>然后才是theme 在SkinFile（SkinFile.skin）可以建 StyleSheet.css 引用   Theme="SkinFile" 就可以用到 StyleSheet.css中的样式

More Related