资源简介 任务四 使用代码制作“异国风情”网页一、提出任务1．任务目标使用HTML代码制作一个“异国风情”网页。2. 解决的问题通过完成本任务，学习使用HTML代码在网页中添加层和热点。3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在设计视图中使用“行为”面板添加层和热点，在代码视图中使用HTML代码添加图像和链接。二、教学目标1. 知识目标⑴ 掌握使用HTML代码插入图像和层。⑵ 掌握使用HTML代码给图像添加热点。⑶ 掌握使用HTML代码为热点添加行为。⑷ 熟悉标签的使用方法。⑸ 熟悉标签的使用方法。2. 能力目标能够使用HTML代码制作网页动态效果，并学会使用HTML代码添加图像与层、添加热点和行为。3. 情感目标培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。三、教学分析与准备1. 教学重点⑴ 使用HTML代码插入图像和层。⑵ 使用HTML代码给图像添加热点。⑶ 使用HTML代码为热点添加行为。2．教学难点⑴ 使用HTML代码添加热点。⑵ 使用HTML代码为热点添加行为。3. 教学方法任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。4. 课时安排4课时。5. 教学环境多媒体网络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段 教师活动 学生活动组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 知识讲解 教师引导，学生讨论、分析。 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过指定学生上前操作下题考察学生对已学HTML代码的掌握情况。 1．使用HTML代码创建一个空白网页文件，修改页面的背景颜色，并添加一副图片。 展示“唐诗赏析”网页，让学生描述在设计视图下的制作流程。 让学生讨论上题，如果要求使用HTML代码来完成该如何实现？ 提出任务：使用HTML代码编写网页，当单击导航图像中不同文字时，在网页中显示不同的内容。 网页由上下两部分组成，上半部分添加用于导航的文字图像，下半部分显示文字对应的风景图像。这些风景图像分别放在不同的层中，这些层重叠在相同位置，并且大小相同。通过为上半部分导航图像上的文字添加三个矩形热点、把热点链接到一段JavaScript代码，该代码功能为调用ShowDiv函数，该函数控制层的显示与隐藏，实现各热点的行为。 1．知识讲解 ⑴ 添加热点标签语句格式 “area”标签用于设置热点。HTML中标签没有结束标志，而且这个元素总是嵌套在标签内。 “shape”属性：用于设置热点的形状。可设置为，rect：表示热点为矩形；circle：圆形；poly：多边形。 “cords”属性：用于设置热点的顶点坐标。 “href”属性：用于添加链接，链接可以是URL，也可以是javascript代码。 本例链接的是一段javascript代码，javascript:ShowDiv(document.all.aa)意思是显示aa层（层在下一步骤添加），功能为调用ShowDiv函数，显示相应的层。该函数代码将在下文中添加到和标签中。 “Alt”属性：用于设置当鼠标放到热点上时显示的内容。 (2) 层标签的语句格式 “id”属性：用于设置层的名称。 “Style”属性：用于设置层的样式，其中有如下常见属性： “position”值为absolute或relative。当为absolute时，层的位置固定；当为relative时，层位置会随着内容的实际情况进行浮动。 “display”值为block或none。block为默认状态，表示显示；none为隐藏。 “z-index”值用于设置层在Z轴上的位置，即层叠顺序。 2．自己动手 ⑴ 生成空白网页并设置属性。 ⑵ 插入导航图片并设置属性。 ⑶ 为导航图片添加热点并设置热点属性。 教师讲解，中间涉及到javascript函数调用。 ⑷ 添加图像层。 添加图像层并设置属性。 通过完成本任务学习了使用HTML代码插入图像和层、 为给图像添加热点、为热点添加行为。 在Dreamweaver 8的代码视图下分析“异国风情”网页。 在分析网页时注意以下几点： ⑴ 页面属性。 ⑵ 层样式的定义。 ⑶ 热点的定义。 ⑷ javascript函数的使用。 学生分组上机，讨论交流。 由各组学生代表来分析说明本组总结情况。 指出学生在总结时可能出现的错误，补充不足，鼓励学生学习使用HTML代码制作网页的信心。 1. 创建网页“practice5-12.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-10.jpg”，练习矩形热点的属性设置。 2. 使用层代码编写网页“practice5-13.html”, 效果如图JYFS5-7所示。所需图像为本单元素材的举一反三文件夹中的“practice5-11.jpg”和“practice5-12.jpg”。 图JYFS5-7 3. 利用本单元素材举一反三文件夹中的“practice5-13.jpg”图像，使用代码制作页面“practice5-12.html”，给上面的人物添加圆形热点，为各个热点设置“alt”属性，设置热点的替换文本为卡通人物的名称，效果如图JYFS5-8所示。（七个小矮人的名字分别是万事通、害羞鬼、瞌睡虫、喷嚏精、开心果、迷糊鬼和爱生气）。提示：圆形热点属性包括：shape="circle" cords="centerx（圆心x轴的坐标），centery（圆心y轴的坐标），radius（圆的半径）"。 图JYFS5-8 学生操作。 力求通过任务导入，吸引学生学习兴趣。 任务提出后的分析过程可以先由学生讨论，再由教师总结。 准备工作由优秀学生按教材要求完成。 通过讨论分析加深学生对所学知识的理解。 培养学生自主学习、探究学习的能力。 展开更多...... 收起↑ 资源预览