实验二 表格布局网页

《实验二 表格布局网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验二表格布局网页、超链接和CSS应用一、实验目的1、掌握使用嵌套表格布局网页的方法2、掌握插入FLASH、音频等多媒体元素的方法二、实验内容1、站点导入步骤：（1）将实验站点根文件夹shiyan2复制到最后一个硬盘。（2）选择菜单“站点”—“管理站点”命令，在打开的站点管理对话框中单击“导入”按钮，在导入站点对话框中选择站点文件“shiyan2.ste”导入到dreamweaver中，导入时选择shiyan2文件夹为该站点的根文件夹。说明：所有相关文件在发给大家的实验文件夹中。2、表格嵌套布局练习（1）、利用表格嵌套布局制作一个网页，网页效果

2、如下图：基本布局框架如下图所示：（2）在shiyan2站点中新建一个index.html文件。（3）在index.html文件中插入一个4行1列表格（表格1），表格宽度为“770”像素，居中对齐。相关属性如下图所示：（4）将该表格的第一个单元格高度设置为“195”像素，并设置单元格背景图片为“m2.jpg”。（5）将该表格的第二个单元格拆分为3列，适当调整单元格高度。（6）将表格1第二行第一列单元格的宽度设置为“252”像素，水平对齐方式为“居中对齐”，垂直设置为“顶端对齐”，并在该单元格中插入一个3行1列表格（表格2）。表格2相关属性如下图所

3、示：（7）在表格2的第二行单元格中任意输入3行文字。（8）将表格2的第三行单元格水平对齐方式设置为“居中对齐”，垂直设置为“顶端对齐”，并在该单元格中插入一个1行2列的表格（表格3），表格宽度为98%.（9）将表格3的左边单元格宽度设置为“150”，并插入图片“01d.jpg”。（10）将表格3的右边单元格拆分为5行，第一行插入图片“ozfq.jpg”，其余几行设置行高为“26”，背景图片均为“bg5.gif”。在第二行插入图片“xin.gif”，设置该图片的水平边距为“5”，输入文字“法国”。其余3行设置方式相同。设置完成后效果如下图所示：（

4、11）复制表格3，在表格3下方粘贴（即插入表格4），将表格4的内容修改为下图所示内容：（12）将表格1第二行第二列单元格的宽度设置为“366”，水平对齐方式为“居中对齐”，垂直设置为“顶端对齐”。在该单元格中插入一个1行2列表格（表格5），表格宽度为“98%”。（13）将表格5的左边单元格宽度设置为”3%”，设置背景图片为“eb_4.jpg”。（14）将表格5的右边单元格拆分为5行，第一行插入图片“xyzd.jpg”。其余4行设置背景图片为“bg5.gif”。（15）在其余4行中输入相应文字内容，并适当调整各行行高。效果如下图所示：（16）在表

5、格1第二行的第三列中插入一个7行1列的表格（表格6），表格宽度为“100%”。在该表格的单元格中依次插入图片“photo.jpg”、“web_homem.jpg”、“web_rjm.jpg”、“web_tipm.jpg”、“web_phm.jpg”、“web_xinxim.jpg”、“web_emailm.jpg”。（17）在表格1的第三行输入文字“友情链接：乐山师范学院百度”。（18）将表格1的最后一行背景颜色设置为“#FFFFCC”，并输入版权信息。版权信息为自己的姓名。（19）保存文件并在浏览器中预览效果。3、多媒体应用（1）插入FLAS

6、H动画①在index.html文件中的表格1的第一行（即LOGO区）插入一个FLASH动画“fly.swf”，将该FLASH动画的高改为“195”，宽改为“770”。②设施FLASH动画背景为透明方法：选中Flash动画后，单击“属性”面板中的“参数”按钮，弹出“参数”对话框。单击其中的“加号”按钮，则在参数下会出现一个文本框，在参数文本框中输入参数为wmode，值为transparent。③保存后在浏览器中预览效果。（2）插入背景音乐①在index.html文件中的最后一行插入音频文件“bgmusic.mp3”。②设置该音频插件的参数如下图所

7、示：③保存后在浏览器中预览效果。4、超链接的应用（1）创建外部链接①将index.html文件底部的文字“乐山师范学院”设置链接地址为“http://210.41.160.7”，文字“百度”的链接地址为“http://www.baidu.com”。两个链接的目标都为“_blank”。②在页面属性中设置超链接的属性如下图所示：③保存后在浏览器中预览效果。（2）创建内部链接①将index.html文件中的旅游攻略图片，设置链接为shiyan2文件夹下的“gl.html”文件。链接目标为“_blank”。②设置gl.html文件中的文字“回到首页”的

8、链接文件为“index.html”。链接目标为“_blank”。（3）创建电子邮件链接将index.html文件中的“给我写信”图片设置电子邮件链接为