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

应用教学探索

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

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

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

二、教学内容设计

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

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

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

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

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

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

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

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

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

（３）强调ＣＳＳ的作用

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

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

三、教学方法

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

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

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

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

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

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

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

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

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

（２）选择最流行的软件

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

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

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

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

２．案例教学

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

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

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

图像加工软件有很多，如Ｐｈｏｔｏｓｈｏｐ、ＰｈｏｔｏＩｍｐ …… 此处隐藏：87字，全部文档内容请下载后查看。喜欢就下载吧 ……