项目4 模块1 分支页的设计与制作任务3

项目4 分支页的设计与制作模块4-2：分支页布局及制作学习目标：✓会使用框架和表格进行布局✓会利用框架制作页面✓会使用创建好的框架制作班级新闻管理页面。

✓4-2-1工作任务✓使用框架和表格进行布局设计。

✓使用创建好的框架制作班级新闻管理页面。

任务1 使用框架和表格进行布局设计。

【任务分析】框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。

使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。

利用框架最大的特点就是使网站的风格一致。

通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。

一个框架结构有两部分网页文件构成：框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。

框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。

【操作步骤】1.创建框架。

（1）执行“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中，选择“常规”选项目卡“类别”中的“框架集”选项，在右边的“框架集”列表中选择“上方固定，左侧嵌套”选项，如图3- 1所示。

图3- 1 框架集“新建文档”对话框（2）单击【创建】按钮，在弹出的“框架标签辅助功能属性”对话框中，不需做任何更改，单击【确定】按钮，即可创建一个空白的框架集网页。

2.保存框架集和各框架。

每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。

（1）执行“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框。

因为阴影出现在整个框架集内侧，所以询问的是框架集的名称，将整个框架集以manage.asp为文件名保存于C:\ClassWeb\admin文件夹下。

（2）单击【保存】按钮即可保存框架集，接下来出现第2个“另存为”对话框，因为右侧框架内侧出现阴影，询问的是右侧框架的文件名，将右侧框架以main.asp为文件名保存于C:\ClassWeb\admin文件夹下。

（3）接下来出现第3个“另存为”对话框，因为左侧框架内侧出现阴影，询问的是左侧框架的文件名，将左侧框架以left.asp为文件名保存于C:\ClassWeb\admin文件夹下。

（4）接下来出现第4个“另存为”对话框，因为头部框架内侧出现阴影，询问的是头部框架的文件名，将头部框架以top.asp为文件名保存于C:\ClassWeb\admin文件夹下。

3.设置框架文件。

（1）设置头部框架①在“设计”视图方式下，将光标置于头部框架中，执行“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”/“外观”选项中，“左边距”设置为0，“上边距”设置为0，如图3- 2所示。

图3- 2 “页面属性”对话框②选中头部框架下侧的边框线，在其“属性”面板中设置“行”值为192像素，如图3- 3所示。

图3- 3 头部框架行值属性设置（2）设置左侧框架①在“设计”视图方式下，将光标置于左侧框架中，执行“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”/“外观”选项中，“左边距”设置为0，“上边距”设置为0，如图3- 2所示。

②选中左侧框架的边框线，在其“属性”面板中设置“列”值为175像素，如图3- 4所示。

图3- 4 左侧框架列值属性设置（3）设置右侧框架在“设计”视图方式下，将光标置于左侧框架中，执行“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”/“外观”选项中，“左边距”设置为0，“上边距”设置为0，如图3- 2所示。

（4）再次保存框架执行“文件”→“保存全部”命令，将上述所做的修改以原文件名保存。

使用框架和表格完成了页面的布局。

任务2 使用创建好的框架制作班级新闻管理页面。

【任务分析】利用创建好的框架进行页面制作，一组框架通常包括一个含有导航条的框架和另一个显示主要内容页面的框架。

【操作步骤】1.双击C:\ClassWeb\admin\manage.asp文件，进入其“设计视图方式”。

2.创建头部框架文件top.asp头部框架文件top.asp主要由banner和导航栏目组成。

这些内容我们已在前面的任务中已经创建了库文件top.lbi，所以这里我们插入C:\ ClassWeb\news\top.lbi库文件。

3.创建左侧框架文件left.asp（1）在“设计”视图方式下，插入一个6行1列的表格，设置表格的宽度为175像素，“边框”、“间距”和“填充”属性值均为0。

（2）将光标定位于表格的第1行中，插入C:\ClassWeb\news\images\ny1.jpg。

将光标定位于表格的第2行中，插入C:\ClassWeb\news\images\hx1.jpg图像。

（3）将光标定位于表格的第3行中，单击属性面板中“背景”文本框右边的“单元格背景URL”图标，在弹出的“选择图像源文件”对话框中选择C:\ClassWeb\news\images\hx2.jpg插入，在属性面板中将单元格“高”设为55，然后输入文字“班级新闻”设置文字字体和大小，设置文字居中（依据自己的布局风格而定，这里我们设定字体大小为20像素）。

（4）用同（5）的方法，在表格2的第4、5行中插入背景图像C:\ClassWeb\news\images\hx2.jpg，然后输入相应的文字内容为“课件下载”“IT知识”并对字体和大小设置为与“班级新闻”同样的格式。

（5）为输入的“班级新闻”设置超链接，使之链接到C：\ClassWeb\admin文件夹下的main.asp，“目标”框中选取“mainFrame”。

同样方法为“课件下载”设置超链接，使之链接到C：\ClassWeb\course\coursemanage.asp文件，“目标”框中选取“mainFrame”。

为“IT知识”设置超链接，使之链接到C：\ClassWeb\it\itmanage.asp文件，“目标”框中选取“mainFrame”。

4.创建右侧框架文件main.asp（1）光标定位于右侧框架内，插入一个1行1列的表格，记为表格1，设置表格1的宽度为825像素，高度为540像素，边框、间距和填充的属性值设置为0，在表格内插入背景图像C:/ClassWeb/news/images/xwnrbj.jpg，设置表格的对齐方式为居中对齐。

（2）在背景图像上插入层，调整层的大小和位置。

（3）在层上插入一个3行3列的表格，记为表格2，设置表格的宽度为100%，使之正好与层的宽度一致，边框为1，边框颜色设置为#E0E1E9。

（4）将表格2的第1行的3列合并成1列，在合并后的单元格内插入一个1行2列的表格，设置表格的宽度和高度均为100%，记为表格3，边框、间距和填充的属性值均设置为0，设置表格的背景色为：#EAF7FD。

（5）设置表格3的单元格1的宽度为80%，单元格2的宽度为20%。

在单元格1内输入文字：[新闻管理]，在单元格2内输入文字：<增加新闻>。

设置“[新闻管理]”字体大小16像素加粗。

设置<增加新闻>对齐属性为居中对齐。

调整表格2第2行各列的宽度，第1列的宽度为76%，第2和第3列的宽度分别为12%。

将光标定位于表格2第2行第2列和第3列单元格内，分别输入文字“修改”和“删除”。

（6）将光标定位于表格2第2行第1列单元格内，进入其“代码”视图方式，编写代码，完成新闻标题和新闻填加时间的显示。

其中时间以xxxx年xx月xx 日的形式出现。

代码如下所示：<%= rs("title") %>(<%= year(rs("addtime")) %>年<%= month(rs("addtime")) %>月<%= day(rs("addtime")) %>日)（7）参照前面已讲方法，连接数据库，编写代码将数据库news数据表中所有的标题信息在表格2中显示出来。

（8）将光标定位于表格2第3行内，将第3行的所有单元格合并为一个单元格，并在单元格内输入文字“共有条记录，页码：/ ”，在属性面板中设置文字对齐方式为居中对齐。

（9）参照任务1中的分页显示方法将步骤8中的所有标题信息以每页显示8条记录的形式进行分页显示。

（10）设置表格的背景色为蓝白交替效果：在“代码”视图方式下，将光标定位于代码i=i+1语句的下方，完成如下代码的编写：if color="#FFFFFF" thencolor="#E7F6FB"elsecolor="#FFFFFF"end if在“设计”视图方式下选中表格2的第2行，进入其“代码”视图方式，在第2行对应的<tr>标签内输入代码完成背景色的交替。

代码如下：<tr bgcolor="<%= color %>">（11）链接外部样式format.css完成页面美化效果。