母板页
- 格式:wps
- 大小:61.00 KB
- 文档页数:7
母版页的使⽤⼀、母版页简介使⽤母版页可以为应⽤程序中的页创建⼀致的布局。
单个母版页可以为应⽤程序中的所有页(或⼀组页)定义所需的外观和标准⾏为。
母版之所以称为母版,就是将⼤部分⽹页上固定内容,⽐如导航栏,版权声明栏放到⼀个母版⾥,然后编写⽹页时只需要调⽤母版就⾏了,内容页就不需要再写那些内容了。
不需要将相同的部分再写⼀遍。
母版中可以标记多个asp:ContentPlaceHolder。
母版页仅仅是⼀个页⾯模板,单独的母版页是不能被⽤户所访问的。
单独的内容页也不能够使⽤。
母版页和内容页有着严格对应关系。
母版页中包含多少个ContentPlaceHolder控件,那么内容页中也必须设置与其相对应的Content控件。
当客户端浏览器向服务器发出请求,要求浏览某个内容页⾯时,引擎将同时执⾏内容页和母版页的代码,并将最终结果发送给客户端浏览器。
在中母版页有两种作⽤,⼀是提⾼代码的复⽤(把相同的代码抽出来),⼆是使整个⽹站保持⼀致的风格和样式。
母版页⽆法直接启动运⾏,需要套⽤的⼦页⾯启动把它带出来母版页的嵌套,⼀般⽤2层⾜够,最多3层<asp:ContentPlaceHolder ID="id" runat="server"> - 母版页中的位置预留<asp:Content ID="Content2" ContentPlaceHolderID="id" runat="Server"> - 填坑⼆、母版页的建⽴和使⽤1.母版页的建⽴添加新项-母版页在新建的母版页中⾃动⽣成了两个ContentPlaceHolder控件,其中⼀个在head区, ID是“head”;另⼀个在body区,默认ID是“ContentPlaceHolder1”,可以根据需要⾃⼰命名。
在内容页中,两个控件会变成与其相对应的Content控件,⽤户需在content内进⾏开发。
流程1.打开Visual Studio 2008,“新建” “网站”(下图)2.选择“网站”,语言选择“Visual C#”,点击“确定”(下图)3.在“解决方案资源管理器”中右击选择“添加新项”(下图)4.选择“母版页”,点击添加(下图)至此一个空的母版页就建好了下面介绍如何添加内容页1.在“解决方案资源管理器”中右键“添加新项”(下图)2.选择“web窗体”,勾选“选择母版页”,“添加”(下图)3.选择母版页,“确定”(下图)至此一个内容页就建好了,在解决方案资源管理器中能看到(下图)下面介绍如何在母版页中添加menu1.先新建4个内容页在后面的过程中使用(下图)2.切换到各内容页设计视图,在相应的页面中的ContentPlaceHolder1中输入内容(为了后面检测页面跳转是否正确)如:Default2中输入“Default2页面“(下图)3.在母版页源视图中加一层div(下图)4.切换到设计视图,从“工具箱”的“导航”一栏中拖一个“Menu”到新建的div中(下图)5.选中menu右击选择属性,在右侧属性窗口中选择Orientation中的Horizontal可以使menu横向(下两图)5.编辑menu(下两图)1)点击小箭头2)选择“编辑菜单项”3)在弹出的“菜单项编辑器”中,添加项(分为根项和子项)4)选中某一项,右侧属性窗口中更改Text属性5)更改此项要定位到的URL(NavigateUrl属性),点击右侧的按钮6)在弹出的“选择URL”窗口中,在右侧选择要定位的页面Menu全部编辑完成后如下图“主页“定位到Default2页面“子页1“定位到Default3页面“页面1“定位到Default4页面“子页1.1“定位到Default5页面运行Default2页面,点击相应链接,检测页面是否成功跳转下面介绍母版页中添加站点地图1.切换到母版页,在源视图中再添加一个div(下图)2.切换到设计视图,在刚刚建的div中打一回车(为了加大与menu之间距离,方便后面运行查看),在“工具栏”的“导航”中拖取一个SiteMapPath到刚刚建的div中(下图)3.在“解决方案资源管理器”中右键“添加新项”(下图)4.选择“站点地图”,“添加”(下图)5.在站点地图中配入相应站点6.运行不同页面可以看到站点地图显示不同内容,也可以运行Default2,点击之前做好的menu来查看7.说明:站点地图配置的层次结构为下图,可根据需要自最后,根据不同的需要可自行在母版页中添加内容,包括图片等一些公共内容,记得要添加div来进行页面布局Welcome To Download !!!欢迎您的下载,资料仅供参考!。
什么是母版页?
、
母版页:
是文件与 Web窗体类似。
定义一致并可重用的布局、代码和内容,这些内容一般供Web 应用程序中
的多个页面使用。
文件扩展名为.master。
包含@Master指令。
不会显示完整的网页。
运行时,内容与功能与同一个网站的其他网页合并。
使用母版页的优点有:
允许集中网页的通用功能。
可方便地创建一组控件和代码,并将结果应用于一组页面。
提供对网页布局的详细控制。
允许从单个内容页自定义母版页。
包括一个处理程序,该程序防止直接在浏览器中处理母版页。
当一个网页引用母版页时,:
访存请求页。
访存被请求的网页所引用的母版页。
合并母版页与请求页的内容。
将合并结果发送到浏览器。
设计母版页:
母版页一般包含一个或多个ContentPlaceHolder控件,这些控件由其ID属性
识别。
ContentPlaceholder控件提供了一个位置,运行时将在该位置合并来自引用页
面的内容。
还可以在页面上添加其他HTML标记、HTML控件和Web服务器控件
(ContentPlaceHolder控件以外)。
还可以在母版页上添加任何服务器端代码
Content Place。
4.2.1母版页概述
Master Pages 是2.0所提供的新功能它是一个具有扩展名为.master的文件,可以包含静态布局。
母版页有特殊的
@Master指令识别,该指令的使用使母版页有别于内容页,且每个.Master文件只能包含一条@Master指令。
母版页通过预先定义好的Master Pages模板能够用到网站所有的WebForm,这样便能使网站每个页面,页尾,菜单和超链接有一致的外观,不但具有方便快捷的特性,也消除了以往必须在每个页面重复定义和排版的累赘工作。
在的编译过程中,将会把母版页和内容页这两种文件的内容合并执行,母版页的内容将融入到内容页中,并且在用户请求时动态地产生一个服务于用户的页面,可形象地称之为结果页,需要明确指出的是,这种合并过程在编译时只发生一次,并且母版页的内容不能充当内容页的基类。
在母版页中有多少个内容占位符(即ContentPlaceHolder 控件),内容页中就必
须设置与其相同数目的内容区域(Con tent 控件标识)。
由于母版页是以.master为扩展
名的,此扩展名不能被客服端直接浏览,所以只有通过与内容页的绑定,才能实现间接访问母版页的目的。
母版页和内容页的运行过程如下:1- (一)、通过URL来请求页面。
(二八获取该页后,读取@Pagef旨令。
(三)、包含更新内容的母版页合并到内容页的控件树中。
(四八合并各个Conter控件的内容到母版页中相应的Conten tPlaceHolder 控件中。
(五八浏览器中呈现合并后的效果页。
母版页标准化⽹站布局标准化⽹站布局的格式只是整个过程的⼀部分,你还需要保证通⽤的元素,如⽹站的标题、⽹站的导航控件等在每个页⾯⾥都出现在相同的位置。
解决这⼀问题的关键在于创建⼀个可以重复应⽤到整个⽹站的简单⽽灵活的布局。
有 3 个基本办法可以选择:⽤户控件。
⽤户控件时标准化通⽤页⾯元素的优秀⽅式,但是,它们⾃⾝并不能解决页⾯布局的问题,因为没有办法保证⽤户控件在所有页⾯中都被放到同样的位置。
HTML 框架。
框架是在⼀个浏览器窗⼝中同时显⽰多个页⾯的 HTML 基本⼯具。
它的主要缺点是它⾥⾯的每个页⾯必须通过单独请求服务器进⾏检索,这些页⾯的代码不得不完全独⽴。
这同时意味着⼀个框架⾥的页⾯不能和其他框架中的页⾯交互,也不能影响其他框架中的页⾯。
(⾄少不能通过服务器端代码)母版页。
母版页是 的⼀个特性,它专门设计⽤于标准化 Web 页⾯布局。
它可定义固定的内容并声明 Web 页⾯⾥可插⼊⾃定义内容的部分。
如果在整个⽹站中使⽤同⼀个母版页,就可以确保获得同样的布局。
最妙的是,如果修改了母版页的定义,应⽤它的所有页⾯都会⾃动变化。
母版页基础要为页⾯模版提供⼀个可操作且灵活的解决⽅案,必须满⾜以下⼏个条件。
要能够单独定义页⾯的某个部分并在多个页⾯⾥重⽤它。
要能够创建⼀个定义了可编辑区域的封闭布局。
重⽤这个模版的页⾯只能够在许可的区域内添加或修改内容。
页⾯能够对重⽤的元素做⼀些⾃定义。
可以声明性的绑定页⾯倒页⾯模版(不使⽤代码)或者能够在运⾏时动态绑定到页⾯。
可以⽤⼯具(如 VS)设计⼀个使⽤页⾯模版的页⾯。
为了实现这⼀切, 定义了两种新的页⾯类型:母版页和内容页。
母版页和普通的 Web 页⾯⼀样,它可以包含任何 HTML、Web 控件甚⾄代码的组合。
母版页还可以包含内容占位符(定义的可修改区域)。
内容页引⽤⼀个母版页并获得它的布局和内容。
此外,内容页可以在任意的占位符⾥加⼊页⾯特定的内容。
换句话说,内容页将母版页没有定义的缺失了的内容填⼊母版页。
一、实验目的1. 了解母版页的概念和作用。
2. 掌握在Word文档中创建和使用母版页的方法。
3. 学习母版页中插入页眉、页脚、页码等元素的操作。
4. 提高文档格式化和排版能力。
二、实验环境1. 操作系统:Windows 102. 软件环境:Microsoft Word 20163. 硬件环境:个人电脑三、实验步骤1. 打开Word文档,新建一个空白文档。
2. 在菜单栏中点击“视图”选项,勾选“母版视图”复选框,进入母版视图。
3. 在母版视图中,可以看到四个部分:正文、页眉、页脚和页码。
4. 创建页眉:a. 在页眉区域,点击“插入”菜单,选择“页眉”。
b. 在弹出的“页眉”任务窗格中,选择一个合适的页眉样式。
c. 根据需要,在页眉区域添加文字、图片等元素。
5. 创建页脚:a. 在页脚区域,点击“插入”菜单,选择“页脚”。
b. 在弹出的“页脚”任务窗格中,选择一个合适的页脚样式。
c. 根据需要,在页脚区域添加文字、图片等元素。
6. 创建页码:a. 在页眉或页脚区域,点击“插入”菜单,选择“页码”。
b. 在弹出的“页码”任务窗格中,选择一个合适的页码样式。
c. 根据需要,设置页码的位置和格式。
7. 设置页边距:a. 在菜单栏中点击“布局”选项,选择“页面设置”。
b. 在弹出的“页面设置”对话框中,设置页边距、纸张大小等参数。
8. 保存母版页:a. 在菜单栏中点击“文件”选项,选择“保存”。
b. 在弹出的“另存为”对话框中,选择保存位置和文件名,点击“保存”按钮。
9. 返回普通视图:a. 在菜单栏中点击“视图”选项,取消勾选“母版视图”复选框,返回普通视图。
四、实验结果与分析1. 实验结果:成功创建了一个包含页眉、页脚和页码的母版页,并应用于文档中。
2. 实验分析:通过本实验,掌握了在Word文档中创建和使用母版页的方法,提高了文档格式化和排版能力。
母版页的应用可以使文档中的页眉、页脚、页码等元素保持一致,简化文档编辑过程。
母版页概述使用 母版页可以为应用程序中的页创建一致的布局。
单个母版页可以为应用程序中的所有页(或一组页)定义所需的外观和标准行为。
然后可以创建包含要显示的内容的各个内容页。
当用户请求内容页时,这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。
母版页的工作原理母版页实际由两部分组成,即母版页本身与一个或多个内容页。
演练:在Visual Web Developer 中创建和使用 母版页本演练阐释如何创建一个母版页和几个内容页。
母版页使您可以创建一个页面布局(模板页),然后创建各个页面,这些页面包含的内容在运行时与母版页合并。
创建网站如果已经在Visual Web Developer 中创建一个网站(例如,通过执行演练:在Visual Web Developer 中创建基本网页中的步骤创建),可以使用该网站并跳至下一节“创建母版页”。
否则,按照下面的步骤创建一个新的网站和网页。
创建文件系统网站打开Visual Web Developer。
在“文件”菜单上单击“新建网站”。
出现“新建网站”对话框。
在“Visual Studio 已安装的模板”之下单击“ 网站”。
在“位置”框中输入要保存网站页面的文件夹的名称。
例如,键入文件夹名“C:\WebSites”。
在“语言”列表中,单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 创建该文件夹和一个名为Default.aspx 的新页。
创建母版页母版页是用于设置页面外观的模板。
在本节中,将首先创建一个母版页。
然后,使用表格来对母版页进行布局,此母版页具有一个菜单、一个徽标和一个页脚,这些内容将在站点的每个页面中出现。
还将使用内容占位符,这是母版页中的一个区域,可以使用内容页中的信息来替换此区域。
创建母版页在解决方案资源管理器中,右击网站的名称,然后单击“添加新项”。
在“Visual Studio 已安装的模板”之下单击“母版页”。
在“名称”框中键入“Master1”。
选中“将代码放在单独的文件中”复选框。
注意本演练假设您为所有页面使用代码隐藏文件。
如果使用的是单一文件 页,本演练中阐释的代码也可以使用,但将在源视图中显示,而不是在单独的代码文件中显示。
在“语言”列表中,单击您想使用的编程语言,然后单击“添加”。
即会在源视图中打开新的母版页。
在页面的顶部是一个@ Master声明,而不是通常在 页顶部看到的@ Page 声明。
页面的主体包含一个<asp:contentplaceholder>控件,这是母版页中的一个区域,其中的可替换内容将在运行时由内容页合并。
在本演练的稍后部分将更多地使用内容占位符。
对母版页进行布局母版页定义站点中页面的外观。
它可以包含静态文本和控件的任何组合。
母版页还可以包含一个或多个内容占位符,这些占位符指定显示页面时动态内容出现的位置。
在本演练中,将使用一个表格来帮助在页面中定位元素。
首先创建一个布局表格来保存母版页元素。
在本节的稍后部分中将定位已经在页面上的内容占位符控件。
创建母版页的布局表格在源视图中选定Master1.master 文件,将验证的目标架构设置为Microsoft Internet Explorer 6.0。
若要设置此值,可以使用工具栏中的下拉列表,或从“工具”菜单中选择“选项”,然后单击“验证”。
切换到“设计”视图。
从“属性”窗口顶部的下拉列表中选择“DOCUMENT”,然后将“BgColor”设置为特别的颜色,如蓝色。
选择什么颜色并不重要。
在本演练的稍后部分,将创建没有颜色的第二个母版页,与在这里选择的颜色形成对比。
单击要放置布局表格的页面。
注意请勿将布局表格放在ContentPlaceHolder控件内。
在“布局”菜单上单击“插入表”。
在“插入表格”对话框中单击“模板”。
在列表中单击“页眉、页脚和边”,然后单击“确定”。
此模板定义表格中行和单元格的排列方式。
选定的模板创建三个行,中间行拆分为两个单元格。
进行以下设置:在中间行中,单击最左侧的列,然后在“属性”窗口中将其“宽度”设置为48。
单击首行,然后在“属性”窗口中将其“高度”设置为48。
单击末行,然后在“属性”窗口中将其“高度”设置为48。
注意可以通过拖动表格单元格的边框或在“属性”窗口中选择单元格并设置值,来设置宽度和高度。
选中表格中的所有单元格,将“BgColor”设置与背景色不同的颜色,然后将“VAlign”设置为“顶部”。
布局完表格后,可以将内容添加到母版页,此内容将在所有页面上显示。
可以将版权信息添加为页脚,并添加一个菜单。
如果有可用的徽标图形,也可以添加此徽标。
将静态内容添加到母版页将静态内容添加到母版页单击底部单元格,然后键入页脚文本,如“Copyright 2005 Contoso Inc.”。
在“工具箱”中,从“导航”控件组将Menu控件拖动到顶部单元格中。
按照以下步骤创建菜单:将Menu控件的Orientation属性设置为Horizontal。
单击Menu控件上的智能标记,然后在“菜单任务”对话框中单击“编辑菜单项”。
在“项”之下单击“添加根节点”图标两次,添加两个菜单项:单击第一个节点,然后将“Text”设置为“主页”,并将“NavigateUrl”设置为“Home.aspx”。
单击第二个节点,然后将“Text”设置为“关于”,并将“NavigateUrl”设置为“About.aspx”。
单击“确定”关闭“菜单项编辑器”对话框。
如果有可用作徽标的图形文件,请按照以下步骤将其放置到母版页上:在解决方案资源管理器中,右击网站的名称,然后单击“添加现有项”。
定位到您的图形文件,选择该图形文件,然后单击“添加”。
在“工具箱”中,从“标准”组将Image控件拖动到表格的左中列。
将Image控件的ImageUrl属性设置为该图形文件的名称。
现在可以定位内容占位符,以指定母版页在运行时显示内容的位置。
添加内容占位符将ContentPlaceHolder控件拖动到右中单元格中。
控件的ID属性为ContentPlaceholder1。
您可以保留或更改此名称。
如果更改此名称,请记下更改的名称,因为稍后需要知道此名称。
保存页。
创建母版页的内容母版页提供内容的模板。
通过创建与母版页关联的 页来定义母版页的内容。
内容页是 页的专用形式,它仅包含要与母版页合并的内容。
在内容页中,添加用户请求该页面时要显示的文本和控件。
在本演练中,将为母版页添加两个带有内容的页面。
第一个是主页,第二个是“关于”页面。
创建主页在解决方案资源管理器中,右击网站的名称,然后单击“添加新项”。
在“Visual Studio 已安装的模板”下单击“Web 窗体”。
在“名称”框中键入“主页”。
在“语言”列表中,单击您想使用的编程语言。
选中“选择母版页”复选框,然后单击“添加”。
出现“选择母版页”对话框。
单击“Master1.master”,然后单击“确定”。
即会创建一个新的 .aspx 文件。
该页面包含一个@ Page指令,此指令将当前页附加到带有MasterPageFile属性的选定的母版页,如下面的代码示例所示。
Visual Basic复制代码<%@ Page Language="VB"MasterPageFile="~/Master1.master" ... %>C#复制代码<%@ Page Language="C#"MasterPageFile="~/Master1.master" ... %>此页面还包含一个<asp:Content>元素,稍后将使用此元素。
内容页不具有常见的组成 页的元素,如html、body或form元素。
相反,通过替换在母版页中创建的占位符区域,仅添加要在母版页上显示的内容。
将内容添加到主页切换到“设计”视图。
母版页中创建为ContentPlaceHolder控件的区域在新的内容页中显示为Content 控件。
显示剩下的母版页内容,以便您查看布局,但这些内容显示为浅灰色,因为您在编辑内容页时不能更改这些内容。
从“属性”窗口的下拉列表中单击“DOCUMENT”,然后将“标题”设置为“Contoso 主页”。
可以独立设置每个内容页的标题,以便内容与母版页合并时在浏览器中显示正确的标题。
标题信息存储在内容页的@ Page指令中。
在Content控件中,键入“欢迎光临网站Contoso”,选择该文本,然后将文本的格式设置为“标题1”,方法是选择该文本,然后从“工具箱”上面的“块格式”下拉列表中选择“标题1”。
按Enter,在Content控件中创建一个新的空白行,然后键入“感谢您访问本站”。
在这里添加的文本并不重要,可以键入任何有助于将此页识别为主页的文本。
保存页。
可以用与创建主页相同的方法创建“关于”页面。
创建“关于”页面使用与创建主页相同的步骤添加名为About.aspx 的新内容页。
请确定将新页面附加到Master1.master 页,正如对主页的操作一样。
将页面的标题更改为“Contoso…关于‟页面”。
在内容区域中,键入“关于Contoso”,然后选择文本,并从“工具箱”上面的“块格式”下拉列表中选择“标题1”,将文本的格式设置为“标题1”。
按Enter 以创建新行,然后键入“从1982 年起,Contoso 一直提供优质的软件服务。
”保存页。
测试页面。
可以运行页以进行测试,正如运行任何 页一样。
测试页面切换到Home.aspx 页,然后按Ctrl+F5。
将Home.aspx 页的内容与Master1.master 页的布局合并到单个页面,并在浏览器中显示产生的页面。
请注意,此页的URL 为Home.aspx;浏览器中不存在对母版页的引用。
单击“关于”链接。
显示About.aspx 页。
它亦与Master1.master 页合并。
如何:为 母版页创建内容页(Visual Studio)内容页是与母版页相关联的 网页。
母版页建立一个布局并包含一个或多个用于可替换文本和控件的ContentPlaceHolder控件。
内容页只包含在运行时与母版页的ContentPlaceHolder控件合并在一起的文本和控件。
有关更多信息,请参见 母版页概述。
Visual Web Developer 提供了多种创建内容页的方式,包括在编辑母版页时所用到的快捷方式。
此外,还可以从空白页开始并添加适当的指令来创建内容页。
在创建内容页后,可以创建与母版页上的每个ContentPlaceHolder相对应的自定义内容。
此外,还可以显式选择允许显示母版页的默认内容。