Web应用设计第4章主题母版页
第章主题与母版页
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
<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章 主题母版页
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. 母版页具有下面的优点： 使用母版页可以集中处理页的通用功能，以便可以 只在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将 结果应用于一组页。例如，可以在母版页上使用控 件来创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页使您 可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从 各个内容页自定义母版页。
实验三 ASPNET主题和母版页(淮海工学院)
淮海工学院计算机科学系实验报告书课程名：《计算机新技术（二）》题目：主题和母版页班级：*******学号：201*******姓名：***一.实验目的(1)通过实验,进一步理解主题的概念,并能够正确地定义皮肤文件(.skin)和层叠样式单文件(.css);(2)通过实验,能够在Web页面中正确地引用主题中所定义的外观设置(Theme=….)和样式单格式(StyleSheetTheme=…..);(3)通过实验,进一步理解母版页的特点,母版页的格式和在WEB项目中创建母版页的方法;(4)通过实验,进一步理解内容页的特点,内容页和母版页的关系以及在WEB项目中创建内容页的方法.二.实验内容和要求(1)定义主题,其下包含外观文件和样式单文件;(2)创建WEB页面,在其中引用主题中的外观和样式单信息;(3)创建一个母版页;(4)创建至少两个内容页来引用母版页.三.实验步骤(1)在项目的App_Themes文件夹下面,创建一个主题,命名为Theme1,在其下创建一个皮肤文件,Skin1.skin,在皮肤文件中定义Label,TextBox,Button,ListBox,DropDownList等服务器控件的外观信息.(2)在主题Theme1下面再创建一个样式单文件,Css1.css.样式单文件中要分别定义三种类型即元素、类别、ID的样式信息(3)在项目中添加一个Web窗体文件,命名为 Page1.aspx,在该页面中引用主题Theme1中的外观和样式信息.(4)运行页面,查看外观和样式信息的浏览效果.(5)定义一个母版页,命名为Master1.master.在此母版页中定义公共区和可编辑区.(6) 在项目中添加一个Web窗体文件,命名为 Page2.aspx,让其引用母版页,定义其可编辑区,在浏览器观察其运行效果.(7) 在项目中添加一个Web窗体文件,命名为 Page3.aspx,让其引用母版页,定义其可编辑区,在浏四.实验结果图 1.Page1.aspx图 2.Page2.aspx图 3.Page3.aspx部分源码：Skin1.skin：<asp:Label runat="server" Font-Names="微¡é软¨¨ª雅?黑¨²" Font-Size="Medium" /> <asp:TextBox runat="server" BackColor="#CCFFCC" BorderColor="#CCCCCC" /><asp:Button runat="server" BackColor="#00CC66" /><asp:ListBox runat="server" BackColor="DDDDDD" /><asp:DropDownList runat="server" BackColor="CCFFCC" />Css1.css：#top{padding: inherit;margin: auto;border: thin double #999999;background-position: center;background-color: #99FF99;}Master1.master:<body><form id="form1" runat="server"><div style="font-size: x-large; font-family: 微¡é软¨¨ª雅?黑¨²">个?人¨?中D心? ：êo<br /><br /></div><div style="font-size: large; font-family: 微¡é软¨¨ª雅?黑¨²">用®?户¡ë名?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder0" runat="server"></asp:ContentPlaceHolder>手º?机¨²：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>邮®¨º箱?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server"></asp:ContentPlaceHolder>所¨´在¨²地Ì?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder3" runat="server"></asp:ContentPlaceHolder></div></form><p class="style1"><hr width=95% / ><div class="style1"><span style="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none; "> 淮¡ä海¡ê工¡è学¡ë院o 版ã?权¨¡§所¨´有®D<spanclass="Apple-converted-space"> </span></span><brstyle="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); " /><span style="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none; "> Copyright © 2011 Phoenix New Media Limited All Rights Reserved.</span></div></p></body>Page1.aspx<asp:Label ID="Label1" runat="server" Text="用®?户¡ë名?：êo"></asp:Label><asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox><br /><br /><asp:Label ID="Label2" runat="server" Text="密¨¹ 码?：êo"></asp:Label> <asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox><br /><br /> <asp:Button ID="Button1" runat="server" Text="登Ì?录?"Width="74px" Font-Names="微¡é软¨¨ª雅?黑¨²" Font-Size="Medium" BorderColor="Lime" /><br /></div>Page2.aspx<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder0" Runat="Server"><p>名?字Á?随?便À?起e</p></asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><p>1835888****</p></asp:Content><asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"><p>3478299**@</p></asp:Content><asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server"><p>江-苏?连¢?云?港?</p></asp:Content>Page3.aspx<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Page3.aspx.cs" Inherits="Page3" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder0" Runat="Server">取¨?名?要©a慎¦¡Â重?</p></asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><p>1835280****</p></asp:Content><asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"><p>784338**@</p></asp:Content><asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server"><p>江-苏?连¢?云?港?</p></asp:Content>五．实验体会*********************************************************************** *************************************************************************** *************************************************************************** **。
动态Web技术5_母版页与主题
母版页和主题
SZPT GuoLing
一、母版页
1、作用
使用母版页统一网站界面
SZPT GuoLing
一、母版页
2、母版页的创建
（1）右击“解决方案资源管理器”中的项目 名称，在弹出的菜单中选择“添加新项”命令，
弹出“添加新项”对话框。
（2）选择“母版页”选项，[添加]
（3）制作页面，添加网页内容和
SZPT GuoLing
二、主题
8、皮肤文件除手工书写外有没有其他简便方法？
答：有，可以先向页面中加入控件，然后在属性窗口中 设置它的各种属性，制作所要达到的效果。 该控件的Id属性。
10.1 主题和皮肤概述 然后复制该控件的整个代码到皮肤文件中，去掉
（再根据需要为其添加SkinId属性定义），这样关
于该控件的主题代码就制作完毕。
SZPT GuoLing
二、主题
9、如果应用了主题，而网页又在本地设置了控件
的外观属性，控件将体现何种效果？
答：这要看主题设置的优先级 主题设置优先 2）@ Page指令中设置StyleSheetTheme属性 本地控件设置优先
10.1 主题和皮肤概述
1）@ Page指令中设置Theme属性
SZPT GuoLing
一、母版页
6、如何对现有网页应用母版？
（1）在Page指令中添加MasterPageFile属性 （2）去掉顶级Html代码（html、body、form） （3）添加Content控件，把网页内容包含进去
SZPT GuoLing
一、母版页
7、内容页如何访问母版页控件？
答：Master.findControl(“控件ID”)
二、主题
母版页的名词解释
母版页的名词解释母版页（Master page）是一种在网页设计中广泛使用的技术，旨在提供一致的外观和布局模板，以便在整个网站的不同页面中重复使用。
母版页为网站的各个页面提供了一个一致的框架，使得编辑或更新时只需修改一处即可在整个网站上生效。
本文将对母版页进行深入解释，并探讨其在网页设计中的重要性和应用。
一、母版页的作用与特点母版页作为网页设计的基础架构之一，具有以下几个主要作用和特点：1. 提供一致的外观：母版页可以统一网站的外观和布局，使得不同页面之间具有一致性。
通过定义母版页上的元素，如头部、侧边栏、页脚等，可以确保整个网站的风格和结构保持一致，并增强用户对网站的品牌感知。
2. 简化维护和更新：通过使用母版页，网站管理员只需要在母版页上进行一次修改，就能够在所有页面上自动生效，大大简化了网站的维护工作。
无论是更新公司信息、更换广告内容还是改变页面布局，只需一次修改即可，避免了逐个页面修改的繁琐过程。
3. 提高设计效率：母版页的使用可以提高网页设计的效率。
设计师只需关注内容区域的设计，而无需每次重新设计整个网站的外观。
母版页规定了整体的结构与布局，从而减少了重复设计的工作量，使设计师能够更专注于网站的内容呈现。
4. 增强用户体验：一致的网站外观和布局可以帮助用户更好地理解和浏览网站，提升用户体验。
用户在不同页面之间转换时不需要适应新的页面风格，而是能够更自然地进行浏览和操作，减少了迷惑和困扰。
二、母版页的应用与案例母版页广泛应用于各种类型的网站设计中，下面以几个典型的应用场景为例进行说明：1. 企业网站：在企业网站中，母版页通常用于定义网站的顶部导航、页脚、公司标志等元素。
这些元素在整个网站的各个页面上都存在，使用母版页可以确保这些元素的一致性和统一性。
2. 新闻门户：新闻门户类网站通常包含多个页面，如首页、新闻列表页、内容详情页、用户中心等。
母版页可以用于定义这些页面的共同元素，如网站标志、导航菜单、搜索框等，确保整体的一致性和统一性。