_网页设计与制作_课程教学设计与实践

发行部：ｃｙｌ＠ｍｏｅ．ｅｄｕ．ｃｎ《中国教育信息化》

教学探索应用

《网页设计与制作》

课程教学设计与实践

清华大学计算机系

摘

安颖莲李秀姚瑞霞田荣牌

要：《网页设计与制作》是当前热门课程，该课程集知识和技能于一体，实践性很强。我们以一个学习任

边讲边练的方式和案务为主线贯穿整个学习活动，精心设计教学内容和与之配套的实验教学，采取在机房上课、例教学法，锻炼了学生解决实际问题的能力、自主学习能力和协作学习能力。

关键词：网页制作课程设计实验教学中图分类号：Ｇ４３４

文献标识码：Ａ

文章编号：１６７３－８４５４（２００７）０９－００５３－０３

一、课程特点

网页设计与制作》课程在清华大学计算机教学体系《

中属于应用专题系列课，是全校选修课。该课程集知识和技能于一体，实践性很强，要求学生既要学好理论知识，又要掌握操作技能，还要具有解决实际问题的能力，能将基本技能和操作综合运用到具体的项目中。该课程的教

网页制作类课程是近几年国内高校普遍开设的课程，也是计算机领域发展最快、应用最广泛的课程之一，该课程内容丰富、实用性强，深受学生欢迎。如何在有限的课时中使学生掌握网页设计的精髓，是教师在课程设计中最应关注的问题。笔者结合在清华大学讲授《网页设计与制作》课程的经验，探讨这一问题。

"""""""""""""""""""""""""""""""""""""""""""""""

映了论文的质量，也有助于帮助学生养成一丝不苟的治学习惯。在网络上提供标准统一的论文格式可以方便学生随时校正自己的论文，减少论文格式上的错误。

二、校际交流板块

校际交流板块是按照不同专业区分的学术研讨空间，除了已经设定的常见专业，还允许各院校添加新的专业。各院校的应届毕业生登录自己的专业板块后，可以了解其他院校本专业的状况水平，参观兄弟院校本专业的网上展厅，欣赏各校历届毕业设计作品和教师点评；辅导教师也可以交流辅导经验，交换课题；学生还可以向其他院校教师请教，吸取不同意见，更加全面地考虑问题。

三、校友交流板块

校友交流板块是为学生提供的另一个咨询窗口，包括历届毕业设计点评、校友论坛和校友通讯录。在历届毕业设计点评栏目，学生可以观摩自己教师辅导的往届毕业设计作品和答辩小组评价，具体了解本校对毕业设计的要求和成绩评定标准；在校友论坛，应届毕业生可以向历届毕业生吸取经验和教训。历届毕业生经过工作的磨练对毕业设计会有新的认识，由于他们可能早就认识，这种现身说法的方式更令人信服；校友通讯录可以帮助应

届毕业生联系更多校友，获取更多毕业设计和就业咨询。

四、就业指导与信息板块

包括面试技巧和招聘信息两部分，为毕业生提供就业机会，从侧面帮助毕业生安心做好毕业设计。面试技巧除了提供一些基本礼仪和常见提问，还可以根据历届毕业生的谋职经历总结出一些具有本专业特点的应聘技巧，如怎样准备个人简历和反映个人专业水平的求职资料、如何表现自己的特长等；招聘信息包括来校联系的用人单位信息和大型招聘会信息，提高学生找工作的效率。

本系统以专业毕业设计辅导网站为主，辅助以电子视频等网络工具，可以实现导师和学生实时对邮件、ＱＱ、话与留言两种不同模式，很好地解决了毕业设计辅导与学生外出找工作在时间和地点上的冲突，是提高毕业设计辅导质量的有效手段。

当然，再先进的信息技术也难以达到面对面辅导的质量和便捷，所以必须保证相当时间的见面辅导，将这两种方式结合起来使用才能更加适应当前毕业生的实际情况。而引导毕业生树立正确的就业观念，使他们正确认识毕业设计与求职、就业之间的关系，才能消除学生的消极情绪，从根本上提高毕业设计质量。!

ＣｈｉｎａＥｄｕｃａｔｉｏｎＩｎｆｏ

５３

应用教学探索

编辑部：ｍｉｓ＠ｍｏｅ．ｅｄｕ．ｃｎ《中国教育信息化》

学目标是在学生已掌握的计算机知识基础上，培养学生网页制作的能力、网上信息获取和加工能力、自主学习能力和团队协作能力，课程结束时学生能自行开发一个静态网站。

该课程突出的矛盾是学习内容多、课时少。网页制作的知识体系非常庞杂，包括网络基础知识、网页制作技术、平面设计和动画制作等基本要素，而学校给安排的课时只有２４学时，要在８周内讲完，所以在给定的学时中面面俱到是不可能的。为此，我们把课程设计为以一个学习任务（制作一个网站）为主线贯穿整个学习活动，精心设计教学内容和与之配套的实验教学，采取在机房上课、边讲边练的方式和案例教学法，取得了满意的效果。

二、教学内容设计

本课程定位在客户端网页制作技术，而目前客户端网页制作的技术和工具软件五花八门、层出不穷。选择合适的技术和工具软件，是课程成功的基础。我们根据对该领域的研究和多年的教学经验，结合国外大学开设同类课程的实践，设计出课程内容模块，该课程由７个模块组成：Ｗｅｂ基础知识和案例介绍、ＨＴＭＬ语言、ＣＳＳ、使用素材加工、网页图像Ｄｒｅａｍｗｅａｖｅｒ制作网页和网站管理、

处理（ＰｈｏｔｏＳｈｏｐ）和网页动画制作（Ｆｌａｓｈ）。教学内容设计的原则是：

（１）重视ＨＴＭＬ的教学

无论什么类型的网页，其基本结构都是ＨＴＭＬ标记，所以认识、了解ＨＴＭＬ标记的含义是非常重要的。认识

加工的软件。而ＰｈｏｔｏＩｍｐａｃｔ自带丰富的图库，提供众多即拖即有”的现成效果和创意工具，可以方便地创建网“

页上常用的导航按钮、横幅等个性化的图片，还可以对图片进行优化以使其适合网页发布的需要，所以我们选用其作为素材加工的软件。

网页动画工具有Ｆｌａｓｈ、ＧｉｆＡｎｉｍａｔｏｒ、ＬｉｖｅＭｏｔｉｏｎ、

ＩｍａｇｅＲｅａｄｙ等。Ｆｌａｓｈ是矢量图形编辑和动画制作的专业

软件，使用Ｆｌａｓｈ制作的动画作品空间小，交互功能强，可以跨平台播放，在网页中有着广泛的应用，特别适合于制作声光效果俱佳的开场动画，所以我们选用其作为课程动画制作的软件。鉴于ＧｉｆＡｎｉｍａｔｏｒ在制作动态ｇｉｆ格式图片的简单易用性，我们选择其作为制作动态ｇｉｆ图像的软件。

（３）强调ＣＳＳ的作用

制作网页，除了上面提到的ＨＴＭＬ语言和工具软件之外，还需要掌握ＣＳＳ设置页面元素的格式，美化页面。设置特定的格ＣＳＳ（层叠样式表）可以精确进行网页布局、

式，实现ＨＴＭＬ标记本身无法实现的格式，而且使用ＣＳＳ可提高网页制作的效率，使网页代码简练，网页风格统一，在网页设计中是必不可少的。

三、教学方法

我们采取在机房上课、边讲边练的方式和案例教学法。

１．在机房上课，边讲边练

鉴于课程本身操作性的内容很多，我们充分利用多媒体双向教学环境，把课堂搬到机房，采用边讲边练的方式。这种方式的优越性是：

（１）在双向教学环境中学生人手一台机器，远比教室的大屏幕投影清晰得多；

教”与“学”的同步，教师可（２）这种教学环境实现了“

及时了解学生的问题，快速给予指导；学生可及时将学到的知识付诸实践，在实践中检验知识和技能掌握情况，出现问题可及时请教教师，也可通过周围同学的帮助得到快速解决；

快捷地下（３）学生在练习过程中，可通过网络方便、载大课讲稿、练习素材等学习资源，提高学习效率。

ＨＴＭＬ代码，在一些必须要修改ＨＴＭＬ代码的情况下（如

添加网页特效的Ｊａｖａｓｃｒｉｐｔ代码、添加背景音乐时）就不会感到无从下手，也为动态网页的学习奠定基础。

（２）选择最流行的软件

在工具软件的选择上，我们的原则是选择最流行的，因为流行的软件一般用户多，功能强，有生命力。网页制作一般需要网页制作软件、图像处理软件和网页动画制作软件的配合使用。

用于网页制作的最为常用的专业级的软件是

ＦｒｏｎｔＰａｇｅ和Ｄｒｅａｍｗｅａｖｅｒ。［１］这两个工具软件都提供了

易图形化的设计界面，ＦｒｏｎｔＰａｇｅ重视网页的开发效率、学易用的引导过程，适合于网页设计的初学者；而

２．案例教学

讲课方式采用案例教学。我们结合课程内容，制作了课近百个精美的案例，每个案例都综合了若干个知识点。堂上先让学生观看相关案例，引出问题，然后在讲解知识点的同时实现案例的功能。在讲解过程中注重基础知识的传授和基本技能的培养，同时介绍网页制作中的相关规范和标准，并且注意总结一些实用的技巧。这种教学方式目的明确、形式生动，学生带着问题听课，学习兴趣和

Ｄｒｅａｍｗｅａｖｅｒ主攻的是网页高级设计市场，适合专业的制

作人员使用。鉴于Ｄｒｅａｍｗｅａｖｅｒ在网站管理和网页编辑方面的卓越表现，我们采用它作为课程用软件。

图像加工软件有很多，如Ｐｈｏｔｏｓｈｏｐ、ＰｈｏｔｏＩｍｐａｃｔ、其中ＣｏｒｅｌＤＲＡＷ、Ｉｌｌｕｓｔｒａｔｏｒ、Ｆｉｒｅｗｏｒｋｓ，ＰｈｏｔｏＤｒａｗ等。最专业的图像处理软件，适合网页Ｐｈｏｔｏｓｈｏｐ是最著名、

图像的加工处理，所以我们采用Ｐｈｏｔｏｓｈｏｐ作为课程图像

５４

中国教育信息化／２００７．０９（高教职教）

发行部：ｃｙｌ＠ｍｏｅ．ｅｄｕ．ｃｎ《中国教育信息化》

教学探索应用

效果明显提高。

图１为框架布局案例，通过该案例的演示使学生了解框架布局的特点和实现功能，结合该案例的制作介绍了框架网页的创建、保存、编辑过程、设置框架间超链接、设置目标窗口、设置贯穿网站的背景音乐等诸多知识点。

了解决，这样既巩固了学过的知识，掌握了新技能，还锻炼了动手能力，也为ＣＳＳ的引入作了铺垫。

图２实验“网页基本编辑”的最终效果

五、学习任务设计

在学生进行课程学习之初，我们通过布置一个学习任务（网站作品）使学生迫切感受到课程要求与自己现

图１框架布局案例

有认知结构的关系和差异，进而明确学习活动的方向和要达到的目标，然后向学生提供整体性的解决问题的思路示范，学生以个人或团队方式对任务进行分析和探索，最终使问题得到解决。该任务作为一条主线自始至终贯穿课程，整个学习活动的展开都围绕着这条主线进行。

我们布置的学习任务是以团队形式制作一个网站，同时规定了基本要求：包括主题和内容要求、团队规模的限制、基本工作量要求、网站中必有的网页元素等；技术要求：包括主页文件命名规范、作品文件空间上限、栏目规划、导航和链接要求、网站文件管理、网页浏览兼容性等；版面与艺术效果：包括整体风格、排版布局、色彩搭配、网站ｌｏｇｏ、音乐、网页特效等。同时我们也给出了该学习任务的量化评价指标，并在批改后反馈给学生。

我们设计的学习任务涵盖了教学目标所定义的知识，而且对学生已掌握的知识和技能有所超越，能使学生产生兴趣，激发学生的求知欲，从而使学生主动学习。由于该任务有一定复杂度，我们鼓励学生用团队协作的方法完成任务，锻炼学生的团队协作能力，为日后实际工作奠定基础。

通过完成学习任务，学生不仅掌握了网站制作技术，还激发了学习兴趣，提高了学习能力和计算机应用能力。

六、学习效果

本课程自开课以来，一直深受学生欢迎，选课人数远开课以后教学效果良好，第二个学期超课容量５倍以上。

的教学评估就达到优秀，总分９１．２１。同时，学生对课程教学评价也很高。!

参考文献：

四、实验教学

实验教学是为学生消化吸收课程内容而设计的，通过实验教学的实施，使学生掌握网站设计与网页制作的知识与技能，培养学生计算机的综合应用能力和解决实际问题的能力。实验教学设计得好能起到事半功倍的效果，使学生在很短时间内抓住学习的重点，掌握网页制作的方法和技能。除了基础知识以外的６个模块，每个模块我们都精心设计了１￣３个典型实验，学生通过完成实验掌握课程内容和发现问题。实验设计的原则是：

（１）强调基础：把学习内容的主要知识点设计到实验中，学生通过实验能抓住学习重点，以此展开学习；

（２）具有拓展性：实验内容的一部分是课上没有讲到的，需要学生自行解决，目的是培养学生自主学习能力和探索精神；

（３）体现制作规范和设计理念：实验本身要符合网页设计规范，版面美观，这样能激发学生的积极性，使学生养成遵守规范的习惯，还在潜移默化中熏陶了学生的审美观；

（４）综合性：部分实验具有一定难度，学生要综合应用多种知识和技能才能完成。

为此我们共设计了１６个实验，知识点覆盖教学内容的８０％，使学生通过这些上机实验熟悉和掌握主要教学内容。

图２为实验“网页基本编辑”的最终效果，该实验使用Ｄｒｅａｍｗｅａｖｅｒ进行网页编辑，主要知识点有设置页面属性、设置文本格式、插入图像和设置图像格式、使用超链接。这个实验中有两个知识点在此次课上没有讲到的，一是水平线的颜色设置，二是背景图像固定。学生通过查找资料、运用之前学过的ＨＴＭＬ知识等方法使问题得到

［１］李秀，安颖莲，姚瑞霞等．计算机文化基础（第５版）［Ｍ］．

清华大学出版社

ＣｈｉｎａＥｄｕｃａｔｉｏｎＩｎｆｏ

５５

本文来源：https://www.bwwdw.com/article/6qs4.html