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