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 相关属性如下图所示：（7）在表格 2 的
3、第二行单元格中任意输入 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）复制表
4、格 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）插入 FLASH 动画在 index.h
6、tml 文件中的表格 1 的第一行（即 LOGO 区）插入一个 FLASH 动画“fly.swf”，将该 FLASH 动画的高改为“195”，宽改为“770”。设施 FLASH 动画背景为透明方法：选中 Flash 动画后，单击“属性”面板中的“参数”按钮 ，弹出“参数 ”对话框。单击其中的“加号”按钮 ，则在参数下会出现一个文本框，在参数文本框中输入参数为 wmode，值为 transparent。保存后在浏览器中预览效果。（2）插入背景音乐在 index.html 文件中的最后一行插入音频文件“bgmusic.mp3”。设置该音频插件的参数如下图所示：保存后在浏览器中预览效果。4、超链接的
7、应用（1）创建外部链接将 index.html 文件底部的文字“乐山师范学院”设置链接地址为“http:/210.41.160.7”，文字“百度”的链接地址为“http:/”。两个链接的目标都为“_blank”。在页面属性中设置超链接的属性如下图所示：保存后在浏览器中预览效果。（2）创建内部链接将 index.html 文件中的旅游攻略图片，设置链接为 shiyan2 文件夹下的“gl.html”文件。链接目标为“_blank”。设置 gl.html 文件中的文字“回到首页”的链接文件为“index.html”。链接目标为“_blank”。（3）创建电子邮件链接将 index.html 文件中
8、的“给我写信”图片设置电子邮件链接为自己的信箱。（4）锚点连接打开 hiyan2 文件夹下的“gl.html”文件。将光标定位于文件中的文字“三、餐饮”后，选择“插入”|“命名锚记”命令，在“命名锚记”对话框中设置锚记名称为“cy” 。用同样的方法在文字“四、紧急联络方式”后加上锚记“lxfs” 。选择文件中最上方的文字“餐饮” ，在“属性”面板的“链接”组合框中输入“#cy” 。用同样的方法给最上方的文字“紧急联络方式”设置锚记链接。保存后在浏览器中预览效果。5、CSS 样式表的应用（1）创建主页字体样式单击“CSS 样式”面板右下角的“新建 CSS 规则”按钮，设置属性如下图所示：在 CS
9、S 规则定义对话框中设置属性如下图所示：选择 index.html 文件中文字。在属性面板设置文字样式为“ziti”，如下图所示（2）创建表格边框样式单击“CSS 样式”面板右下角的“新建 CSS 规则”按钮，设置属性如下图所示：在 CSS 规则定义对话框中设置属性如下图所示：选择 index.html 文件中表格 1，应用样式“bgbk”。如单元格需要加虚线边框，则可以选择单元格应用上面制作的边框样式则可。6、思考题（1）练习在 Dreamweaver 中用表格画出如下页面的结构图，主要考虑用表格如何将文字和图片布局成如下效果。（2）制作个人网站主页要求：对自己的个人主页做一个策划,包括主题、栏目、个人主页上展示的内容、网页艺术构思，基本布局结构等。个人主页的栏目可以包含如：我的学校介绍、我的专业介绍页、我的相册、个人爱好页、学习心得、感想页等，首页的下部要有制作者信息：姓名、班级、联系方式等内容。保持个人主页的个性化，内容要体现自已的性格与喜好，尽可能保证页面的美观，整洁大方，色调合谐。建议以模仿优秀、借鉴、吸取精华为主。
