购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.4 实训
——使用母版页和内容页

3.4.1 实训目的

进一步理解在Visual Studio环境中创建、编辑和引用母版页、内容页的基本步骤,理解母版页和内容页之间的关系。综合运用母版页、内容页和CSS+DIV布局技术设计出实用的、具有统一风格的网站页面体系。

3.4.2 实训要求

要求使用母版页技术控制站内其他网页的外观风格。其中,母版页设计效果如图3-15所示,引用了母版页的Default.aspx和QA.aspx内容页在浏览器中呈现如图3-16所示的效果。引用了母版页的Slight.aspx内容页呈现如图3-17所示的效果。

图3-15 母版页MasterPage.master设计效果

图3-16 引用母版页后的Default.aspx内容页效果

图3-17 引用母版页后的Slight.aspx内容页效果

3.4.3 实训步骤

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〉键,在浏览器中打开页面,将能看到预期的设计效果。 4JgOwRX1Td21Pk27vIw6phkP0mUBinbx9/IPRhe4QcJ7NC4s9IS+KptR15ARViFl

点击中间区域
呼出菜单
上一章
目录
下一章
×