《网站创作始于规划》选自上海科技教育出版社出版的《网络技术应用》第四单元《网站的设计与评价》。本单元以网站设计为工作任务，让学生通过完成网页制作的过程，亲历利用信息技术加工信息和表达思想的过程与方法，同时将网络技术的基础理论与实际应用技能有机结合起来。在网站制作中，一份详细的规划书有利于指导创作过程，而我们学生所缺少的也正是这种统筹规划能力，因而我从实际出发把网站的规划单独提了出来，以网页规划设计表为载体设计了一课时的教学内容。本节课的《普通高中信息技术课程标准（实验）》要求是：通过开发实践，学会规划、设计简单网站的基本方法并能够根据网站主题要求设计评价指标。从课标和教材可以看出，本节内容至关重要，有着承上启下的作用。承上：承接必修教材中《信息作品的集成》环节。启下：本课是《网站的设计与评价》单元的开篇，网页规划的合理与否，主题的确定是否恰当，小组成员的分工是否详细，对于后续的网页制作起着至关重要的作用。
学情分析
高一学生经过近一个学期的学习，已经具备了一定的信息获取、加工、管理能力，同时了解了网络技术的基础理论，对精彩的网页很感兴趣，非常向往掌握网页制作的技术，很想亲自创作网页作品来表达自己的想法进行有效交流。但他们会忽略电子作品制作的前期规划，对于网页设计的一般流程，以及如何确定适合的主题、如何在作品中体现主题，缺少必要的经验，因此本节课有必要在规划设计方面加以训练。
教学目标
知识与技能目标：了解创作电子作品的一般流程，理解网页规划的重要性；能够根据网站主题要求设计评价指标，对网站的质量与运行状况进行评价。
过程与方法目标：通过赏析、评价网页作品，了解网页规划的设计要素，提高审美意识；能根据任务需求，确定主题，进行科学规划，初步掌握网页规划的方法。
情感态度与价值观目标：通过小组合作，感受同学友谊，增强集体意识和协作意识；学会欣赏他人的劳动成果，提高艺术修养和审美情趣。
教学设计思路
通过赏析网页，让学生感受优秀网页所具有的特征，了解网页规划的设计要素，形成网页规划设计的思路。通过往届学生网页作品投票和评分的过程，明确网页规划的注意事项，初步了解网页评价量规，激发学生的创作兴趣。最后，结合实际表达需求，小组协作，确定创作主题，进行创意设计，完成网页规划设计。
教学过程
1.创设情境，导入新课
师：因特网在全球的迅速普及和发展，为人类开启了一方全新的文化空间。在网上我们可以浏览各种各样的网页，获取无穷无尽的知识。因特网上的每一个网页都从属于某一网站，可以说，包含着各种信息的因特网就是由无数的网站组成的。只要拥有了一个属于自己的网站，你就可以在茫茫的网络世界中拥有一片属于自己的天空。同学们想不想做一个属于自己的网站呢？
生：想。
师：网站也是一个信息作品，请同学们思考前面学到的信息集成的一般过程。
生：确定作品主题—规划设计作品—采集处理素材—制作加工作品—测试作品。
师：那么网站的制作流程是什么呢？
生：网站的规划—素材的搜集、加工—网站的制作—网站的测试与—网站的评价。
师：由网站创作流程我们可以看出，网站创作、始于规划，本节课我们学习网站的规划与设计。要求以小组为单位制作一个网页规划设计表。
设计意图：导课承上信息集成的一般过程，启下引出网页创作流程，揭示规划的重要性，从而点题。
2.规划开始，确定主题
这是一个承上启下的教学环节。时间不长，但作用很大。首先提出问题。
师：同学们平时都喜欢去什么网站？
生：百度、新浪、人人、QQ、4399……
师：这些网站要表达的主要内容，也就是网站的主题是什么？
生：百度是全球最大的中文搜索引擎，新浪以全面而及时的新闻而著称……
师：主题是信息作品的灵魂，由大家来制作网页，你想表达什么主题呢？你对哪方面的主题感兴趣？提示确定主题的原则：小而精，目标定位准确，积极、健康、向上，网页名称有创意，符合主题（幻灯片展示）。
设计意图：明确主题的含义，了解主题的重要性，它是信息作品的灵魂，思考启发网页主题，为后面的制定规划做铺垫，提供选题参考。本环节主要采用谈话法，谈话法的运用，有利于建立民主平等的师生关系，而课堂上的民主气氛是学生创造性思维得以激发的一个重要条件。
3.网页欣赏，归纳网页设计元素
师：我们来欣赏一个网页，百年世博，落户上海，城市让生活更美好，同学们说说这个网站的主题是什么，并思考如何在网页中体现这一主题。
教师引导学生从网页设计要素中来体现主题，如内容、色彩、版面布局、导航设计、图标设计、图片等。
教师组织学生从以下几个设计要素讨论网站内容和风格，分析网页框架和风格。
（1）栏目设置
师：确定好网站主题后，要把网站的内容按一定的方法进行分类，并设置专门的栏目（如图1）。
网站栏目设计原则一是要紧扣主题，二是要突出重点。
（2）网站色彩
师：不同的颜色给人不同的感受，同学们看这几个网站主要是什么色调，给人什么样的视觉感受呢？
学生思考回答问题。
教师总结图2所示的网站色彩与感觉之间的关系。
（3）网站LOGO
师：我们重点来看图片3中网站的Logo，什么是网站的Logo呢？
生：网站的标识。
师：我们来欣赏图片3中几个网站的Logo，并思考他们所表达的含义。
学生思考，教师予以引导：百度的“熊掌”Logo的灵感来源于“猎人追寻熊爪印迹”的刺激，这与李先生的“分析搜索技术”非常相似，从而构成了百度的搜索概念。熊掌图案也最终成为了百度公司的Logo；新浪的大眼睛寓意世界尽在你的眼中等。
设计意图：采用了比较法、归纳法以及“基于问题的学习”等教学方法，让学生学会欣赏网站，通过欣赏和思考问题，初步归纳网页设计要素，并意识到：要根据主题，设计恰当的网页风格和内容结构。
4.网页评价，明确优秀网页的标准
活动要求：快速浏览学科网页上展示的上届学生的网站作品，选出自己感兴趣的网站进行投票。
活动过程：教师观察学生评分过程，实时展示各网页作品的投票人数柱状图，查看相应网页的评分结果。
分析评价结果，总结网站评价标准。首先，分析学生对网页评价的结果——引出网页规划设计应注意的问题：选题不能过大，网页名称有新意；内容栏目设置有条理，清晰；色彩搭配合理；版面布局规范，美观；导航设计恰当。
设计意图：让学生深刻体验优秀网页的设计标准，学生在学科网上投票评价网页，首先学生很感兴趣，其次大大提高了教学效率，将评价的结果作为讨论的依据总结出网站评价标准，环环相扣，从而轻松自然地突破难点（网站评价指标的讨论和确立）。
5.课堂实践，制定小组主题网页的规划
教师提出学习任务：以小组为单位完成网页规划设计表。而后，教师介绍学习资源，并提出组内按栏目和角色两个维度分工的建议（如图4、图5）。
设计意图：本环节主要采用了小组协作法和自主探究法，让学生去规划设计网页，为学生创造力的发挥提供了平台。学科网提供了大量的网站规划和设计的指导资源，并采用“半成品加工”教学策略给学生一个网页规划设计表和案例，尊重学生的个体差异，让学生有表可依快速进入了课堂实践。同时在组间形成竞争，促进了组内团结。按栏目和角色二维分工，使学生的责任更加明确，课后能有针对性地收集资料和素材。
6.展示规划，相互交流
请1～2组学生交流展示自己本小组的规划设计。学生浏览并讨论。
7.课堂小结
强调规划的重要性，以及规划的思路和方法。同时渗透我们学校的教育部部级课题《人生规划意识》。你不规划人生，就要被人生规划，希望我们的人生经过规划和设计后，可以成功和幸福。
教学反思
本节内容的基础知识和基本技能主要是利用学习网站设置问题情境、提供学习资源，学生可以通过自主学习获得，教师对部分重点难点进行讲解和演示。而动手规划部分要求学生主动地与同伴探讨、合作，将知识与技能内在化、系统化，达到认知结构的有效调整和重构。合作学习在这一建构过程中起了关键的作用。因而本课主要采用了自主探究法、小组协作法，个别地方采用了比较法、归纳法，而教法主要采用了任务驱动法、基于问题的学习、讨论法、讲授法。应该说，整个教学过程比较流畅，基本上都按照教师的教学预想开展教学，学生在教学中能够积极地思考和回答问题，能够学会有效地规划网站的方法，提升了规划能力和审美能力。
点 评
这是一个在借鉴基础上进行创新的优秀案例。说其优秀，是因为每一环节都体现出了设计者的精心、细心。
导入新课部分，由信息集成的一般过程引入，巧妙利用学生已学知识与技能进行迁移，即将信息集成中学习到的规划设计迁移到网站制作中，有利于促进学生在制作作品（包括多媒体与网站制作）中形成规划意识，这也是本次课的核心指向。
网站评价部分，引导学生根据网站分析的结果总结网站评价标准，实现了以评促学、以评导学的目的，在此过程中潜移默化地促进了学生对规划中应注意问题的关注，从而避免了类似问题的出现，以提升规划的效果。
网站规划部分，学生的规划不是空洞的存在，培养规划能力也不是纸上谈兵，因此教学中必须借助各种形式促使“虚”的规划设计落到“实”处，该案例使用的是规划表，也有案例采用了思维导图等方式来实现规划的具体化与可视化。
分组合作部分，作品制作课中学生工作量相对较大，因此分组合作是常见的方式。二维分工方式的采用，既保证所有学生都能经历网站制作，在此过程中形成对网站制作的体验与感悟，也较好关照了学生兴趣爱好等方面的差异。
课堂小结部分，在本次课教学内容的基础上，拓展延伸至人生规划意识的培养。既与教学伊始的设计呼应，又有很大程度的提升。设计者强调的是与该校相关课题的联系，其实，就作品（包括多媒体与网站制作）中的规划部分教学而言，最后提升至人生规划方是此部分的终极追求及应然境界。这一点，当为信息技术教师进行相关内容教学时所借鉴。
整体而言，该案例在设计上思路非常清晰，引领学生由理论认识到实践探索再到理论提升，实现了认识上的螺旋上升，由欣赏分析到具体设计，符合学生认知发展的基本规律，能够较好地达成教学目标。
关键词：工作过程;课程设计;情境设计;网页设计
一、研究背景
根据齐鲁网及山东传媒职业学院毕业生岗位调研结果，我校毕业生在网页设计方面适应的岗位主要有网页页面设计、前端网页开发、后台动态网页开发等。
网页页面设计：主要应用Photoshop、Illustrator等图片处理和图形设计工具;
前端网页开发：主要应用Dreamweaver、Notepad++、Editplus等网页编码工具;
后台动态网页开发：主要应用Mysql数据库、PHP动态页面开发工具等。
这些工作岗位要求学生熟悉整个网页设计和开发的工作流程，具备所需的基本知识和操作技能，同时还要有良好的职业道德和团队精神，以适应行业发展需求。为了进一步实现职业院校的人才培养目标，提高职业教育的教学质量，围绕实际的网页设计和开发的工作过程，对《网页综合实训》课程进行改革和开发。
二、课程设计原则和设计依据
设计原则：以学生为主体，提高学生的学习兴趣;以职业岗位任务为导向，组织教学内容;以职业岗位需求为依据，突出职业能力培养;以项目为载体，训练学生职业岗位能力和自学能力。
设计依据：本课程以真实完整的网站开发项目为载体设计教学过程，以网站技术人员的岗位工作任务为依据，设计相应教学工作任务，以这些工作任务为载体设计学习情境。教师带领学生在网络机房完成网站项目的开发设计任务，学生以小组为单位开展工作任务。
三、根据岗位能力要求和专业培养目标，确定课程培养目标
1.岗位能力目标
（1）网页页面设计：要求学生能对网站结构进行规划及功能设计、能利用ps等工具设计制作网页页面效果图;
（2）前端网页开发：能将网页效果图重构为HTML网页、能为网页添加常用的js特效;
（3）后台动态网页开发：能进行网站后台数据库设计;能对常用的动态页面功能模块进行开发。
2.职业素质目标
完成具体工作项目，要求学生能自主学习和查阅资料。通过网络搜索资源，首先通过模仿然后举一反三，自主分析问题、解决问题;完成整个网站开发工作项目，要求学生具备良好的职业道德，能够团结协作共同完成工作任务，重在培养学生的团队合作能力和爱岗敬业精神。
四、根据工作流程，基于工作任务，设计学习情境
1.设计思路
网站开发实际工作任务主要包括网站规划设计、网站前端设计、网站后台开发、运营与维护。网站开发过程中的重要环节为设计与开发，即网站规划设计网站前端设计网站后台开发。遵循实际网站开发流程，本课程主要针对这一阶段设计开发一个实际的网站。
2.学习情境设计
遵循网站开发工作流程，以工作过程为导向，以项目为载体，把本课程设计成以下五大学习情境：（1）网站的整体规划设计;（2）网页设计与实现;（3）网页特效设计与实现;（4）网站后台数据库设计;（5）网站后台功能设计。
3.学习子情境设计
对应工作流程和能力目标，每一个情境又以工作任务为载体细分为若干个子情境，即学习任务。学习子情境要与整个项目的实际工作过程相结合，与每个工作阶段的能力目标相对应。下面以第二大情境――网页设计与实现为例，进行基于工作过程为导向的学习子情境设计与实施。
学习情境二：XX网页设计与实现
子情境设计及主要工作任务：
（1）网页版面设计：规划网页页面内容版块;绘制页面布局线框图;
（2）网页素材的搜索及制作：根据网站主题和风格，利用网络搜索，或利用工具软件制作网页素材;
（3）网页效果图设计与实现：利用ps完成网页设计psd效果图;
（4）HTML网页重构：根据psd网页设计图编写html网页代码。
4.考核评价设计
考核方法：本课程的考核包括平时过程考核和期末结果考核，两者各占一定比例。
考核对象：包括小组团队考核和个人表现考核，且侧重于团队的考核，着重培养学生的团队协作意识。过程考核除了考核团队协作以外，还要对学生个人表现情况进行考核，根据小组分工、工作量和完成质量等对每位学生进行考核。
考核内容：工作状态、项目完成质量、团队合作、完成时间、组织纪律。
考核方式：主要包括现场考核、日常考勤等。
参考文献：
[1]向志华.基于工作过程的网页设计与制作[J].湖北广播电视大
学学报，2012，6（32）.
[2]赵文丽.基于工作过程的网页制作技术课程设计[J].软件导刊・教育技术，2012（7）.
根据齐鲁网及山东传媒职业学院毕业生岗位调研结果，我校毕业生在网页设计方面适应的岗位主要有网页页面设计、前端网页开发、后台动态网页开发等。
网页页面设计：主要应用Photoshop、Illustrator等图片处理和图形设计工具;
前端网页开发：主要应用Dreamweaver、Notepad++、Editplus等网页编码工具;
后台动态网页开发：主要应用Mysql数据库、PHP动态页面开发工具等。
这些工作岗位要求学生熟悉整个网页设计和开发的工作流程，具备所需的基本知识和操作技能，同时还要有良好的职业道德和团队精神，以适应行业发展需求。为了进一步实现职业院校的人才培养目标，提高职业教育的教学质量，围绕实际的网页设计和开发的工作过程，对《网页综合实训》课程进行改革和开发。
二、课程设计原则和设计依据
设计原则：以学生为主体，提高学生的学习兴趣;以职业岗位任务为导向，组织教学内容;以职业岗位需求为依据，突出职业能力培养;以项目为载体，训练学生职业岗位能力和自学能力。
设计依据：本课程以真实完整的网站开发项目为载体设计教学过程，以网站技术人员的岗位工作任务为依据，设计相应教学工作任务，以这些工作任务为载体设计学习情境。教师带领学生在网络机房完成网站项目的开发设计任务，学生以小组为单位开展工作任务。
三、根据岗位能力要求和专业培养目标，确定课程培养目标
1.岗位能力目标
（1）网页页面设计：要求学生能对网站结构进行规划及功能设计、能利用ps等工具设计制作网页页面效果图;
（2）前端网页开发：能将网页效果图重构为HTML网页、能为网页添加常用的js特效;
（3）后台动态网页开发：能进行网站后台数据库设计;能对常用的动态页面功能模块进行开发。
2.职业素质目标
完成具体工作项目，要求学生能自主学习和查阅资料。通过网络搜索资源，首先通过模仿然后举一反三，自主分析问题、解决问题;完成整个网站开发工作项目，要求学生具备良好的职业道德，能够团结协作共同完成工作任务，重在培养学生的团队合作能力和爱岗敬业精神。
四、根据工作流程，基于工作任务，设计学习情境
1.设计思路
网站开发实际工作任务主要包括网站规划设计、网站前端设计、网站后台开发、运营与维护。网站开发过程中的重要环节为设计与开发，即网站规划设计网站前端设计网站后台开发。遵循实际网站开发流程，本课程主要针对这一阶段设计开发一个实际的网站。
2.学习情境设计
遵循网站开发工作流程，以工作过程为导向，以项目为载体，把本课程设计成以下五大学习情境：（1）网站的整体规划设计;（2）网页设计与实现;（3）网页特效设计与实现;（4）网站后台数据库设计;（5）网站后台功能设计。
3.学习子情境设计
对应工作流程和能力目标，每一个情境又以工作任务为载体细分为若干个子情境，即学习任务。学习子情境要与整个项目的实际工作过程相结合，与每个工作阶段的能力目标相对应。下面以第二大情境――网页设计与实现为例，进行基于工作过程为导向的学习子情境设计与实施。
学习情境二：XX网页设计与实现
子情境设计及主要工作任务：
（1）网页版面设计：规划网页页面内容版块;绘制页面布局线框图;
（2）网页素材的搜索及制作：根据网站主题和风格，利用网络搜索，或利用工具软件制作网页素材;
（3）网页效果图设计与实现：利用ps完成网页设计psd效果图;
（4）HTML网页重构：根据psd网页设计图编写html网页代码。
4.考核评价设计
考核方法：本课程的考核包括平时过程考核和期末结果考核，两者各占一定比例。
考核对象：包括小组团队考核和个人表现考核，且侧重于团队的考核，着重培养学生的团队协作意识。过程考核除了考核团队协作以外，还要对学生个人表现情况进行考核，根据小组分工、工作量和完成质量等对每位学生进行考核。
关键词：《网页设计》；项目教学；教学实践
《网页设计》课程是青岛农业大学传播学专业网络传播方向的一门专业基础课，其主要目的是培养学生具有一定的艺术素养，较强的网页鉴赏能力，熟悉网页设计创意的原理和方法，熟悉HTML、CSS和网页制作工具，熟悉网页的制作和流程，能够根据客户需求进行静态网页设计与制作以及进行小型网站的维护和管理工作，是一门操作性与实践性都很强的课程。课程设置32学时，内容多、课程紧，如何在有限的时间内最优化学生的学习效果是授课教师面临的重要课题。
一、理顺与先修后继课程的关系
以《网页设计》课程为中心，重新规划了传播学专业网络传播方向的相关课程群内容，课程的先修课程包含有通识课程《计算机基础》，专业基础课程《C程序设计》及《电脑美术平面设计》，课程的后续课程包含有专业基础课程《计算机网络技术》，专业课程《网络传播》《网站创建于管理》，专业拓展课程《网络数据库技术》《手机APP开发》《网站策划与设计》及《动态网站建设》。
二、确定课程的教学目标
在对课程进行了重新定位和性质分析的基础上，确定课程的总体教学目标为培养学生静态网站设计与制作的实际工作技能，其中：知识目标：了解HTML标记语言，熟练使用网页制作工具Dreamweaver，能完成DIV+CSS标准布局。能力目标：能进行网站需求分析、总体设计，能实现界面设计、基本网页制作，能制作多种页面特效，能进行网站的基本管理。素质目标：培养学生良好的职业素养、团队协作意识、自我学习能力、沟通表达能力和知识归纳与积累能力。
三、课程内容设计
设计课程的讲授学时为16学时，实践学时为16学时。教学内容制定的依据是以岗位需求为导向，对网页设计师和网络美工的工作过程进行分解分析，确定岗位的核心能力；将核心能力整合提炼为对应的课程项目；依据课程项目提炼章、节、知识点；构建出以工作体系为基础的课程体系。其中课程项目规划设计6个，对应16课时的实践学时。分别为：项目一网页设计基础、项目二Dreamweaver基础、项目三表格布局的页面制作、项目四页面美化、项目五CSS+DIV布局的页面制作及项目六页面特效制作。围绕6个课程项目，规划课程教学内容10章，对应16课时的讲授学时，内容包括网页设计基础、Dreamweaver基础、页面与文本、图像与多媒体、超链接、表格、CSS样式、CSS+DIV布局、APDiv和Spry及行为。
四、《网页设计》项目教学实践
课程的实施步骤主要包括知识引入、项目布置、项目分析、分解实施及分步总结5个环节，本文以“页面特效制作”项目为例，具体阐述课程教学实施过程[1,2]。
（一）知识引入
平时浏览到的网页，很多都有网页特效。像图1左右两侧的对联悬浮广告，以及图2中的图像变化效果，这些特效的实现与“行为”这一知识点密切相关。针对行为是什么和如何为网页添加行为，围绕第十章行为相关知识点开展教学。在基本知识点完成学习的基础上，布置本次需要完成的项目是“制作甜品饮料吧网页特效”。
（二）项目分析
教师对项目任务的重点、难点进行细致的分析讲解，学生针对性地记录相关知识点。例如，对“甜品饮料吧”案例进行分析，确定该项目的操作要点为：一是在“热卖产品”下方，分别为图像“茉莉花香”“冰火两重天”“生命之绿”，“巨杯甜饮”添加显示-隐藏元素特效。二是在“特色产品”下方，添加交换图像特效。学生要在教师的指导下充分理解项目要求。
（三）分解实施
学生根据项目任务做好详细地分步实施计划，教师按照任务节点要求以及学生学习计划指导学生进行网页设计与制作，并注意纠正学生自主学习过程中出现的偏差，着重培养学生的项目实践能力。
（四）分步总结
对于项目实施过程中的重点与难点，找出共性问题进行讲解。
五、结束语
关键词：网页设计教学;信息技术
网站设计与制作是信息技术教学中创新性和实践性很强的课程，教师应采取有效的教学方法，更好地激发学生的学习兴趣。
一、创建站点
（一）教学策略
通过浏览主题网页界面，让学生对网页的制作和设计有更直观、更具体的了解。教师在备课时应多搜集一些不同类型、不同主题、不同布局的优秀网站供学生观看，帮助学生了解网站的类型、主题、版面布局、主要元素等。教师同时还可以搜集一些设计出现这样或那样问题的网页让学生观看，以便学生找出这些网站在设计上出现和存在的问题，并提出一些改进的意见或建议。网页设计开始时，教师应带领学生按照网页设计的具体步骤逐步规划，进一步强化网站设计的关键性，引导学生正确学习这一规划过程。
（二）激趣导入
许多学生都有上网的经历，教师可提出一些问题，引导学生思考。如：我们上过很多网站，看过很多网页，那么，什么是网页？什么是网站？两者之间有什么联系与区别呢？学生回答后，教师进行总结：网站是在因特网上一个相对独立的信息的集合，这些信息以网页的形式向全世界。所以，网站就是同一类型网页的集合。然后，导入新课。例如：我们常说的“新浪”就是一个网站，其中你看到的每个板块中的每个页面就是网页。那么，如何制作一个网站，制作网站又用到哪些工具呢？这节课我们就开始学习。通过本单元的学习后你会感到网站制作其实并不神秘。
二、设计网站首页
（一）教学策略
内容设计是设计网站的第一步。就如同一本书的封皮、一个戏曲人物的脸谱，必须能够反映出整个网页的整体特点和风格。所以，网站首页的设计是整个网页设计的重中之重。
（二）激趣导入
蓝脸的窦尔敦盗御马——蓝色脸，表现性格刚直，桀骜不驯；红脸的关公战长沙———红色脸，象征忠义、耿直、有血性；黄脸的典韦———黄色脸，代表骁勇；白脸的曹操———白色脸，表现奸诈多疑。京剧中的脸谱能准确地反映出人物的性格，网站的首页也要能够反映网页的特点与风格。
三、网页中的表格
（一）教学策略
网页中关于表格的基本操作内容包括：插入表格单元和调整表格大小（调整列宽或者行高，插入或删除行或列，合并或者拆分表格中的单元格，平均分布行或列）在Word中已经有比较详细的操作方法。在教学过程中，教师教学的重点应放在让学生在自己探究以上基本操作的基础上掌握表格的使用方法，主要包括：如何利用表格设计去布局网站、网页，让网页中的内容和素材完美地在网页上配置。另外，网页模板是提高网站设计效率的有效方法，教师要注意指导学生对网页模板的利用。注意观察和借鉴模版网站中表格的设计风格，初始使用表格设计网页时可将其边框粗细的值设为1，然后不断调整边框的值，以观察调整表格过程中的一些变化，从而熟练掌握表格调整的技巧。
（二）激趣导入
校园是通过道路和绿化带划分成办公区、教学区、运动区、生活区；报纸是通过横线和竖线划分成各个板块；而网页中的素材是通过版面布局来划分，如可用表格设计网页的版面布局。比如，“情感小屋”被很多虚线组成的网格划分成若干相对独立的区域，在这些区域中分别放置网页中的不同素材，这些网格就是表格，虚线便是表格的边框。
四、网页的美化
（一）教学策略
通过课程学习，学生对网站制作和设计规划有了基本的认识，并制作了网站首页，建立了网站站点，而且还能够归整网页中的各元素，使网页趋于整洁。但是，由于制作的网页中没有设置网页背景、网页Flas、背景音乐、字幕类型等辅助元素，仍然会显得单调。学生也希望能够通过学习新的知识，进一步加强美化已经完成制作的网页。教师通过“任务驱动”教学法，以指导学生完成一个个具体的学习任务而开展课堂教学，以尝试新发现、进行综合对比、总结归纳、多媒体教室直观演示等形式贯串整个教学过程。
（二）激趣导入
展示中央电视台《交换空间》这一栏目中一副装修前和装修完成后的房间的对比图，从而得出结论：同一个房间，经过雕琢修饰之后，就会变得美观、漂亮。然后导入新课：房间美化后会让人觉得赏心悦目，网页同样也需要美化。我们之前做的网页可能仅仅有文字、图片，比较单调，今天我们就来学习“网页的美化”，自己动手操作，看看如何让我们的网页更加漂亮，令人耳目一新。教师在网站设计与制作的教学中应该认识到该课程的特点，激发学生的学习兴趣，调动学生的情绪，让学生带着所遇到的问题，有针对性地去学习。并以任务作为驱动，充分激发学生的自主学习能力和兴趣，教师辅以适当的点拨指导，让学生的个性得以发展，创新能力得到提高，创新意识逐渐加强。
参考文献：
［1］吕红，王文捷等.《网页设计》教学改革的探索与实践［J］.中国科技信息，2009.
［2］魏善沛.网页设计创意与编程［M］.北京：清华大学出版社，2006.
中职学校网页设计课程的课时安排一般为每周两到三次教学，每次教学为80~100分钟的时间。课时安排不利于常规理解的项目在课堂中开展，这就要求教师将任务尽量细化设计，项目周期最长需要在一周的教学中完成。当然，项目设计一次教学就能完成更好。如果项目任务完成周期设置较长，学生的潜意识当中都习惯将一星期作为一个阶段，而两个星期之间会有较为明显的断层，不利于项目的连贯性。特别是中职学生，过长的项目周期可能会影响学习热情。项目周期设置过长，项目难度按正比增长，那么学习的成就感可能较难获得，学习的主动性和持续性都会降低。
网页设计的任务要结合教学目标而设计，将教学课时的目标用网页效果呈现。如掌握网页中插入表格，以及表格属性设置的技术，可设置完成企业年度报告的项目，项目中包含多个数据报表，即表格知识点的学习，也有对以前所学文字、段落等知识点的回顾。而不是简单地制作一个表格，进行几行几列、行高列宽的机械化设置。前者所用的情景创设在教学中对学生学习热情的提高起到了非常关键的作用。
二、项目教学法的课堂实施过程
项目教学法在网页设计课程中的运用必须秉承以学生为学习主体的形式，遵循项目教学法的基本流程。
1.资讯。教师学习任务，让学生明确课堂学习的主导方向或目的，然后围绕目的而展开自主学习。鉴于中职学生自主学习能力较弱的情况，教师需要适当对网页中的相关技术进行分解。如在模拟QQShow换衣服的类似项目中，通过任务目的展示特别强调鼠标的操作类型和AP中图片的表现形式。学生的自主学习必须围绕学习目标，教师可以为学生提供对应的纸质学习资料或者网络课件，提高学生学习的针对性。因为网页设计课程一般在计算机机房内学习，每个学生都有一台计算机。学生很方便就可以在计算机上实验自己正在学习的知识点，对信息的掌握能保证很高的准确性。
2.计划。课堂项目计划包含两个方面：步骤和方法。网页设计课程的任务往往是做一个网页，而网页基本上都是从上到下、从左到右这种符合阅读习惯的顺序进行设计，所以步骤计划在网页设计中表现得并不明显，那么重点放在方法的设计上。学生分小组讨论项目的技术要点。如在讨厌的陷阱网站项目中讨论关不掉的对话框和不停弹出的广告页面该用哪种方法，怎么操作才可以实现。
3.决策。学生的计划可能是不完备的，教师不能让学生基于一个不完备的计划去实施，这样可能导致项目失败。教师可以在学生实施项目计划时通过旁听等方式获取计划内容，也可以通过提问等方式了解学生的计划。在保证项目的最终正确效果和不影响教学目的的前提下，对学生的计划进行调整以形成实施方案。尽量保持学生方案的原创性，突出其主体地位。如网页的布局可以用表格，也可以用布局元素来进行定位，学生用什么方法其实都无所谓，因为既不是学习表格布局，也不是学习布局元素的使用。
4.实施—检查。因为网页设计基于所见即所得的开发工具，所以实施过程中的错误操作大部分能实时表现出来，学生自己就能马上发现并对错误操作进行调整。项目教学法中的实施与检查两个步骤在网页设计课程中以交替的形式同时进行。只有少数几种错误操作不会在设计过程中表现出来，如居中显示的表格中的AP如果不嵌套到单元格中，那么在浏览器预览时改变浏览器宽度会导致AP元素中的文字或图片漂移出预期位置等。如果项目中会使用到这种类型的操作，教师可在资讯部分提供检查方法。
5.评估。项目结果评价方法灵活多样，以鼓励学生为主；在项目内容讨论评价时，教师要尊重学生的成果，切记不要在学生面前评论谁对谁错，项目实施成功与否应看整个过程的开展情况。当然，在学生交流项目实施的结果时，教师也应该耐心听取，不能因为学生讲得不好而有任何不尊重学生的行为；否则，学生就会失去信心，项目实施就会失败。“教育的目的不是要你承诺记忆多少东西，甚或知道多少东西。而是要能区分你知道什么，不知道什么。”那么，我们的评价不应该仅仅判断学生做得好或坏，而是让学生在评价的过程中弥补不足，能够正确、客观地评价自己和别人。
三、项目教学法在教学中的思考
关键词：网页设计与制作 综合实训 案例教学 任务驱动
中图分类号：G633 文献标识码：A 文章编号：1673-9795（2013）05（b）-0173-02
近年来，随着我国职业教育改革的进一步深化，计算机专业课程改革面临着进一步完善，这就对《网页设计与制作》课程改革提出了更高的要求。《网页设计与制作》课程是中职学校计算机应用技术和计算机网络专业中一门创新性和实践性很强的专业课程，要求学生不但要学好理论知识，还需要掌握实践技能，关键是要具有解决实际问题的能力。但是，这样一门看似简单好学的课程，却经常得不到很好的教学效果。学生在学完课程之后，要么设计结果达不到应有的功能和视觉效果，要么不能独立地进行网站规划和页面设计。因此，笔者在《网页设计与制作》课程的教学实训中，对教学内容、教学方法、教学手段、考核方式等进行了一些尝试，收到了良好的效果。
1 实训阶段
以我校计算机应用专业为例，《网页设计与制作》综合实训课安排时间为60个课时，以集中训练的方式进行。在综合实训之前，学生已经学习理论知识和上机操作，对课程的重点、难点进行了相关的练习。笔者在教学中发现，虽然学生经过指导能够完成课堂上布置的任务，但是只能根据规定的操作步骤进行，学生没有独立设计和制作网页的能力。学生的操作依赖性很强，学习之后很快就遗忘。针对这些问题，笔者制定了切合实际的实训计划，主要目的是培养他们团队中协作能力，独力完成所承担的网站需求分析、网站规划、网页设计、综合测试等工作，从而使学生牢固掌握所学知识，实现以技能培养为核心，培育适合当前职业岗位需求的应用型、技能型人才。本课程综合实训如下所示。
1.1 实训动员
在综合教学实训进行前，要做好学生的学习动员工作。一方面，让学生明确综合实训的主要目的是让学生通过实践，了解和掌握网页设计与制作的基本方法，通过不断上机练习达到解决实际问题的能力。因此，集中两个星期时间使学生综合运用所学习的网页设计与制作的知识及以前所学习图形图像处理等计算机软件应用方面的知识，根据网站制作的流程，完成一个综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。另一方面，让学生了解实训的目的和意义、学习方法以及考核方式等方面的内容。采用展示实际案例效果、历年网页设计与制作竞赛获奖作品、历届学生的优秀作品等方式来激发学生的学习兴趣，让他们积极主动地参与到实训中来。
1.2 实训过程
在《网页设计与制作》综合实训教程中，老师的角色是参谋，学生的角色是任务的完成者。老师提出项目要求，学生根据具体的任务来完成。我们把一个班的学生分成10个小组，每个小组4～5人，每个小组选择一个主题制作网站，综合运用前面所学的知识和相关的技术共同完成。
1.2.1 基本知识回顾
这部分的要求是温习网页制作课程的重点难点，使学生对Dream weaver各方面的操作知识系统的由“片”的认识转向“面”的认识。
1.2.2 案例作品赏识
在网页设计过程中，经验丰富的设计师需要博采众家之所长，形成自己的风格，而对于初学者来说，模仿是最容易收到效果的方法。大量欣赏优秀的网站作品并不断地分析、比较，会使学生的各种能力逐渐增长和提高。通过展示历年中职学校职业技能竞赛中网页设计与制作项目中的获奖作品、历届学生的优秀作品等手段来提起学生的学习兴趣，吸引学生积极主动地参与实训。
1.2.3 案例模仿操作练习
从历届学生的优秀作品中选择一个典型的案例，让学生作为网页设计与制作知识的回顾。例如，对一个旅游网站进行解析，使学生了解制作网站的基本方法，让学生对旅游网站的粗略和宏观认识得到细化，使学生懂得如何独立面对旅游网站进行需求分析、站点规划和设计。
1.2.4 作品的选择、网站需求分析、站点规划
在综合实训中，首先要求各小组学生选择一个网站主题，主题一般选择如下内容：校园生活、教育、体育、旅游、电子商务等。然后，小组成员开始着手进行网站需求分析，设计整个网站的框架，选定要设计和制作的各部分内容，由组长组织完成一份完整的网站规划书。在此过程中，老师要适当指导，要求学生独立完成，设计出有具有本组特色的网站。最后，由组长给本组成员进行网站设计与制作任务分配，分头搜集素材并进行整理。
1.2.5 网站色彩搭配
网站的色彩就像人的外表一样，如果打扮得美观大方，就会给人一种魅力四射的感受，而不修边幅则让人感到粗糙毛草，所以，网页的色彩搭配将直接影响访问者对网站的印象。网页配色有着很强的艺术性，不同的色彩搭配方案就会让人产生不一样的感受。对于初学者来说，模仿是最容易看到效果的方法。在站点规划完成的基础上，选择网站的主色调和学习色彩搭配。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。由于中职生英语、数学等文化基础较差，编程对他们来说难度太大，他们走上工作岗位后一般不会从事程序开发工作，大多数学生毕业后从事的是网站美工等，因此，应该在网页美工等方面加强培养。
