下载掌阅APP，畅读海量书库
立即打开
进一步理解在Visual Studio环境中创建、编辑和引用母版页、内容页的基本步骤，理解母版页和内容页之间的关系。综合运用母版页、内容页和CSS+DIV布局技术设计出实用的、具有统一风格的网站页面体系。
要求使用母版页技术控制站内其他网页的外观风格。其中，母版页设计效果如图3-15所示，引用了母版页的Default.aspx和QA.aspx内容页在浏览器中呈现如图3-16所示的效果。引用了母版页的Slight.aspx内容页呈现如图3-17所示的效果。
图3-15 母版页MasterPage.master设计效果
图3-16 引用母版页后的Default.aspx内容页效果
图3-17 引用母版页后的Slight.aspx内容页效果
1.准备需要的图片文件
任何一个网页的页面设计都会用到一些图片文件，一般情况下，这些图片文件可根据设计需要事先使用Photoshop等图片编辑软件制作出来。也可以通过搜索引擎从Internet中下载。
本实训页面设计中需要的图片文件有标题栏背景图片logo.jpg、版权栏背景图片bottom.jpg，以及Slight.aspx中使用的3张图片1.jpg、2.jpg和3.jpg。
新建一个ASP.NET空网站，在站点文件夹中创建一个名为images的子文件夹，将本实训中需要的所有图片文件复制到该文件夹中。如果在解决方案资源管理器中不能看到新建的文件夹，可右击网站名称，在弹出的快捷菜单中选择“刷新文件夹”命令使其显示出来。
2.设计母版页
向网站中添加一个母版页MasterPage.master，添加一个级联样式表文件StyleSheet.css。母版页由用于显示标题图片的logo层、显示左侧专栏的left层、显示具体专栏内容的leftco-lumn层和显示底部版权信息的bottom层组成。其中，leftcolumn层包含在left层内部，层内包含一个4行1列的表格，用于说明文字和3个超链接标签控件的定位。
MasterPage.master的HTML代码如下。
说明：3个超链接标签控件的NavigateUrl属性值（用户单击超链接后跳转到的目标URL）可以在源视图中通过代码设置，也可以在设计视图中选中控件后，在“属性”窗口中设置。
3.设计母版页使用的样式表
在解决方案资源管理器中，将StyleSheet.css拖动到MasterPage.master的<head>和</head>标记之间，完成对样式表的引用。
StyleSheet.css的代码如下。
4.设计内容页
在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令，在弹出的对话框中选择“Web窗体”模板，将文件命名为Default.aspx，并注意选择“选择母版页”复选框，单击“添加”按钮，在弹出的对话框中选择前面创建的MasterPage.master为网页的母版。
切换到Default.aspx的设计视图，选择“表”→“插入表”命令，向由系统自动创建的Content2控件中添加一个2行1列的表格（第1行输入内容标题，第2行输入具体内容），适当调整第2行的高度，使整个表格的高度与left层的高度相等，并通过设置第2行<td>元素的line-height属性适当调整文字的行距。
表格设计完毕后，向其中录入需要的文本。按〈F5〉键在浏览器中打开页面，将能看到预期的设计效果。
另一个内容页QA.aspx的设计可参照上述方法完成，也可在解决方案资源管理器中直接将Default.aspx页面拖动到网站名称上得到其副本，将副本文件重命名为QA.aspx后修改其中内容来完成页面设计。
用于显示图片列表的内容页Slight.aspx需要在Content2控件中添加一个<div>元素和3个Image控件，在每个Image控件中显示一幅事先准备好的、存放在images文件夹下的图片。
Slight.aspx的HTML代码如下。
设计完毕后按〈F5〉键，在浏览器中打开页面，将能看到预期的设计效果。