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

“搜索引擎”网站首页的制作

教学设计

学校：

设计人：

所属课程：网页设计与制作

所属专业：软件技术

授课课时： 6 学时

“搜索引擎”网站首页的制作教学设计方案

课程名称网页设计与制作项目标题“搜索引擎”网站首页的制

作

教材教育部职业教育与成人教育司推荐教材《网页制作教程》授课时数6课时授课地点网站规划实训室

教学内容分析：

课标理论的要求

按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，彻底打破学科课程的设计思路，紧紧围绕工作任务完成的需要来选择和组织课程内容，突出工作任务与知识技能的联系，让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。

教材优劣分析

1、总体分析：

优势：以预备知识→任务实施→延伸阅读为内容的组织形式，知识点全面，讲解详尽；任务教学，步骤清晰，目标明确；配套素材完善。

缺点：仍是传统的先介绍知识点，再进行项目教学，没有体现“做中教，做中学”的课改特色。

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工作环境；

《网页设计与制作》精品课程网站（自己开发）；

教学幻灯片；

3、使用PPT给出正确的布局和DIV命名。

topDiv1

topDiv3

topDiv2

leftDiv1rightDiv1

leftDiv2

footDiv

rightDiv2资源：教学PPT 3、看演示，听讲解，记忆

Div标签的命名规则；

让学生养成规范化

命名的习惯。

模仿

任务二 (20′左右) 1、分别演示topDiv1、topDiv2、

topDiv3标签的插入，和内容设置；

【讲授知识】

➢DIV的插入；

➢使用CSS样式控制DIV的方法；

➢Div标签左右浮动设置；

➢Div标签的背景和高宽的设置；

➢Div标签中其他网页元素的插入。

1、认真观看老师演示，记

忆老师讲解时重点强调的

部分操作；

2、动手模仿操作，部分学

生在操作过程中出现问

题，提出质疑；

资源：学习网站

让学生在模仿任务

的过程中，自主的

构建DIV布局和CSS

样式设置的知识技

能。

2、学生动手时，在班级巡视，及时发

现操作遇到问题的学生，给予提示和帮

助。

措施：引导学生对比，鼓励学生重复任

务。

【常见问题1】预览效果错

乱；

【常见问题2】布局时Div

标签出现嵌套，不易修改。

在老师的引导下，对比和

重复任务，找出操作错误

的原因。

资源：学习网站

培养学生分析和解

决操作中问题的能

力，突破教学难点。

3、总结常见问题，重复演示或者让学

生重复演示操作。

独立或者在小组成员帮助

下重复任务操作，体会设

置上的区别。

【巩固技能】

HTML编码中