实验25 网页的制作.docVIP

实验25 网页的制作 实验目的 熟练掌握页面的基本设计手段 实验要求 使用表格布局手段设计出网页布局 完成首页的建立，完成页面如图所示 实验内容及基本步骤 设置页面属性 双击“文件夹列表”中的“index.htm”，打开首页。 选择菜单【格式】→【属性】，弹出网页属性对话框，如图所示将页面边距设置为0。 图6 - 1 网页属性设置 选择菜单【格式】→【主题】，在窗口右边的“主题”栏目中选择“丝绸”主题。 页面头部的设计 选择菜单【表格(A)】→【插入表格】，弹出插入表格对话框，插入1*2表格，如图6-7，具体设置见表，设置好后，页面上有一个表格虚框。这是页面头部。 图6 - 2 表格属性对话框 表格 1 页面头部表格属性表 属性名称 参数 属性名称 参数 行数 1 列数 2 对齐方式 居中 指定宽度 960像素 单元格衬距 0 单元格间距 0 边框粗细 0 背景 自动 将光标停在第一个单元格内，选择菜单【表格(A)】→【表格属性】→【单元格(E)】，设置单元格宽度为208像素。 同样地，将光标放在第二个单元格内，设置单元格属性如图所示。 图6 - 3 单元格属性对话框 将光标停在页面头部表格的第一个单元格内，选择菜单【插入】→【图片】→【来自文件…】，选择“images”文件夹下的“logo.jpg”，表格的第一个单元格内就插入了一张图片。 点击网站Logo图，选择菜单【插入】→【超链接】，选择链接地址为：index.htm，分别点击【屏幕提示】和【目标框架】按钮，如图设置。 图6 - 4 超链接属性设置 保存文件，选择菜单【文件】→【在浏览器中预览】，或直接按【F12】在浏览器中预览，并更改链接的目标框架，观察选择不同时打开窗口方式的区别。 将光标放在第一个表格的第二个单元格内，选择菜单【插入】→【图片】→【Flash影片】。选择文件2.swf插入。 右击插入的Flash，选择快捷菜单【Flash影片属性(F)…】，如图设置属性。保存并点击按钮预览。再点击按钮，回到编辑状态。观察一下预览视图与在浏览器中预览的区别。 图6 - 5 flash影片属性对话框 页面导航栏设计 将光标放在页面头部表格的下方，插入一个1*6表格，表格属性见表，这是导航表格。 表格 2 导航表格属性 属性名称 参数 属性名称 参数 行数 1 列数 6 对齐方式 居中 指定宽度 960像素 单元格衬距 0 单元格间距 0 边框粗细 0 背景 自动 在导航表格中，从左侧文件夹列表中选择index.htm，按住左键不放，将其拖到网页中刚做好的表格的第一格中，依次拖动其他五个文件到相应的单元格内，如图所示。 图6 - 6 导航栏设计 页面滚动字幕设计 将光标放在导航栏表格下方，选择菜单【插入】→【Web组件…】，打开对话框，组件类型选择“动态效果”，选择一种效果“字幕”，如图所示设置。 图6 - 7 滚动字幕的设置 保存后按【F12】观察效果。 主要内容部分设计 将光标放在滚动字幕下方，插入一个2*3的表格，这是主要内容表格，具体设置见下表。 表格 4 主要内容表格属性 属性名称 参数 属性名称 参数 行数 2 列数 3 对齐方式 居中 指定宽度 940像素 单元格衬距 5 单元格间距 0 边框粗细 0 背景 自动 右击此表的第一个单元格，如图设置单元格属性。并输入文字：“天天品酒会”。 图6 - 8 单元格及背景色设置 第二个单元格设置宽度为5像素，其它用默认值。 第三个单元格设置同第一个单元格。并输入文字：“红酒文摘”。 在第二行第一列单元格中，设置单元格背景为白色，然后插入一个1*2的表格，只将行列数改变，并将边框设置为0，其余用默认。在左边单元格中插入图片redwine.jpg，右边单元格中，先点击工具栏上的项目符号图标，文字从文件夹“images”下的“文本.txt”中复制“天天品酒会”部分（注意要一行行地复制，粘贴好一行就按回车）。然后在文字中任意位置右击，选择【列表属性】，选择【样式按钮】，在“修改样式对话框中”，选择【格式】按钮，修改文字颜色为“黑色”，段落的行距大小设置为“1.5倍行距”。也可以直接将所有列表文字选中后，选择菜单【格式】→【字体】设置文本颜色为“黑色”，选择菜单【格式】→【段落】，设置行距大小为“1.5倍行距”。 在第二行第三列是“红酒文摘”的列表，可按上述步骤课后完成设置。 页脚部分设计 在主要内容表格下方插入一个1*1的页脚表格。表格宽920像素，单元格间距、单元格衬距、表格边框都设置为0，表格对齐方式设置为居中。 光标放在最下面一个表格，选择菜单【插入】→【水平线】，如图所示设置参数。 图6 - 9 水平线属性对话框 输入文字：Copyright? 自己的姓名学号。点击工具栏中的居中按