中职高教版《Dreamweaver网页制作》项目五 任务一 创建框架集教案

资源下载
  1. 二一教育资源

中职高教版《Dreamweaver网页制作》项目五 任务一 创建框架集教案

资源简介

任务一 创建框架集
一、提出任务
1.任务目标
为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。
2. 解决的问题
本任务通过在“家乡山水”页面中添加热点来划分景区地图上的各个景区,为景区地图上各个热点设置属性,链接到“景区介绍”页面中的相应位置。学习创建热点和锚记链接。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有:网页的基本概念以及制作网页的基本知识,包括表格的制作、插入图像、添加链接等。
二、教学目标
1. 知识目标
⑴ 了解热点和锚记的概念。
⑵ 锚记名称的命名规则。
⑶ 掌握热点的分类。
⑷ 掌握添加热点。
⑸ 掌握创建锚记。
⑹ 掌握创建锚记链接。
2. 能力目标
能够为图像添加热点并设置热点的属性,添加锚记链接。
3. 情感目标
培养学生不怕困难、积极探索的优良作风,增强学生审美能力,给学生以成功的体验。
三、教学分析与准备
1. 教学重点
⑴ 热点的含义。
⑵ 锚记的含义。
⑶ 设置热点属性。
⑷ 锚记的作用。
2.教学难点
⑴ 添加热点的方法。
⑵ 根据不同的图形添加不同形状的热点。
⑶ 创建锚记链接。
3. 教学方法
任务驱动学习和协作学习、探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程(组织课堂、复习知识、教师引领完成任务占2课时;举一反三占2课时。)
教学环节及手段 教师活动 学生活动
组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 教师结合PPT演示文稿和实际操作讲解。 边讲边做,一定要将目录结构讲清楚 知识总结 自己动手练习 举一反三 任务目标 启发思路 完成任务 总结评价 教师点评总结 布置作业 集中学生注意力,准备上课。 通过让学生回答下列问题复习制作简单网页和布局页面知识。 1.网页常见的布局有那些? 2.布局网页的方法?(表格和框架) 3.网页中可以包含哪些元素 教师总结:通过前面的学习已经掌握了网页的基本概念以及制作网页的基本知识,包括使用表格进行页面布局、添加链接等。 在设计网页时,有时网页内容比较多,需要占用好几屏,当用户浏览内容时如果让他通过滚动条一屏屏查找所要浏览内容是非常费事的。这时可以在网页中添加热点和链接,通过单击热点快速定位到所要查找内容。本任务将制作家乡山水页面,在“家乡山水”页面中添加热点来划分景区地图上的各个景区,为景区地图上各个热点设置属性,链接到“景区介绍”页面中的相应位置。通过完成此任务学习创建热点和锚记链接的方法。 提出任务:为景区添加热点和创建锚记链接。 建立好本单元的目录结构,在“景区介绍”页面中为每个景区的介绍内容添加锚记,之后在景区地图上按景区绘制热点,然后为每个热点添加锚记链接,链接到“景区介绍”页面的对应位置。 1.创建本单元的目录结构 打开要完成的任务,引导学生分析本任务需要创建的目录结构,拷贝素材,最终得出目录结构如下: 所在路径文件/文件夹的名字说明D:\mysite\traveltravel.html“家乡山水”页面viewpoint.html“景区介绍”页面页面所需图像
2.为“景区介绍”页面添加锚记 引导学生从课本中找到创建锚记的方法然后按步骤操作,记住锚记的命名规则,如何使用,在页面中的显示。思考:锚记的作用是什么?为什么在此添加锚记? 3.为“家乡山水”页面的景区地图添加热点 在“文件”面板中双击“travel.html”文件,打开“家乡山水”页面,选中里面的地图图像,引导学生自己找出热点工具的使用方法(通过课本或使用帮助),然后引导学生使用多边形热点工具为每一个景区添加热点。这里要强调热点工具的使用方法: 移动热点:单击“属性”面板中的“指针热点工具”后,选中某个热点,可以通过拖拽移动它的位置,还可以利用键盘的方向键或Shift+方向键移动热点的位置。 调整热点的大小:用指针热点工具单击某个热点,然后将光标移到热点的顶点处,拖拽鼠标可以改变热点的形状和大小。 选中多个热点:单击“属性”面板中的“指针热点工具”后,按住Shift键的同时,可以通过单击选中多个热点;按下键盘的Ctrl+A组合可以选中所有的热点。 4.设置热点属性添加锚记链接 给出为热点添加锚记链接的方法,由此回答前面提出的问题,让学生牢记添加锚记链接的方法。 通过本任务学习了如何添加锚记、添加热点以及如何创建锚记链接。 安排学生按步骤制作“家乡山水”网页,根据学生练习情况进行总结,再次强调知识点。使学生通过模仿达到熟练掌握添加热点和创建锚记链接的目的。 将本单元“举一反三”文件夹中的“pra5-1”文件夹拷贝到D盘根目录,利用图像文件“practice5-3.jpg”,制作一个有关荷花的简单网页“practice5-3.html”。使用多边形热点工具为图像中的荷花添加热点,熟悉使用指针热点工具对热点进行移动和修改大小的操作。添加替换文本“映日荷花別样红”,添加链接到“practice5-4.html”,热点替换如图JYFS5-2所示。 图JYFS5-2 根据所学习的添加热点和创建锚记链接的方法完成。 学生分组完成任务。 让每组学生评论本组完成情况,哪些好、哪些不好,缺点是什么,哪些知识点没有掌握。 对完成任务好的学生给予鼓励,完不成的帮助其找到原因并引导完成。并根据不同情况再次强调总结知识点。 1.创建网页“practice5-1.html”,插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”,练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。 2. 创建网页“practice5-2.html”,插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”,在图像上添加圆形热点,并添加替换文本“月到中秋分外明”。效果如图JYFS5-1所示。 图JYFS5-1 首先让学生明确本任务学习的任务目标。 同时演示任务完成效果。 引导学生自己完成给出的任务,学生做好了给予鼓励,做不好时一定要给予其提示。

展开更多......

收起↑

资源预览