dreamweaver cs3 网页制作案例教程电子教案05第5章制作包含ap div和超级链接的网页

《dreamweaver cs3 网页制作案例教程电子教案05第5章制作包含ap div和超级链接的网页》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第5章　制作包含APDIV和超级链接的网页第5章　制作包含APDIV和超级链接的网页一个网站由多个网页组成，各个网页之间可以通过超级链接相互联系。APDIV可以看作是网页中的一个容器，在其中可以插入多种页面元素，例如文本、图像、表格等。【教学导航】教学目标（1）熟练创建网页的内部链接和外部链接（2）熟练在图像中设置热点区域，并创建图像热点链接（3）熟练创建命名锚记和到该命名锚记的链接（4）熟练创建电子邮件链接（5）熟练更改链接颜色、设置链接的打开方式、设置空链接（6）熟练测试链接的有效性（7）熟练插入或绘制APDiv，并合理地

2、设置APDiv的属性（8）能正确在APDiv中插入flash动画（9）能正确插入浮动框架iframe，并设置其属性（10）进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性（11）掌握滚动图片的方法（12）理解绝对路径和相对路径，知道链接的类型本章重点（1）创建网页的内部链接和外部链接（2）在图像中设置热点区域，并创建图像热点链接（3）创建命名锚记和到该命名锚记的链接（3）插入或绘制APDiv，并在APDiv中插入flash动画本章难点（1）在图像中设置热点区域，并创建图像热点链接（2）插入或绘制APDiv，并在APD

3、iv中插入flash动画（3）插入浮动框架iframe，并设置其属性教学方法任务驱动法、分组讨论法、四步训练法课时建议6课时（含课堂同步训练）5.1　课前准备5.1.1　新建一个站点（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3119第5章　制作包含APDIV和超级链接的网页（3）创建名称为“公园游”的本地站点5.1.2　创建网页文档album0502.html（1）在文件夹“webpage”中创建一个网页文档，将其命名为“album0502.html”。（2）在“文档”工具栏的“标题”文本框直接输入网页标题

4、“天门山美景图片”。（3）插入一个2行1列的表格1，该表格的属性设置如图5-1所示，表格的“宽”设置为“778像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，“背景颜色”设置为“#f7f7f7”。（4）在表格1的第一行的单元格中输入文字“天子山美景”，且设置文字大小为“18像素”，颜色设置为“#0000FF”。（5）在表格1的第二行的单元格中插入一个3行5列的嵌套表格2，该表格的属性设置如图5-2所示，表格的“边框”设置为“1像素”，“间距”设置为“15像素”，“填充”设置为“10”，“对齐

5、”方式设置为“居中对齐”，“背景颜色”设置为“#f7f7f7”。（6）表格2单元格的属性设置表格2所有单元格的属性设置如图5-3所示，“水平”对齐方式设置为“居中对齐”，“垂直”对齐方式设置为“居中”，“宽”设置为“100像素”，“高”设置为“100像素”，背景颜色设置为“#ffffff”，边框颜色设置为“#”。（7）在表格2各个单元格中插入图像将文件夹“task05-1webpageimage”中图像文件“.jpg”～“.jpg”分别插入到表格2各个单元格中，且将各个图像的“宽”设置为“100像素”，“高”设置为“80像

6、素”，“边框”设置为“0”。（8）保存网页，预览其效果保存网页文档album0502.html，按F12预览该其效果，如图5-4所示。5.1.3　创建网页文档jbx.html（1）在文件夹“webpage”中创建一个网页文档，将其命名为“jbx.html”。（2）在“文档”工具栏的“标题”文本框直接输入网页标题“天然氧吧金鞭溪”。（3）插入一个2行3列的表格1，该表格的属性设置如图5-5所示，表格的“宽”设置为“540像素”，“边框”设置为“1像素”，“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。（4）将表

7、格1第一行的“高”设置为“200像素”，将第一行的三个单元格合并为一个单元格，该单元格的水平对齐方式设置为“居中对齐”。（5）将表格1第二行的“高”设置为“30像素”，各个单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，单元格的“宽”设置为“176像素”。（6）在表格1第一行的单元格中插入一个1行2列的表格2，表格的“宽”设置为“495像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。（7）将表格2的行高设置为“190像素”，背景颜色设置为“#FF9900”，将表格2第一列

8、的“宽”设置为“253像素”。将表格2第一列的单元格水平对齐方式设置为“居中对齐”，重直对齐方式设置为“居中”。表格2第二列单元格的属性设置如图5-6所示。119第5章　制作包含APDIV和超级链接的网页（8）在表格2第一列的单元格插入文件夹“task05-1webpage