实验二 表格布局网页.doc

实验二 表格布局网页、超链接和CSS应用一、 实验目的1、掌握使用嵌套表格布局网页的方法2、掌握插入FLASH、音频等多媒体元素的方法3、熟练使用CSS4、熟练使用超链接二、实验内容1、站点导入要求：将站点shiyan2导入到dreamweaver中步骤：（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文件中的“给我写信”图片设置电子邮件链接为自己的信箱。（4）锚点连接打开hiyan2文件夹下的“gl.html”文件。将光标定位于文件中的文字“三、餐饮”后，选择“插入”|“命名锚记”命令，在“命名锚记”对话框中设置锚记名称为“cy”。用同样的方法在文字“四、紧急联络方式”后加上锚记“lxfs”。选择文件中最上方的文字“餐饮”，在“属性”面板的“链接”组合框中输入“#cy”。用同样的方法给最上方的文字“紧急联络方式”设置锚记链接。保存后在浏览器中预览效果。5、CSS样式表的应用（1）创建主页字体样式单击“CSS样式”面板右下角的“新建CSS规则”按钮，设置属性如下图所示：在CSS规则定义对话框中设置属性如下图所示：选择index.html文件中文字。在属性面板设置文字样式为“ziti”，如下图所示（2）创建表格边框样式单击“CSS样式”面板右下角的“新建CSS规则”按钮，设置属性如下图所示：在CSS规则定义对话框中设置属性如下图所示：选择index.html文件中表格1，应用样式“bgbk”。如单元格需要加虚线边框，则可以选择单元格应用上面制作的边框样式则可。6、思考题（1）练习在Dreamweaver中用表格画出如下页面的结构图，主要考虑用表格如何将文字和图片布局成如下效果。（2）制作个人网站主页要求：对自己的个人主页做一个策划,包括主题、栏目、个人主页上展示的内容、网页艺术构思，基本布局结构等。个人