Web应用设计第4章主题母版页
合集下载
第章主题与母版页
外观文件（.skin文件）和样式表文件（.css文件）的主 要区别和联系有： 1、可以通过外观文件使页面中的多个服务器控件具有相 同的外观，而如果用样式表来实现，则必须设置每个控 件的【CssClass】属性，才能将样式表中定义的CSS类应 用于这些控件，非常烦琐。 2、使用样式表文件虽然能够控制页面中各种元素的样式， 但是有些服务器控件的属性却无法用样式表控制，而外 观文件则可以轻松完成这些功能。 3、当控制属性比较多的服务器控件外观时，可能需要在. css文件中定义很多CSS类，如果这些CSS类之间定义不好 就有可能产生不希望的效果。而用外观文件则不会出现 这些问题。
20
7.3 从内容页中访问母版页中的内容
访问母版页中的控件的方法： 在内容页后台代码中调用FindControl方法获取对母版页 中控件的引用。 FindControl方法的原型为： public override Control FindControl (string id) 其中id表示母版页中控件的ID名称。 如何从内容页中访问母版页中的属性和控件的具体实现 方法参看例7－5。
12
7.1.6 利用主题实现页面换肤
实现换肤功能的思路： 1、定义多个主题，在不同的主题下分别定义页面外观和 样式。 2、在后台代码中，重写页面的【StyleSheetTheme】属性。 3、在主页中添加一个下拉列表，让用户选择使用哪种皮 肤。 具体实现方法参看例7－3。
13
7.2 母版页和内容页
19
7.3 从内容页中访问母版页中的内容
从内容页中访问母版页中的属性的例子： 有一个名为MasterPage1.master的母版页，其对应的类名 是MasterPage1。 在该类中声明一个TrueName属性，则可在内容页中添加代 码：<%@ MasterType virtualPath=“~/MasterPage1.m aster”%>。 然后就可以通过Master.TrueName读取或设置母版页中Tru eName属性的值。
20
7.3 从内容页中访问母版页中的内容
访问母版页中的控件的方法： 在内容页后台代码中调用FindControl方法获取对母版页 中控件的引用。 FindControl方法的原型为： public override Control FindControl (string id) 其中id表示母版页中控件的ID名称。 如何从内容页中访问母版页中的属性和控件的具体实现 方法参看例7－5。
12
7.1.6 利用主题实现页面换肤
实现换肤功能的思路： 1、定义多个主题，在不同的主题下分别定义页面外观和 样式。 2、在后台代码中，重写页面的【StyleSheetTheme】属性。 3、在主页中添加一个下拉列表，让用户选择使用哪种皮 肤。 具体实现方法参看例7－3。
13
7.2 母版页和内容页
19
7.3 从内容页中访问母版页中的内容
从内容页中访问母版页中的属性的例子： 有一个名为MasterPage1.master的母版页，其对应的类名 是MasterPage1。 在该类中声明一个TrueName属性，则可在内容页中添加代 码：<%@ MasterType virtualPath=“~/MasterPage1.m aster”%>。 然后就可以通过Master.TrueName读取或设置母版页中Tru eName属性的值。
基于ASPNET的Web应用开发单元4网站主题母版页及导航任务2
px，在新建对话框中勾选“选择 母版页”，并选择相应的母版页文件 引用外部分 4.在内容页中引用样式文件 样式表
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <link rel="stylesheet" type="text/css" href="style/MasterPage.css" /> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
一、任务2
任务描述：为网上书店系统的前台设计母版页，如下图所示，
页首和页尾统一设计在母版中，中间的部分是变化的设计在内
容页中。
二、基本知识与技能—母版页概述
包含除母版页 之外的其他非 公共内容
封装页面中 的公共元素
在运行过程中，引擎将 两种页面内容文件合并执行，最后 将结果发给客户端浏览器
注意(1)内容页中没有<html><body>等标签 (2)内容页中所有内容必须包含在Content控件中 (3)内容页必须绑定母版页。
实例2:母版页的使用
1.新建一个母版页MasterPage.master，并设计母版页
<head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header">页首 </div> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer">版权所有</div> </div> </form> </body></html>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <link rel="stylesheet" type="text/css" href="style/MasterPage.css" /> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
一、任务2
任务描述：为网上书店系统的前台设计母版页，如下图所示，
页首和页尾统一设计在母版中，中间的部分是变化的设计在内
容页中。
二、基本知识与技能—母版页概述
包含除母版页 之外的其他非 公共内容
封装页面中 的公共元素
在运行过程中，引擎将 两种页面内容文件合并执行，最后 将结果发给客户端浏览器
注意(1)内容页中没有<html><body>等标签 (2)内容页中所有内容必须包含在Content控件中 (3)内容页必须绑定母版页。
实例2:母版页的使用
1.新建一个母版页MasterPage.master，并设计母版页
<head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header">页首 </div> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer">版权所有</div> </div> </form> </body></html>
第04章网页布局-PPT课件
+ 调整层 – 拖动 – 调整大小
4.2
– – – – – – – – –
编辑DIV
பைடு நூலகம்
+ 层的“属性”面板
层编号 层的位置：上、下、左、右 背景图像 可见性 Z值 类 溢出 背景颜色 剪辑：上、下、左、右
4.3
使用表格布局
+ 用表格布局是最简单的方法，但是有一
些局限性，在定位和后期维护方面都不 如Div，但是它是动态网页的局部布局的 得力助手，如插入一个表单后，在插入 表单的对象。
+ 学习了使用表格布局
+ 学习了使用框架布局
4.3
使用表格布局--表格编辑
+ 拆分单元格
– 将光标定位到要拆分的单元格，单击【属性】面板左下角的 “拆分”图标或鼠标右键，在弹出菜单选择“表格”—“拆分单 元格”命令，在对话框设置后点【确定】；
+ 合并单元格
– 选择相邻的多个单元格，单击【属性】面板的“合并”图标或鼠标 右键，在弹出菜单选择“表格”—“合并单元格”命令。
– 创建表格 – 嵌套表格 – 表格编辑
4.3
使用表格布局--创建表格
+ 定位光标；
+ 【插入】/【表格】或【常用】/“表格”按钮或
【Ctrl+Alt+T】，弹出表格对话框；
+ 在对话框中进行设置，如行数、列数、表格宽度、
边框和单元格边距等，【确定】
4.3
使用表格布局--嵌套表格
+ 定位光标到需要插入表格的单元格内，
+ 【文件】/【保存全部】命令，先命名和保存
框架集，然后命名和保存框架网页文件。
4.5
网页布局实例练习
Web应用设计第4章 主题母版页
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标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。
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标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。
03_母版页
第11张幻灯片/共18
使用 开发 Web 应用程序
如何创建嵌套的母版页（续）
Child.master 文件：
<%@ Master Language="C#“ MasterPageFile="Parent.master"%> <asp:Content id="Content1“ ContentPlaceholderID="MainContent" runat="server"> --------------Some Tags-------<asp:ContentPlaceHolder ID= "ChildContent" runat="server" /> --------------Some Tags---------<asp:ContentPlaceHolder ID="ChildFooter“ runat="server" /> -----------Some Tags-----------</asp:Content>
第18张幻灯片/共18
第16张幻灯片/共18
使用 开发 Web 应用程序
演示：使用母版页创建公共布局（续）
3. 设计嵌套母版页
a. b. c. d. e. 添加一个嵌套母版页。 设计该嵌套母版页。 为该嵌套母版页添加内容页。 测试 Adventure Works 网站。 修改 TopLevel.master 页序
什么是母版页?(续)
设计母版页：
母版页一般包含一个或多个ContentPlaceHolder控件，这些 控件由其ID属性识别。 ContentPlaceholder控件提供了一个位置，运行时将在该位 置合并来自引用页面的内容。 还可以在页面上添加其他HTML标记、HTML控件和Web服务器 控件（ContentPlaceHolder控件以外）。 还可以在母版页上添加任何服务器端代码。
基于ASPNET的Web应用开发单元4网站主题母版页及导航(3)
三、任务3的实施
1．按网上书店的功能，在后台要实现有关图书及分类的管理、 用户的管理等功能，先按照实际功能设计页面，放在admin文 件夹下，如下图所示。
2.新建一个母版文件ManageMasterPage.master(在admin文件夹下)
设置数据源为“SitMapDataSource1”,此时在设置 界面上结果已显示出来。
⑤浏览default.aspx页面
实例5：利用TreeView控件绑定XML文件的方式实现导航功能
操作步骤： ①新建页面，添加1个TreeView控件和1个 XmlDataSource控件 ②在App_Data文件夹中添加一个XML文件 ③配置XmlDataSource控件的数据源，在
二、基本知识与技能—站点地图
1.站点地图 站点地图是一个名为Web.sitemap的标准XML文件,包含了站 点结构信息，必须存储在应用程序根目录下。如果该文件放在 其他文件夹或者文件名不是Web.sitemap，导航控件将不能找到 站点的结构。 2.站点地图文件代码
<?xml version="1.0" encoding="utf-8" ?>
例3：利用TreeView自定义节点方法实现导航功能
①准备网站的多个页面（Book.aspx、Co mputer.aspx 、English.aspx 、Econom ic.aspx 、ComputerBasic.aspx 、Grap hicImage.aspx 、Network.aspx 、Info mationSafety.aspx） ②新建页面，添加一个TreeView控件 ③选择TreeView控件任务框中的“编辑 节点”或选择属性窗口中的“Nodes”， 打开“TreeView节点编辑器”
网页设计制作(母版)
网页设计制作实验报告目录1.网站主题 (3)2.网站架构 (3)3.各板块具体概述 (3)3.1 首页部分 (3)3.2 Photos部分 (3)3.3 Diary部分 (3)3.4 Data部分 (4)3.5 Store部分 (4)3.6 Contact部分 (4)4.主题、母版的应用情况（包括样式表） (4)5.主要页面的布局说明 (4)5.1 母版页 (4)5.2 Home页 (4)5.3 Photos页 (5)5.4 Diary页 (5)5.5 Data页 (5)5.6 Store页 (5)5.7 Contact页 (5)6.javaScript（图片轮换来显示日志）的代码如下： (5)7.主要页面截图 (7)7.1 母版（主）页 (7)7.2 Photos页 (8)7.3 Diary页 (8)7.4 Data页 (9)7.5 Store页 (9)7.6 Contact页 (10)8.心得体会 (10)1.网站主题本网站是一个个人blog，其主要内容介绍了博主的一些喜好以及一些收藏。
2.网站架构大致的介绍了一些关于博主的兴趣爱好以及动向。
网站架构图如图2-1图2-13.各板块具体概述3.1首页部分本板块主要就是网站的首页，向进入本网站的网友展示网站的大概内容。
主要展示了博主喜欢的日志以及最近的一些照片来装点页面，使网友能够知道其最近的动向。
3.2Photos部分这一页展示了博主的一些相册，即其最近上传的一些照片都可以在这里找到。
3.3Diary部分这里显示的就是一些日志、文章。
大多都是博主原创或者转载的经典美文。
网友可以从这里欣赏博主的一些文章，也可以进行转载，分享给更多的朋友。
3.4Data部分本版块展示了博主的一些个人基本信息，需要了解这个博客主人相关信息的一些人可以通过这里来找到，当然这只是一些博主愿意公开的信息，不愿意的只能向本人询问或者通过其他方式。
3.5Store部分Store版块就是展示博主的个人网络收藏夹，向大家推荐的一些不错的网站，便于大家浏览访问的一个快捷链接。
主题和母版页
主题
级联样式表 级联样式表就是CSS文件，是具有文件扩展 名.css的文件，也是用来存放定义控件外观属性的 代码的文件。 图像和其他资源 图像就是图形文件，其他资源可能是声音文件、 脚本文件等。有时候为了控件美观，只是靠颜色、 大小和轮廓来定义并不能满足要求，这时候就会考 虑把一些图片、声音等加到控件外观属性定义中去。
项…”命令，此时会弹出“添加新项”对话框，该对话框提供了 在Themes1文件夹里可以添加的文件的模板。
主题
(3) 在“添加新项”对话框里选择“外观文件”，在“名称”文本 框里会出现该文件默认命名Skin1.skin，单击“添加”按钮， Skin1.skin就会添加在Themes1目录下。
主题
在网页中使用某个主题都会在网页定义中加上“Theme=[主 题目录]”的属性，示例代码如下： <%@ Page Theme=”Themes1” … %> 为了将主题应用于整个项目，可以项目的根目录下的 Web.config文件里进行配置，示例代码如下： <configuration> <system.web> <Pages Themes=”Themes1”></Pages> </system.web> </configuration> 上面通过把属性Themes设置为Themes1来把该主题应用于整 个项目。
母版页
1. 2. 3. 4. 母版页具有下面的优点： 使用母版页可以集中处理页的通用功能，以便可以 只在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将 结果应用于一组页。例如，可以在母版页上使用控 件来创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页使您 可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从 各个内容页自定义母版页。