实验25 网页的制作
实验目的
熟练掌握网页页面的基本设计手段
实验要求
1. 熟练掌握页面属性设置
2. 熟练掌握使用表格布局手段布局网页、表格及单元格的属性设置
3. 熟练掌握图片、flash文件的插入和设置
4. 熟练掌握超链接的设置
5. 掌握滚动字幕等Web组件的使用及水平线的使用
6. 掌握列表项的样式设置
实验内容及基本步骤
1. 设计出网页样式
使用图像设计软件或手绘出网页的样式，本实验完成后首页如图25-1所示。
图25 - 1 页面完成图
2. 设置页面属性
1) 双击“文件夹列表”视图中的文件“index.htm”，打开首页。
2) 选择菜单【格式】→【属性】，弹出网页属性对话框，选择“高级”标签，将“上边距”、“左边距”、“下边距”、“右边距”设置为0像素。如图25-2所示。
图25 - 2 网页属性设置
3) 选择菜单【格式】→【主题】，在窗口右边的“主题”栏目中选择“丝绸”主题。
3. 表格和单元格的属性设置
1) 选择菜单【表格(A)】→【插入表格】，弹出插入表格对话框，插入1行2列的表格，具体属性见表格25-1，如图25-3所示。设置好后，页面上有一个表格虚框。这是页面头部表格。
表格 25-1 页面头部表格属性表
属性名称 参数 属性名称 参数
行数 1 列数 2
对齐方式 居中 指定宽度 960像素
单元格衬距 0 单元格间距 0
边框粗细 0 背景 自动
图25 – 3 表格属性对话框
2) 将光标放在页面头部表格的第一个单元格内，选择菜单【表格(A)】→【表格属性】→【单元格(E)】，设置单元格宽度为208像素。
3) 同样地，将光标放在第二个单元格内，设置单元格宽度752像素，高度85像素，并使用背景图片images/banner.jpg，如图25-4所示。
图25 - 4 单元格属性对话框
4. 插入图片并设置超链接
1) 将光标停在页面头部表格的第一个单元格内，选择菜单【插入】→【图片】→【来自文件…】，选择“images”文件夹下的“logo.jpg”，表格的第一个单元格内就插入了一张图片。
2) 在页面上选定要设置超链接的图片Logo，选择菜单【插入】→【超链接】，设置链接地址为：index.htm，点击【屏幕提示】按钮，设置超链接的屏幕提示为“红酒品鉴”，点击【目标框架】按钮，设置目标框架为“新建窗口”。如图25-5所示。
图25 – 5 超链接属性设置
3) 保存文件，选择菜单【文件】→【在浏览器中预览】，或直接按【F12】在浏览器中预览，并更改链接的目标框架，观察目标框架不同时打开窗口方式的区别。
5. 插入flash元素
1) 将光标放在页面头部表格的第二个单元格内，选择菜单【插入】→【图片】→【Flash影片】。将文件2.swf插入。
2) 右击插入的Flash，选择快捷菜单【Flash影片属性(F)…】，设置其背景色透明，指定其大小为宽度752像素，高度85像素（注意：如果要同时更改宽度和高度，必须去掉保持纵横比复选框前面的勾）。如图25-6所示。
图25 – 6 flash影片属性对话框
3) 保存文件并点击 按钮预览。再点击 按钮，回到编辑状态。观察一下预览视图与在浏览器中预览的区别。
6. 页面导航栏设计
1) 依步骤2，在页面头部表格的下方，插入一个1行6列表格，表格属性见表格25-2，这是导航表格。
表格 25-2 导航表格属性
属性名称 参数 属性名称 参数
行数 1 列数 6
对齐方式 居中 指定宽度 960像素
单元格衬距 0 单元格间距 0
边框粗细 0 背景 自动
2) 从左侧“文件夹列表”窗口中选择index.htm，按住左键不放，将其拖到网页中导航表格的第一单元格中，导航表格中显示的导航名称是实验24中导航视图中修改的名称。依次拖动其它五个文件到导航表格中相应的单元格内。如图25-7所示。
图25 – 7 导航栏设计
7. 页面滚动字幕设计
1) 将光标放在导航表格下方，选择菜单【插入】→【Web组件…】，打开插入Web组件对话框，组件类型选择“动态效果”，选择一种效果“字幕”，如图25-8步骤1、2所示。
图25 – 8 滚动字幕的设置
2) 字幕属性对话框中，设置文本为“弘扬红酒文化，传播红酒新闻”，可以设置流动的方向，滚动的速度等，点击样式按钮还可以设置滚动文本的文字属性。如图25-8步骤3所示。
3) 保存后按【F12】观察效果。
8. 主要内容部分设计
1) 在滚动字幕下方，插入一个2行3列的表格，这是主要内容表格，具体属性见表格25-3。
表格 25-3 主要内容表格属性
属性名称 参数 属性名称 参数
行数 2 列数 3
对齐方式 居中 指定宽度 940像素
单元格衬距 5 单元格间距 0
边框粗细 0 背景 自动
2) 右击主要内容表格的第一行第一列单元格（以下用[行号，列号]方式表示），设置[1，1]单元格宽度460像素，高度28像素，背景色为#FF9E00，并输入文字：“天天品酒会”。如图25-9所示。
图25 – 9 单元格及背景色设置
3) 单元格[1，2]设置宽度为5像素，其它用默认值。
4) 单元格[1，3]设置属性同单元格[1，1]。并输入文字：“红酒文摘”。
9. 项目列表的使用
1) 设置主要见容表格的单元格[2，1] 背景色为白色，然后在其中插入一个1行2列的表格，只将边框设置为0，其余用默认，这是列表1表格。
2) 在列表1表格的单元格[1，1]中插入图片images/redwine.jpg
3) 列表1表格单元格[1,2]中，先点击工具栏上的项目符号图标 ，文字从文件夹“images”下的“文本.txt”中复制“天天品酒会”部分（注意要一行行地复制，粘贴好一行就按回车）。然后在文字中任意位置右击，选择【列表属性】，选择【样式按钮】，在“修改样式对话框中”，选择【格式】按钮，修改文字颜色为“黑色”，段落的行距大小设置为“1.5倍行距”。也可以直接将所有列表文字选中后，选择菜单【格式】→【字体】设置文本颜色为“黑色”，选择菜单【格式】→【段落】，设置行距大小为“1.5倍行距”。
4) 在“列表属性对话框中”选择“图片项目符号”标签，选择【浏览】按钮，可以将默认的项目符号图片改为指定的图片。
5) 按上述步骤完成设置主要内容表格单元格[2，3]的设置，插入“红酒文摘”部分的列表。
10. 水平线的使用
1) 主要内容表格下方插入一条水平线。选择菜单【插入】→【水平线】，设置水平线高度为1像素，居中，颜色为白色，选择“实线（无阴影）”。如图25-10所示。
图25 – 10 水平线属性对话框
2) 水平线下输入文字：Copyright© 自己的姓名学号，设置文字居中。
11. 保存文件并用浏览器预览。
温馨提示：答案为网友推荐，仅供参考