实验网页的制作.docx

1、实验网页的制作实验：网页的制作实验目的熟练掌握页面的基本设计手段实验要求1. 使用表格布局手段设计出网页布局 2. 完成首页的建立，完成页面如图所示实验内容及基本步骤1. 设置页面属性1) 双击“文件夹列表”中的“index.htm”，打开首页。2) 选择菜单【格式】【属性】，弹出网页属性对话框，如图所示将页面边距设置为0。图6 - 1 网页属性设置3) 选择菜单【格式】【主题】，在窗口右边的“主题”栏目中选择“丝绸”主题。2. 页面头部的设计1) 选择菜单【表格(A)】【插入表格】，弹出插入表格对话框，插入1*2表格，如图6-7，具体设置见表，设置好后，页面上有一个表格虚框。这是页面头部。图

2、6 - 2 表格属性对话框表格 1 页面头部表格属性表属性名称参数属性名称参数行数1列数2对齐方式居中指定宽度960像素单元格衬距0单元格间距0边框粗细0背景自动2) 将光标停在第一个单元格内，选择菜单【表格(A)】【表格属性】【单元格(E)】，设置单元格宽度为208像素。3) 同样地，将光标放在第二个单元格内，设置单元格属性如图所示。图6 - 3 单元格属性对话框4) 将光标停在页面头部表格的第一个单元格内，选择菜单【插入】【图片】【来自文件】，选择“images”文件夹下的“logo.jpg”，表格的第一个单元格内就插入了一张图片。5) 点击网站Logo图，选择菜单【插入】【超链接】，选择

3、链接地址为：index.htm，分别点击【屏幕提示】和【目标框架】按钮，如图设置。图6 - 4 超链接属性设置6) 保存文件，选择菜单【文件】【在浏览器中预览】，或直接按【F12】在浏览器中预览，并更改链接的目标框架，观察选择不同时打开窗口方式的区别。7) 将光标放在第一个表格的第二个单元格内，选择菜单【插入】【图片】【Flash影片】。选择文件2.swf插入。8) 右击插入的Flash，选择快捷菜单【Flash影片属性(F)】，如图设置属性。保存并点击按钮预览。再点击按钮，回到编辑状态。观察一下预览视图与在浏览器中预览的区别。图6 - 5 flash影片属性对话框3. 页面导航栏设计1) 将

4、光标放在页面头部表格的下方，插入一个1*6表格，表格属性见表，这是导航表格。表格 2 导航表格属性属性名称参数属性名称参数行数1列数6对齐方式居中指定宽度960像素单元格衬距0单元格间距0边框粗细0背景自动2) 在导航表格中，从左侧文件夹列表中选择index.htm，按住左键不放，将其拖到网页中刚做好的表格的第一格中，依次拖动其他五个文件到相应的单元格内，如图所示。图6 - 6 导航栏设计4. 页面滚动字幕设计1) 将光标放在导航栏表格下方，选择菜单【插入】【Web组件】，打开对话框，组件类型选择“动态效果”，选择一种效果“字幕”，如图所示设置。图6 - 7 滚动字幕的设置2) 保存后按【F1

5、2】观察效果。5. 主要内容部分设计1) 将光标放在滚动字幕下方，插入一个2*3的表格，这是主要内容表格，具体设置见下表。表格 4 主要内容表格属性属性名称参数属性名称参数行数2列数3对齐方式居中指定宽度940像素单元格衬距5单元格间距0边框粗细0背景自动2) 右击此表的第一个单元格，如图设置单元格属性。并输入文字：“天天品酒会”。图6 - 8 单元格及背景色设置3) 第二个单元格设置宽度为5像素，其它用默认值。4) 第三个单元格设置同第一个单元格。并输入文字：“红酒文摘”。5) 在第二行第一列单元格中，设置单元格背景为白色，然后插入一个1*2的表格，只将行列数改变，并将边框设置为0，其余用默

6、认。在左边单元格中插入图片redwine.jpg，右边单元格中，先点击工具栏上的项目符号图标，文字从文件夹“images”下的“文本.txt”中复制“红酒文摘”部分（注意要一行行地复制，粘贴好一行就按回车）。然后在文字中任意位置右击，选择【列表属性】，选择【样式按钮】，在“修改样式对话框中”，选择【格式】按钮，修改文字颜色为“黑色”，段落的行距大小设置为“1.5倍行距”。也可以直接将所有列表文字选中后，选择菜单【格式】【字体】设置文本颜色为“黑色”，选择菜单【格式】【段落】，设置行距大小为“1.5倍行距”。6) 在第二行第三列是“红酒文摘”的列表，可按上述步骤课后完成设置。6. 页脚部分设计1) 在主要内容表格下方插入一个1*1的页脚表格。表格宽920像素，单元格间距、单元格衬距、表格边框都设置为0，表格对齐方式设置为居中。2) 光标放在最下面一个表格，选择菜单【插入】【水平线】，如图所示设置参数。图6 - 9 水平线属性对话框3) 输入文字：Copyright 自己的姓名学号。点击工具栏中的居中按钮，使文字居中。4) 选中文字后，选择菜单【格式】【字体】，可以设置字体、字号、字色、下划线等。7. 完成后，保存并用浏览器预览。