网页设计与制作任务驱动式实用教程单元制作包含ap div和超级链接的网页

《网页设计与制作任务驱动式实用教程单元制作包含ap div和超级链接的网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元5　制作包含超级链接和APDiv的网页单元5　制作包含超级链接和APDiv的网页【教学导航】教学目标（1）熟练创建网页的内部链接和外部链接（2）熟练在图像中设置热点区域，并创建图像热点链接（3）熟练创建命名锚记和到该命名锚记的链接（4）熟练创建电子邮件链接和文件下载链接（5）熟练更改链接颜色、设置链接的打开方式、设置空地址链接（6）熟练测试链接的有效性（7）熟练插入或绘制APDiv，并合理地设置APDiv的属性（8）能正确在APDiv中插入SWF动画（9）能正确插入浮动框架iframe，并设置其属性（10）进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性（11

2、）掌握实现图片滚动的方法（12）理解绝对路径和相对路径，知道链接路径的类型本单元重点（1）创建网页的内部链接和外部链接（2）在图像中设置热点区域，并创建图像热点链接（3）创建命名锚记和到该命名锚记的链接（3）插入或绘制APDiv，并在APDiv中插入SWF动画本单元难点（1）在图像中设置热点区域，并创建图像热点链接（2）插入或绘制APDiv，并在APDiv中插入SWF动画（3）插入浮动框架iframe，并设置其属性教学方法任务驱动法、分组讨论法、分析探究法、四步训练法课时建议6课时（含考核评价）【操作准备】1．创建1个本地站点（1）创建所需的文件夹，拷贝所需的资源（2）启动

3、DreamweaverCS6（3）创建本地站点2．创建网页文档album0502.html3．创建网页文档jbx.html4．创建网页文档scroll_pic.html117单元5　制作包含超级链接和APDiv的网页【引导训练】【任务5-1】制作包含超级链接的展示张家界景点的网页本单元“引导训练”的任务卡如表5-1所示。表5-1　单元5“引导训练”任务卡任务编号5-1任务名称制作包含超级链接的展示张家界景点的网页网页主题公园游计划工时120min网页制作任务描述（1）创建表格布局的网页0501.html，该网页中包含多个表格（2）在网页中绘制或插入三个APDiv，在APDi

4、v中插入SWF动画或图像（3）在网页中创建多个超级链接，包括文本形式的外部链接和内部链接，图片形式的内部链接，电子邮件链接，文件下载链接，锚点链接，空地址链接，图像热点链接，对链接有效性和正确性进行检查网页布局结构分析（1）采用表格布局方式，主体结构为上中下结构，中部为左右结构（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#FFFFFF、#6633CC、#339933．#66CCFF，链接颜色：#6633CC，变换图像链接颜色：#FF6600，已访问链接颜色：#00FFFF，活动链接颜色：#FF9999网页组成元素分析

5、主要包括表格、文本、图像、SWF动画和多种形式的超级链接等网页元素任务实现流程分析新建网页文档0501.html→在网页中插入多个表格→在表格单元格中输入文字、插入图像→绘制或插入APDiv→在APDiv插入SWF动画或图像→创建多个超级链接配盘素材导引原始文件位置：startUnit05task05-1最终文件位置：resultUnit05task05-1本单元“引导训练”的任务跟踪卡如表5-2所示。表5-2　单元5“引导训练”任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态本单元“引导训练”网页0501.html的浏览效果如图5-12所示。【任务5-1

6、-1】创建网页文档0501.html【任务描述】（1）创建网页文档0501.html。（2）在网页中依次插入6个表格：表格1（1行1列）、表格2（1行3列）、表格3（1行1列）、表格4（2行3列）、表格5（1行1列）和表格6（4行1列）。（3）在表格1中插入SWF动画“01.swf”；在表格2中输入超链接文字；在表格3中插入图像“map01.jpg”；在表格4中插入多个嵌套表格，在各个嵌套表格中分别输入文字和插入图像；在表格5中插入浮动框架；在表格6中分别输入超链接文字和版权信息。117单元5　制作包含超级链接和APDiv的网页【任务实施】1．新建网页文档0501.html

7、（1）在“单元5”站点文件夹task05-1中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建1个名称为“0501.html”的网页文档。（2）设置网页标题在【文档】工具栏的“标题”文本框直接输入网页标题“张家界风光”即可，如果需要设置网页的其他页面属性，单击【属性】面板【页面属性】按钮，打开【页面属性】对话框，在该对话框中设置页面属性即可，这里只将“链接”的“下划线样式”设置为“仅在变换图像时显示下划线”，其他的属性保持默认其设置不变。2．插入表格1（1）插入表格1在网页中插入1个1行1列的表格1，该