实验二 表格布局网页.docVIP

实验二 表格布局网页、超链接和CSS应用 实验目的 1、掌握使用嵌套表格布局网页的方法 2、掌握插入FLASH、音频等多媒体元素的方法 二、实验内容 1、站点导入 步骤： （1）将实验站点根文件夹shiyan2复制到最后一个硬盘。 （2）选择菜单“站点”—“管理站点”命令，在打开的站点管理对话框中单击“导入”按钮，在导入站点对话框中选择站点文件“shiyan2.ste”导入到dreamweaver中，导入时选择shiyan2文件夹为该站点的根文件夹。 说明：所有相关文件在发给大家的实验文件夹中。 2、表格嵌套布局练习 （1）、利用表格嵌套布局制作一个网页，网页效果如下图： 基本布局框架如下图所示： （2）在shiyan2站点中新建一个index.html文件。 （3）在index.html文件中插入一个4行1列表格（表格1），表格宽度为“770”像素，居中对齐。相关属性如下图所示： （4）将该表格的第一个单元格高度设置为“195”像素，并设置单元格背景图片为“m2.jpg”。 （5）将该表格的第二个单元格拆分为3列，适当调整单元格高度。 （6）将表格1第二行第一列单元格的宽度设置为“252”像素，水平对齐方式为“居中对齐”，垂直设置为“顶端对齐”，并在该单元格中插入一个3行1列表格（表格2）。表格2相关属性如下图所示： （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行设置方式相同。设置完成后效果如下图所示： （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）在表格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）插入FLASH动画 ①在index.html文件中的表格1的第一行（即LOGO区）插入一个FLASH动画“fly.swf”，将该FLASH动画的高改为“195”，宽改为“770”。 ②设施FLASH动画背景为透明方法：选中Flash动画后，单击“属性”面板中的“参数”按钮，弹出“参数”对话框。单击其中的“加号”按钮，则在参数下会出现一个文本框，在参数文本框中输入参数为wmode，值为transparent。 ③保存后在浏览器中预览效果。 （2）插入背景音乐 ①在index.html文件中的最后一行插入音频文件“bgmusic.mp3”。 ②设置该音频插件的参数如下图所示： ③保存后在浏览器中预览效果。 4、超链接的应用 （1）创建外部链接 ①将index.html文件底部的文字“乐山师范学院”设置链接地址为“”，文字“百度”的链接地址为“”。两个链接的目标都为“_blank”。 ②在页面属性中设置超链接的属性如下图所示： ③保存后在浏览器中预览效果。 （2）创建内部链接 ①将index.html文件中的旅游攻略图片，设置链接为shiyan2文件夹下的“gl.html”文件。链接目标为“_blank”。 ②设置gl.html文件中的文字“回到首页”的链接文件为“index.html”。链接目标为“_blank”。 （3）创建电子邮件链接 将index.html文件中的“给我写信”