发布时间 : 星期三 文章《网页制作》项目式教案 - 图文更新完毕开始阅读1395aa8aa1116c175f0e7cd184254b35eefd1a07
任务三 添加图像
一、提出任务
1．任务目标
为首页添加图像内容。 2. 解决的问题
本任务通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。 3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容。
二、教学目标
1. 知识目标
⑴ 掌握使用插入栏插入图像。 ⑵ 掌握使用菜单栏插入图像。
⑶ 掌握使用Ctrl+Alt+I组合键插入图像。 ⑷ 掌握使用文件面板插入图像。 ⑸ 掌握编辑图像的方法。 2. 能力目标
能够根据具体情况在指定位置灵活高效地插入图像并进行必要的编辑。 3. 情感目标
通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。
三、教学分析与准备
1. 教学重点
⑴ 插入图像的各种方法。 ⑵ 图像的编辑操作。 2．教学难点
图像编辑的方法。 3. 教学方法
任务驱动学习、协作学习和探究学习相结合。 4. 课时安排
4课时。 5. 教学环境
多媒体网络教室
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。） 教学环节及手段 组织课堂 复习知识
教学内容 集中学生注意力，准备上课。 备注 通过提问考察学生对设置文本样式及插入水 平线的掌握情况。 复习时教师按1．如何设置文本样式？ 2．如何重命名文本样式以及在CSS样式面板照学生回答演示操作，指出其中的问中修改文本样式？ 题。 3．如何插入水平线？ 13
任务流程 导入任务 分析任务 完成任务 结合PPT 进行讲解 知识总结
通过联想学校宣传栏、报纸、儿童书籍以及课 本等内容，总结出其中都有图像；引导学生懂得通 过插入图像可以使内容生动直观，具体形象。进一 步打开两个网页，一个是全文本的，一个是图文并力求通过任务茂的，让学生通过比较这两个网页明确哪一个更适吸引学生学习用并说明原因，引出要使首页内容生动形象，图像导入，欲望。 的添加和编辑就必不可少了。 提出任务：为首页添加图像内容。 引入课题。 图像是网页中经常使用的元素，图像的插入方 法比较简单，但需要区分图像的格式，并不是所有 的图像都能在网页中正常显示。插入图像后需要熟 悉其属性面板的设置。 1．网页中图像文件的格式及其特点 教师提出问题，教师提出下列问题让学生分组查找答案： 并提示可以通过网通常在网页中使用什么格式的图像文件，它们络搜索及查帮助找的特点是什么？ 到答案。 在同学回答上述问题基础上，教师总结并讲解 在网页中通常使用“.jpg”、“.gif”和“.png”格 式图像文件及其这三种格式图像文件的特点。 知识讲解。 2．准备素材：将本单元素材文件夹中的 “images”文件夹下的全部图像素材复制到 D:\\mysite\\images文件夹下。 ３．使用文件面板插入图像 拖曳文件面板中的 “top.jpg”到“自我介绍” 标题前，插入图像“top.jpg”。选中所插入的图 像，在属性面板中设置对齐方式为“右对齐”。 预览页面效果。 通过复习Word中插入图像的方法，总结出另师生一起回顾，外三种插入图像的方法。 探索发现插入图像A．使用菜单栏插入图像 的三种方法。 定位插入点到“立志飞翔”文字前，选择菜单 栏“插入”菜单中的“图像”选项，插入“flying.gif” 图像文件并设置对齐方式为“左对齐”。 根据Word中插B．使用插入栏常用类别中的按钮插入图像 入图像的经验让学定位插入点到“立志飞翔”的第三段文字前，生尝试进行，尝试失选择“插入”栏“常用”类别中的按钮，插败的可以查找“帮助”或通过网络获得入“flying.gif”图像文件并设置对齐方式为“右答案。 对齐”。 C．使用Ctrl+Alt+I组合键插入图像 定位插入点到“立志飞翔”的第五段文字前，14
举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 使用Ctrl+Alt+I组合键，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。 4．介绍图像属性面板 完成图像的编辑。 概括本课插入图像的四种方式。 1．将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”中，裁剪后宽度为200像素，高度为100像素，并设置边框 宽度为5，完成后预览页面。 教师启发思路，插入后选中该图像并通过属性面板完成。 学生自己动手完成。 把不同层次的学生分在一组中，鼓励同学积极 研究探索完成任务。 组织不同组的同学互相评论对方完成任务的 优缺点。 教师对每组同学完成任务情况进行总结，对完 成任务的表扬，对没有完成任务的鼓励，并帮助他 们分析没有完成的原因。 2．新建网页“practice2-8.html”，插入本单 元素材文件夹中的“jyfs2.jpg”，尝试使用 Dreamweaver 8的图像编辑功能修改图像的亮度并 进行锐化设置。 插入后选中该图像并通过属性面板完成。 把不同层次的学生分在一组中，鼓励同学积极 讨论完成任务的方法 组织不同组的同学互相评论对方完成任务的 优缺点。 教师对每组同学完成任务情况进行总结，对完 成任务的表扬，对没有完成任务的鼓励，并帮助他 们分析没有完成的原因。可以根据每组任务完成情 况结合自评与互评情况给出每组的成绩。 1．通过网络下载3张图片，文件类型分别为“jpg”、“gif”、“bmp”，使用不同的方法插入到一个新建页面 “practice2-6.html”中。
15
任务四 创建与应用CSS美化网页
一、提出任务
1．任务目标
使用CSS美化网页。 2．解决的问题
本任务通过为对首页进行美化，学习应用CSS样式。 3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。
二、教学目标
1. 知识目标
⑴ 了解CSS样式的作用与特点。 ⑵ 掌握使用CSS设置文本样式。 ⑶ 掌握使用CSS设置背景样式。 ⑷ 掌握使用CSS设置列表样式。 ⑸ 掌握使用CSS设置水平线样式。 2. 能力目标
能够使用CSS样式面板进行样式的设置，区分使用“类”样式与“标签”样式。通过帮助或搜索引擎等查询学习过程中出现的的概念和定义，掌握获得相关信息的方法。 3. 情感目标
正确看待自己，合理评价他人。
三、教学分析与准备
1. 教学重点
⑴ CSS样式的设置。
⑵ “类”样式与“标签”样式的区别。 2．教学难点
“类”样式与“标签”样式的区别。 3. 教学方法
提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。 4. 课时安排
4课时。 5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。）
教学环节及手段 组织课堂 复习知识
教学内容 备注 集中学生注意力，准备上课。 复习时教师按通过提问复习上节课所学内容，并了解学生对照学生回答演示操上节课知识点的掌握情况。 作，指出其中的问1．网页中文本样式是如何设置的？ 2．其他网页元素的样式是如何设置的？是否也题。 可以使用“属性”面板来完成？ 16