当前位置:首页 >> 其它课程 >> 《网页制作》项目式教案2

《网页制作》项目式教案2


《网页制作》教案
科任:王贤全 班级:高二(8)班 课时:10 节×4 周=40 节 作业:40 次 时间:2010.11.1——2010.11.26

项目四 制作“心情日记”网页
本项目通过“创建框架集”“使用链接控制框架内容”和“制作媒体日记页面”三个 、 任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作,学习如何使用框架结构

来布 局页面及如何在网页中插入多媒体文件,任务完成后效果如图:

本项目具体的教学过程共分为以下四个方面的任务: 任务一 创建框架集 (4 课时) 任务二 使用链接控制框架内容 (4 课时) 任务三 制作媒体日记网页 (4 课时) 任务四 使用代码制作框架网页(4 课时)

任务一 创建框架集
一、提出任务
1.任务目标 创建“心情日记”页面的框架结构。 2. 解决的问题 本任务通过在“心情日记”页面创建框架集并设置属性,学习创建框架集以及设置框架 集和框架属性的知识。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:创建网页、在网页中添加内容、添加超链接等。

二、教学目标
1. 知识目标 ⑴ 了解框架的含义。 ⑵ 掌握框架集的创建。 ⑶ 掌握框架的选择。 ⑷ 掌握框架集的选择。 ⑸ 掌握框架属性设置。 ⑹ 掌握框架集属性设置。 2. 能力目标 能够利用框架布局页面,设置框架属性。 3. 情感目标 培养学生不怕困难、积极探索的优良作风,增强学生审美能力,给学生以成功的体验。

三、教学分析与准备
1. 教学重点 ⑴ 框架的含义。 ⑵ 创建框架集。 ⑶ 设置框架属性。 ⑷ 设置框架集属性 2.教学难点 ⑴ 显示框架边框。 ⑵ 设定框架的滚动格式。 ⑶ 框架的边框样式。 3. 教学方法 任务驱动学习和协作学习、探究学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、教学过程(组织课堂、复习知识、教师引领完成任务占 1. 5 课时;举一反三占
2.5 课时。 )

教学环节及手 段

教师活动 集中学生注意力,准备上课。 通过学生总结考察学生对布局页面知识和美化 页面的了解情况。 1.网页常见的几种布局? 2.布局网页的方法? 3.如何新建和使用 css 样式美化页面? 教师总结, 通过前面的学习已经掌握了网页的基 本概念以及制作网页的基本知识,包括使用 css 样式 美化网页、使用表格进行页面布局、添加链接等。 本任务学习如何在同一个网页中显示更多的内 容,即在一个窗口中显示多个页面,要完成的就是创 建“心情日记”页面的框架结构、使用链接控制框架 内容。 (同时演示任务) 提出任务:创建“心情日记”页面的框架结构。 依据 “心情日记” 效果图, 页面分为上部、 左下、 右下三个部分,每个部分可以用一个框架页来实现。 上部框架页用于放置标题“心情日记”和图像;左下 部框架页用于放置“个人日记”等五个导航链接,每 个导航链接一个页面; 右下部框架页用于显示与导航 链接相对应的页面。 下面讲解完成任务的步骤。 1.创建本单元的目录结构 打开要完成的任务, 引导学生分析本任务、 创建 目录,拷贝素材,结果“心情日记”目录结构如下: 文件/文件夹 的名字 diary.html

学生活动

组织课堂 复习知识

任务流程
导入任务

首先对今天 学习任务进行明 确定位,让学生明 确今天学习的任 务目标。

分析任务

完成任务

教师结合 PPT 演示文稿和 实际操作讲解。 边讲边做, 一定要将目录 结构讲清楚

所在路径

说明 “心情日记”框 架集网页 左下部框架页 上部框架页 右下部框架显示 的“个人日记” 网页 “情感天地”网 页 “休闲搞笑”网 页

left.html top.html D:\mysite\diary main1.html

main2.html main3.html

main4.html main5.html <diaryimages> <media>

“天下杂侃”网 页 “媒体日记”网 页 存放本栏目需要 的图片 存放多媒体文件 学生观察框 架的使用

2.创建框架集 创建框架集有两种方法, 引导学生通过课本或帮 助将两种方法找出来, 并根据任务要求选择框架集的 类型,即“上方固定,左侧嵌套” 。 3.选择框架并设置属性 让学生自己找选择框架的方法 (通过课本或使用 帮助) 。然后按照课本步骤,设置框架属性,添加每 个框架的内容。讲解属性面板各选项的含义: “框架名称” :用于设置链接的“目标”属性或 脚本中引用该框架时所用的名称。 “源文件” :用于设置在该框架中显示的网页文 件。可以单击“浏览文件”按钮 选择要显示的网页 文件。 “滚动” :用于设置是否显示滚动条。其中“默 认”表示由浏览器的默认设置确定是否显示滚动条。 大多数浏览器默认设置为在浏览器窗口中没有足够 空间来显示框架内容时,显示滚动条。 “不能调整大小” :用于设置在浏览器中是否可 以通过拖动框架边框来调整框架大小。 “边框” :用于设置在浏览器中是否显示框架边 框。大多数浏览器默认设置显示边框。 “边框颜色” :用于设置边框颜色。 “边界宽度” :以像素为单位设置框架左边框和 内容之间的距离。 “边界高度” :以像素为单位设置框架上边框和 内容之间的距离。 提个醒: 在页面中单击框架区域内部, 表示要编 辑该框架内容,不等于选中了框架。在“框架”面板 中框架内部单击,才会选中相应框架。 4.选择框架集并设置属性 给出选择框架集的方法,然后提问学生,应该在 哪里设置属性。最后按课本步骤操作讲解。 5.保存框架和框架集 按课本步骤操作 注意:上述任务创建了一个框架集网页,它包含 三个框架页,其中左下部和右下部框架页已经通过

知识拓展

“属性”面板的“源文件”选项设置为从素材中拷贝 过来的网页,页面内容没有修改,所以不需要保存; 而框架集页面和上部框架页是新建的,因此需要保 存。 保存单个框架页面时, 可以先将光标定位到该框 架页面,再选择菜单栏“文件”菜单的“保存框架” 选项。 进行下列操作前,首先要勾选菜单栏“查看”→ “可视化助理” “框架边框” (默认不被勾选) → 选项 , 在页面中显示框架结构。 ⑴ 手动创建框架集 用鼠标拖拽“文档窗口”中的任一边界,都可以 创建包含两个框架的框架集。 用鼠标拖拽“文档窗口”的任一角,都可以创建 包含上下左右 4 个框架的框架集。 ⑵ 拆分框架 先选中要拆分的框架,再按住键盘的 Alt 键用鼠 标拖拽边框拆分框架。 ⑶ 删除框架 用鼠标拖拽框架边框到相邻边框, 即可删除相应 框架。 通过本任务学习了创建框架集、 设置框架集属性 以及如何保存框架网页的知识。 1、创建网页“practice4-1.html” ,使用“新建 文档”对话框,创建“右侧固定,上方嵌套”结构的 框架集网页,设置显示框架边框,边框宽度为 3,颜 色为“#0000FF” 。 根据所学习的创建框架集方法, 自己动手创建上 述框架集网页。每个框架的属性设置按要求制作。 学生分组完成任务。 引导学生自 己完成给出的任 务,学生做好了给 予鼓励,做不好时 一定要给予其提 示。

知识总结

举一反三
任务目标

启发思路

完成任务 总结评价

布置作业

让每组学生评论本组作的情况,哪些好、哪些不 好,缺点是什么,哪些知识点没有掌握。 教师总结,根据不同情况再次进行强调总结。 1.自己试一试如何手动创建框架。 2. 自己练习如何拆分框架和删除框架。 3 . 创 建 如 下 图 所 示 的 框 架 集 网 页 “practice4-2.html” 。

4.创建如下图所示的框架集网页 “practice4-3.html” 。

任务二
一、提出任务

使用链接控制框架内容

1.任务目标 在“心情日记”页面创建链接,使用链接控制框架内容。 2. 解决的问题 本任务通过在“心情日记”页面创建链接,学习使用超级链接控制框架内容,实现在同 一浏览器窗口中显示多个网页的功能。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:如何创建框架集,设置框架集和框架的属性。

二、教学目标
1. 知识目标 ⑴ 理解通过创建超级链接控制框架显示内容的过程。 ⑵ 熟悉属性面板中“目标”的种类和含义。 ⑶ 掌握框架中超链接的设置。 2. 能力目标 掌握利用框架和链接实现在同一浏览器窗口中显示多个网页内容。 3. 情感目标 培养学生不怕困难、积极探索的优良作风,增强学生审美能力,使学生感受到完成任务 的成就感。

三、教学分析与准备
1. 教学重点 框架中超链接的设置。

2.教学难点 属性面板中“目标”的种类和含义。 3. 教学方法 任务驱动学习、协作学习和探究学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、学习过程(组织课堂、复习知识、教师引领完成任务占 1.5 课时;举一反三占
2.5 课时。 ) 教学环节及手段 教师活动 集中学生注意力,准备上课。 1. 如何创建框架集? 2. 如何设置框架集和框架的属性? 演示上次的任务,找出未完成的部分,从而引 出本任务的内容,即通过添加超级链接控制框架页 中显示不同的内容 提出任务:使用链接控制框架内容 为上一任务创建的框架页面添加内容,其中左 下部框架页直接应用素材网页“left.html” 。该网 页中有“个人日记”“感情天地”等五行文本。然 、 后为这五行文本创建超级链接,链接到素材中对应 的网页,链接目标显示在右下部框架。下面,讲解 完成任务的步骤。 1.添加框架页的内容 制作顶部框架页所需要的网页“top.html” , 创建一个空白页面“main5.html” 。 2.创建超级链接控制框架显示内容 讲解“个人日记”的链接方法,让学生自己完 成其他的链接,最终结果如下: 文本 链接对象 目标 内容 情感 天地 休闲 搞笑 知识总结 天下 杂侃 媒体 日记 “main2.ht ml” “main3.ht ml” “main4.ht ml” “main5.ht ml” mainF rame mainF rame mainF rame mainF rame 首先对今天学 习的任务进行明确 定位,让学生明确 今天学习的任务目 标。 教师提问,学 生总结回答 学生活动

组织课堂 复习提问

任务流程
导入任务

分析任务

完成任务 教 师 结 合 PPT 演示文稿和 实际操作讲解。 边讲边做

举一反三

引出任务 完成本任务学习了在网页中创建超级链接,实 现控制框架显示内容。 总结上述知识点,然后提问学生是不是也想自 己做一个应用框架技术的网页?比如,我们拍摄收 集了很多相片,有家人的、朋友的、自己的。希望 将他们分类管理,以便更容易浏览展示。下面任务 就是利用今天学的框架知识完成一个个人相册。 创建网站 “pra4-3” ,站点保存在 “D:\pra4-3” 文件夹。使用框架技术制作一个网上相册,将自己 拍摄或搜集的相片分类(至少分三类) ,把每一类 相片显示在一个页面中。创建一个“上方固定,左 侧嵌套”的框架集网页“practice4-6.html” 。上 给学生时间自 部框架显示相册标题(自定) ,左下部框架显示分 类名称并添加链接,右下部框架显示相应类别的相 己找资料,自己布 片页面(注意:除了框架集网页外其他网页文件名 局美化页面,以便 有更多自由发挥的 自定) 。 空间 要认真组织页面,力求达到美观的效果,最好 使用 css 样式。 总结评价 准备资料:上网查找或者使用自己的照片素材 应用上述技术制作自己的网页,每个框架页的 属性设置根据自己的喜好制作。 学生自评:分组让学生评论本组作的情况,哪 些好、哪些不好,缺点是什么,哪些知识点没有掌 握 教师总结:根据不同情况再次进行强调总结 设计一个个人网站进行自我介绍,要求使用框 架技术布局页面。 引导学生自己 完成

任务目标

启发思路

准备资料 完成任务

布置作业

任务三 制作媒体日记网页
一、提出任务
1.任务目标 在网页中插入多媒体内容。 2. 解决的问题 通过完成本任务认识多媒体视频文件和 FLASH 动画文件在网页制作中的重要作用, 学习 运用多媒体文件美化和丰富网页。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中插入图像、编辑图像,使用框架结构布局 页面。

二、教学目标
1. 知识目标 ⑴ 了解多媒体文件的分类。 ⑵ 了解视频文件在网页制作中的作用 ⑶ 掌握在网页中插入视频文件。 ⑷ 了解 FLASH 动画在网页制作中的作用 ⑸ 掌握在网页中插入 FLASH 动画。 2. 能力目标 能够在网页中插入多媒体文件并进行参数设置。 3. 情感目标 通过参加科学探究活动, 初步掌握在网页制作中使用多媒体文件的方法, 并加深对多媒 体文件的理解。使学生增强自信心,对学习产生兴趣。

三、教学分析与准备
1. 教学重点 ⑴ 多媒体文件的分类 ⑵ 在网页中插入视频文件。 ⑶ 在网页中插入 FLASH 动画。 2.教学难点 ⑴ 在网页中插入视频文件。 ⑵ 在网页中插入 FLASH 动画。 3. 教学方法 任务驱动学习、协作学习和探究学习相结合 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、教学过程(组织课堂、复习知识、教师引领完成任务占 1.5 学时;举一反三占
2.5 学时。 ) 教学环节及手段 教师活动 集中学生注意力,准备上课。 通过提问考察学生对框架集掌握情况。 1.框架集的作用? 学生活动

组织课堂 复习知识

2.上前演示使用框架集在一个网页中显示几 个网页的内容。

任务流程
导入任务

学生分组讨论下列问题。 1.什么是媒体文件? 2.媒体文件有哪些? 3.列举日常生活中的媒体文件。 学生回答上述问题,教师总结,从而引导学生 学习媒体文件。 浏览包含多媒体文件的网页,吸引学生兴趣。 通过前面的学习已经系统的了解了图形图像 在网页制作中的应用,但是还没有使用过媒体文 件,本任务将系统学习多媒体文件在网页制作中的 应用。 提出任务:在网页中插入视频文件 在“媒体日记”链接的网页“main5.html”中, 插入一段视频文件。在上部框架页面“top.html” 中,插入 Flash 动画作为装饰,美化页面。

学生可以利用 帮助、课本、互联 网查找答案。

力求通过任务 导入,吸引学生学 习兴趣。

分析任务

完成任务 1.布局“媒体日记”页面 运行 Dreamweaver 8,在“文件”面板中,选 择并打开上一任务创建的网页文件“main5.html” , 通过“页面属性”设置网页上、下边距为 0 像素, 背景色设置为“#EEF0FF” ,其他采用默认值。 选择菜单栏“插入”菜单的“表格”选项,插 入一个宽 366 像素、2 行 2 列的表格,表格边框为 0。设置第一行高 20 像素,第二行高 272 像素,第 一列宽 17 像素,第二列宽 349 像素(第二列列宽 可以不设) 。 在 第 一 行 、 第 一 列 单 元 格 中 插 入 “ D:\mysite\diary\diaryimages ” 文 件 夹 中 “point1.gif”图像,在第一行的第二列中输入文 字“媒体日记” ,文字大小为 12 像素。 然后合并第二行的两个单元格。 2.插入媒体插件 在“文档窗口 ”中,用鼠标在表格第二行内 单击,选择菜单栏“插入”→“媒体”→“插件” 选项,弹出“选择文件”对话框,如课本图 4-16 所示。选择“D:\mysite\diary\media”文件夹中 的视频文件“ljsy.mpg” ,单击“确定”按钮。 结合插入媒体菜单讲解有哪些媒体文件可以 应用在网页设计中。 3.插入 FLASH 动画文件

教师引导,学 生讨论、分析。

知识总结

在 顶 部 框 架 页 插 入 Flash 动 画 。 在 Dreamweaver 8 中,打开“D:\mysite\diary”文件 夹 下 的 网 页 “ top.html ” 将 插 入 点 放 到 图 像 , “biaoti.jpg” 的右边, 选择菜单栏 “插入” “媒 → 体”→“Flash”选项,在弹出的“选择文件”对 话框中选择“D:\mysite\diary\media”文件夹中 的 Flash 动画文件“top.swf” ,单击“确定”按钮。 保存网页“top.html” ,按 F12 键预览 插入 FLASH 文件后,FLASH 背景与网页背景不 协调。为此,在“文档窗口 ”中,单击选中刚插 入的 Flash 动画,然后单击“属性”面板中的“参 数”按钮,弹出“参数”对话框,设置“参数”为 “wmode” “值”为“transparent” , ,表示背景为 透明。然后单击“确定”按钮,完成插入 Flash 及 其参数设置,保存页面。 多媒体文件包含 Flash 动画、Shockwave、 Applet、ActiveX 和插件等,每一类文件都有其相 应的可设置参数,用于设置多媒体文件的各种属 性。 “wmode”是动画模式参数, “wmode”值设置为 transparent 代表显示 Flash 动画时, 背景为透明。 通过完成本任务学习了视频文件和 FLASH 动画 在网页制作中的应用。 创建网页“practice4-7.html” ,在网页中插 入“插件” ,播放本单元素材“举一反三”文件夹 中的“Boo.wav” 。 回忆使用哪个菜单、选项可以插入插件?本题 应插入那个插件?每个插件可以插入什么类型的 多媒体文件?

教师作为引导 者和组织者,学生 分组上机操作,完 成相应任务并进行 评价。

举一反三
任务目标

启发思路

分组完成任务

学生自评或互评 教师点评总结

把不同层次的学生分在一组中,鼓励同 学积极讨论完成任务。
小组间互相观看运行效果,并相互评论。 教师对学生完成情况及评论进行总结,对完成 任务的表扬,对没有完成任务的鼓励,并帮助他们 分析没有完成的原因。 1. 如何在网页中插入声音文件,插入的声音 文件和网页的背景音乐有什么区别? 2.创建一个网页“practice4-8.html” ,效果

布置作业

如图 JYFS4-5 所示,在网页下方插入“插件” ,播 放本单元素材“举一反三”文件夹中的 “piantou.avi” 。 3.创建网页“practice4-9.html” ,在网页中 插入“插件”播放本单元素材“举一反三”文件夹 中的“background.mid” ,要求设置循环播放。 要点提示:在“插件”的属性面板添加参数 “loop” ,值为“-1” 。

任务四 使用代码制作框架网页
一、提出任务
1.任务目标 使用 HTML 制作一个标题为“唐代名词赏析”的框架页面。 2. 解决的问题 通过使用代码制作框架网页学习 HTML 中框架集、框架标签的语法格式。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:使用 HTML 代码在网页中添加超链接,插入文本并 设置文本格式。

二、教学目标
1. 知识目标 ⑴ 了解框架集与框架在 HTML 中的区别。 ⑵ 掌握框架、框架集标签的用法。 ⑶ 掌握框架、框架集标签的一些重要属性。 ⑷ 掌握使用代码生成框架网页。 2. 能力目标 能够利用 HTML 代码制作框架网页。 3. 情感目标 培养学生不怕困难、积极探索的优良作风,对自己充满信心,对学习充满兴趣。

三、教学分析与准备
1. 教学重点 ⑴ 框架、框架集标签的用法。 ⑵ 框架、框架集标签的一些重要属性。 2.教学难点 框架、框架集标签的用法。 3. 教学方法 任务驱动学习、协作学习和探究学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、教学过程(组织课堂、复习知识、教师引领完成任务占 1.5 学时;举一反三占
2.5 学时。 ) 教学环节及手段 教师活动 学生活动

组织课堂 复习知识

集中学生注意力,准备上课。 通过提问考察学生对框架的掌握情况。 1.什么是框架、框架集? 2.框架、框架集的作用是什么? 力求通过任务 前面已经学习了 HTML 语言的一部分内容,本 任务将继续学习,学习 HTML 中框架、 框架集标签, 导入,吸引学生学 习兴趣。 从而能够掌握如何使用代码生成框架页面。 提出任务:使用代码制作框架网页。 通过代码添加包含三个框架的框架集, 设置框 架的属性,在一个框架集内显示三个框架页的内 容。 1.准备工作 新建一个文件夹“tcsx” ,把随书光盘中本单 元 素 材 文 件 夹 中 “ HTML ” 文 件 夹 下 的 网 页 “ top.html ” “ left.html ” “ main.html ” 、 、 、 “main2.html”和“main3.html”拷贝到此新建文 件夹中。 运行 Dreamweaver 8,新建一个空白页面,命 名为“tcsx.html” ,保存在“tcsx”文件夹中。将 “文档窗口”切换到“代码”视图,修改网页标题 为“唐代名词赏析” 。 2.添加框架集 ⑴ 在</head>和<body>之间添加框架集代码 创建框架集,并设置其属性。 ⑵ 框架、框架集标签讲解。 框架集标签格式: <frameset rows=" 高 度 " cols=" 宽 度 " frameborder="是否显示框架边框" border="边框 宽度" framespacing="框架间距离"> 框架标签格式 <frame src=" 框 架 显 示 的 网 页 文 件 地 址 " name=" 框 架 名 称 " scrolling="No" noresize="noresize" title="topFrame" /> 3.在框架集中添加框架 在<frameset>和</ frameset >之间添加框架 代码创建框架并设置他们的属性。 4.设置在不支持框架的浏览器中显示的信息 ⑴ 在</frameset>和</html>之间修改并添加 代码,设置在不支持框架的浏览器中显示的信息。 ⑵.知识讲解

引领完成任务
导入任务

分析任务



完成任务

教师讲授

教师讲解

框 架 集 网 页 中 <body> ? ? </body> 标 签 与 <frameset>和</frameset>标签不能互相包含。但 是<body>??</body>可以添加在<noframes>?? </noframes>标签中,用于设置不支持框架的浏览 器中显示的提示信息。 ⑶ 知识拓展 框 架 还 有 第 二 种 形 式 :内 联 框 架 ( inline frame 或 iframe) 。它由微软 Internet Explorer 3.0 版本引入的。它把内联框架嵌入 HTML 文档中, 就像 HTML 文档嵌入图片一样。内联框架可以使开 发者把一个 HTML 文档嵌入到另一个 HTML 文档中。 嵌入内联框架的语法: <iframe border=0 name=“框架名称” src= “要嵌入的网页地址” width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe> 通过完成本任务学习了: 1.框架集与框架在 HTML 中的区别。 2.框架集、框架标签。 3.框架集、框架标签的一些重要属性 4.使用代码生成框架集和框架的方法。

知识小结

举一反三
任务目标

启发思路

教师作为引导 者和组织者,学生 使 用 HTML 代 码 制 作 框 架 集 网 页 分组上机操作,完 “practice4-11.html” 其结构为左侧固定、 , 上方 成相应任务并进行 嵌套, 左侧框架宽 150 像素, 右上框架高 100 像素, 评价。 显示框架边框, 宽度为 1 像素, 颜色为 “#FF00FF” 。 结合前面的例子, 通过各种途径完成举一反三 的任务。获得帮助的方法有: 1.从教材获取。 2.通过 Dreamweaver 8 帮助获取。 3.从互联网获取。 从 Dreamweaver 8 帮助或互联网获取,要注意 检索方法和检索关键词。 把不同层次的学生分在一组中, 鼓励同学积极 讨论完成任务。 每组学生代表说明任务完成情况, 并说明获取 知识途径以及检索关键词等信息。 针对每组完成情况进行点评总结。

分组完成任务

学生自评或互评

教师点评总结 布置作业

1.使用 HTML 代码制作“上方固定”的框架 集网页“practice4-10.html” ,上方框架高度为 120 像素。 2. 通过各种途径完善框架的第二种方式-内联 框架的知识储备, 每一组同学都要完成一个内联框 架的作业。

项目五 制作“家乡山水”网页
本项目将通过“添加热点与锚记链接”“添加和使用层”以及“制作页面动态效果” 、 几个任务来完成“家乡山水”页面的制作。 “家乡山水”页面的效果如下图所示:

本项目具体的教学过程共分为以下四个方面的任务: 任务一 添加热点和锚记链接(4 课时) 任务二 添加和使用层 (4 课时) 任务三 制作页面动态效果 (4 课时) 任务四 使用代码制作“异国风情”网页(4 课时)

任务一 创建框架集
一、提出任务
1.任务目标 为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。 2. 解决的问题 本任务通过在“家乡山水”页面中添加热点来划分景区地图上的各个景区,为景区地图 上各个热点设置属性,链接到“景区介绍”页面中的相应位置。学习创建热点和锚记链接。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有: 网页的基本概念以及制作网页的基本知识, 包括表 格的制作、插入图像、添加链接等。

二、教学目标
1. 知识目标 ⑴ 了解热点和锚记的概念。 ⑵ 锚记名称的命名规则。 ⑶ 掌握热点的分类。 ⑷ 掌握添加热点。 ⑸ 掌握创建锚记。 ⑹ 掌握创建锚记链接。 2. 能力目标 能够为图像添加热点并设置热点的属性,添加锚记链接。 3. 情感目标 培养学生不怕困难、积极探索的优良作风,增强学生审美能力,给学生以成功的体验。

三、教学分析与准备
1. 教学重点 ⑴ 热点的含义。 ⑵ 锚记的含义。 ⑶ 设置热点属性。 ⑷ 锚记的作用。 2.教学难点 ⑴ 添加热点的方法。 ⑵ 根据不同的图形添加不同形状的热点。 ⑶ 创建锚记链接。 3. 教学方法 任务驱动学习和协作学习、探究学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、教学过程(组织课堂、复习知识、教师引领完成任务占 2 课时;举一反三占 2
课时。 ) 教学环节及手段 教师活动 学生活动

组织课堂 复习知识

集中学生注意力,准备上课。 通过让学生回答下列问题复习制作简单网页和 布局页面知识。 1.网页常见的布局有那些? 2.布局网页的方法?(表格和框架) 3.网页中可以包含哪些元素? 教师总结:通过前面的学习已经掌握了网页的 基本概念以及制作网页的基本知识,包括使用表格 进行页面布局、添加链接等。 在设计网页时,有时网页内容比较多,需要占 用好几屏,当用户浏览内容时如果让他通过滚动条 一屏屏查找所要浏览内容是非常费事的。这时可以 在网页中添加热点和链接,通过单击热点快速定位 到所要查找内容。本任务将制作家乡山水页面,在 “家乡山水”页面中添加热点来划分景区地图上的 各个景区,为景区地图上各个热点设置属性,链接 到“景区介绍”页面中的相应位置。通过完成此任 务学习创建热点和锚记链接的方法。 提出任务:为景区添加热点和创建锚记链接。 建立好本单元的目录结构,在“景区介绍”页 面中为每个景区的介绍内容添加锚记,之后在景区 地图上按景区绘制热点,然后为每个热点添加锚记 链接,链接到“景区介绍”页面的对应位置。 1.创建本单元的目录结构 打开要完成的任务,引导学生分析本任务需要 创建的目录结构,拷贝素材,最终得出目录结构如 下:
所在路径 文件/文件夹的名字 travel.html 说明 “家乡山水” 页面 “景区介绍” viewpoint.html <tlimages> 页面 页面所需图像

任务流程
导入任务

首先让学生明 确本任务学习的任 务目标。 同时演示任务 完成效果。

分析任务

完成任务

教 师 结 合 PPT 演示文稿和 实际操作讲解。 边讲边做, 一定要将目录结 构讲清楚

D:\mysite\travel

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

任务二
一、提出任务

添加和使用层

1.任务目标 完成“家乡山水”页面中层的制作。 2. 解决的问题 通过完成本任务学习层的使用,并为下一个任务添加行为做准备。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中添加表格,在单元格中添加内容。

二、教学目标
1. 知识目标 ⑴ 理解层的概念和作用。 ⑵ 掌握插入层。 ⑶ 掌握层的基本操作:选中、移动、对齐、调整大小。 ⑷ 掌握层的属性设置。 ⑸ 掌握在层中添加内容。 2. 能力目标 熟练掌握使用层在网页中不同位置定位的方法。 3. 情感目标 培养学生不怕困难、积极探索的优良作风,增强学生审美能力,使学生感受到完成任务 的成就感。

三、教学分析与准备
1. 教学重点 ⑴ 层的属性设置。 ⑵ 在层中插入内容。 2.教学难点 层的定位方法。 3. 教学方法 任务驱动学习、协作学习和探究学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、学习过程(组织课堂、复习知识、教师引领完成任务占 2 课时;举一反三占 2
课时。 ) 教学环节及手段 教师活动 学生活动

组织课堂 复习提问

集中学生注意力,准备上课。 通过教师提问、学生回答来考察学生对添加热 点和创建锚记链接的掌握情况。 3. 如何添加热点,有几种热点工具? 4. 如何创建锚记链接? 演示本任务网页,找出本次需要完成的部分, 从而引出本任务的内容,即通过插入层来在网页中 定位要显示的内容。 提出任务:添加和使用层。 景区地图上共有六个景区,每个景区对应一个 层,加上初始显示层共有七个层叠放在同一位置, 显示相应的图像。另外,还需要建立一个层,用于 显示简单的介绍文字。本任务将在页面中插入八个 层,改变层的大小,确定层的位置,然后在层中添 加内容。 1.插入层 在“文件”面板中双击“travel.html”文件, 打开“家乡山水”网页。引导学生从课本中找到插 入层的步骤,在需要的位置插入 8 个层,同时认识 层面板。 2.设置层的属性 在“层”面板中,单击“Layer8”选中该层, 其中“高” “宽”等属性的默认值取决于“首选参 、 数”对话框(选择菜单栏“编辑”→“首选参数” 选项)中“层”分类的设置。将“宽”修改为 300 像素,其他采用默认值。其他层的属性保持默认值 不变。 层“属性”面板介绍 “层编号” :用于设置层的名称,同一页面中的 每个层都有唯一的名称。第一次插入的层名称默认 为“Layer1” 。 “左”和“上” :用于设置层的左上角相对于页 面(如果是嵌套层,则相对于其父层)左上角的水 平距离和垂直距离,值默认为 0,单位默认为像素, 通常使用默认值。 “宽”和“高” :用于设置层的宽度和高度。单 位默认为像素。 “Z 轴” :用于设置层在 Z 轴上的位置,即层叠 顺序。在浏览器中,编号较大的层叠放在编号较小 的层的上面。值可以为正,也可以为负。 先让学生明确 本任务学习的任务 目标。

任务流程
导入任务

分析任务

完成任务

教师结合 PPT 演示文稿和 实际操作讲解。 边讲边做

“可见性” :用于设置层是否可见。default:默 认值; inherit:继承父层的可见性; visible: 可见; hidden:不可见。 “溢出” :用于设置当前层中的内容超出其大小 时的状态。Visible:层高度自动增加以容纳超出的 内容;hidden:层大小不变,多出的内容隐藏; scroll:在预览时层自动加上滚动条;auto:自动 识别是否显示滚动条,层中内容超过层的大小时显 示,否则不显示。 “剪辑” :用于定义层在“文档窗口”中的可见 区域,单位为像素。 3. 在层中添加内容 将光标放在要插入内容的层中,然后添加内容。 4.设置层的显示属性 通过“层”面板中的 图标,将所有层的显示 属性设置为隐藏。单击“层”面板中“Layer1”和 知识总结 “Layer8”左边的 图标,将这两个层的显示属性

设置为可见,其他层不可见。

举一反三
任务目标 通过完成本任务引导学生学习了层的作用,以 及如何插入层、设置层的属性、对层操作。 将本单元“举一反三”文件夹中的“pra5-2” 文件夹拷贝到 D 盘根目录,运行 Dreamweaver 8,使 用文件夹中的图像与文本制作“我的心事”网页 “practice5-7.html”,整个页面使用层进行布局, 效果如图 JYFS5-5 所示。

引导学生自己 完成

启发思路 完成任务 总结评价
图 JYFS5-5

应用层、对层进行定位布局网页。 组织学生分组完成本任务

教师点评总结

布置作业

每组学生代表评论本组完成情况,哪些好、哪 些不好,缺点是什么,哪些知识点没有掌握 根据不同情况再次进行强调总结 1. 创建网页“practice5-5.html” ,使用层完 成如下工作:在图像“practice5-4.jpg”的上方叠 放另一张图像“practice5-5.gif” (所需素材在本 单元素材文件夹中的“举一反三”文件夹中) ,完成 效果如图 JYFS5-3 所示。

图 JYFS5-3 2. 创建网页“practice5-6.html” ,利用层的 可重叠性,制作阴影效果的文字,如图 JYFS5-4 所 示。

图 JYFS5-4

任务三
一、提出任务

制作页面动态效果

1.任务目标 为“家乡山水”网页添加动态效果。 2. 解决的问题 通过为网页元素添加动态效果,学习在网页中添加层行为以及修改删除层行为操作。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中添加热点、设置热点属性,添加层、设置 层属性。

二、教学目标
1. 知识目标 ⑴ 了解行为的原理。 ⑵ 掌握“行为”面板的使用。 ⑶ 为页面的热点添加“显示-隐藏层”行为。 ⑷ 为页面的热点添加“设置层文本”行为。 ⑸ 掌握修改添加的行为的方法。 ⑹ 掌握删除添加的行为的方法。 2. 能力目标 通过完成本任务使学生掌握在网页中添加、 修改以及删除层的行为, 学会制作动态效果 网页。 3. 情感目标 培养学生耐心、踏实的学习态度;给学生以成功的体验,提高学习网页知识的积极性。

三、教学分析与准备
1. 教学重点 ⑴ 为页面的热点添加“显示-隐藏层”行为。 ⑵ 为页面的热点添加“设置层文本”行为。 (3) 修改层行为。 (4) 删除层行为。 2.教学难点 层行为的原理。 3. 教学方法 任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。 4. 课时安排 4 课时。 5. 教学环境 多媒体网络教室。

四、学习过程(组织课堂、复习知识、教师引领完成任务占 2 学时;举一反三占 2
学时。 ) 教学环节及手段 教师活动 集中学生注意力,准备上课。 通过提问考察学生对添加层、使用层的掌握情 况和上节课作业的完成情况。 学生活动

组织课堂 复习提问

1.总结层的添加与操作的方法。 2.谈谈自己对层及热点的理解,其他同学可以 进行评论。

学生回答,教 师给予提示、补充 归纳。

任务流程
导入任务

为网页添加好层、设置好热点以后,就可以为 热点添加行为了,本任务就是在上一任务完成的热 点上添加层行为,为网页创建动态效果。 提出任务:为网页创建动态效果。 任务二已完成“家乡山水”页面层的添加,页 面布局部分已经完成,本任务需要将准备好的内容 添加进去,并设置其行为。 1.为“金华山景区”热点添加“显示-隐藏层” 行为。 在“文件”面板中双击“travel.html”文件,打 开“家乡山水”页面,勾选“窗口”菜单中的“行 为”选项,或者按下键盘的 Shift+F4 键打开“行为” 面板。 选中景区地图“map.jpg”中覆盖“金华山景区” 的热点, “行为” 单击 面板上的 “添加行为” 按钮 ,

分析任务

完成任务

教师引导学 生动手完成任务。 完成的给予鼓励, 完不成的一定要 给予其提示

在下拉菜单中选择“显示-隐藏层”选项,弹出“显 示-隐藏层”对话框,设置层“Layer2”“金华山景 ( 区”图像所在层)和层“Layer8” (显示文本的层) 为“显示” ,其他层全部设置为“隐藏” ,单击“确 定”按钮。 在“行为”面板的事件栏中,选择该行为的事 件为“onMouseOver” 至此,为“金华山景区”热点添加了一个行为, 预览“家乡山水”页面时,鼠标移上“金华山景区” 热点,层“Layer2”和“Layer8”显示,其他层都隐 藏。 2. 为“金华山景区”热点添加“设置层文本” 行为。 选中“金华山景区”热点,在“行为”面板中, 选择“添加行为”按钮 ,在弹出的下拉菜单中选

择菜单栏“设置文本”→“设置层文本”选项,弹 出 “设置层文本” 对话框, “层” 在 中选择层 “Layer8” , 在“新建 HTML”中输入对该景区的简单介绍,然 后单击“确定”按钮。 在“行为”面板的事件栏中,选择 “onMouseOver” 。

3. 为其他热点设置行为。 使用与上面相同的方法, 参照教材表 5-1 为其他 热点设置“显示-隐藏层”行为。注意在设置某一景 区热点的行为时,将该景区图像所在层和用于显示 文本的“Layer8”层设置为“显示” ,其他层设置为 “隐藏” 。 使用与上面相同的方法, 参照教材表 5-7 为相应 热点添加“设置层文本”行为,输入热点相对应的 景区介绍文字。 至此, “家乡山水”栏目的制作全部完成,保存 并预览检查效果。 思考:单元格设置背景图像和插入图像又什么 区别呢?你能区别开吗?单元格背景图像的大小对 单元格的显示又什么影响呢? 4.知识讲解:行为和事件类型。 行为是 Dreamweaver 8 预置的 JavaScript 程序 库。每个行为由一个动作和一个事件组成。其中, 事件是指行为发生的条件,即触发动态效果的原因, 如鼠标指向、单击等;动作是指事件发生后所作出 的反应,即最终完成的动态效果,比如交换图像、 弹出信息、播放声音等。 可以添加行为的对象有图像、热点、超级链接 文本、多媒体文件或者网页本身等。 ⑴ 常用事件有: 事件 说明 onClick 鼠标单击时触发 onDblClick 鼠标双击时触发 onMouseDown 按下鼠标左键时触发 onMouseUp 鼠标左键按下后松开时触发 onMouseOver 当鼠标指针移上某对象时触发 onMouseMove 当鼠标移动时触发 onMouseOut 当鼠标离开某对象时触发 onKeyPress 当键盘上某个键按下并且放开时 触发 onKeyDown 当键盘上某个键按下时触发 onKeyUp 当键盘上某个键松开时触发 ⑵ 常用行为有: 交换图像:通过更改“img”标签的“src”属 性将一个图像和另一个图像进行交换。 恢复交换图像:将最后一组交换的图像恢复为 它们以前的源文件。每次将“交换图像”动作附加 到某个对象时都会自动添加该动作; 如果在附加 “交 换图像”时选择了“恢复”选项,就不再需要手动 选择“恢复交换图像”动作。 教师讲授

知识小结

弹出信息:可显示一个带有用户指定信息的 JavaScript 警告框,可以为用户提供信息而不能让 用户选择。 打开浏览器窗口:可以在一个新的窗口中打开 URL,可以指定新窗口的大小、特性和名称。 播放声音:可以在网页中播放声音,例如,当 鼠标滑过某图像时可以播放一段音乐;或者当页面 载入时播放音乐。 改变属性:可以通过改变图像、层、表单等的 属性来实现动态效果,例如,层的背景颜色或图像 的宽或高。具体可以更改哪个属性由当前选用的浏 览器来决定, IE4.0 中可以通过此行为更改的属性比 IE3.0 多得多。 设置文本:可用于设置层文本、框架文本、状 态栏文本和表单元素中的文本域文本。 预先载入图像:用于将不立即显示在网页中的 图像预先载入浏览器缓存中,防止当图像显示时由 于下载而导致延迟。 通过完成本任务学习了: 1.为页面中的元素添加“显示-隐藏层”行为。 2.为页面中的热点添加“显示层文本” 。 将本单元“举一反三”文件夹中的“pra5-3”文 件夹拷贝到 D 盘根目录,为其中的两个网页 “practice5-8.html” “practice5-9.html”添加“打开 、 浏览器窗口”行为,设置事件为“onLoad” ,使浏览 任一网页时,两个网页在两个浏览器窗口中同时打 开。 注意选择正确的行为和事件。

学生、教师一 起总结

举一反三
任务目标

启发思路 分组完成任务

学生自评或互评

教师点评总结 布置作业

学生分组完成任务,教师巡视指导,指出问题, 纠正学生不良操作习惯。 每组学生代表点评本组及其他组作品的优点和 缺点,并说明本组那些方面需提高。 总结学生点评结果,补充不足。 1.创建网页“practice5-10.html” ,插入本单元 素材 “举一反三” 文件夹中的图像 “practice5-2.jpg” , 为图像添加“弹出信息”行为,使鼠标经过图像时 弹出信息“月到中秋分外明” 。

2.创建网页“practice5-11.html” ,使用表格、 层及行为创建如图 JYFS5-6 所示菜单,鼠标移到菜 单选项时显示下拉列表,移出时下拉列表隐藏,目 录结构参照表 JYFS5-1。

图 JYFS5-6 表 JYSF5-1 目录结 构 “ 页” “作品 收藏” “个人 日志” “游山 玩水” “留言 板” “ 坛” 论 无 “ dreamweaver ” / “flash”/“photoshop” “工作日志”“学习日 / 志”/“读书日志” “山水风光”“他乡风 / 俗” 无 首 无 下拉菜单

任务四 使用代码制作“异国风情”网页
一、提出任务
1.任务目标 使用 HTML 代码制作一个“异国风情”网页。 2. 解决的问题 通过完成本任务,学习使用 HTML 代码在网页中添加层和热点。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在设计视图中使用“行为”面板添加层和热点,在 代码视图中使用 HTML 代码添加图像和链接。

二、教学目标
1. 知识目标 ⑴ 掌握使用 HTML 代码插入图像和层。 ⑵ 掌握使用 HTML 代码给图像添加热点。 ⑶ 掌握使用 HTML 代码为热点添加行为。 ⑷ 熟悉<area>标签的使用方法。 ⑸ 熟悉<div>标签的使用方法。

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 shape="形状" coords="位置" href="链接" alt="替换文本" /> “area”标签用于设置热点。HTML 中<area>标签 没有结束标志,而且这个元素总是嵌套在<map>标签 内。 “shape”属性:用于设置热点的形状。可设置 为,rect:表示热点为矩形;circle:圆形;poly: 多边形。 “cords”属性:用于设置热点的顶点坐标。 “href”属性:用于添加链接,链接可以是 URL, 也可以是 javascript 代码。 本 例 链 接 的 是 一 段 javascript 代 码 , javascript:ShowDiv(document.all.aa)意思是显示 aa 层(层在下一步骤添加) ,功能为调用 ShowDiv 函 数,显示相应的层。该函数代码将在下文中添加到 <head>和</head>标签中。 “Alt”属性:用于设置当鼠标放到热点上时显 示的内容。 (2) 层标签的语句格式 <div id="层名称" style="position:relative; width: 宽 ; height: 高 ; z-index: 层 叠 位 置 ; display:none"> “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

教学反思
一直以来我都想好好地把学校的生本教育理念灌输到每节课中,在这两个项目中我围 绕“学生主体、教师主导”的设计理念去设计每个教学环节,积极体现学生的主体作用,努力 提高学生的学习效果。 实践证明我的想法是好的,但是在实践中难免有疏忽和做的不够细的地方。比如:由于 我的观察不全面, 忽略了个别学生学习中的心理障碍, 有些学生的畏难情绪影响到他的整个 学习效果;课堂学习气氛热烈但不够和谐。这些都说明了一个问题:我仅仅注重了学生整体 主体的体现,而忽略了个体。经过思考,我认为在课程的教学设计中可以多增加个体展示的 机会,特别是那些学习有困难的学生,我应该多关注他们的动态,多帮助他们。


更多相关文档:

《网页制作》项目式教案2

《网页制作》教案科任:王贤全 班级:高二(8)班 课时:10 节×4 周=40 节 作业:40 次 时间:2010.11.1——2010.11.26 项目四 制作“心情日记”网页本项目...

《网页制作》项目式教案

《网页制作》项目式教案_中职中专_职业教育_教育专区。长汀职业中专学校 教 案 ...2. 3. 4. 创建站点的基本方法 管理站点的基本方法 设置首选参数的方法 创建...

《网页设计与制作》教案

《网页设计与制作》教案_工学_高等教育_教育专区。...教案2012 ~ 2013 学年第 二 学期学 部 工程技术...一风格的网页并更新当前站点,学会编辑库项目并应用库...

《网页制作》项目式教案1

《网页制作》教案科任:王贤全 班级:高二(8)班 课时:10 节×4 周=40 节 作业:40 次 时间:2010.9.27——2010.10.29 项目二 制作网站首页 任务描述:上一...

《网页制作》教案

《网页制作》教案_其它课程_初中教育_教育专区。《信息技术》第三册 新课程标准教案 制作第一个网页(网页诞生了) [教学目的] 的学习兴趣。 2.熟练掌握启动 ...

网页制作公开课教案

公开课教案 教学科目 授课日期 节次 教学内容 网页制作 2013.05.20 上午第二...一级建造师《建设工程项目管理 《建设工程经济计算题考点及例题 《建筑工程...

《网页制作》教学设计

《网页制作》教学设计学科:信息技术 课时 1 课时 课型:新授课 设计者:综合二组+01 号 教学对象 高一年级 教学理念 建构主义学习观认为学习不是简单的将知识由教...

网页制作教案电子版

网页制作教案电子版_院校资料_高等教育_教育专区。...校历 教学内容 第二章《站点的建立与管理 课时 ...选择“浏览器特 定的”项目卡,选中“允许透明”。...

《网页制作》教学设计

魔术揭密 ──《网页制作》教学设计一、教材依据 义务教育中小学教科书(实验)初中信息技术第四册,第二单元《制作七彩的网页》, 活动 1“初识 HTML 语言”以及...

网页制作:项目14 制作交互式网页--电子教案

学校教案 中等职业学校教案 学校第 14 次课 章节 项目十四 制作交互式网页 1....定义使用脚本语言站点的方法 2. 创建数据库连接的基本方法 3. 显示数据库记录...
更多相关标签:
网页制作教案 | 网页设计与制作 教案 | 电子商务网页制作教案 | 中职网页制作教案 | 高中网页制作教案 | 网页的制作教案 | 初中网页制作教案 | 网页制作电子教案 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com