Dreamweaver CS3 网页制作案例教程电子教案05第5章制作包含AP DIV和超级链接的网页.docVIP

第5章　制作包含AP DIV和超级链接的网页 一个网站由多个网页组成，各个网页之间可以通过超级链接相互联系。AP DIV可以看作是网页中的一个容器，在其中可以插入多种页面元素，例如文本、图像、表格等。 【教学导航】 教学目标 （1）熟练创建网页的内部链接和外部链接 （2）熟练在图像中设置热点区域，并创建图像热点链接 （3）熟练创建命名锚记和到该命名锚记的链接 （4）熟练创建电子邮件链接 （5）熟练更改链接颜色、设置链接的打开方式、设置空链接 （6）熟练测试链接的有效性 （7）熟练插入或绘制AP Div，并合理地设置AP Div的属性 （8）能正确在AP Div中插入flash动画 （9）能正确插入浮动框架iframe，并设置其属性 （10）进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性 （11）掌握滚动图片的方法 （12）理解绝对路径和相对路径，知道链接的类型 本章重点 （1）创建网页的内部链接和外部链接 （2）在图像中设置热点区域，并创建图像热点链接 （3）创建命名锚记和到该命名锚记的链接 （3）插入或绘制AP Div，并在AP Div中插入flash动画 本章难点 （1）在图像中设置热点区域，并创建图像热点链接 （2）插入或绘制AP Div，并在AP Div中插入flash动画 （3）插入浮动框架iframe，并设置其属性 教学方法 任务驱动法、分组讨论法、四步训练法 课时建议 6课时（含课堂同步训练） 5.1　课前准备 5.1.1　新建一个站点 （1）在本地硬盘创建文件夹 （2）启动Dreamweaver CS3 （3）创建名称为“公园游”的本地站点 5.1.2　创建网页文档album0502.html （1）在文件夹“webpage”中创建一个网页文档，将其命名为“album0502.html”。 （2）在“文档”工具栏的“标题”文本框直接输入网页标题“天门山美景图片”。 （3）插入一个2行1列的表格1，该表格的属性设置如图5-1所示，表格的“宽”设置为“778像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，“背景颜色”设置为“#f7f7f7”。 （4）在表格1的第一行的单元格中输入文字“天子山美景”，且设置文字大小为“18像素”，颜色设置为“#0000FF”。 （5）在表格1的第二行的单元格中插入一个3行5列的嵌套表格2，该表格的属性设置如图5-2所示，表格的“边框”设置为“1像素”，“间距”设置为“15像素”，“填充”设置为“10”，“对齐”方式设置为“居中对齐”，“背景颜色”设置为“#f7f7f7”。 （6）表格2单元格的属性设置 表格2所有单元格的属性设置如图5-3所示，“水平”对齐方式设置为“居中对齐”，“垂直”对齐方式设置为“居中”，“宽”设置为“100像素”，“高”设置为“100像素”，背景颜色设置为“#ffffff”，边框颜色设置为“#”。 （7）在表格2各个单元格中插入图像 将文件夹“task05-1\webpage\image”中图像文件“.jpg”～“.jpg”分别插入到表格2各个单元格中，且将各个图像的“宽”设置为“100像素”，“高”设置为“80像素”，“边框”设置为“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）将表格1第一行的“高”设置为“200像素”，将第一行的三个单元格合并为一个单元格，该单元格的水平对齐方式设置为“居中对齐”。 （5）将表格1第二行的“高”设置为“30像素”，各个单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，单元格的“宽”设置为“176像素”。 （6）在表格1第一行的单元格中插入一个1行2列的表格2，表格的“宽”设置为“495像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。 （7）将表格2的行高设置为“190像素”，背景颜色设置为“#FF9900”，将表格2第一列的“宽”设置为“253像素”。 将表格2第一列的单元格水平对齐方式设置为“居中对齐”，重直对齐方式设置为“居中”。表格2第二列单元格的属性设置如图5-6所示。 （8）在表格2第一列的单元格插入文件夹“task05-1\webpag