全国xx杯说课大赛计算机专业类一等奖作品：《模板的应用》教学设计

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