第10章 样式和主题.ppt

1、第10章 样式和主题,本章主要内容,母版页和内容页 样式表CSS 主题和外观,10.1 母版页和内容页,母版页可用来创建统一的框架，并且可把每个页面的内容都放到这个框架中。母版面是一个以具有扩展名为.master（MyMaster.master）的ASP.NET文件，它可以包含静态布局，母版页由特殊的Master指令识别，使用该指令的母版页有别于内容页，且每个.master文件只能包含一条Master指令。,10.1.1 创建母版页,在ASP.NET 2.0中，除了Master指令和一个或多个ContentPlaceHolder服务器控件，母版页基本上类似于标准的ASP.NET页。母版页中使用

2、的ContentPlaceHolder容器控件（通的.aspx文件中不允许使用控件）起到一个占位符的作用，它能够在母版页中标识出某个区域，可以让相关网页插入定制控件的位置。,主要步骤,打开“添加新项”对话框，如图模板列表中选择“母版页”项，在“名称”文本框中将其命名为“MasterPage.master”。,接下来设计“母版页”，假设要设计一个论坛系统，该论坛最上部显示论坛基本信息，最下部显示版权信息，中间部分为动态内容，可以使用表格进行布局，在动态内容的地方使用contentplaceholder占位即可。如修改页面的内部，具体代码实现见如下。 论坛基本信息 论坛版权信息 ,10.1.2 创

3、建内容页,在创建完一个完整的母版页之后，接下来必须要创建内容页。内容页的创建与母版页的创建相似，其创建过程比较简单。在创建过程中，主要是要注意两点：一是内容中所有内容必须包含在Content控件中；二是内容页必须绑定母版页。,10.1.3 以编程方式访问母版页,把母版页中“论坛基本信息”文字改成一个Label控件: 在Default.aspx.cs的访问母版页的该控件，代码如下。 protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) SetBind(); private void SetBind() Labe

4、l lab = Master.FindControl(lab_ForumInfo) as Label; if (lab != null) lab.Text = 使用页面访问母版页中的控件; ,10.2 样式表CSS,10.2.1 什么是CSS 层叠样式表简写为CSS，是英文Cascading Style Sheets的缩写。它是W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，如字体的颜色是什么、背景应该是怎样的

5、、如何排列、边缘和连线等都必须一一在HTML文件内列出，有时还需要重复列出。CSS使用户可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言编写的文件中。,10.2.2 CSS的基本语法,CSS的定义是由3部分构成：选择符（selector），属性（properties）和属性的取值（value），其语法如下: selector property: value (选择符 属性:值) 选择符是可以是多种形式，一般是要定义样式的HTML标记，如BODY、P、TABLE等，可以通过此方法定义它的属性和值，属性和值要用冒号隔开。例如，body color: bla

6、ck，此例的效果是使页面中的文字为黑色。,一般选择器有如下6种类型: （1）普通选择器,直接声明某个标签样式属性 。 （2）群选择器，几个标签样式属性一样时，可以共同调用一个声明，样式之间用“逗号”分隔。 （3）派生选择器，可以使用派生选择器给一个标签里的子标签定义样式。 （4）ID选择器，可以单独为某个标签定义样式，如有一个。 （5）类别选择器，在CSS里用一个“点”开头表示类别选择器定义。 （6）伪类选择器，CSS中用4个伪类来定义链接的各种状态，分别是a:link、a:visited、a:hover和a:active。,10.2.3 将CSS应用在Web控件上,Web控件上也可以使用CS

7、S来定制控件的外观，可以使控件的外观显得更加美观大方。下面以简单日历控件为例，以下网页将显示两个日历控件，其中一个使用了CSS而另一个没有使用CSS ，运行效果如下：,10.3 主题和外观,10.3.1 主题和外观概述 主题由一组元素组成：外观、级联样式表（CSS）、图像和其他资源。主题将至少包含外观。主题是在网站或Web服务器上的特殊目录中定义的。 外观文件具有文件扩展名.skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。有两种类型的控件外观：默认外观和命名外观 。,10.3.2 创建主题和外观,主要步骤： （1）添加外观文件：,在L

8、abel.skin外观文件中添加相关代码，用来设置页面中Label控件的外观。在下面代码中创建了两个外观，外观的区别通过设置SkinID属性实现。 Label.skin外观文件的源代码如下： 以上代码中包含SkinID属性的Label控件将拥有命名外观，而没有添加SkinID属性的Label控件将被设置为默认外观。,10.3.3 应用主题和外观,1简单应用 发现应用外观文件的页面不同于普通页面的地方主要有以下3个方面。 （1）应用主题的方法中在 标签中设置一个Theme属性。 （2）如果为控件设置默认外观，则不设置控件的SkinID属性；如果为控件设置了命名外观，则需要设置控件的SkinID属

9、性。 （3）如果在控件代码中添加了与控件外观相同的属性，则页面最终显示的是控件外观的设置效果。,2动态加载主题,除了在页面声明和配置文件中指定主题，还可以通过编程方式应用主题，即动态加载主题。ASP.NET运行库在PreInit事件激发后，立即加载主题信息。用户可以在程序运行时和Web应用程序进行交互，自定义Web应用程序的颜色和总体外观。实现动态加载主题的核心是修改Page对象的Theme属性值。但使用Theme属性只能在页面的Page_PreInit事件发生时或者之前设置。,实例：,下拉列表控件中包含两个选项：启用主题样式1和启用主题样式2。默认情况下，页面启用主题样式1；当更改下拉框选项

10、后，页面将自动回传，并加载选中项所指示的主题。,将创建的两个日历外观文件（Calendar1.skin和Calendar2.skin）分别应用到这个页面的日历控件外观设置中。修改动态加载主题.aspx文件的后台源代码，主要是修改Page_PreInit事件处理程序，在该程序中修改Theme属性，代码如下： void Page_PreInit(Object sender, EventArgs e) if (Request.QueryStringtheme = null) theme = Theme1; else theme = Request.QueryStringtheme; Page.Theme = theme;/加载主题 ListItem item = DropDownList1.Items.FindByValue(theme); if (item != null) item.Selected = true; ,10.4 小 结,本章介绍了ASP