Web应用设计第4章 主题母版页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.1.1 主题概述 4.1.2 创建主题 4.1.3 将主题应用于整个应用程序
5
4.1.1 主题概述
用户界面外观主要与控件和页面的样式有关。几乎所 有的控件都具有Style属性，用于设置前景色、背景色、 边框样式、字体等属性。在网站制作过程中，可以一个 控件一个控件的去设置，这样会做许多重复性的工作， 而且还不容易保持站点中页面外观的一致性。利用 2.0提供的主题功能，可以快速地为服务器控件 定义外观，并且所定义的外观可应用到单个页面、应用 程序的所有页面及所有的应用程序中。
文本框控件，按题目要求进行设置，第二个文本框应用 命名皮肤，第三个文本框禁用皮肤文件。要将定义的 TextBox.skin皮肤文件应用于该页面中的文本框，需要 在@Page指令中添加代码“Theme=”主题目录名称”” 属性，该皮肤文件位于Temes_skin主题目录中，因此 需在@Page指令中添加“Theme=”Temes_skin””属性。
第4章
主题、母版页
本章内容
掌握创建和应用主题的方法 掌握母版页的使用方法
2
本章重点
本章重点
外观文件 CSS样式文件 母版页
本章难点
创建和使用主题及母版页
3
主题、母版页
4.1 主题 4.2 母版页 4.3 本章小结
4
4.1 主题（Theme）
主题（Theme）是 2.0提供的一种新技术，是 指控件和页面外观属性设置的集合。通过为控件和页面 套用主题，可以使用户界面外观达到一致化的显示效果。
6
4.1.1 主题概述
在一个主题中至少要包括一个皮肤文件（或称外观文件， 扩展名为.skin），还可包括级联样式表文件（扩展名 为.css）。外观文件不同于CSS样式， CSS样式只能用来定义页面和HTML标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。
<!--定义文本框控件的命名皮肤--> <asp:TextBox runat="server" BackColor="LightGray" BorderColor="Green" BorderStyle="Solid" SkinID="Green"/>
11
1.创建皮肤文件
（5）将主题应用于页面中。 新建页面，将其命名为Theme.aspx，在页S样式文件用来定义页面外观及HTML控件 的外观样式，如设置页面背景、超链接文本的样式等。 下面通过一个简单的例子介绍如何创建CSS样式文件。 例5.6 创建CSS样式文件应用示例程序，为页面添加背 景图片，设置背景图片固定，为页面中的超链接文本设 置链接、悬停、单击和访问后的外观效果。
8
1.创建皮肤文件
创建如图所示的主题文件 应用示例程序，为第一个 文本框控件应用默认皮肤， 为第二个文本框应用命名 皮肤，第三个文本框禁用 皮肤文件。
9
1.创建皮肤文件
操作步骤如下： （1）创建主题文件。在解决方案资源管理器中，右击站点 根目录，在弹出的快捷菜单中选择“添加文件 夹”→“主题”选项，系统会自动添加一个主题专用目录 App_Themes，用来存放所有创建的主题文件夹，同时自 动创建一个名为“主题1”的主题文件夹，将其更名为 “Themes_skin”。 （2）在主题文件夹中添加外观文件。单击选定新建的主题 文件夹，单击工具栏上的“添加新项”按钮，打开“添加 新项”对话框，在“模板”列表中选择“外观文件”选项， 系统添加一个名为SkinFile.skin的文件，将其更名 TextBox.skin ，同时打开外观文件的框架。
14
2.创建CSS样式文件
操作步骤如下： （1）在解决方案资源管理器中，右击主题专用目录 App_Themes，在弹出的快捷菜单中选择“添加 文件夹”→“主题”选项，将新的主题文件夹 命名为“Themes_CSS”。 （2）单击选定新建的Themes_CSS主题文件夹，为其 添加一个用于存放图片的文件夹images，在images文 件夹中添加一幅背景图片。 （3）添加CSS样式文件。单击选定Themes_CSS主题 文件夹，单击工具栏上的“添加新项”按钮，打开“添 加新项”对话框，在“模板”列表中选择“样式表”选 项，系统添加一个名为StyleSheet.css的文件，同时打 开该文件。 （4）在StyleSheet.css文件中添加代码。
12
1.创建皮肤文件
（6）调试运行程序。在设计视图中，看不出命令按钮外观 有何不同，只有在调试程序时，才能看到Button.skin外观 文件对命令按钮控件外观的影响。 在Button.skin外观文件中定义默认外观时并未设置命令按 钮的边框宽度属性，从程序运行结果来看，应用默认外观 的命令按钮的边框宽度是比较宽的，因为设置了应用默认 外观的命令按钮的边框宽度属性为5像素，这说明控件最终 显示的外观效果是外观文件和控件的属性共同作用的结果。
7
4.1.2创建主题
皮肤文件的种类 皮肤文件可分为两种：默认外观和命名外观。 默认外观：没有定义SkinId属性。在同一主题中针对同
一类型的控件只允许有一个默认外观。当页面应用主题 时，默认外观将自动应用于同一类型的所有控件。 命名外观：如果在定义控件的外观时，设置了SkinId属 性，则该外观是命名外观，可以为同一类型的控件定义 多个命名外观。在页面中，通过为同一类型的控件应用 不同的命名外观，可以使同一类型的控件显示不同的外 观效果。 在页面中，同一类型的所有控件中，如果不希望某个控 件应用默认的外观设置，可在属性窗口中将该控件的 EnableTheming属性设置为False。
10
1.创建皮肤文件
（3）在打开的皮肤文件的框架中为文本框控件定义默认 皮肤和命名皮肤。 <!--定义文本框控件的默认皮肤-->
<asp:TextBox runat="server" BackColor="LightYellow" ForeColor="Red" BorderColor="Blue" BorderStyle="Dotted" FontBold="True" />
5
4.1.1 主题概述
用户界面外观主要与控件和页面的样式有关。几乎所 有的控件都具有Style属性，用于设置前景色、背景色、 边框样式、字体等属性。在网站制作过程中，可以一个 控件一个控件的去设置，这样会做许多重复性的工作， 而且还不容易保持站点中页面外观的一致性。利用 2.0提供的主题功能，可以快速地为服务器控件 定义外观，并且所定义的外观可应用到单个页面、应用 程序的所有页面及所有的应用程序中。
文本框控件，按题目要求进行设置，第二个文本框应用 命名皮肤，第三个文本框禁用皮肤文件。要将定义的 TextBox.skin皮肤文件应用于该页面中的文本框，需要 在@Page指令中添加代码“Theme=”主题目录名称”” 属性，该皮肤文件位于Temes_skin主题目录中，因此 需在@Page指令中添加“Theme=”Temes_skin””属性。
第4章
主题、母版页
本章内容
掌握创建和应用主题的方法 掌握母版页的使用方法
2
本章重点
本章重点
外观文件 CSS样式文件 母版页
本章难点
创建和使用主题及母版页
3
主题、母版页
4.1 主题 4.2 母版页 4.3 本章小结
4
4.1 主题（Theme）
主题（Theme）是 2.0提供的一种新技术，是 指控件和页面外观属性设置的集合。通过为控件和页面 套用主题，可以使用户界面外观达到一致化的显示效果。
6
4.1.1 主题概述
在一个主题中至少要包括一个皮肤文件（或称外观文件， 扩展名为.skin），还可包括级联样式表文件（扩展名 为.css）。外观文件不同于CSS样式， CSS样式只能用来定义页面和HTML标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。
<!--定义文本框控件的命名皮肤--> <asp:TextBox runat="server" BackColor="LightGray" BorderColor="Green" BorderStyle="Solid" SkinID="Green"/>
11
1.创建皮肤文件
（5）将主题应用于页面中。 新建页面，将其命名为Theme.aspx，在页S样式文件用来定义页面外观及HTML控件 的外观样式，如设置页面背景、超链接文本的样式等。 下面通过一个简单的例子介绍如何创建CSS样式文件。 例5.6 创建CSS样式文件应用示例程序，为页面添加背 景图片，设置背景图片固定，为页面中的超链接文本设 置链接、悬停、单击和访问后的外观效果。
8
1.创建皮肤文件
创建如图所示的主题文件 应用示例程序，为第一个 文本框控件应用默认皮肤， 为第二个文本框应用命名 皮肤，第三个文本框禁用 皮肤文件。
9
1.创建皮肤文件
操作步骤如下： （1）创建主题文件。在解决方案资源管理器中，右击站点 根目录，在弹出的快捷菜单中选择“添加文件 夹”→“主题”选项，系统会自动添加一个主题专用目录 App_Themes，用来存放所有创建的主题文件夹，同时自 动创建一个名为“主题1”的主题文件夹，将其更名为 “Themes_skin”。 （2）在主题文件夹中添加外观文件。单击选定新建的主题 文件夹，单击工具栏上的“添加新项”按钮，打开“添加 新项”对话框，在“模板”列表中选择“外观文件”选项， 系统添加一个名为SkinFile.skin的文件，将其更名 TextBox.skin ，同时打开外观文件的框架。
14
2.创建CSS样式文件
操作步骤如下： （1）在解决方案资源管理器中，右击主题专用目录 App_Themes，在弹出的快捷菜单中选择“添加 文件夹”→“主题”选项，将新的主题文件夹 命名为“Themes_CSS”。 （2）单击选定新建的Themes_CSS主题文件夹，为其 添加一个用于存放图片的文件夹images，在images文 件夹中添加一幅背景图片。 （3）添加CSS样式文件。单击选定Themes_CSS主题 文件夹，单击工具栏上的“添加新项”按钮，打开“添 加新项”对话框，在“模板”列表中选择“样式表”选 项，系统添加一个名为StyleSheet.css的文件，同时打 开该文件。 （4）在StyleSheet.css文件中添加代码。
12
1.创建皮肤文件
（6）调试运行程序。在设计视图中，看不出命令按钮外观 有何不同，只有在调试程序时，才能看到Button.skin外观 文件对命令按钮控件外观的影响。 在Button.skin外观文件中定义默认外观时并未设置命令按 钮的边框宽度属性，从程序运行结果来看，应用默认外观 的命令按钮的边框宽度是比较宽的，因为设置了应用默认 外观的命令按钮的边框宽度属性为5像素，这说明控件最终 显示的外观效果是外观文件和控件的属性共同作用的结果。
7
4.1.2创建主题
皮肤文件的种类 皮肤文件可分为两种：默认外观和命名外观。 默认外观：没有定义SkinId属性。在同一主题中针对同
一类型的控件只允许有一个默认外观。当页面应用主题 时，默认外观将自动应用于同一类型的所有控件。 命名外观：如果在定义控件的外观时，设置了SkinId属 性，则该外观是命名外观，可以为同一类型的控件定义 多个命名外观。在页面中，通过为同一类型的控件应用 不同的命名外观，可以使同一类型的控件显示不同的外 观效果。 在页面中，同一类型的所有控件中，如果不希望某个控 件应用默认的外观设置，可在属性窗口中将该控件的 EnableTheming属性设置为False。
10
1.创建皮肤文件
（3）在打开的皮肤文件的框架中为文本框控件定义默认 皮肤和命名皮肤。 <!--定义文本框控件的默认皮肤-->
<asp:TextBox runat="server" BackColor="LightYellow" ForeColor="Red" BorderColor="Blue" BorderStyle="Dotted" FontBold="True" />