《网页设计与制作》课程教学设计.docx

网页设计与制作课程教学设计“搜索引擎”网站首页的制作 学 校：设 计 人：所属课程：所属专业：授课课时：教学设计 网页设计与制作 软件技术 6 学 时 “搜索引擎”网站首页的制作教学设计方案 课程名称 教材 授课时数 网页设计与制作 项目标题 “搜索引擎”网站首页的制作 教育部职业教育与成人教育司推荐教材网页制作教程 6课时 授课地点 网站规划实训室 教学内容分析： 课标理论的要求 按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。 教材优劣分析 1、总体分析： 优势：以预备知识任务实施延伸阅读为内容的组织形式，知识点全面，讲解详尽；任务教学，步骤清晰，目标明确；配套素材完善。 缺点：仍是传统的先介绍知识点，再进行项目教学，没有体现“做中教，做中学”的课改特色。 2、本教学单元内容分析： 原教材项目三集中了所有页面布局的技术，div布局的案例甚至不是单独的任务，而只在实训内容中给出，不能体现出DIV作为先进网页布局方法的重要地位，并且案例只有一个，技能训练内容较少，无法让学生真正掌握DIV布局的方法。 教学内容整合 1、添加和修改案例 技能的提升不在理解，而是不断的重复和反复，才能由最初的知道怎么做，即初级技能，上升到动作趋向自动化，即技巧性技能。因此，想让学生学会使用DIV进行页面的布局，一个案例是远远不够的。但是考虑到课时的安排，也不宜增加太多，因此，本教学内容增设了一个案例。 选取的案例要符合两个特点：一是能体现本模块要求学生掌握的知识技能；二是案例要具有代表性、时尚感，符合学生的职业岗位能力需求。 教材案例“一翔软件”网页能符合以上特点。但是，在布局上嵌套多，稍嫌复杂，div布局由于CSS样式规则杂且多的原因，本身就比较难掌握，太复杂的例子会影响学生学习的兴趣和动力，因此，引入了相对简单的“搜索引擎”案例，将原教材的案例作为拓展实践的内容。 将“一翔软件”页面修改、简化，作为拓展实践的选择制作页面，以适应学生参差不齐的学习和实践能力。 2、教学内容调整 加重了DIV+CSS布局方法的讲解，将DIV布局作为独立的模块划分出来； 现将教学内容以知识点为中心转变为以“工作任务”为中心，让学生在完成任务的过程中，自主的构建知识和技能，发展专业能力。 教学目标设计： “计算机网络技术”专业人才培养方案和课程标准 本部分要求学生了解当今普遍使用的布局方法-DIV+CSS布局，掌握使用DIV进行网页布局的技术，以及能够通过CSS样式表达到美化页面的效果。 教材要求 结合教材项目三：“网页布局与批量制作”的任务二实训：制作“一翔软件”网页中要求学生掌握的DIV+CSS布局的知识和技能。 知识目标 能力目标 能够使用DIV+CSS进行页面的布局； 能够灵活的使用CSS样式定位和美化页面元素。 素质目标 提升使用DIV进行网页布局的意识。 提升网页设计和制作中自主学习和团队合作的意识。 教学目标 制定依据 教学目标 掌握DIV布局页面的方法； 学生情况分析： 认知水平 学生已经学习过表格布局、CSS样式设置和层的使用方法； 通过表格布局的学习，学生对网页的布局和制作产生了浓厚的兴趣； 动手能力和模仿能力较强。 学生自立、自主意识薄弱，不能主动分析解决问题，探索新知。即创作力弱。 学生思维活跃，活泼好动，喜欢交流，合作解决问题。 教学重难点分析和解决措施 项目 内容 使用DIV+CSS重点 布局页面的方法。 Div标签的布局难点 显示； 标签中层的显解决措施 通过分析，让学生有初步布局的认识； 通过模仿，让学生掌握案例中的布局方法； 通过实践，让学生跳出当前的布局模式，体会新的布局方法，从而获得布局的常用技巧和布局优劣的区分方法。 通过对比，从认知上区分其显示效果的不同； 通过重复任务，从操作上获得正确的设置方法。 学习能力 学习特点 教学 资源 通过反复任务，掌握布局的技巧和常用的属性设置技巧从而美化页面。 示。 参考资料从零开始-Dreamweaver典型案例 人民邮电出版社； Dreamweaver8工作环境； 网页设计与制作精品课程网站； 教学幻灯片； 任务 分解 任务一：分析“搜索引擎”页面的布局； 任务二：“搜索引擎”页面页眉布局与制作； 任务三：“搜索引擎”页面主体布局与制作； 任务四：“搜索引擎”页面页脚布局与制作； 独立实践：“一翔软件”页面制作。 引入 模仿 创造 分析 实践 教学 环节 概述 引入：通过提问引入DIV布局方法，激发学生完成案例页面的兴趣； 模仿：通过老师讲解演示、学生学习模仿、引导学生分析解决任务过程中的问题，让学生在任务的完成过程中，自主的构建表格布局、属性设置等知识和技能。 创造：通过给学生设置问题情境，引导学生在了解问题、尝试解决问题的过程中对所掌握的知识和技能举一反三，进而获得新技能。 分析：当学生能够通过尝试操作举一反三，甚至获得新技能的时候，老师要用严谨的态度，灵活的教学方法讲解新技能，归纳和总结学生做得，帮助学生理解和消化。 实践：通过实践内容，学生能够验证知识技能，发现新的质疑，从而探究，创新。 教学 方法 讲解法：通过讲解，让学生了解布局、CSS样式设置操作的目的； 演示法：通过任务的演示，让学生了解DIV+CSS布局的流程，掌握DIV布局方法和CSS样式设置； 提示引导法：帮助学生解决在模仿任务和实践时遇到的问题； 创新型思维引导法：帮助学生完善知识技能，提升自主探究和创新技能的能力。主要用于创造、分析、实践阶段。以下是此法示意图： 此法旨在课堂中先引导学生质疑，再在知识和技能的加工过程中，充分挖掘、发挥学生的创造性思维解决问题，并进一步通过分析和这种思维方法指导实践。从而引发下一轮的质疑和思考。让学生进行持续 性的学习。 情境教学：用于创造阶段，给学生创设问题情境，让学生跳出当前的布局思维模式，尝试创新； 榜样教学：用于创造阶段，激发学生性格中的“好胜”因子，营造班级的“敢比敢追”的学习氛围； 分层教学：解决学生能力参差不齐的问题，通过增加增加创造型思维的训练、设计和逐步制作自己的网站等手段，使有能力的学生“吃饱”，通过巡视、指导，组内互助，暂缓创造等手段，使能力弱的学生“吃下”。 学习 方法 学生的学习主要经历以下阶段： 听看-理解-应用-巩固-创造-分析-实践 听看：是知识和技能学习的主要手段； 理解：通过听看，了解布局和属性设置的意图； 应用：模仿老师操作，完成任务； 巩固：对比和重复任务，解决制作做程中的问题，巩固知识技能。 创造：进入老师设置的问题情境，了解和尝试解决问题，获得新技能。 分析：小组讨论和交流，分析任务的完成情况，问题的发现和解决等，系统化知识。 实践：应用技能完成实践案例，并在此过程中，发挥创造型的思维，自主探究和学习。 教学过程和教学资源设计： 环节 教师活动 学生活动 认真思考，在教师引导下，回答问题： 优点：表格布局操作简单，属性直观，学生易上手； 缺点：不能横向排列；不能嵌套太多；不易修改等； 设计意图 因为有缺点，才寻找更好的解决方法，本提问目的是通过表格布局的优缺点引入DIV布局方法。 设疑，让学生产生好奇。 给学生展示当今的流行布局页面，激发学生兴趣。 提问：表格布局的优缺点有哪些？ 同时帮助学生总结有缺点。 回答问题，但是学生大部复习 提问：当今最流行的布局方法是什么？ 分回答不上来。 引入 带着这个问题，给学生展示网页。 (15 踊跃给出网址，观看源代左右) 码， 资源应用：网络 查看其源文件，发现多数都是DIV布局的网页。 在老师的提示下，发现当今多数网页布局以DIV+CSS为主。 用事实回答疑问。 解答第二个问题，引入DIV布局方法。 对DIV有了初步认识。 模仿 任务一 (15左右) 2、在学生说出自己的分析结果后，继 续分析，划分出每一个布局并按含义确定每一部分的ID。 1、展示“搜索引擎”的页面效果，让学生先自己分析其组成部分。 1、回忆之前掌握的网页布局要素，回答问题。指出划分为页眉、主体、页脚。 让学生巩固之前所掌握的布局构成元素。 2、认真听讲，体会div页面的分析方法。 细化出本页面中的布局DIV。 3、使用PPT给出正确的布局和DIV命名。 topDiv1topDiv3leftDiv1leftDiv2rightDiv1rightDiv2footDivtopDiv23、看演示，听讲解，记忆Div标签的命名规则； 让学生养成规范化命名的习惯。 资源：教学PPT 1、分别演示topDiv1、 topDiv2、topDiv3标签的插入，和内容设置； 1、认真观看老师演示，记 忆老师讲解时重点强调的 部分操作； 2、动手模仿操作，部分学Ø DIV的插入； 生在操作过程中出现问Ø 使用CSS样式控制DIV的方法； 题，提出质疑； Ø Div标签左右浮动设置； Ø Div标签的背景和高宽的设置； 资源：学习网站 Ø Div标签中其他网页元素的插入。 模仿 任务二 (202、学生动手时，在班级巡视，及时发左右) 现操作遇到问题的学生，给予提示和帮助。 措施：引导学生对比，鼓励学生重复任务。 让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。 预览效果错乱； 布局时Div标签出现嵌套，不易修改。 培养学生分析和解决操作中问题的能在老师的引导下，对比和力，突破教学难点。 重复任务，找出操作错误的原因。 资源：学习网站 独立或者在小组成员帮助下重复任务操作，体会设置上的区别。 HTML编码中<div>标签的先后顺序和CSS样式决定了标签内容的显示效果； 肯定和赏识学生，并给予未完成任务的学生更多的观摩机会。 巩固学生对教学难点的掌握。 3、总结常见问题，重复演示或者让学生重复演示操作。 1、分别演示leftDiv1、rightDiv1、 leftDiv2、rightDiv2标签的插入和设1、认真观看老师演示，记置； 忆老师讲解时重点强调的部分操作； 2、动手模仿操作，部分学 生在操作过程中出现问Ø 边界和填充含义 题，提出质疑； Ø Div标签的布局排列和上下间距的 设置； 资源：学习网站 Ø Div标签边框的设置； 2、主体内容的布局和美化 让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。 表格布局栏目中的文字等 学生可以独立完成。 模仿 Ø CSS各属性的设置和含义； 任务三 Ø 表格的布局和内容设置。 (60左右) 让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。 3、学生动手时，在班级巡视，及时发现操作遇到问题的学生，给予提示和帮助。 body部分的标签不能正常左右显示； 层不能正常显示。 在老师的引导下，对比和重复任务，找出操作错误的原因。 资源：学习网站 独立或者在小组成员帮助下重复任务操作，体会设置上的区别。 Ø 上下左右边界的含义和设置； Ø 层的显示与其他网页元素的关系 独立完成“搜索引擎”页面页脚布局与制作。 培养学生分析和解决操作中问题的能力，突破教学难点。 4、总结常见问题，老师重复演示或者让学生重复演示操作。 肯定和赏识学生，并给予未完成任务的学生更多的观摩机会。 巩固学生对教学难点的掌握。 肯定和赏识学生，并给予未完成任务的学生更多的观摩模仿 在班级巡视，及时发现操作遇到问题的任务四 学生，给予提示和帮助。 (20左右) 给学生提供机会，上台交流，展示。 给予正面的鼓励和奖励。 个别学生上来展示制作过程。 学生探究、尝试新的布局方法。 了解DIV与层的不同点； DIV标签的嵌套使用； 学生探究、尝试 Ø 通过复制粘贴HTML代码，可以更快的完成DIV标签的设置； Ø 掌握了CSS属性在代码窗口的创建和修改。 机会。 应用和巩固以上所学习的DIV+CSS布局方法。 拓展学生的布局方法和能力；培养自主学习能力。 创设情境1： 能不能使用其他方法去完成本页面的布局； 探究 创造 创设情境2： 如何更快的完成网页布局； 引导学生使用代码视图查看和修改页面，提升网页设计的能力。 组织学生分组讨论、交流 Ø 点评和互评任务的完成情况； Ø 分析制作过程中的问题； 分析 Ø 分享你掌握的布局技巧； 总结 总结。 资源：教学PPT 互评、点评中要引导学生正确看待别人对自己的评价学会宽以等人；学会巧妙地运用语言艺1、 分组讨论； 术对存在问题的同2、 选代表上台交流； 学提出批评。同时3、 认真其他同学的心得，通过点评，互评各取长补短； 自的作品，巩固知4、 跟老师总结知识和技识技能，达到强调能。 重点，攻破难点的目的。最后，重新组织所学，让知识得以系统化，技能得以提升。 1、分组分析“一翔软件”网页布局； 2、组间互助，完成实践页面的制作。 3、大胆的尝试创造，自主探究遇到的新知识和新技能。 1、完成书后相关知识 2、尝试课后操作题的制作，巩固DIV+CSS布局方法和属性设置。 让学生通过分组交流、独立实践，巩固表格的布局和属性设置方法，进而发现问题，补充和创新知识技能。 1、组织学生分组分析“一翔软件”网页布局； 实践 创造，掌握遇到的新知识和新技能。 3、讲解学生发现的或者遇到的新技能。 1、继续未完成的独立实践。 2、完成书后相关习题。 3、使用DIV方法完成课后操作题“热门科技”。 课外 任务 反复任务，提升技能水平。 个性化教学设计： 为学有余力的学生所做的调整: 1、提供难度稍高的DIV布局实践页面； 2、增加创造型思维的训练，课前要多准备相关任务和实践案例的创造型问题，引导他们自主学习。 以下问题情境可以备用： 创设情境1： 不使用表格完成body部分文字的布局； 创设情境2： 如何让标签能够居中对齐。 为需要帮助的学生所做的调整: 1、对技能学习和掌握较慢的同学进行小组内互帮、个别指导、降低要求。巡视中及时发现完成较好者，给他们机会展示，让其他同学有更多时间和机会观摩学习。 2、暂缓创造环节的实施，先完成任务和巩固技能。 学生学习效果评价设计： 在小组监督下的学生自评和在学生监督下的老师评价相结合： 学生自评表：分析阶段，在小组监督下，由学生填写。分析自己的任务完成情况，技能掌握情况和未完成任务的原因，作为老师评价和改进教学的依据。 教师评价表：从学生的学习态度和学习效果，给予客观的评价，并给出自己的意见和建议。 教学反思： 反思本项目的教学，教学活动能够循序渐进、螺旋上升, 符合学生的认知规律。教学策略丰富、实用而新颖、独特，突破了学生的认知障碍，通过分析、模仿、实践，突破了教学的重点；通过对比、重复和反复，突破了教学的难点，从而优化了课堂。充分调动了学生学习的积极性。本课教学设计真正体现了“以学生为中心，在做中教，在做中学”的教学思想和理念，通过实践，学生的技能不断加强，实效性强。 当然，在教学过程中，还存在一些不足之处，比如在让学生模仿的过程中，操作的步骤和方法不免单一，应该鼓励学生参与到自主学习中去，自己尝试挖掘和寻找更多的设计方法；没能更充分的利用网络上的教程和学习资源，给学生更多更大的发挥的空间。 这些都是我以后需要改进的地方，可以试着从网络资源入手，找到更多学生感兴趣的网页形式，丰富他们设计的灵感，提升他们制作的能力，将模仿慢慢的转变为自主的摸索，将有形的网页素材慢慢的过度到给一个网页主题，或者给一个设计理念，让学生能够自由的发挥，设计和制作出更多更好的网页。