1、网页制作之网页制作之模板的应用模板的应用教案教案设计设计 广州市市政职业学校广州市市政职业学校 陈春艳陈春艳 课程名称课程名称 网页制作 项目项目标题标题 项目十 模板的应用商业 类型网站的模板制作 教材教材 高等教育出版社Dreamweaver CS5 网页制作项目实践徐锋 授课授课专业年级专业年级 （学期）（学期） 计算机网络技术专业 中职一年级（下学期） 授课时数授课时数 2 课时（90 分钟） 教学教学目标目标 制定制定依据依据 “计算机网络”专业人才培养方案和课程标准“计算机网络”专业人才培养方案和课程标准 本部分要求学生了解当今普遍使用的布局方法 DIV+CSS 布局，掌握使用 D
2、IV 进行网页 布局的技术，以及能够通过 CSS 样式表达到美化页面的效果。 教材要求教材要求 结合教材项目十： “模板与库的应用”的任务一：网页中模板的应用各部门“工作 职责” ，要求学生制作出模板，说出模板的应用方法，以便快捷制作相似的网站，提高工 作效率。 学情分析学情分析 知识知识 能力能力 储备储备 运用 Dreamweaver CS5 软件制作页面，对页面进行图文的输入和编辑。 具备管理网站目录结构、文件面板的使用、表格的基本操作的能力。 初步掌握表格布局页面的知识，并具备一定和利用表格布局页面的能力。 通过“优秀网页”赏析和“图文并茂网页”制作，学生对网页的制作产生了浓 厚的兴趣
3、。 学生学生 特点特点 学生思维活跃，活泼好动，喜欢交流，动手能力和模仿能力较强。学生自立、 自主意识薄弱，不能主动分析解决问题，探索新知，即创作力差。 学生水平参差不齐，能力各有不同。 教学目标教学目标 说出创建模板的方法，能将已有网页生成模板。 编制基于模板的网页文件(即模板的应用) 根据客户设计需求，规范区分可编辑区和锁定区，利用模板制作风格一致，而内容不 同的页面。 运用静态网页制作的知识，加强自主创作的能力和意识；培养团队互助的意识。 教学重难教学重难 点点分析分析和和 解决措施解决措施 项目项目 内容内容 解决措施解决措施 重点重点 1. 模板创建的两种方法 2. 模板可编区和锁定
4、区修 改及更新 1.通过网站分析，让学生有初步模板的认识；通过 TIPS提示模板是特殊文档， 扩展名是.dwt， 不是html 通过模仿，让学生掌握项目中的模板制作方法及进 行应用； 通过实践，模板的管理方法，从而获得模板管理的 常用技巧。 难点难点 1.模板存放的位置对页面的 影响 2.合理划分模板的可编辑区 域和锁定区。 1.通过观察优秀网站对比，从认知上区分其显示效 果的不同；通过重复练习，加深认识。 2.通过 TIPS 提示， 以及演示正确与错误的的存放方 法，从操作上获得正确的设置方法。 教材内容教材内容 整合整合思路思路 课标理论课标理论的要的要求求 按照“以能力为本位、以职业实践
5、为主线、以项目课程为主体的模块化专业课程体系” 的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和 组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践活动的基础上掌握知 识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。 教材优劣分析教材优劣分析 1、总体分析 优势：项目分析任务细化任务实现任务扩展读为组织形式，知识点全面，讲解 详尽；以一个完整的商业网站的建设为主线，循序渐进地介绍网页设计与制作的知识、技 能与方法，以项目教学的方式细化任务内容 ，通过完成每个项目的学习来掌握不同的知识 点，目标明确。整书的设计既既体现了知识的完整性和系统性，同
6、时将不同的知识分散到 不同项目中完成，每个项目也是一个独立的系统，便也学习与掌握；配套素材完善。 缺点：项目教学后的知识延伸和巩固内容较少，完成项目工作后，没有更的实践练习 对知识点进行加强巩固，练习的内容比较单一，缺乏灵活性 2、本教学单元内容分析 本教材项目十仍然使用表格布局作为经典的布局方法，书中使用“同源国际贸易有限公 司”的网站作为教材案例。本教学内容为制作模板，通过学习该内容，可以快速制作同一 风格的网页，提高工作效率。 教材处理教材处理 1、添加和修改案例 技能的提升需要不断的重复和反复。 因此， 想让学生学会使用模板的方式提高工作效率， 一个案例是远远不够的。但是考虑到课时的安
7、排，也不宜增加太多，因此，本教学内容增 设了一个案例，并作为小组的创作内容。 选取的案例要符合两个特点：一是能体现本模块要求学生掌握的知识技能；二是案例要 具有代表性、时尚感，符合学生的职业岗位能力需求。 根据以上要求， 教学时引入其他经典实用的案例， 将原教材的案例作为拓展实践的内容。 2、教学内容调整 本次教学将项目拆分为各个子任务，以“工作任务”为中心，按照案例要求重新组织知 识点，同时加入学生自主创作元素与要求，让学生在完成任务的过程中，利用之前所学的 知识点进行自我创作，开发思维，并提高设计的工作效率。 教学资源教学资源 参考资料： Dreamweaver CS4 网页设计与制作技能
8、案例教程印刷工业出版社 从零开始-Dreamweaver 典型案例 人民邮电出版社 软件环境版本： Dreamweaver CS5 学习视频： 模板设计与制作 （自主开发） 教学 PPT 项目的项目的任任 务分解务分解 任务一：“商务网页”模板制作。 任务二： “商务网站”模板应用。 任务三： “商务网站”模板管理。 小组实践： “XXXX”网页制作。 教学教学方法方法 任务驱动任务驱动法法（分解（分解子子任务）任务） ：以项目为例，分解子任务，以任务驱动的方式，让学生了解模 板制作的目的，以及应用的方法。通过任务的演示，让学生认识制作模板的方法，编辑和 管理模板。 创设情景创设情景：用于疑问
9、阶段，给学生创设问题情境，让学生跳出当前的模板制作的思维模式， 尝试创新，并引出下一个与模板相关的知识点，实践下一子任务； 思维引导：思维引导：帮助学生解决在模仿任务和实践时遇到的问题；帮助学生完善知识技能，提升 自主探究和创新技能的能力。主要用于疑问、分析、实践阶段。右图此法示意图： 此法旨在课堂中先引导学生质疑，再在知识和技能 的加工过程中，充分挖掘、发挥学生的创造性思维 去分析和尝试，解决问题。并进一步通过使用这种 思维方法指导实践。从而引发下一轮的质疑和思考。 让学生进行持续性的学习。 基于榜样基于榜样：用于作品互评阶段，激发学生性格中的 “好胜”因子，营造班级中“敢比敢追” 的学习氛
10、围； 分层教学：分层教学：解决学生能力参差不齐的问题，通过增加创造型思维的训练、设计和逐步制作 自己的网站等手段，使有能力的学生进一步发挥自己的技能，进行深度创作和 设计；通过巡视、指导，组内互助，使能力稍差的学生，按教师的要求完成基 本技能的操作，暂缓创造等手段，使能力弱的学生减少挫败感。 学习方法学习方法 学生的学习主要经历以下阶段： 听看-理解-应用-巩固-思考-分析-实践 听看：听看：是知识和技能学习的主要手段； 理解：理解：通过听看，了解模板的作用； 应用：应用：模仿老师操作，完成任务； 巩固：巩固：对比和重复任务，解决制作过程中的问题，巩固知识技能； 思考思考：进入老师设置的问题情
11、境，了解和尝试解决问题，获得新技能和知识点； 分析：分析：小组讨论和交流，分析任务的完成情况，问题的发现和解决等，系统化知识； 实践：实践：应用技能完成实践案例，并在此过程中，发挥创造型的思维，自主探究和学习。 教教 学学 过过 程程 思维引导 项目引入 项目分析 任务分解 疑问分析获新知实践 模仿制作（子任务分步实施） 知识归纳 及拓展 作品互评 任务评价 课外实践 环节环节 教师活动教师活动 学生活动学生活动 设计意图设计意图 环节一：环节一： 项目项目引入引入 (10(10左右左右) ) 1、 展示风格统一的优秀网站 （一个是使用框架制作、一个是使 用模板制作的对比） 提问： 使用之前的
12、方法能否完成案例的 页面制作？ 1、认真思考，在教师引导下， 回答问题。 巩固框架布局页 面 的 方 法 和 设 置。 2、 对比网站作品（一个是使用框架制 作、一个是使用模板制作的对比） 提问：注意观察页面文件名的变化， 这些页面的制作方法是否与框架的制 作方法一样？这些网站有什么统一的 特点呢？ 2、认真思考，在教师引导下， 回答问题。尝试框架布局，发 现页面的文件名有改变，跟框 架布局的方法不一致。 导入模板制作方 法 环节二：环节二： 项目分析项目分析 任务分解任务分解 ( (5 5左右左右) ) 分析本次学习的项目， 并对项目进行任 务分析 对任务进行说明 帮助学生理解本 次课程的项
13、目内 容和要求 环节三：环节三： 模仿模仿 任务一任务一 模板的制模板的制 作作 (1(15 5左右左右) ) 1、展示“商务网页”的页面效果，让 学生先自己分析其组成部分， 哪些是锁 定区，哪些是可编辑区。 1、回忆之前掌握的网页布局要 素，根据网站统一风格的特点 回答问题； 学生可能知道有哪几种布局方 法，但是对于这个页面的布局， 不一定能说清楚。 让学生巩固之前 所掌握的布局构 成元素，并产生 想要设定可编辑 区 的 想 法 和 兴 趣。 2、 带领学生分析页面为以下几个区域： Logo 区（锁定区） 导航区 （锁定区） 可变创作区 （可编辑区） 版权区（锁定区） 演示知识： （1） 进
14、行网页版面布局的设 计（2）可编辑区的插入 3.制作模板的演示，TIPS 强调模板是 特殊文档，扩展名是.dwt，不是 html； 保存之前要注意加入可编辑区 。 4. 【知识延伸】已有网页的模板创建 方法另存为 dwt 格式文件。 创设情境：已有建立好的 HTML 风格的 布局，如何改为模板。 鼓励学生尝试另存的方法； 2、认真听讲，体会页面布局的 分析方法“匚”布局。 3、模仿制作模板，添加可编辑 区后进行保存。 4.利用已有网页，使用另存模 板的方法进行模板制作。 教师活动的步骤 3、4 使学生使用 两种不同方法制 作模板， 【实现重 点】 内容的教学。 环节三：环节三： 模仿模仿 任务
15、二任务二 模板的应模板的应 用用 ( (1010左右左右) ) 导入导入问题：问题：制作模板后，如何应用? 引入任务二：模板的应用 1、 新建网页并应用模板 2、 【突出重点】 ：演示在可编辑区插 入自主设计的内容；演示锁定区无 法操作；两者进行对比【突破难点 设计前应规划好可编辑区与 锁定区】 3、 更变模板存放的位置，让学生对比 更改前后的变化【突破难点模 板存放的位置对页面的影响】 4、 分层教学：对较好的学生提出运用 以前所学的内容自主创作可编辑 区，利用素材美化可编辑区的内 容。较弱学生只要求完成教师的演 示内容。 1、学生分析探讨模板应用的方 法 2、认真观看老师演示，记忆老 师讲
16、解时重点强调的部分操 作；动手模仿操作，部分学生 在操作过程中出现问题，提出 疑问。 3、发现更改后应用模板的网页 无法正常显示。 1、 让学生清楚本 页面的布局，区 分锁定区和可编 辑区。让学生在 模仿任务的过程 中，自主的构建 可 编 辑 区 的 技 能。 2、 【突破难点】 让学生明确不能 随意修改模板存 放的位置，以及 模板中图片存放 的位置。进一步 明确在HTML语言 中相对路径的意 义和作用。 2、在班级巡视，及时发现操作遇到问 题的学生，给予提示和帮助。 帮助的措施： 引导学生对比， 鼓励学生 重复任务。 在老师的引导下，对比和重复 任务，找出操作错误的原因。 培养学生分析和 解
17、决操作中问题 的能力，突破教 学难点。 3、总结常见问题，重复演示或者让学 生重复演示操作。 1、独立或者在小组成员帮助下 重复任务操作，体会模板的应 用。 肯 定 和 赏 识 学 生，并给予未完 成任务的学生更 多的观摩机会。 环节三：环节三： 模仿模仿 任务三任务三 模板的管模板的管 理及更新理及更新 ( (1515左右左右) ) 导入问题：导入问题： 如果要统一修改锁定区怎么 办？ 1、演示修改“商务网页”.dwt 模板 的左栏布局的内容， 并对应用的网页统 一的更新。 【演示重点知识】 修改模板 更新模板 1、认真观看老师演示，记忆老 师讲解时重点强调的部分操 作； 2、动手模仿操作，
18、部分学生在 操作过程中出现问题，提出质 疑； 3、 模仿过程中， 掌握一下技能： 修改模板的锁定区； 模板更新的方法； 4、巩固技能：自己动手完成右 栏内容的添加。 让学生在模仿任 务的过程中，自 主的修改模板并 对 模 板 进 行 更 新。 3、学生动手时，在班级巡视，及时发 现操作遇到问题的学生， 给予提示和帮 助。 质疑： 【常见问题 1】 部分网页修改锁 定区，怎么处理？ 【常见问题 2】修改锁定区后， 应用模板的网页会影响吗？ 解决问题的过程中能操作以下 技能： 更新模板的方法； 在老师的引导下，对比和重复 任务，找出操作错误的原因。 资源：学习网站 培养学生分析和 解决操作中问题
19、的能力。 4、总结常见问题，老师重复演示或者 让学生重复演示操作。 独立或者在小组成员帮助下重 复任务操作，体会设置上的区 别。 肯 定 和 赏 识 学 生，并给予未完 成任务的学生更 多的观摩机会。 巩固学生对教学 难点的掌握。 环节四：环节四： 知识扩展知识扩展 （1010左右）左右） 创设情境 1：已有建立好的 HTML 风格 的布局，如何改为模板。 鼓励学生尝试另存的方法； 【知识扩展】 已有网页的模板创建方法 另存为 dwt 格式文件 学生探究、尝试新的布局方法。 掌握表格行和列添加的多种方 法； 引导学生探索行 的插入方法，自 主的完善知识技 能。 利用掌握的布局 知识，提出新的
20、布局方法。 创设情境 1：已应用模板的网页，若不 想再受模板改变的影响。 【知识扩展】分离模板 学生探究、尝试。 巩固单元格框线显示的方法。 引导学生灵活的 使用小像素表格 布局和美化页面 的技巧。 环节环节五五： 互评分析互评分析 （1515左右）左右） 1、给学生提供机会，上台交流，展示； 给予正面的鼓励和奖励。 2、组织学生对作品进行评价。 3、点评学生作品，告知学生评价的关 注点。 4、对学生的展示和交流内容进行概括 和总结。 资源：教学 PPT 1、 个别学生展示制作过程。 2、 认真听老师点评， 了解评价 页面效果的标准。 内容： 互评页面完成情况。 分析问题的原因和解决方法。 提
21、出不同的解决方案。 填写评价表。 3、 选代表上台交流。 4、 认真学习其他同学的心得， 取长补短。 5、 跟老师总结知识和技能。 6、 激发班级其他学 生的好胜心理， 在班级营造“敢 比敢追”的学习 氛围。 互评、点评中要 引导学生正确看 待别人对自己的 评价学会宽以等 人；学会巧妙地 运用语言艺术对 存在问题的同学 提出批评。 环节六：环节六： 归纳知识归纳知识 和和 布置课外布置课外 实践任务实践任务 （5 5左右）左右） 对知识点进行归纳， 作总结说明， 强调 重点和难点， 可编辑区和锁定区的作用 及使用。 认真听老师总结 巩固知识技能， 强调重点， 难点。 重新组织所学， 系统化知识
22、，技 能得以提升。 根据老师提供的素材， 或自找素材完成 “兴趣小组” 网站统一风格的制作， 使 用模板制作的方法完成。 要求一周后完成提交作品。 1、分组设计“兴趣小组”网站 网页布局。 2、组间互助，完成实践页面的 制作。 3、大胆的尝试创造，自主探究 遇到的新知识和新技能，巩固 模板的制作及应用。 反复任务，提升 技能水平。 教教 学学 流流 程程 图图 开始 作品欣赏 导入问题 导入新项目模板 分析项目 细分任务 任务讲解演示 指导启发 子任务的完成情况 项目是否完成设置问题否 分析问题 引入新任务 否 是 设置问题 知识拓展 教师点评 归纳总结 布置课外实践任务 结束 是 巡视指导
23、任务学习模仿 复习框架知识 展示交流 学生互评 对比重复操作 解决知识点 发现问题 教师活动学生活动 活动判断 个个 性性 化化 教教 学学 为学有余力的学生所做的调整为学有余力的学生所做的调整: : 1、 增加创造型思维的训练，课前要多准备相关任务和实践案例的创造型问题，引导他们自主学习。 2、 继续自己网站的制作。 以下问题情境可以备用： 增设内容：在可编辑区增设丰富的布局，美化网页内容； 为需要帮助的学生所做的调整为需要帮助的学生所做的调整: : 1、对技能学习和掌握较慢的同学进行小组内互帮、个别指导、降低要求。巡视中及时发现完成较好 者，给他们机会展示，让其他同学有更多时间和机会观摩学
24、习。 2、暂缓创造环节的实施，先完成任务和巩固技能。 教教 学学 效效 果果 评评 价价 在小组监督下得学生自评和在学生监督下得老师评价相结合 学生评价表：学生评价表：分析阶段，在小组监督下，由学生填写。分析自己的任务完成情况，技能掌握情况和未完 成任务的原因，作为老师评价和改进教学的依据。 （表附后） 教师教学效果评价表：教师教学效果评价表：从自己的角度总结教学效果，给出教学反思和改进的意见。 （表附后） 教教 学学 反反 思思 思得 以就业为导向，能够合理的增设案例，重组教学内容，让学生得到符合岗位能力需求的技能训练 ； 以项目任务为中心，让学生在完成项目的基础上自主的构建知识技能，符合学
25、生的认知规律。 提供学习资源网站、组织小组互助、创造型思维训练等形式为学生的自主学习创造了条件，对培养 学生养成主动发现和解决问题的好习惯起到积极的促进作用。 进行分层教学，使不同程度的学生能满足不同的知识需求。 思失 没有充分的挖掘教学资源，如网络视频教学资源。 思改 尝试使用网络上有的网页设计教学视频，改变单一的老师讲解演示，增加学生的学习兴趣。 附 1： 学学 生生 评评 价价 表表 模块名称模块名称 “网站网页”模板的制作 班级班级 姓名姓名 项目项目任务任务 （任务完 成情况） 评价指标评价指标： (根据完成情况填写根据完成情况填写 A-C) A.能领会并独立完成任务思路清晰能领会并
26、独立完成任务思路清晰 B.出现问题，经提示出现问题，经提示能解决并完成任务能解决并完成任务 C.无法独立完成任务无法独立完成任务 自我评价自我评价 30% 小组互评小组互评 30% 教师评价教师评价 40% 任务一 任务二 任务三 独立实践 没有完成 任务的原 因在于哪 方面？ 知识技能知识技能 （目标达 成情况） 评价指标 (根据根据实际实际情况填写情况填写 A-C) A.已掌握，并能独立操作已掌握，并能独立操作 B.基本掌握能，发现错误基本掌握能，发现错误 C.操作混乱，易出错操作混乱，易出错 自我评价自我评价 30% 小组互评小组互评 30% 教师评价教师评价 40% 知识技能 目标 完
27、成情况 创建模板 编辑模板的锁定区 模板的应用， 对可编辑区进行编 辑 模板的更新 能力目标 完成情况 大胆尝试，勇于创新的能力。 能否通过自主学习解决的能力。 通用能力 能根据页面设计 需要，主动构 思网页文档相关信息 能够主动关心、 帮助组员或他人 完成项目及任务 能够对完成任务过程中遇到的 问题发表有建设性的见解， 效果 良好 能有针对性对他人的网页设计、 项目任务完成情况进行评价 组员签字 附 2： 教师课堂效果自评表教师课堂效果自评表 评价内容评价内容 评价标准评价标准 非常好非常好 好好 一般一般 全体学生动手参与教学全过程 全体学生能完成设定的教学任务 学生能提出学习和研究的问题，并且通过合作探究努力解决问题 学生思维活跃，积极主动发言 学生间交往是多向的，学生是否积极参与小组讨论，发表自己的见 解，评论别人发言 学生在学习中有愉悦的体验， 每一名学生是否都有不同程度的收获 后进学生对本节课知识技能的掌握程度 学生学习本节课还存在的问题 学生存在问题的解决方法
