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

《《网页设计与制作》课程教学设计.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》课程教学设计.docx（17页珍藏版）》请在三一办公上搜索。

1、网页设计与制作课程教学设计“搜索引擎”网站首页的制作 学 校：设 计 人：所属课程：所属专业：授课课时：教学设计 网页设计与制作 软件技术 6 学 时 “搜索引擎”网站首页的制作教学设计方案 课程名称 教材 授课时数 网页设计与制作 项目标题 “搜索引擎”网站首页的制作 教育部职业教育与成人教育司推荐教材网页制作教程 6课时 授课地点 网站规划实训室 教学内容分析： 课标理论的要求 按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践

2、活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。 教材优劣分析 1、总体分析： 优势：以预备知识任务实施延伸阅读为内容的组织形式，知识点全面，讲解详尽；任务教学，步骤清晰，目标明确；配套素材完善。 缺点：仍是传统的先介绍知识点，再进行项目教学，没有体现“做中教，做中学”的课改特色。 2、本教学单元内容分析： 原教材项目三集中了所有页面布局的技术，div布局的案例甚至不是单独的任务，而只在实训内容中给出，不能体现出DIV作为先进网页布局方法的重要地位，并且案例只有一个，技能训练内容较少，无法让学生真正掌握DIV布局的方法。 教学内容整合 1、添加和修改案例 技能的提

3、升不在理解，而是不断的重复和反复，才能由最初的知道怎么做，即初级技能，上升到动作趋向自动化，即技巧性技能。因此，想让学生学会使用DIV进行页面的布局，一个案例是远远不够的。但是考虑到课时的安排，也不宜增加太多，因此，本教学内容增设了一个案例。 选取的案例要符合两个特点：一是能体现本模块要求学生掌握的知识技能；二是案例要具有代表性、时尚感，符合学生的职业岗位能力需求。 教材案例“一翔软件”网页能符合以上特点。但是，在布局上嵌套多，稍嫌复杂，div布局由于CSS样式规则杂且多的原因，本身就比较难掌握，太复杂的例子会影响学生学习的兴趣和动力，因此，引入了相对简单的“搜索引擎”案例，将原教材的案例作为

4、拓展实践的内容。 将“一翔软件”页面修改、简化，作为拓展实践的选择制作页面，以适应学生参差不齐的学习和实践能力。 2、教学内容调整 加重了DIV+CSS布局方法的讲解，将DIV布局作为独立的模块划分出来； 现将教学内容以知识点为中心转变为以“工作任务”为中心，让学生在完成任务的过程中，自主的构建知识和技能，发展专业能力。 教学目标设计： “计算机网络技术”专业人才培养方案和课程标准 本部分要求学生了解当今普遍使用的布局方法-DIV+CSS布局，掌握使用DIV进行网页布局的技术，以及能够通过CSS样式表达到美化页面的效果。 教材要求 结合教材项目三：“网页布局与批量制作”的任务二实训：制作“一翔

5、软件”网页中要求学生掌握的DIV+CSS布局的知识和技能。 知识目标 能力目标 能够使用DIV+CSS进行页面的布局； 能够灵活的使用CSS样式定位和美化页面元素。 素质目标 提升使用DIV进行网页布局的意识。 提升网页设计和制作中自主学习和团队合作的意识。 教学目标 制定依据 教学目标 掌握DIV布局页面的方法； 学生情况分析： 认知水平 学生已经学习过表格布局、CSS样式设置和层的使用方法； 通过表格布局的学习，学生对网页的布局和制作产生了浓厚的兴趣； 动手能力和模仿能力较强。 学生自立、自主意识薄弱，不能主动分析解决问题，探索新知。即创作力弱。 学生思维活跃，活泼好动，喜欢交流，合作解决

6、问题。 教学重难点分析和解决措施 项目 内容 使用DIV+CSS重点 布局页面的方法。 Div标签的布局难点 显示； 标签中层的显解决措施 通过分析，让学生有初步布局的认识； 通过模仿，让学生掌握案例中的布局方法； 通过实践，让学生跳出当前的布局模式，体会新的布局方法，从而获得布局的常用技巧和布局优劣的区分方法。 通过对比，从认知上区分其显示效果的不同； 通过重复任务，从操作上获得正确的设置方法。 学习能力 学习特点 教学 资源 通过反复任务，掌握布局的技巧和常用的属性设置技巧从而美化页面。 示。 参考资料从零开始-Dreamweaver典型案例 人民邮电出版社； Dreamweaver8工作

7、环境； 网页设计与制作精品课程网站； 教学幻灯片； 任务 分解 任务一：分析“搜索引擎”页面的布局； 任务二：“搜索引擎”页面页眉布局与制作； 任务三：“搜索引擎”页面主体布局与制作； 任务四：“搜索引擎”页面页脚布局与制作； 独立实践：“一翔软件”页面制作。 引入 模仿 创造 分析 实践 教学 环节 概述 引入：通过提问引入DIV布局方法，激发学生完成案例页面的兴趣； 模仿：通过老师讲解演示、学生学习模仿、引导学生分析解决任务过程中的问题，让学生在任务的完成过程中，自主的构建表格布局、属性设置等知识和技能。 创造：通过给学生设置问题情境，引导学生在了解问题、尝试解决问题的过程中对所掌握的知识

8、和技能举一反三，进而获得新技能。 分析：当学生能够通过尝试操作举一反三，甚至获得新技能的时候，老师要用严谨的态度，灵活的教学方法讲解新技能，归纳和总结学生做得，帮助学生理解和消化。 实践：通过实践内容，学生能够验证知识技能，发现新的质疑，从而探究，创新。 教学 方法 讲解法：通过讲解，让学生了解布局、CSS样式设置操作的目的； 演示法：通过任务的演示，让学生了解DIV+CSS布局的流程，掌握DIV布局方法和CSS样式设置； 提示引导法：帮助学生解决在模仿任务和实践时遇到的问题； 创新型思维引导法：帮助学生完善知识技能，提升自主探究和创新技能的能力。主要用于创造、分析、实践阶段。以下是此法示意图

9、： 此法旨在课堂中先引导学生质疑，再在知识和技能的加工过程中，充分挖掘、发挥学生的创造性思维解决问题，并进一步通过分析和这种思维方法指导实践。从而引发下一轮的质疑和思考。让学生进行持续 性的学习。 情境教学：用于创造阶段，给学生创设问题情境，让学生跳出当前的布局思维模式，尝试创新； 榜样教学：用于创造阶段，激发学生性格中的“好胜”因子，营造班级的“敢比敢追”的学习氛围； 分层教学：解决学生能力参差不齐的问题，通过增加增加创造型思维的训练、设计和逐步制作自己的网站等手段，使有能力的学生“吃饱”，通过巡视、指导，组内互助，暂缓创造等手段，使能力弱的学生“吃下”。 学习 方法 学生的学习主要经历以下

10、阶段： 听看-理解-应用-巩固-创造-分析-实践 听看：是知识和技能学习的主要手段； 理解：通过听看，了解布局和属性设置的意图； 应用：模仿老师操作，完成任务； 巩固：对比和重复任务，解决制作做程中的问题，巩固知识技能。 创造：进入老师设置的问题情境，了解和尝试解决问题，获得新技能。 分析：小组讨论和交流，分析任务的完成情况，问题的发现和解决等，系统化知识。 实践：应用技能完成实践案例，并在此过程中，发挥创造型的思维，自主探究和学习。 教学过程和教学资源设计： 环节 教师活动 学生活动 认真思考，在教师引导下，回答问题： 优点：表格布局操作简单，属性直观，学生易上手； 缺点：不能横向排列；不能

11、嵌套太多；不易修改等； 设计意图 因为有缺点，才寻找更好的解决方法，本提问目的是通过表格布局的优缺点引入DIV布局方法。 设疑，让学生产生好奇。 给学生展示当今的流行布局页面，激发学生兴趣。 提问：表格布局的优缺点有哪些？ 同时帮助学生总结有缺点。 回答问题，但是学生大部复习 提问：当今最流行的布局方法是什么？ 分回答不上来。 引入 带着这个问题，给学生展示网页。 (15 踊跃给出网址，观看源代左右) 码， 资源应用：网络 查看其源文件，发现多数都是DIV布局的网页。 在老师的提示下，发现当今多数网页布局以DIV+CSS为主。 用事实回答疑问。 解答第二个问题，引入DIV布局方法。 对DIV有

12、了初步认识。 模仿 任务一 (15左右) 2、在学生说出自己的分析结果后，继 续分析，划分出每一个布局并按含义确定每一部分的ID。 1、展示“搜索引擎”的页面效果，让学生先自己分析其组成部分。 1、回忆之前掌握的网页布局要素，回答问题。指出划分为页眉、主体、页脚。 让学生巩固之前所掌握的布局构成元素。 2、认真听讲，体会div页面的分析方法。 细化出本页面中的布局DIV。 3、使用PPT给出正确的布局和DIV命名。 topDiv1topDiv3leftDiv1leftDiv2rightDiv1rightDiv2footDivtopDiv23、看演示，听讲解，记忆Div标签的命名规则； 让学生养

13、成规范化命名的习惯。 资源：教学PPT 1、分别演示topDiv1、 topDiv2、topDiv3标签的插入，和内容设置； 1、认真观看老师演示，记 忆老师讲解时重点强调的 部分操作； 2、动手模仿操作，部分学 DIV的插入； 生在操作过程中出现问 使用CSS样式控制DIV的方法； 题，提出质疑； Div标签左右浮动设置； Div标签的背景和高宽的设置； 资源：学习网站 Div标签中其他网页元素的插入。 模仿 任务二 (202、学生动手时，在班级巡视，及时发左右) 现操作遇到问题的学生，给予提示和帮助。 措施：引导学生对比，鼓励学生重复任务。 让学生在模仿任务的过程中，自主的构建DIV布局和

14、CSS样式设置的知识技能。 预览效果错乱； 布局时Div标签出现嵌套，不易修改。 培养学生分析和解决操作中问题的能在老师的引导下，对比和力，突破教学难点。 重复任务，找出操作错误的原因。 资源：学习网站 独立或者在小组成员帮助下重复任务操作，体会设置上的区别。 HTML编码中标签的先后顺序和CSS样式决定了标签内容的显示效果； 肯定和赏识学生，并给予未完成任务的学生更多的观摩机会。 巩固学生对教学难点的掌握。 3、总结常见问题，重复演示或者让学生重复演示操作。 1、分别演示leftDiv1、rightDiv1、 leftDiv2、rightDiv2标签的插入和设1、认真观看老师演示，记置； 忆

15、老师讲解时重点强调的部分操作； 2、动手模仿操作，部分学 生在操作过程中出现问 边界和填充含义 题，提出质疑； Div标签的布局排列和上下间距的 设置； 资源：学习网站 Div标签边框的设置； 2、主体内容的布局和美化 让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。 表格布局栏目中的文字等 学生可以独立完成。 模仿 CSS各属性的设置和含义； 任务三 表格的布局和内容设置。 (60左右) 让学生在模仿任务的过程中，自主的构建DIV布局和CSS样式设置的知识技能。 3、学生动手时，在班级巡视，及时发现操作遇到问题的学生，给予提示和帮助。 body部分的标签不能正常左右

16、显示； 层不能正常显示。 在老师的引导下，对比和重复任务，找出操作错误的原因。 资源：学习网站 独立或者在小组成员帮助下重复任务操作，体会设置上的区别。 上下左右边界的含义和设置； 层的显示与其他网页元素的关系 独立完成“搜索引擎”页面页脚布局与制作。 培养学生分析和解决操作中问题的能力，突破教学难点。 4、总结常见问题，老师重复演示或者让学生重复演示操作。 肯定和赏识学生，并给予未完成任务的学生更多的观摩机会。 巩固学生对教学难点的掌握。 肯定和赏识学生，并给予未完成任务的学生更多的观摩模仿 在班级巡视，及时发现操作遇到问题的任务四 学生，给予提示和帮助。 (20左右) 给学生提供机会，上台

17、交流，展示。 给予正面的鼓励和奖励。 个别学生上来展示制作过程。 学生探究、尝试新的布局方法。 了解DIV与层的不同点； DIV标签的嵌套使用； 学生探究、尝试 通过复制粘贴HTML代码，可以更快的完成DIV标签的设置； 掌握了CSS属性在代码窗口的创建和修改。 机会。 应用和巩固以上所学习的DIV+CSS布局方法。 拓展学生的布局方法和能力；培养自主学习能力。 创设情境1： 能不能使用其他方法去完成本页面的布局； 探究 创造 创设情境2： 如何更快的完成网页布局； 引导学生使用代码视图查看和修改页面，提升网页设计的能力。 组织学生分组讨论、交流 点评和互评任务的完成情况； 分析制作过程中的问

18、题； 分析 分享你掌握的布局技巧； 总结 总结。 资源：教学PPT 互评、点评中要引导学生正确看待别人对自己的评价学会宽以等人；学会巧妙地运用语言艺1、 分组讨论； 术对存在问题的同2、 选代表上台交流； 学提出批评。同时3、 认真其他同学的心得，通过点评，互评各取长补短； 自的作品，巩固知4、 跟老师总结知识和技识技能，达到强调能。 重点，攻破难点的目的。最后，重新组织所学，让知识得以系统化，技能得以提升。 1、分组分析“一翔软件”网页布局； 2、组间互助，完成实践页面的制作。 3、大胆的尝试创造，自主探究遇到的新知识和新技能。 1、完成书后相关知识 2、尝试课后操作题的制作，巩固DIV+C

19、SS布局方法和属性设置。 让学生通过分组交流、独立实践，巩固表格的布局和属性设置方法，进而发现问题，补充和创新知识技能。 1、组织学生分组分析“一翔软件”网页布局； 实践 创造，掌握遇到的新知识和新技能。 3、讲解学生发现的或者遇到的新技能。 1、继续未完成的独立实践。 2、完成书后相关习题。 3、使用DIV方法完成课后操作题“热门科技”。 课外 任务 反复任务，提升技能水平。 个性化教学设计： 为学有余力的学生所做的调整: 1、提供难度稍高的DIV布局实践页面； 2、增加创造型思维的训练，课前要多准备相关任务和实践案例的创造型问题，引导他们自主学习。 以下问题情境可以备用： 创设情境1： 不

20、使用表格完成body部分文字的布局； 创设情境2： 如何让标签能够居中对齐。 为需要帮助的学生所做的调整: 1、对技能学习和掌握较慢的同学进行小组内互帮、个别指导、降低要求。巡视中及时发现完成较好者，给他们机会展示，让其他同学有更多时间和机会观摩学习。 2、暂缓创造环节的实施，先完成任务和巩固技能。 学生学习效果评价设计： 在小组监督下的学生自评和在学生监督下的老师评价相结合： 学生自评表：分析阶段，在小组监督下，由学生填写。分析自己的任务完成情况，技能掌握情况和未完成任务的原因，作为老师评价和改进教学的依据。 教师评价表：从学生的学习态度和学习效果，给予客观的评价，并给出自己的意见和建议。

21、教学反思： 反思本项目的教学，教学活动能够循序渐进、螺旋上升, 符合学生的认知规律。教学策略丰富、实用而新颖、独特，突破了学生的认知障碍，通过分析、模仿、实践，突破了教学的重点；通过对比、重复和反复，突破了教学的难点，从而优化了课堂。充分调动了学生学习的积极性。本课教学设计真正体现了“以学生为中心，在做中教，在做中学”的教学思想和理念，通过实践，学生的技能不断加强，实效性强。 当然，在教学过程中，还存在一些不足之处，比如在让学生模仿的过程中，操作的步骤和方法不免单一，应该鼓励学生参与到自主学习中去，自己尝试挖掘和寻找更多的设计方法；没能更充分的利用网络上的教程和学习资源，给学生更多更大的发挥的空间。 这些都是我以后需要改进的地方，可以试着从网络资源入手，找到更多学生感兴趣的网页形式，丰富他们设计的灵感，提升他们制作的能力，将模仿慢慢的转变为自主的摸索，将有形的网页素材慢慢的过度到给一个网页主题，或者给一个设计理念，让学生能够自由的发挥，设计和制作出更多更好的网页。