主题和母版页

《主题和母版页》由会员分享，可在线阅读，更多相关《主题和母版页（44页珍藏版）》请在金锄头文库上搜索。

1、第6章 主题和母版页6.1 主 题6.2 母版页 主题和母版页有一个共同的特点,就是统一网页的设计风格和样式,达到代码共享的目的,从而提高网站的开发效率.6.1 主 题6.1.1 主题概述主题（Theme）是指网页和控件外观属性设置的集合，为网站提供统一的风格。一个网站可以有多个主题，这样在设计网站时可以先不考虑 样式，在以后要进行样式设计时，也无须更新网页或更改代码。 另外，可以从外部获得自定义主题，例如将另一个网站的主题复 制到本网站中，因此主题可以方便地重用。主题是存在于App_Themes文件夹中的一个子文件夹，每个子 文件夹就是一个主题，其中包括外观文件（.skin）、CSS文件（

2、.css，样式表文件）、图像文件和其他资源。1. CSS( Cascading Style Sheet层叠样式表单 )文件将CSS文件放到主题文件夹中便作为主题的一部分。主题中的CSS文件和非主题中的CSS文件没有本质的区别，只是主题CSS文件自动作为主题的一部分，在网页中只引用主题即可，不必再单独引用CSS文件。(单独引用CSS文件:)另外，非主题中的CSS文件多针对HTML控件，主题中的CSS文件多针对服务器控件。2. 外观文件外观文件也称为皮肤文件，是主题的核心内容，用于定义 网页中各种服务器控件（如Button、TextBox或Label控件等）的外观属性。由一组控件的特定主题标记组成

3、，其扩展名为 .skin文件。例如，在外观文件(.skin) 中,如下代码设置Button控件的外观： 同一类型控件的外观分为默认外观和命名外观两种 ： （1）默认外观：不设置控件的SkinID属性，它自 动应用于同一类型的所有控件。 （2）命名外观：通过设置控件的SkinID属性，将 命名外观应用于服务器控件，解决同一控件有多种 属性设置的问题。在皮肤文件中: 3. 图像文件和其他资源主题中还可以包含图像文件和其他资源，例如声音文件等。 例如，在Blue主题中有一个filename.jpg文件，以下代码设置了Image控件的图像文件：6.1.2 创建主题 1. 创建主题的过程主题必须存放于网

4、站根目录下的App_Themes文件夹中，且每个主题本身就是一个子文件夹，创建主题的步骤如下：（1）在“解决方案资源管理器”中，右击项目名称，选择“添加 ASP.NET文件夹”|“主题”命令，然后系统会自动创建一个位于根目录下的 App_Themes文件夹，并在该文件夹中创建一个待命名的主题（默认名称 为“主题1”），如下图所示。将“主题1”子文件夹改为Blue。（2）右击主题Blue，在弹出的菜单中选择“添加新项”命令，打 开“添加新项”对话框。选择“外观文件”模板，如下图所示。（3）单击“添加”按钮，将会为Blue主题添加一个外观文件，这里默认的外观文件名为SkinFile.skin，然后

5、双击对该外观文件进行编辑，例如，编辑内容如下：（4）如果要建立其他的主题，右击App_Themes，在弹出的快捷菜 单中选择“添加新项”命令，打开“添加新项”对话框。选择“外观文件”模板，为其命名为.skin的文件，单击“添加”按钮即 建立另一个主题。将新建主题名改为White，这样网站中有Blue和White 两个主题，如下图所示。（5）一个主题中可以有多个外观文件。在一个主题中创建另一个外 观文件的方法是，右击主题名Blue，在弹出的快捷菜单中选择“添加新项 ”命令，打开“添加新项”对话框。选择“外观文件”模板，指定外观文件名SkinFile2.skin。单击“添加” 按钮为Blue主题添

6、加了另一个外观文件SkinFile2.skin，如下图所示。2. 主题文件的组织方式以外观文件为例，常见的组织方式有以下4种。 无组织。将一个网站中所有控件属性设置放在一个外观文 件中。对于初学者或小型网站可以采用这种方式。 根据控件类型组织：将同一类型控件的所有属性设置放在 一个外观文件中。每种类型的控件对应一个外观文件。 根据SkinID组织。将具有相同SkinID属性的属性设置放 在一个外观文件中。每个SkinID属性值对应一个外观文件。 根据网页组织：将网页中每个网页的属性设置放在一个外 观文件中。每个网页对应一个外观文件。这种方式很少使 用。6.1.3 应用主题 1. 指定主题常见的

7、指定主题的方式有以下几种。（1）在网页的页指令中指定主题将网页Theme属性设置为指定的主题。其操作是在“属性”窗口中指定 DOCUMENT的Theme属性为指定的主题，如下图所示。这样网页的页指 令自动变为：也可以直接在页指令中添加 上述粗体属性。这种方式指定主题的作用在 设计时不会显现，只有在网页运 行时外观文件的作用来显现出来 。 例6_1 应用主题blue SkinFile.skin文件内容: 应用主题没应用主题 （2）在代码中指定主题可以在代码中为本网页指定主题，但需要放在 Page_PreInit事件处理过程中才会生效，其一般格式如下：protected void Page_Pre

8、Init( )Page.Theme = “主题名“;（3）在web.config文件中指定主题与前两种方法相比，这是一种一劳永逸的方法，只需在 web.config文件中节中定义theme属性，便可应用于整个网站。例如：（4）设置网页的StyleSheetTheme属性指定样式表主题将网页StyleSheetTheme属性设置为指定的主题，这样指定的主题称为样式表主题。如下图所示。这样网页的页指令自动变为 ：也可以直接在页指令中添加上述粗体属性。2. 控件属性的应用顺序 如果对网页既设置Theme属性又设置StyleSheetTheme属性，则按以下顺序应用控件的属性：（1）首先应用Style

9、SheetTheme属性。(未运行就显示)（2）然后应用网页中的控件属性（重写StyleSheetTheme）。（3）最后应用Theme 属性（重写控件属性和StyleSheetTheme）。6.1.4 禁用主题（1）单个网页禁用主题在网页的页指令中通过设置EnableTheming属性为false来使本网页禁用主题，其一般格式如下：（2）单个网页中单个控件禁用主题如果要使网页某个控件禁用主题，只需把这个控件的 EnableTheming属性设置为false即可，例如，以下代码使得Button1控件禁用主题：6.2 母版页6.2.1 母版页和内容页1. 母版页母版页是指其他网页可以将其作为模板

10、来引用的特殊网 页。母版页的扩展名为.master。在母版页中，界面被分为公用区和可编辑区，公用区的设计方法与一般网页的设计方式相同，可编辑区用 ContentPlaceHolder控件预留出来，ContentPlaceHolder控件起到占位符的作用，它在母版页中标识出某个区域，该区域将预留给内容页。一个母版页中可以有一个可编辑区，也可以有多个可编辑区。2. 内容页引用母版页的.aspx网页即为内容页。在内容页中，母版页的ContentPlaceHolder控件预留的可编辑区会被自动替换为Content控件，开发人员只需在Content控件区域中填充内容即可，在母版页中定义的其他标记将自动出

11、现在使用了该母版页的.aspx页面中。3. 母版页和内容页的关系母版页和内容页合并后所执行的事件顺序如下： （1）母版页中控件的Init事件。 （2）内容页控件的Init事件。 （3）母版页的Init事件。 （4）内容页的Init事件。（5）内容页的Load事件。 （6）母版页的Load事件。 （7）内容页中控件的Load事件。（8）内容页的PreRender事件。 （9）母版页的PreRender事件。 （10）母版页控件的PreRender事件。 （11）内容页中控件的PreRender事件。加载控件对象之后,呈 现之前6.2.2 创建母版页创建母版页的方法与一般网页相似，区别仅仅是不能单

12、独在浏览器中查看母版页，而必须通过内容页在浏览器中查看。【例6.3】 设计一个用于显示诗人和诗歌的母版页 MasterPage.master。MasterPage.master母版页设计界面 6.2.3 创建内容页在创建一个完整的母版页之后，接下来必然根椐母版页创建内容页，主要有两种方法：n 在创建网页的“添加新项”对话框中勾选“选择母版页”复选框。n 在母版页中右键，在弹出的快捷菜单中选择“添加内容页”命令。【例6.4】 设计一个使用母版页MasterPage.master的内 容页WebForm6-3，用以显示诗人李白的相关诗篇。添加WebForm6-3.aspx网页 “选择母版页”对话框

13、 WebForm6-3内容页初始设计界面 WebForm6-3内容页最终设计界面 6.2.4 从内容页中访问母版页中的内容1. 使用FindControl方法获取母版页控件的引用一个网页（无论是母版页、内容页还是普通网页）就是一个Page类对象。Page类有一个Master属性用于获取确定页的整体外观的母版页，还有一个FindControl方法用于在页容器中搜索指定的服务器控件，其使用语法格式如下：public override Control FindControl (string id)其中，参数id指出要查找的控件的标识符。该方法的返回值是指定的控件，或为空引用（如果指定的控件不存在的话

14、）。例如，若母版页中有一个ID属性为Label1的Label控件，可 以在内容页中设计以下事件过程来设置母版页中Label1的Text属性：protected void Page_LoadComplete(object sender,EventArgs e) Label lab; /声明对象引用 lab = Master.FindControl(“Label1“) as Label; lab.Text=“通过内容页访问母版页控件“; 【例6.5】 修改内容页WebForm6-3，实现诗人李白的 诗名选择和诗句显示功能。protected void Page_LoadComplete(objec

15、t sender, EventArgs e) Label lab1;lab1 = Master.FindControl(“Label1“) as Label;lab1.Text=“李白“;设计界面protected void Button1_Click(object sender, EventArgs e) ListBox list1;list1 = Master.FindControl(“ListBox1“) as ListBox;list1.Items.Clear();if (RadioButton1.Checked)list1.Items.Add(“吾爱孟夫子，风流天下闻“); list

16、1.Items.Add(“红颜弃轩冕，白首卧松云“); list1.Items.Add(“醉月频中圣，迷花不事君“); list1.Items.Add(“高山安可仰，徒此揖清芬“);else if (RadioButton2.Checked) list1.Items.Add(“花间一壶酒，独酌无相亲“); list1.Items.Add(“举杯邀明月，对影成三人“); list1.Items.Add(“月既不解饮，影徒随我身“); list1.Items.Add(“暂伴月将影，行乐须及春“); list1.Items.Add(“我歌月徘徊，我舞影零乱“); list1.Items.Add(“醒时同交欢，醉后各分散“); list1.Items.Add(“永结无情游，相期邈云汉“);else if (RadioButton3.Checked)list1.Items.Add(“青山横北郭，白水绕东城“); list1.Items.Add(“此地一为别，孤蓬万里征“); l