第11章 外观与皮肤-主题_第1页
第11章 外观与皮肤-主题_第2页
第11章 外观与皮肤-主题_第3页
第11章 外观与皮肤-主题_第4页
第11章 外观与皮肤-主题_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章要求：第11章外观与皮肤——主题主题的组成元素及存储方式如何创建外观文件为主题添加CSS样式为单个页面指定和禁用主题为应用程序指定和禁用主题如何实现主题的动态加载主要内容1.主题概述2.创建主题3.主题的使用4.综合实例——设计网站登录模块外观第11章外观与皮肤——主题11.1.1组成元素11.1.2文件存储和组织方式11.1主题概述主题由外观、级联样式表（CSS）、图像和其他资源组成，它是在网站或Web服务器上的特殊目录中定义的，如图11-1所示。图11-1添加主题文件夹11.1.1组成元素在设计网站中的网页时，有时对控件、页面设置等内进行重复的设计，主题的出现就是将重复的工作简单化，不仅提高开发效率，更重要的是能够统一网站的外观。主题由外观、级联样式表（CSS）、图像和其他资源组成。下面分别对主题的几个组成部分进行介绍。外观外观文件是主题的核心内容，用于定义页面中服务器控件的外观，它包含各个控件（如Button、TextBox或Calendar控件）的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如，下面的代码定义了TextBox控件的外观：<asp:TextBoxrunat="server"BackColor="PowderBlue"ForeColor="RoyalBlue"/>控件外观的设置与控件声明代码类似，在控件外观设置中，只能包含作为主题的属性定义。上述代码中设置了TextBox控件的前景色和背景色属性。如果将以上控件外观应用到单个Web页上，那么页面内所有TextBox控件都将显示所设置的控件外观。级联样式表（CSS）主题还可以包含级联样式表（.css文件）。将.css文件放在主题目录中时，样式表会自动作为主题的一部分应用。

说明：

主题中可以包含一个或多个级联样式表。图像和其他资源主题还可以包含图像和其他资源，如脚本文件或视频文件等。通常，主题的资源文件与该主题的外观文件位于同一个文件夹中，但也可以在Web应用程序中的其他地方，如主题目录的某子文件夹中。在Web应用程序中，主题文件必须存储在根目录的App_Themes文件夹下（除全局主题之外），开发人员可以手动或者使用VisualStudio2010在网站的根目录下创建该文件夹。如图11-2所示为App_Themes文件夹的示意图。图11-2App_Themes文件夹示意图11.1.2文件存储和组织方式在图11-2所示的App_Themes文件夹中包括“主题1”和“主题2”两个文件夹，每个主题文件夹中都可以包含自己的外观文件、CSS文件和图像文件等。通常APP_Themes文件夹中只存储主题文件及与主题有关的文件，尽量不存储其他类型文件。外观文件是主题的核心部分，每个主题文件夹下都可以包含一个或者多个外观文件，如果主题较多，页面内容较复杂时，外观文件的组织就会出现问题，这时就需要开发人员在开发过程中，根据实际情况对外观文件进行有效管理。通常根据SkinID、控件类型及文件等3种方式对外观文件进行组织，具体说明如表11-1所示。表11-1 3种常见的外观文件组织方式及说明组织方式说明根据SkinID在对控件外观设置时，将具有相同的SkinID放在同一个外观文件中，这种方式适用于网站页面较多、设置内容复杂的情况根据控件类型组织外观文件时，以控件类型进行分类，这种方式适用于页面中包含控件较少的情况根据文件组织外观文件时，以网站中的页面进行分类，这种方式适用于网站中页面较少的情况11.2创建主题11.2.1创建外观文件11.2.2为主题添加CSS样式11.2.1创建外观文件在创建外观文件之前，首先需要了解外观文件。外观文件分为“默认外观”和“已命名外观”两种类型。如果控件外观没有包含SkinID属性，那么就是默认外观，此时，向页面应用主题，默认外观会自动应用于同一类型的所有控件；而已命名外观是设置了SkinID属性的控件外观，已命名外观不会自动按类型应用于控件，而应该通过设置控件的SkinID属性将其显式应用于控件，通过创建已命名外观，可以为应用程序中同一类型控件的不同实例设置不同的外观。控件外观设置的属性可以是简单属性，也可以是复杂属性。简单属性是控件外观设置中最常见的类型，如控件背景颜色（BackColor）、控件的宽度（Width）等。复杂属性主要包括集合属性、模板属性和数据绑定表达式（仅限于<%#Eval%>或<%#Bind%>）等类型。说明：

外观文件的后缀为.skin。【例11-1】本实例主要通过两个TextBox控件分别介绍如何创建默认外观和命名外观。实例运行效果如图11-3所示。图11-3TextBox控件的默认外观和命名外观程序开发步骤如下：（1）新建一个网站，在网站根目录下创建一个App_Themes文件夹用于存储主题。添加一个主题文件夹，命名为TextBoxSkin，在该主题下新建一个外观文件，名称为TextBoxSkin.skin，用来设置页面中TextBox控件的外观。TextBoxSkin.skin外观文件的源代码如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#FFFFC0"BorderColor="Olive"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>上面代码中创建了两个TextBox控件的外观，其中没有添加SkinID属性的是TextBox的默认外观，另外一个设置了SkinID属性的是TextBox控件的命名外观，它的SkinID属性为textboxSkin。注意：任何控件的ID属性都不可以在外观文件中出现，如果向外观文件中添加了不能设置主题的属性，将会导致错误发生。（2）在网站的默认页Default.aspx中添加两个TextBox控件，应用TextBoxSkin.skin中的控件外观。首先在<%@Page%>标签中设置一个Theme属性用来应用主题。如果为控件设置默认外观，则不用设置控件的SkinID属性；如果为控件设置命名外观，则需要设置控件的SkinID属性。Default.aspx文件的源代码如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"

Theme="TextBoxSkin"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat=“server”></head><body><formid="form1"runat="server"><div><table><tr><tdstyle=“width:100px”><tdstyle="width:247px"><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox></td></tr><tr><tdstyle=“width:100px”><tdstyle="width:247px"><asp:TextBoxID="TextBox2"runat="server"SkinID="textboxSkin"></asp:TextBox></td></tr></table></div></form></body></html>11.2.2为主题添加CSS样式主题中的样式表（CSS样式）主要用于设置页面和普通HTML控件的外观样式，而且，主题中的.css样式表是自动作为主题的一部分加以应用的。【例11-2】本实例主要对页面背景、页面中的普通文字、超链接文本以及HTML提交按钮创建样式。实例运行效果如图11-4所示。图11-4为主题添加CSS样式程序开发步骤如下：（1）新建一个ASP.NET网站，在网站根目录下创建一个App_Themes文件夹，用于存储主题。添加一个名为MyTheme的主题，在MyTheme主题下添加一个样式表文件，默认名称为StyleSheet.css。页面中共有3处被设置的样式，一是页面背景颜色、文本对齐方式及文本颜色；二是超链接文本的外观、悬停效果；三是HTML按钮的边框颜色。StyleSheet.css文件的源代码如下：body text-align:center; color:Yellow; background-color:Navy;A:link color:White; text-decoration:underline;A:visited color:White; text-decoration:underline;A:hover color:Fuchsia; text-decoration:underline; font-style:italic;Input border-color:Yellow;说明：主题中的CSS文件与普通的CSS文件没有任何区别，但主题中包含的CSS文件主要针对页面和普通的HTML控件进行设置，并且主题中的CSS文件必须保存在主题文件夹中。（2）在网站的默认网页Default.aspx中，应用主题中CSS文件样式的代码如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Theme="myTheme"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat="server"><title>为主题添加CSS样式</title></head><body><formid="form1"runat="server"><div>

为主题添加CSS文件<table><tr><tdstyle="width:100px"><ahref="Default.aspx">明日科技</a></td><tdstyle="width:100px"><ahref="Default.aspx">明日科技</a></td></tr><tr><tdstyle="width:100px"><inputid="Button1"type="button"value="button"/></td><tdstyle="width:100px"></td></tr></table></div></form></body></html>11.3主题的使用11.3.1指定和禁用主题11.3.2动态加载主题11.3.1指定和禁用主题可以对页或网站应用主题，还可以对全局应用主题。在网站级设置主题，会对站点上的所有页和控件应用样式和外观，除非对个别页重写主题；而在页面级设置主题，会对该页及其所有控件应用样式和外观。当然，既然能够为页面或者网站应用主题，相反也可以禁用主题。本节将对如何指定和禁用主题进行讲解。1．为单个页面指定和禁用主题为单个页面指定主题可以将@Page指令的Theme或StyleSheetTheme属性设置为要使用的主题的名称，代码如下：<%@PageTheme="ThemeName"%>或<%@PageStyleSheetTheme="ThemeName"%>注意：StyleSheetTheme属性的工作方式与普通主题（使用Theme设置的主题）类似，不同的是，当使用StyleSheetTheme时，控件外观的设置可以被页面中声明的同一类型控件的相同属性所代替。例如，如果使用Theme属性指定主题，该主题指定所有的Button控件的背景都是黄色，那么即使在页面中个别Button控件的背景设置了不同颜色，页面中的所有Button控件的背景仍然是黄色。如果需要改变个别Button控件的背景，这种情况下就需要使用StyleSheetTheme属性指定主题。禁用单个页面的主题，只要将@Page指令的EnableTheming属性设置为false即可，代码如下：<%@PageEnableTheming="false"%>如果想要禁用控件的主题，只要将控件的EnableTheming属性设置为false即可。以Button控件为例，代码如下：<asp:Buttonid="Button1"runat="server"EnableTheming="false"/>2．为应用程序指定和禁用主题为了快速的为整个网站的所有页面设置相同的主题，可以通过Web.config文件中的<pages>元素进行设置，代码如下：<configuration><system.web><pagestheme="ThemeName"></pages></system.web><connectionStrings/>或<configuration><system.web><pagesStylesheetTheme="ThemeName"></pages></system.web><connectionStrings/>禁用整个应用程序的主题设置，只要将<pages>配置节中的Theme属性或者StylesheetTheme属性的值设置为空（""）即可。11.3.2动态加载主题除了在页面声明和配置文件中指定主题和外观选项之外，还可以通过编程方式动态加载主题。【例11-3】本实例主要通过选择相应的主题，实现对页面动态加载主题的功能。默认情况下，页面应用主题一样式。实例运行效果如图11-5和图11-6所示。图11-5主题一图11-6主题二程序开发步骤如下：（1）新建一个ASP.NET网站，添加两个主题，分别名为Theme1和Theme2，并且每个主题包含一个外观文件（TextBoxSkin.skin）和一个CSS文件（StyleSheet.css），用于设置页面外观及控件外观。主题文件夹Theme1中的外观文件TextBoxSkin.skin的源代码如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#FFFFC0"BorderColor="Olive"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>主题文件夹Theme1中的级联样式表文件StyleSheet.css的源代码如下：body text-align:center; color:Yellow; background-color:Navy;A:link color:White; text-decoration:underline;A:visited color:White; text-decoration:underline;A:hover color:Fuchsia; text-decoration:underline; font-style:italic;Input border-color:Yellow;主题文件夹Theme2中的外观文件TextBoxSkin.skin的源代码如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#C0FFC0"BorderColor="#00C000"ForeColor="#004000"Font-Size="12pt"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#00C000"BorderColor="#004000"ForeColor="#C0FFC0"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>主题文件夹Theme2中的级联样式表文件StyleSheet.css的源代码如下：body text-align:center; color:#004000; background-color:Aqua;A:link color:Blue; text-decoration:underline;A:visited{ color:Blue; text-decoration:underline;A:hover color:Silver; text-decoration:underline; font-style:italic;Input border-color:#004040;}（2）在网站的默认主页Default.aspx中添加一个DropDownList控件、两个TextBox控件、一个HTML/Button控件以及一个超链接。（3）DropDownList控件中包含两个选项，一个是“主题一”，另一个是“主题二”。当用户选择任意一个选项时，都会触发DropDownList控件的SelectedIndexChanged事件，在该事件下，将选中项的主题名称存放在URL的QueryString（即theme参数）中，并重新加载页面。代码如下：protectedvoidDropDownList1_SelectedIndexChanged(objectsender,EventArgse)stringurl=Request.Path+"?theme="+DropDownList1.SelectedItem.Value;Response.Redirect(url);}（4）使用Theme属性指定页面的主题，只能在页面的PreInit事件发生过程中或者之前设置，这里是在PreInit事件发生过程中修改Page对象的Theme属性值。代码如下：voidPage_PreInit(Objectsender,EventArgse)stringtheme="Theme1";if(Request.QueryString["theme"]==null)theme="Theme1";Elsetheme=Request.QueryString["theme"];Page.Theme=theme;ListItemitem=DropDownList1.Items.FindByValue(theme);if(item!=null){item.Selected=true;}}11.4综合实例——设计网站登录模块外观本实例主要实现通过主题设置网站登录模块中服务器控件外观的功能。实例运行效果如图11-7所示。图11-7网站登录模块外观程序开发步骤如下：（1）新建一个ASP.NET网站，命名为LoginSkin，默认主页名为Default.aspx。（2）Default.aspx页中添加两个TextBox控件和两个Button控件，分别用来输入用户名和密码、并执行登录、重置操作。（3）在网站根目录下的App_Themes文件夹中创建一个名称为mytheme的主题，为该主题创建一个外观文件SkinFile.skin，该外观文件用于设置登录模块中文本框和按钮的外观。SkinFile.skin外观文件代码如下：<asp:TextBoxrunat="server"Text=""BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:Buttonrunat="server"BackColor="White"BorderColor="#0066FF"BorderStyle="Solid"BorderWidth="1

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论