04第4章控制网站页面外观

【教学导航】1【操作准备】2【操作演练

】3【技术提升】4【归纳总结】6【知识集成】5【教学导航】教学目标学会创建母版页学会创建基于母版页的内容页学会创建嵌套母版页和基于子母版的内容页学会创建 ，且应用 设置Web页面和控件的外观了解母版页的优点以及与普通页面的区别建议6【操作准备】1．使用Dreamweaver

CS4创建网页masterpage0401.html使用Dreamweaver

CS4创建网页masterpage0401.html，该网页主要包信息等内容。其浏览效括Logo、导航栏、搜索、用户登录、购物指南、果如图4-1所示。2．创建ASP.NET（1）启动Visual

Studio

2008之后，在主窗口单击选择【文件】→【新建

】命令，打开【新建

】

框。（2）在【新建

】

框“模板”列表中选择“ASP.NET

”，存放位置列表框输开发实用在“语言”列表框中选择“VisualC#”，在入创建

的

位置，即“D:\ASP.NET\WebSite\eShop04”。【操作准备】（3）在【新建

】

框中单击【确定】按钮，Visual

Studio系eShop04，同时会自动创建一个Web页统会自动创建并配置新建的面Default.aspx。3．准备样式文件和图像文件在文件夹“eShop04”（其路径为“D:\ASP.NET

开发实用\WebSite\eShop04”）新建两个子文件夹，将新建的文件夹重命名为

“css”和“images”。将已有的样式文件“style0401.css”拷贝到子文件夹“css”中，将所需的图像文件拷贝到子文件夹“images”中。【操作演练】【任务4-1】创建用户登录的母版页【任务描述】使用Dreamweaver

CS4创建作为母版页的网页masterpage0401.html，该网页主要包括Logo、导航栏、搜索、用户登录、购物指南、

信息等内容。借助网页masterpage0401.html快速创建母版页

eShopMasterPage0401.master，并且在母版页中添加两个容器控件

ContentPlaceHolder作为占位符。母版页eShopMasterPage0401.master的设计外观效果如图4-2所示。图4-2

母版页eShopMasterPage0401

master的设计外观效果【操作演练】【任务4-1】创建用户登录的母版页【任务实施】打开【添加新项】

框创建母版页eShopMasterPage0401.master3．设计母版页4．保存母版页【操作演练】【任务4-2】创建用户登录的内容页【任务描述】创建基于母版页eShopMasterPage0401.master的内容页eShop0402.aspx。设计内容页eShop0402.aspx，在容器控件ContentPlaceHolder1和ContentPlaceHolder2区域添加必要的内容。Web页面eShop0402.aspx的浏览效果如图4-7所示。图4-7

内容页eShop0402.aspx的浏览效果【操作演练】【任务4-2】创建用户登录的内容页【任务实施】创建内容页准备内容页eShop0402.aspx所需要的图像文件，定义所需的样式

3．设计内容页eShop0402.aspx保存内容页在VisualStudio2008的主窗口单击【保存】按钮或【全部保存】按钮，保存所创建内容页eShop0402.aspx。预览内容页直接按F5键或者在主窗口中单击选择【调试】→【启动调试】命令浏览网页，Web页面eShop0402.aspx的浏览效果如图4-7所示。【技术提升】【任务4-3】创建嵌套母版页与基于子母版的内容页【任务描述】创建母版页eShopMasterPage0402.master，该母版页与任务4-1中所创建的母版页有所区别，不包含区块<div

class="search_rf_r">与</div>的内容，在此位置添加一个容器控件

ContentPlaceHolder。将母版页eShopMasterPage0401.master中如表4-5所示的区块内容创建为子母版subMasterPage0403.master的可编辑内容，即包含在子母版页的容器控件ContentPlaceHolder中。子母版页的其他内容与内容页eShop0402.aspx相同。【技术提升】【任务4-3】创建嵌套母版页与基于子母版的内容页表4-5

包含在子母版页的容器控件ContentPlaceHolder中的XHTML代码XHTML代码<div

class="search_r

f_r"><asp:DropDownList

ID="ddlCategory"

runat="server"

CssClass="input_b"><asp:ListItem

Value="0">所有分类</asp:ListItem><asp:ListItem

Value="01">

</asp:ListItem><asp:ListItem

Value="02">数码产品</asp:ListItem><asp:ListItem

Value="03">笔记本电脑</asp:ListItem><asp:ListItem

Value="04">台式电脑</asp:ListItem><asp:ListItem

Value="05">外设产品</asp:ListItem><asp:ListItem

Value="06">小家电</asp:ListItem></asp:DropDownList><asp:TextBox

ID="txtKeyword"

runat="server"

CssClass="input_b"Width="120"

onmouseover="this.focus()"onfocus="this.select()">请输入商品名称</asp:TextBox><asp:Button

ID="btnSearch"

runat="server"

Text="搜索"CssClass="go"/><asp:HyperLink

ID="HyperLink1"

runat="server"NavigateUrl="#">高级搜索</asp:HyperLink></div>【技术提升】【任务4-3】创建嵌套母版页与基于子母版的内容页【任务描述】（3）创建基于母版页subMasterPage0403.master的内容页eShop0403.aspx，该页面的浏览效果如图4-12所示。图4-12

基于子母版页的内容页eShop0403.aspx的浏览效果【技术提升】【任务4-3】创建嵌套母版页与基于子母版的内容页【任务实施】1．创建母版页eShopMasterPage0402.master2．创建子母版页subMasterPage0403.master3．设计子母版页subMasterPage0403.master4．创建基于子母版页的内容页eShop0403.aspx5．设计内容页eShop0403.aspx6．预览内容页eShop0403.aspx直接按F5键或者在主窗口中单击选择【调试】→【启动调试】命令浏览网页，Web页面eShop0403.aspx的浏览效果如图4-12所示。【技术提升】【任务4-4】应用

设置用户登录页面和控件的外观【任务描述】利用控件的【属性】窗口设置文本框的高度、宽度、背景颜色和边框等属性。利用【修改样式】

框设置div区块的外观属性。创建名称为“ 1”的

，在“ 1”中创建外观文件“SkinFile0401.skin”，该外观文件创建三个TextBox控件外观，其中包括两个命名外观和一个默认外观。另外创建一个BulletedList控件

名外观，BulletedList控件的每个列表项设置一个小

。在“ 1”中添加一个样式文件“style0402.css”，该样式文件中设置了超

的外观和悬停效果，同时还设置的TextBox控件背景颜色和边框效果。参考任务4-1和任务4-2的实施过程设计Web页面eShop0404.aspx，其设计外观效果如图4-19所示。【技术提升】【任务4-4】应用

设置用户登录页面和控件的外观图4-19Web页面eShop0404.aspx的初始浏览效果【技术提升】【任务4-4】应用

设置用户登录页面和控件的外观【任务实施】添加与设计Web页面eShop0404.aspx利用控件的【属性】窗口设置控件的外观属性利用【修改样式】

框设置页面的外观属性4．创建（1）添加和外观文件设置控件的外观属性文件夹（2）准备图像文件等其他资源在“

1”文件夹中新建一个子文件夹“images”，然后将一个图像文件icon04.gif拷贝到子文件夹“images”中即可。【技术提升】【任务实施】（3）创建外观文件在【解决方案资源管理器】中右键单击【任务4-4】应用

设置用户登录页面和控件的外观子文件夹“

1”，在弹出的快捷菜单中选择【添加新项】命令，如图4-31所示，打开【添加新项】框。在【添加新项】

框中单击选择模板“外观文件”选项，在“名称”文本框中输入“skinFile0401.skin”，如图4-32所示。然后单击【添加】按钮关闭该

框，即创建了一个外观文件，返回【解决方案资源管理器】，同时打开外观文件“skinFile0401.skin”的代码编辑窗口，在该代码编辑窗口中输入设置控件外观的源代码，代码如表4-7所示。设置单个Web页面的Theme属性或者StylesheetTheme属性通过设置Web页面中控件的SkinID属性应用【技术提升】【任务4-4】应用

设置用户登录页面和控件的外观【任务实施】5．在中创建样式文件设置页面和控件的外观样式中的样式表主要用于设置页面和XHTML控件的外观样式。中的外观设置和CSS样式，创建样式表文件应用

中的CSS样式6．预览Web页面eShop0404.aspxWeb页面eShop0404.aspx应用了其预览效果如图4-37所示。【知识集成】开发的工作强度，1．ASP.NET的母版页有哪些优点？（1）有利于

的

和修改，降低了提高了工作效率由于

的公共内容被集中在母版页中，因此，只要修改母版页，就可以快速完成

的修改和

任务。有利于实现页面布局与美化可以在母版页中对

页面的整体布局与美化效果进行规划与设计，内容页对应于母版页的局部区域，可以分别进行布局与美化。提高

内容的整合能力在母版页中允许添加文字、控件等Web元素，同时，也可为这些Web元素添加相应的事件处理程序等【知识集成】2．母版页和普通页面有何区别？（1）页面普通页面的有所不同示例如下：<%@

Page

Language="C#"

AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>母版页的

示例如下：<%@

Master

Language="C#"

AutoEventWireup="true"CodeFile="eShopMasterPage0401.master.cs"Inherits="eShopMasterPage0401"

%>扩展名不同普通页面的扩展名为“.aspx”，母版页的扩展名为“.master”。母版页可以使用1个或多个ContentPlaceHolder控件，而普通页面不可以使用该控件。【知识集成】3．何谓嵌套母版页，子母版有哪些特点？VisualStudio2008可以根据需要创建嵌套母版页，即一个母版页与另一个母版页关联，形成一种层次性嵌套结构。也就是说，可以在母版页中包含一个子母版页，以此来创建嵌套母版页。但需要明确的是无论母版页如何嵌套，都必须包含一个内容