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