探“网页设计”之教学

江海燕　杜　林　李树金　赵　珂

文章编号：1672-5913(2009)02-0083-02

摘要：在网络时代的今天，网页设计的地位更显重要，这对高校“网页设计”课程的教学提出了更高的要求。本文首先分析了该课程常用的教学方法。然后从教学环节、教学内容、教学方法、教学评价等角度精心设计了科学的教学方案。实践证明该教学方案教学效果较好，但是还有待完善。

关键词：网页设计；教学方法；教学方案

中图分类号：G642

文献标识码：A

1“网页设计”课程与常用教学法

进入信息高速发展的2l世纪，网络遍布世界，人类进入网络时代。网络给传统商业模式带来了极大的机遇和挑战，而且深刻地改变着人类社会的生产、生活和交往方式，并更为深刻地改变着人们的思想观念和精神世界。网络中所有的信息都需要网页去呈现,于是网页设计作为一门新兴的行业应运而生。

网页设计是一门集设计技术、资源、美学等为一体的综合设计课程。它依据网站设计目标，把各种页面元素、网页布局、色彩、风格等有机地统一在网页中。网页设计也已经成为艺术设计中的一个重要分支。如何使学生设计出风格独具的网页？创新的网页？实用的网页？让学生在实践创作中学习知识，提高能力？这对高校的“网页设计”课程的教学提出了更高的要求。

目前，在高校的“网页设计”课程教学中常用的教学方法有案例教学法、项目驱动教学法、分层教学法、网络教学法、工学结合教学法等。上述教学方法是实践证明了的较好的“网页设计”的教学方法，合理运用，定能大大提高教学效果。

2“网页设计”课程教学方案设计

“网页设计”课程具有较强的实践性，如何上好“网页设计”课？笔者结合多年的实际教学，以教学的时间先后为顺序，设计了如下的教学方案。

2.1备课阶段

首先是备教材。选用集成度更好的Dreamweaver8.0作为网页开发环境。从教材、参考书以及网络中，归纳总结出具有代表性的典型案例，为课堂教学做好准备。并且准备好在多媒体机房上课需要的课件。

然后是备学生。注意分层教学法的应用。分析学生的专业学习特点和目前的学习状况，分为良好和一般两个层次。从而制定不同层次的教学目标和教学评价。并在实践教学中不断调整，提高学生的学习热情和兴趣。

2.2教学阶段

教学阶段是从学生开始学习“网页设计”这门课程开始的，它的周期又可按时间先后分为“引子部分”、“理论学习部分”、“主体部分”。教学的地点选在多媒体机房。电脑的编辑环境为Dreamwear8.0。

2.2.1引子部分(2课时)

好的开始是成功的一半。“引子”就是要在第一堂课就调动起学生学习的兴趣和激情。

该部分的第一个任务是回答问题：网络在现在社会中发挥怎样的作用？通过互动式的讨论，引出网页的概念，激发学生的参与和思考。

第二个任务是回答问题：吸引你的网页有哪些？为什么？引导学生进一步思考。教师可以通过介绍淘宝、巨人网络、百度等优秀的网页以及它们成功的故事、采用的技术，鼓励学生自己的创作热情。

第三个任务是让学生明确本课程的教学目标和教学计划。目标是熟练掌握以Dreamweaver8.0为主的网页开发工具，创作出自己的网页设计作品。要求在“理论学习部分”结束之前，提交和确定每个人想要的网页设计主题与项目方案，以项目驱动教学的整个过程。在“主题部分”，主要是采用项目驱动教学法、案例教学法和网络教学法，以学生为主体，进行教学。学生在学期末提交作品，进入“评价阶段”，教师对每个学生的创意作品进行考核和点评。使学生明确每个教学环节都是环环相扣，由浅及深。使每个学生确信他们有能力最终实现自己的审美情趣、艺术修养和个性追求。

2.2.2理论学习部分(4课时左右)

该部分主要是讲授关于网站开发的基础知识。通过板书和多媒体等教学手段澄清一些关于网络的概念和知识。使学生掌握网站开发的基本流程。并补充相关知识，使学生明确Internet、WWW和IE的关系；IP地址、域名和URL的关系；明确IP地址的分类；了解Web2.0的互联网新模式等。

2.2.3主题部分(64课时左右)

在“理论学习部分”结束前，由教师审核每位学生提交的网页设计主题与项目方案。教师对其中较好的项目方案进行当众点评，比如青岛的学生提出“奥运在我家”的设计方案，从“我”的角度去“看”奥运和青岛，角度较好；比如“经典语言汇总网”，将人们在电视剧、小品、网络等多种媒体中出现的经典语言进行分类汇总，角度很新颖独特。针对不适合的创意，教师可单独与学生交互，修改确定新的项目方案。

当每个学生都明确了项目方案后，在项目驱动的前提下，才能根据项目需求准备相关的内容资料、素材，也才能科学的展开“主题部分”的教学。

在“主体部分”的教学中，将网页设计的教学内容整合为以下七个模块。每个模块的教学采用案例教学法，通过边演示边学习的方式让学生在实践中学习网页设计的技术。

模块一：创建站点。好的站点是学生进行网页设计的第一步，要让学生学会建立条理清晰的站点，规划好自己的工作文件夹。强调所有的网页文件、图片、声音、视频等都要分类放在不同的文件夹中；所有的文件名、文件夹名、图片名都使用小写字母或小写字母数字组合，不能使用汉语；首页文件名必须是index(.htm或.html)。

模块二：编辑网页元素。网页元素包括文本、图像、多媒体、超级链接、Logo、导航栏等。要求学生能够熟练地编辑各种网页元素。其中，Logo是网站的标志，一般在网页的左上角，内容一般是网站有代表性的人物、动物、花草或者英文名称等。可以鼓励学生利用生成器或者Photoshop等设计好自己的网站Logo。超级链接是实现网页跳转的重要途径。教师可以通过案例使学生掌握文本链接、图像链接、Email链接、锚点链接、空链接、脚本链接等各种链接形式。

模块三：设计网页布局。网页布局设计到网页在浏览器中所显示的外观，决定着网页设计的成败。通过表格布局、布局模式布局、框架布局三种手段来定位网页元素。其中，首页的布局尤为重要。可以运用各种形状，如矩形、圆形、菱形等，“同”字形、“匡”字形、“三”字形、“川”字形等，或者是运用曲线组成的柔美的或不规则的图形。然后将页面元素放入其中，确定它们的位置，同时要考虑整个页面的平衡、疏密等因素，编排出令人舒适的效果。最后确定页面尺寸和页面元素的尺寸。

模块四：优化网页样式。主要是通过Html标签对和CSS规则来优化整个页面的样式，使整个网站的风格较统一，并且有特色。其中，CSS层叠样式表类似于Word中的样式，它将网页的排版从网页文档的制作中独立出来。利用它可以批量地修改成百上千个网页的外观样式，大大提高了工作效率。

模块五：制作网页特效。利用层来实现对页面元素的精确定位；利用行为来动态响应用户的操作或者触发任务；利用JavaScript语言实现动态的、实时的、交互的动态效果。其中，行为一方面是指Dreamweaver8.0提供的预定义行为。实现鼠标经过图像、弹出信息、拖动层、显示弹出式菜单等动态效果。另一方面是指结合时间轴，创建自定义的动态效果。教师可以适当增加案例的数量，租金学生的学习兴趣。关于JavaScript未做重点讲解，只给学生提供—些特效代码、插件、代码下载网站，并演示如何使用现成的特效代码。

模块六：管理网站资源。通过资源面板批量的修改重复的网页元素，从而高效的管理网页中的各种资源。通过库管理和更新多次重复使用的网页元素。利用模板保存较好的文档格式，作为中间件，需要时可以套用。

模块七：其他相关知识的补充。主要是ASP语言、数据库知识和Flash。要求能够制作简单的动态网页。另外，Flash是一种简单直观、功能强大的动画设计工具。在教学过程中，教师可以鼓励学生通过案例的学习，自己动手制作网站片头、主题文字的动态效果、背景、网页切换等效果，增强网站的吸引力。

以上的七个模块，就是对“网页设计”课程全部教学内容的一个整合。然而，在每个模块的教学过程中，针对课堂上没有解决的问题，可以通过网络教学法，在课后进行有益的交流和补充。并且，每个模块学习结束后，都给学生时间将所掌握的技术应用在各自的项目方案中。

总之，“网页设计”课程是一门实践性操作性很强的课程，无论怎样安排教学内容，无论使用怎样的教学方法，都是要以学生为中心，提高学生的网页设计能力。

2.3评价阶段

当完成教学阶段的全部工作后，在学期末最后一周，由教师对学生的学习效果进行考查。每一位学生都上讲台介绍自己的网站主题、内容、所用技术等，然后，由老师当场从创意、审美、内容、技术、工作量五个角度进行点评。最终依据学生平时的上机以及作业情况(30%)加上最终提交的网页设计作品(70%)给出学生本学期的考核成绩。成绩分为优秀、良好、中等、及格和不及格五个档次。推荐优秀作品的设计者参加网页设计大赛、假期到公司实习或者考认证。

这种评价方式是以能力为中心的全程化、开放式、全面的考核方式，能够综合考查学生平时参与课程的情况、每阶段学习的状况和最重的网页设计效果，使学生的素质和综合能力得到提高。

3结束语

笔者根据多年来在“网页设计”课程中的教学经验，本着以学生为中心的原则，对传统的教学模式进行改革，提出了创新的教学思路和实践总结。笔者在“网页设计”课程的教学过程中精心设计了科学的教学方案；采用了适合的多样的教学方法；较合理地整合了网页设计的教学内容；采用了全程化的评价方式。实践证明取得了较好的教学效果。但是仍需要加强教学环节的组织，更加充分的利用网上的教学资源，丰富课堂教学内容，将“网页设计”之教学推向更高的层次。

参考文献

[1] 胡亚卓. 浅谈网页设计[J]. 科教文汇,2008,(02):180.

[2] 林菡,张军. 优良的网页设计应该注意的几个要素[J]. 北京教育学院学报(自然科学版),2007,(8):12-15.

[3] 颜谦和,颜珍平. “网页设计与制作”课程运用案例教学法初探[J]. 计算机教育,2007,(9):65-66.

[4] 吴建梅,周莹. “任务驱动”教学法在高职“网页设计”课程中的应用[J]. 科技广场,2007,(08):210-211.

[5] 余平. 项目驱动在网页设计实践教学中的应用[J]. 实验室科学,2007,(5):94-95.

[6] 李若兰. “网页设计”课程之分层教学实践[J]. 大众科技,2007,(7):33.

[7] 韩慧. 关于“网页设计”课教学改革的思考[J]. 山西财政税务专科学校学报,2007,(10):79-80.

Teaching Exploration of Web Design

JIANG Hai-yan, DU Lin, LI Shu-jin, ZHAO Ke

(Department of Computer, Shandong Education Institute, Shandong Jinan 250013 , China)

Abstract: In the Network Age today, Web Design appears to be more important, which has brought a higher demand of teaching of this course. Firstly, this paper analyzes several teaching methods used in the course. And then, it presents us a scientific Teaching Project from the angles of Teaching Content, Teaching Methods, Teaching Evaluation and so on. Practice has proved that this Teaching Project can lead to good effect, though it needs to be improved later.

Key words: Web Design, Teaching Method, Teaching Project