网页设计与制作教学实践研究

丁海燕，袁国武，林 玲

(云南大学 信息学院, 昆明 650091)

网页设计与制作教学实践研究

丁海燕，袁国武，林 玲

(云南大学 信息学院, 昆明 650091)

网页设计与制作是一门实践性强、创新性强、综合性强的数字媒体设计课程, 如何激发学生的学习兴趣，在有限的学时内完成课程所要求的知识和技能已成为普遍探讨的教学问题。针对数字媒体技术应用课程的特点，教学内容的设计和教学方法的创新成为教学成功的关键。文中根据“网页设计与制作”课程实际的教学目标,从图像与动画、动态网页、层叠样式表CSS、综合网站案例设计四个方面分析了教学内容设计，阐述了教学方法改革，实践证明大大提高了学生网站设计与制作方面的数学媒体设计能力和动手能力。

网页设计;教学设计;案例教学;数学媒体设计

随着网络的普及和迅猛发展，信息化程度不断提高，网络已经成为人们获取信息的主要方式之一，网页设计制作课程应运而生，它综合了网页美工设计、Web 应用开发、信息发布与获取等多方面的技能，为电子商务、电子政务提供了技术基础[1]。网页设计制作课程作为一门技术与艺术相融合的创新型课程，要求教师在讲授网页制作相关理论知识和技能的同时，特别要注重激发学生的学习兴趣，启发学生的思维，培养学生的实践能力。因此如何在有限的课时内，使学生掌握网页设计的精髓，具备综合运用多种软件工具进行网站开发与网页设计的能力，成为授课教师值得探讨的话题[2]。笔者结合实际教学经验，对知识点的教学设计和教学方法改革做了有益的实践与探索。

1 网页设计与制作的教学目标与定位

网页设计与制作课程的总体目标是培养学生具有网站设计与开发、网络多媒体设计与开发的能力。该课程涉及Dreamweaver网页制作、图像处理、网页动画制作和网页编程等，使学生具备网页设计与制作、网站规划与维护的实践技能，最终养成良好的信息收集、加工、处理和发布的信息素养和动手能力。具体来说，在培养专业能力方面，应教会学生合理使用表格、层、框架进行网页布局，体现网页的艺术性；熟练使用层、行为和JavaScript 脚本实现网页特效；使用CSS 样式统一网站风格；使用模板与库简化网页的批量制作与维护更新；使用网页三剑客软件Dreamweaver、Fireworks和Flash进行网页综合设计，并根据用户的需求进行网站的策划、制作、发布及对网站进行更新和维护[2]。同时这门课程还要注重培养学生规划网站、从不同媒体查找资料、获取信息、用图像处理软件Fireworks和动画软件Flash处理和加工信息的能力；培养与客户的沟通能力以及团队协作能力；培养更新现有知识和技术的自学能力，以及不断创新的能力[2]。

教学中要确立“加强计算机综合应用能力，以信息技能促进专业发展，注重信息的搜集、加工处理、设计和发布，以提高学生的信息技术应用水平和实践技能为目的”的大学公共计算机教学理念。在教学改革上既要把握全局方向，又要具体落到实处，解决传统教学中理论与实践联系不紧密，学生动手能力和创新能力不强等问题。使高校一年级和二年级的本科学生从具备基本的Windows操作系统和Office办公软件操作能力，提升到能将计算机技能与自己的专业或兴趣爱好相结合，综合应用Dreamweaver、Fireworks、Flash、Photoshop等多种计算机软件，设计制作不同主题、界面美观、内容丰富、功能全面的网站，达到发布和交流信息的目的。

总之，网页设计的教学目标就是让每名学生在数字媒体技术上具有较高的理论水平和良好的实践能力，具备一定的网页设计制作和网站维护管理的能力，并能够围绕一个主题自己收集、加工和处理各类信息，最终提交具有一定集文字、图像、动画、音频、视频等多种视觉效果和技术含量的网页作品。

2 网页设计与制作课程教学内容设计

一个完整的网站开发与设计涉及不同的设计理念与技术支撑，例如，HTML语言、JavaScript脚本语言、ASP编程技术、CSS技术、图像处理、多媒体技术、数据库技术，甚至布局及色彩搭配等美学知识[3]，这难以在一门课程中面面俱到，于是就要求教师应结合项目化教学方法，积极促进网页制作多种软件间的相互渗透与联系，并根据不同专业学生的特点、现有知识结构和认知水平推敲每个知识点，并设计构造出一系列具有可操作性的典型“教学任务”，以提高学生的动手能力、想象力、艺术审美和创新力等综合素质[3]。

2.1 图像和动画的教学设计

一个精彩的网页是缺少不了图片的,如图片按钮、翻转图片、滤镜、透明图、导航图等，图片往往在网页中起到画龙点睛的作用,所以在网页制作过程中一定会涉及图片的处理[4]。同时要制作出精美的网页图像，网页相册，以及整体感强烈的版面布局等，往往要借助Fireworks软件。因此,网页设计课程也要结合网页图像处理的教学,但由于时间所限，只能通过一些案例重点讲解用Fireworks制作导航菜单、特效文字、切片和LOGO标志等。Flash动画制作则通过几个简单的文字动画案例，让学生了解动画制作的原理、Flash 动画制作的基本步骤、不同类型基本动画的制作技术(如引导线动画、遮罩层动画、逐帧动画、补间动画等)、在动画中添加声音、影片的导出等[4]。图像处理与动画这部分内容，教师可根据各个学校的学时和学生水平灵活进行增减。

2.2 动态网页的教学设计

静态网页的制作可以用软件直接生成，这是教材的主要内容，但同时在教材中也要引入动态网页制作的概念，扩展学生的知识面。实现动态网页需要综合运用网络、数据库、编程和软件工具，可以扩展学生的思维，培养解决问题、综合运用各种知识的能力。动态网页涉及站点的配置与管理,Web服务器的安装与配置，服务器端编程语言ASP、PHP、JSP等内容[4]，这些内容在网页设计初学阶段不必深入展开，因此笔者在教学中设计了一个功能简单的留言本，仅由3个文件构成：首页index.htm显示留言，insert.htm填写并提交留言，lyb.mdb数据库文件以二维表格的方式存储留言信息。通过该案例向学生直观地演示如何创建访问Access数据库的动态网页，通过填写并提交表单实现记录的插入，通过留言本首页实现记录的查询和显示。通过该交互式网页的实现从而激发学生以后深入学习动态网页编程的兴趣，明白网页设计与制作不仅是艺术设计的体现，也是编程技术、多媒体技术、网络技术等的综合应用。

2.3 层叠样式表CSS的教学设计

样式就是一组命名的格式，样式定义可以用代码编写，也可以借助样式生成器可视化生成，样式可以定义在当前网页，也可以导入外部样式表。笔者设计了大量具体的案例来启发学生用CSS完成各种网页特效，例如首行缩进、图片和文字滤镜、首字下沉、图像作列表的项目符号、字间距和行间距、边框效果、超链接未访问过、访问过、鼠标移入、按下激活4种特效、超链接去掉下划线、彩色滚动条、文字浮动效果、背景图像固定、用层+CSS实现对象的定位布局，以及在同一网站的不同网页之间通过CSS样式统一网页的风格，如相同的文字、背景图像、超链接、边框等格式设置，优点在于一是简化了不同网页重复的格式设置工作，二是将来只要更新了CSS样式，所有引用该样式的对象都会更新，便于网站的更新和维护。通过演示各种CSS实例，让学生在学习过程中领会CSS的作用，并能在网页制作中灵活、充分使用CSS，以达到利用CSS美化网页，统一网站内各个网页风格的教学目的[5]。

2.4 设计综合案例体现“任务驱动”教学方法

要教好网页设计这门课，必须要围绕一个完整的网站实例来讲解，才能达到良好的教学效果。首页的效果是网站的重点，因此以网站首页的设计为例，将图像、声音、动画等多个知识点和Fireworks、Flash不同软件的讲解融入首页中。教师先演示网页的多媒体效果，激发学生兴趣；然后演示首页的制作过程，并对所学到的知识点(新建站点和网页、图像查看器、Fireworks制作切片、Flash制作文字动画，HMTL语言、Flash文本、Flash按钮等)进行归纳和总结；最后给出图像和音乐素材，让学生举一反三自己设计一个网站首页，展示学生作品并评分，课后让学生通过课程网站学习和借鉴优秀网站的版面布局和制作方法，培养自主学习的能力。

3 教学方法

采用案例教学法和任务驱动法，并有效利用多媒体双向教学环境。

3.1 案例教学

讲课方式采用案例教学。结合课程内容,原创设计多个网站案例及每一章相应知识点的上机任务, 每个案例网站都综合了若干个知识点，将抽象的Web开发技术以形象生动的形式展现在学生面前。课堂上先演示案例网站, 引出问题, 然后在讲解知识点的同时实现案例网站的界面设计和功能。在讲解过程中注重基础知识的传授和基本技能的培养, 同时介绍网页制作中的相关规范和标准, 并且注意总结一些实用的技巧。这种教学方式目的明确、形式生动, 学生带着问题听课, 学习兴趣和效果明显提高。

3.2 任务驱动教学法

任务驱动法是采用项目化教学方式，即教师不是围绕知识点去设计每个单独的案例, 而是针对整个课程设计一个贯穿项目, 这个贯穿项目由若干模块组成, 并能够覆盖课程的所有理论知识。

本课程以一个学习任务(制作一个网站)作为教学主线自始至终贯穿课程, 整个学习活动的展开都围绕着这条主线进行。为此，我们原创设计了一个综合性的网站作品“昆明之光”, 尽量将所有章节的知识点涵盖进去,在教学过程中不断地运用“新任务”来引导学生学习，并按照模块化教学内容,层层深入学习, 在机房一边实际操作一边讲解涉及的新知识,以前学过的旧知识也在这一过程中得以巩固。

3.3 有效利用网络多媒体双向教学环境

鉴于课程本身操作性的内容很多,在机房采用边讲边练的方式，优越性是:(1) 学生人手一台机器, 远比教室的大屏幕投影清晰得多；(2) 这种教学环境实现了“教”与“学”的同步,学生可及时将学到的知识付诸实践, 在实践中检验知识和技能掌握情况, 出现问题可及时请教教师；(3) 学生在练习过程中, 可通过网络方便、快捷地下载大课讲稿、练习素材等学习资源, 提高学习效率。

3.4 设计配套的上机实验，加强实践能力

4 实施三位一体的考核方式

5 结束语

通过项目法，以设计学习任务(开发一个网站)为教学主线贯穿整个教学活动，再辅助课外网络教学系统，有效解决了“学习内容多、课时少”的突出矛盾。在教学过程中提出并践行了基于“在做中学”的教学理念，有效解决了学生缺乏创新能力，动手能力差、重理论、轻实践的困难局面，激发了学生的学习兴趣和成就感。在实际教学过程中针对不同的知识点进行了合理的教学案例设计，理论联系实际，取得了很好的教学效果。

学生从自己搜集素材、加工处理素材、到能够综合使用多种软件进行设计、开发网站，不仅培养和提高了学生的信息处理能力，而且极大地提高了学生学习的兴趣，学生在“做中学”，学习非常有成就感，而成就感进一步激发了学生内在的学习动力。通过设计、开发网站也培养了学生解决问题的能力与创新精神，而且在社会能力方面，锻炼了沟通交流的能力，以及团队协作和组织管理的能力，总的来说提高了学生的数字媒体设计与制作水平。

[1] 尹玉菡, 杨万军. 非计算机专业《网页设计制作》课程教学设计与实践[J]. 辽宁师专学报.2010,12(1):44-45.

[2] 戚爽. “Dreamweaver 网页制作”课程的教学研究[J]. 长春理工大学学报，2010,5(12):169-170.

[3] 汪迎春. 高职网页设计课程任务驱动教学设计与实践[J].计算机时代，2010(6):45-47.

[4] 丁海燕.《网页设计与制作》课程设计、特色与培养目标[J].云南大学学报，2009,31(1):223-226.

[5] 王秀丽，陈琼，宁正元.网页设计与制作[M].北京:清华大学出版社，2006.

[6]丁海燕.“网页设计与制作”教学实践与实验教学设计[J]. 云南大学学报，2012，34(2)：327-330.

Research on the Teaching Prachtice of Webpage Design and Preparation

DING Haiyan，YUAN Guowu, LIN Lin

(School of Information Science and Engineering, Yunnan University, Kunming 650091, China)

Webpage design is a strongly practical, innovative and comprehensive digital media design course. How to inspire students’ study interests and complete knowledge and technologies needed by this course in limited class hour has become a teaching question discussed commonly. According to the features of digital media technology application course, design of teaching contents and the teaching methods reform become the key to the success in teaching. According to the actual teaching objects of course Webpage design, this paper analyzed teaching content design in the aspect of image and animation, active webpage, cascading style sheet and comprehensive website case design, and discussed the teaching methods reform too. Practice proves that students’ ability of digital media design and practical ability in webpage design are improved greatly.

webpage design; teaching design; case teaching; digital media design

2014-04-03；修改日期: 2014-06-16

2013年度云南省质量工程教学改革研究资金资助项目(X3113008)；云南大学第五批中青年骨干教师培养计划'专项经费资助项目。

丁海燕(1974-), 女,硕士,副教授, 主要从事: 计算机应用、数据库。

G642.0

A

10.3969/j.issn.1672-4550.2015.02.055