2022年《网页设计与制作》课程教学设计 .pdf

《2022年《网页设计与制作》课程教学设计 .pdf》由会员分享，可在线阅读，更多相关《2022年《网页设计与制作》课程教学设计 .pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、“搜索引擎”网站首页的制作教学设计学校：设 计 人：所属课程：网页设计与制作所属专业：软件技术授课课时： 6 学 时名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 9 页 - - - - - - - - - “搜索引擎 ”网站首页的制作教学设计方案课程名称网页设计与制作项目标题“搜索引擎”网站首页的制作教材教育部职业教育与成人教育司推荐教材网页制作教程授课时数6 课时授课地点网站规划实训室教学内容分析：课标理论的要求按照“以能力为本位、以职业实践为主线、以项目课程为主体的

2、模块化专业课程体系”的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。教材优劣分析1、总体分析：优势：以预备知识任务实施延伸阅读为内容的组织形式，知识点全面，讲解详尽；任务教学，步骤清晰，目标明确；配套素材完善。缺点：仍是传统的先介绍知识点，再进行项目教学，没有体现“做中教，做中学”的课改特色。2、本教学单元内容分析：原教材项目三集中了所有页面布局的技术，div布局的案例甚至不是单独的任务，而只在实训内容中给出，不能体现出DIV

3、作为先进网页布局方法的重要地位，并且案例只有一个，技能训练内容较少，无法让学生真正掌握DIV 布局的方法。教学内容整合1、添加和修改案例技能的提升不在理解，而是不断的重复和反复，才能由最初的知道怎么做，即初级技能，上升到动作趋向自动化，即技巧性技能。因此，想让学生学会使用DIV 进行页面的布局，一个案例是远远不够的。但是考虑到课时的安排，也不宜增加太多，因此，本教学内容增设了一个案例。选取的案例要符合两个特点：一是能体现本模块要求学生掌握的知识技能；二是案例要具有代表性、时尚感，符合学生的职业岗位能力需求。教材案例“一翔软件”网页能符合以上特点。但是，在布局上嵌套多，稍嫌复杂，div布局由于

4、CSS样式规则杂且多的原因，本身就比较难掌握，太复杂的例子会影响学生学习的兴趣和动力，因此，引入了相对简单的“搜索引擎”案例，将原教材的案例作为拓展实践的内容。将“一翔软件”页面修改、简化，作为拓展实践的选择制作页面，以适应学生参差不齐的学习和实践能力。2、教学内容调整加重了 DIV+CSS布局方法的讲解，将DIV 布局作为独立的模块划分出来；现将教学内容以知识点为中心转变为以“工作任务”为中心，让学生在完成任务的过程中，自主的构建知识和技能，发展专业能力。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - -

5、 - - - - 第 2 页，共 9 页 - - - - - - - - - 教学目标设计：教学目标制定依据“计算机网络技术”专业人才培养方案和课程标准本部分要求学生了解当今普遍使用的布局方法-DIV+CSS 布局，掌握使用DIV 进行网页布局的技术，以及能够通过CSS样式表达到美化页面的效果。教材要求结合教材项目三： “网页布局与批量制作”的任务二实训：制作“一翔软件”网页中要求学生掌握的DIV+CSS布局的知识和技能。教学目标知识目标能力目标素质目标掌握 DIV 布局页面的方法；能够使用DIV+CSS 进行页面的布局；能够灵活的使用CSS 样式定位和美化页面元素。提升使用DIV 进行网页布

6、局的意识。提升网页设计和制作中自主学习和团队合作的意识。学生情况分析：认知水平学生已经学习过表格布局、CSS样式设置和层的使用方法；通过表格布局的学习，学生对网页的布局和制作产生了浓厚的兴趣；学习能力动手能力和模仿能力较强。学生自立、自主意识薄弱，不能主动分析解决问题，探索新知。即创作力弱。学习特点学生思维活跃，活泼好动，喜欢交流，合作解决问题。教学重难点分析和解决措施项目内容解决措施重点使用 DIV+CSS布局页面的方法。通过分析，让学生有初步布局的认识；通过模仿，让学生掌握案例中的布局方法；通过实践，让学生跳出当前的布局模式，体会新的布局方法，从而获得布局的常用技巧和布局优劣的区分方法。难

7、点Div 标签的布局显示；标 签 中 层 的 显示。通过对比，从认知上区分其显示效果的不同；通过重复任务，从操作上获得正确的设置方法。通过反复任务， 掌握布局的技巧和常用的属性设置技巧从而美化页面。教学资源参考资料从零开始-Dreamweaver 典型案例人民邮电出版社；Dreamweaver8 工作环境；网页设计与制作精品课程网站（自己开发）；教学幻灯片；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 9 页 - - - - - - - - - 任务分解任务一：分析“搜

8、索引擎”页面的布局；任务二：“搜索引擎”页面（top ）页眉布局与制作；任务三：“搜索引擎”页面主体（body）布局与制作；任务四：“搜索引擎”页面页脚（food ）布局与制作；独立实践：“一翔软件”页面制作。教学环节概述引入： 通过提问引入DIV 布局方法，激发学生完成案例页面的兴趣；模仿： 通过老师讲解演示、学生学习模仿、引导学生分析解决任务过程中的问题，让学生在任务的完成过程中，自主的构建表格布局、属性设置等知识和技能。创造： 通过给学生设置问题情境，引导学生在了解问题、尝试解决问题的过程中对所掌握的知识和技能举一反三，进而获得新技能。分析： 当学生能够通过尝试操作举一反三，甚至获得新技

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

10、问题，并进一步通过分析和这种思维方法指导实践。从而引发下一轮的质疑和思考。让学生进行持续性的学习。情境教学：用于创造阶段，给学生创设问题情境，让学生跳出当前的布局思维模式，尝试创新；榜样教学：用于创造阶段，激发学生性格中的“好胜”因子，营造班级的“敢比敢追”的学习氛围；分层教学：解决学生能力参差不齐的问题，通过增加增加创造型思维的训练、设计和逐步制作自己的网站等手段，使有能力的学生“吃饱”，通过巡视、指导，组内互助，暂缓创造等手段，使能力弱的学生“吃下”。引入创造模仿分析实践名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精

11、心整理 - - - - - - - 第 4 页，共 9 页 - - - - - - - - - 学习方法学生的学习主要经历以下阶段：听看 - 理解 - 应用 - 巩固- 创造 - 分析 - 实践听看：是知识和技能学习的主要手段；理解：通过听看，了解布局和属性设置的意图；应用：模仿老师操作，完成任务；巩固：对比和重复任务，解决制作做程中的问题，巩固知识技能。创造：进入老师设置的问题情境，了解和尝试解决问题，获得新技能。分析：小组讨论和交流，分析任务的完成情况，问题的发现和解决等，系统化知识。实践：应用技能完成实践案例，并在此过程中，发挥创造型的思维，自主探究和学习。教学过程和教学资源设计：环节教

12、师活动学生活动设计意图复习引入(15 左右 )提问：表格布局的优缺点有哪些？同时帮助学生总结有缺点。认真思考，在教师引导下，回答问题：优点：表格布局操作简单，属性直观，学生易上手；缺点：不能横向排列；不能嵌套太多；不易修改等；因为有缺点，才寻找 更 好 的 解 决 方法，本提问目的是通过表格布局的优缺点引入DIV 布局方法。提问：当今最流行的布局方法是什么？回答问题，但是学生大部分回答不上来。设疑，让学生产生好奇。带着这个问题，给学生展示网页。（可以让学生任意提出网址）资源应用：网络踊跃给出网址，观看源代码，给学生展示当今的流行布局页面，激发学生兴趣。查看其源文件，发现多数都是DIV 布局的网

13、页。在老师的提示下，发现当今 多 数 网 页 布 局 以DIV+CSS为主。用事实回答疑问。解答第二个问题，引入DIV 布局方法。对 DIV 有了初步认识。模仿任务一 (15 左右 ) 1、展示“搜索引擎”的页面效果，让学生先自己分析其组成部分。1、回忆之前掌握的网页布局要素，回答问题。指出划分为页眉（top ） 、主体（ body） 、页脚（ foot ） 。让学生巩固之前所掌握的布局构成元素。2、在学生说出自己的分析结果后，继续分析，划分出每一个布局并按含义确定每一部分的ID。2、认真听讲，体会div 页面的分析方法。细化出本页面中的布局 DIV。名师资料总结 - - -精品资料欢迎下载

14、- - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 9 页 - - - - - - - - - 3、使用 PPT给出正确的布局和DIV 命名。topDiv1topDiv3topDiv2leftDiv1rightDiv1leftDiv2footDivrightDiv2资源：教学PPT3、看演示，听讲解，记忆Div 标签的命名规则；让学生养成规范化命名的习惯。模仿任务二 (20 左右 ) 1、 分 别 演 示topDiv1 、topDiv2 、topDiv3标签的插入，和内容设置；【讲授知识】DIV 的插入；使用 CSS

15、样式控制 DIV 的方法；Div 标签左右浮动设置；Div 标签的背景和高宽的设置；Div 标签中其他网页元素的插入。1、认真观看老师演示，记忆老师讲解时重点强调的部分操作；2、动手模仿操作，部分学生 在 操 作 过 程 中 出 现 问题，提出质疑；资源：学习网站让学生在模仿任务的过程中，自主的构建 DIV布局和 CSS样式设置的知识技能。2、学生动手时，在班级巡视，及时发现操作遇到问题的学生，给予提示和帮助。措施：引导学生对比，鼓励学生重复任务。【常见问题1】预览效果错乱；【常见问题2】布局时 Div标签出现嵌套，不易修改。在老师的引导下，对比和重复任务，找出操作错误的原因。资源：学习网站培

16、养学生分析和解决操作中问题的能力，突破教学难点。3、总结常见问题，重复演示或者让学生重复演示操作。独立或者在小组成员帮助下重复任务操作，体会设置上的区别。【巩固技能】HTML 编码中 标签的先后顺序和CSS样式决定了标签内容的显示效果；肯定和赏识学生，并给予未完成任务的学生更多的观摩机会。巩固学生对教学难点的掌握。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 9 页 - - - - - - - - - 模仿任务三 (60 左右 ) 1、分别演示leftDiv1、righ

17、tDiv1、leftDiv2、rightDiv2标签的插入和设置；【讲授知识】边界和填充含义Div 标签的布局排列和上下间距的设置；Div 标签边框的设置；1、认真观看老师演示，记忆老师讲解时重点强调的部分操作；2、动手模仿操作，部分学生 在 操 作 过 程 中 出 现 问题，提出质疑；资源：学习网站让学生在模仿任务的过程中，自主的构建 DIV布局和 CSS样式设置的知识技能。2、主体内容的布局和美化【讲授知识】CSS各属性的设置和含义；表格的布局和内容设置。表格布局栏目中的文字等学生可以独立完成。让学生在模仿任务的过程中，自主的构建 DIV布局和 CSS样式设置的知识技能。3、学生动手时，在

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

19、助。独立完成“搜索引擎”页面页脚（ foot ）布局与制作。肯定和赏识学生，并给予未完成任务的学生更多的观摩名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 9 页 - - - - - - - - - 左右 )给学生提供机会，上台交流，展示。给予正面的鼓励和奖励。个别学生上来展示制作过程。机会。应用和巩固以上所学习的DIV+CSS布局方法。探究创造（30左右）创设情境 1： 能不能使用其他方法去完成本页面的布局；学生探究、尝试新的布局方法。【获得技能】了解 DIV 与层的不

20、同点；DIV 标签的嵌套使用；拓展学生的布局方法和能力；培养自主学习能力。创设情境2： 如何更快的完成网页布局；学生探究、尝试【获得技能】通过复制粘贴HTML 代码，可以更快的完成DIV 标签的设置；掌握了CSS属性在代码 窗 口 的 创 建 和 修改。引导学生使用代码视图查看和修改页面，提升网页设计的能力。分析总结（30左右）组织学生分组讨论、交流点评和互评任务的完成情况；分析制作过程中的问题；分享你掌握的布局技巧；对学生的展示和交流内容进行概括和总结。资源：教学PPT 1、 分组讨论；2、 选代表上台交流；3、 认真其他同学的心得，取长补短；4、 跟老师总结知识和技能。互评、点评中要引导学

21、生正确看待别人对自己的评价学会宽以等人；学会巧妙地运用语言艺术对存在问题的同学提出批评。同时通过点评，互评各自的作品，巩固知识技能，达到强调重点，攻破难点的目的。最后，重新组织所学，让知识得以系统化，技能得以提升。实践（80左右）1、组织学生分组分析“一翔软件”网页布局；2、巡视指导，启发学生自主的探究、创造，掌握遇到的新知识和新技能。3、讲解学生发现的或者遇到的新技能。1、分组分析“一翔软件”网页布局；2、组间互助，完成实践页面的制作。3、大胆的尝试创造，自主探究遇到的新知识和新技能。让学生通过分组交流、独立实践，巩固表格的布局和属性设置方法，进而发现问题，补充和创新知识技能。课外任务1、继

22、续未完成的独立实践。2、完成书后相关习题。3、使用DIV 方法完成课后操作题“热门科技”。1、完成书后相关知识2、尝试课后操作题的制作，巩固DIV+CSS布局方法和属性设置。反复任务，提升技能水平。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 9 页 - - - - - - - - - 个性化教学设计：为学有余力的学生所做的调整: 1、提供难度稍高的DIV 布局实践页面；2、增加创造型思维的训练，课前要多准备相关任务和实践案例的创造型问题，引导他们自主学习。以下问题情境

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

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