《网页设计与制作》课程优化与教学方法探索

丁海燕，袁国武，张春红，白孟尧，邱 莎

(1.云南大学 信息学院，云南 昆明 650091；2.云南师范大学 文理学院 信息工程学院，云南 昆明 650222；3.昆明学院 计算机系，云南 昆明 650031)

随着Internet的迅速发展与普及，人们通过浏览网页可方便地获取信息，并且越来越多的个人、公司、企业、政府和学校建立了自己的网站。一个完整的网站并不是由一个单独的软件制作而成的，它需要多方面的配合，包括：网络知识、网页制作技术、网页布局、网页配色，以及相关的网页制作软件、图形图像处理软件、动画软件、数据库编程等。因此在教学实践方面需要多学科地综合，需要在理论教学和实践教学模式与方法上进行探索。

“网页制作”课程通常作为计算机公共选修课程，或者数字媒体专业的选修课程，在教学中主要存在以下三方面的问题：一是学生对网页技术的综合应用能力不强，不能合理应用各个章节的知识点，达不到融会贯通的效果；二是由于涉及的软件和计算机知识多，学生缺乏网页布局、色彩美学、动画制作、图像处理、美工设计等知识，导致制作的网页布局和版面不佳，缺乏设计美感。三是创造性不高，多是简单内容的堆砌，技术含量不高。作为计算机公共选修课，周学时仅2节，因此，在学时较少的情况下，如何让学生高效掌握网页制作的知识和技能，是教学改革的目标。以下从教学内容、教学方法和层次化教学模式三方面阐述如何提高学生的兴趣和实践技能。

一、优化网页设计的理论教学内容

由于网页设计涉及到网页制作软件、图像处理软件、动画软件、数据库知识、脚本语言、ASP动态服务器编程技术等,因此,内容比较杂,知识点比较分散,目前的教材通常根据网页三剑客这三款软件的使用,将内容分为三个大部分,一是“所见即所得”的可视化网站开发工具DreamweaverMX,二是处理网页图片的图像软件Fireworks，三是制作网页动画的软件Flash。但是如果按部就班地按照这三部分来讲解，学时远远不够，Fireworks和Flash软件只好蜻蜓点水、一带而过，这样一来学生的综合能力无法提高。因此，为了有利于教学的开展和培养学生分析、解决问题的能力，我们应当本着“从浅到深、从基本到综合，技术与理论相结合”的原则，对教学内容重新进行合理地整合和模块的划分。可以将《网页设计》课程的理论教学内容划分为以下九个知识单元, 各个单元相对独立，便于实现课程模块动态组合，实施分层次教学。

单元一:介绍网页设计基础知识。介绍网络基本术语，网页浏览原理，网页制作语言，网站开发的原则、网页制作软件等知识。

单元二：网页设计语言HTML。主要介绍HTML页面基本结构，以及常用的标记符，如文本修饰、超链接、图像、表格、框架、层、层叠样式表CSS的标记符及属性等。

单元三:在Dreamverver中创建站点。网页设计的第一步就是创建站点。所谓站点是Dreamweaver提供的一种组织所有和Web有关文档的方法。在制作站点时对网站的整体架构要有一个明确的把握，即首先要进行网站规划工作。即将所有的网页文件、图片、声音、视频等资源分门别类地放在各自的文件夹中[1]。

单元四:输入和编辑页面元素。页面元素包括文本、图像、超级链接、表格、框架、图层、音乐、动画、视频、网站的标志性图标Logo、导航栏等。要求学生以各种各样的页面元素的形式将网站内容展现在网页中,用Photoshop等图像软件设计出网站独特的Logo图标。

单元五: 设计网页布局。所谓网页布局，是指将网页中的所有元素进行定位，即将各种不同的页面元素有机地组织在网页中,网页的外观风格便决定了网页设计的好坏。网页的具体布局与网页内容、网页风格、网页大小等因素有关，可以采用表格或布局表格布局、框架布局、图层布局、DIV+CSS布局种等多种手段来布局网页元素[1]。

单元六: 利用样式表美化网页。层叠样式表CSS是网页元素外观属性的集合，它可以定义文字、表格、图像、表单等网页元素的属性。CSS样式可以控制许多仅使用HTML无法控制的属性，教学的重点是通过对CSS规则的定义和套用来统一整个网站的风格。CSS最大的好处是更新CSS样式时，使用该样式的所有文档的格式都会自动更新，极大地提高了格式化网页的效率[1]。

单元七: 制作网页特效。利用行为，实现鼠标经过图像、显示隐藏层、弹出窗口等特效，利用JavaScript语言编写脚本程序实现图片倒影、雪花飞舞、弹跳文字等特效,利用标记实现滚动幕等。

单元八:服务器端编程及其它相关知识。通过表单从客户端收集信息到服务器端，从静态网页扩展到动态网页，利用ASP技术访问网络数据库，实现实时、动态、交互的页面效果；通过库项目和模板复用页面资源等。

单元九：动画制作和网页图像处理软件。重点介绍动画制作基本方法，以及Fireworks中与网页密切相关的图像处理，如LOGO图标、按钮的制作，切片的生成、滤镜和阴影、光晕特效等，导航栏的制作等[1]。

总之,这几个单元是对教学内容的提炼和升华，它们覆盖了网页设计与制作的基本技术与理论。而且从简单到复杂，由局部到整体，符合学生的认知规律，这些模块相互独立，在应用上可以交叉，形成多层次、立体化的教学体系。

二、任务驱动法的应用

《网页设计》是一门技术性和实践性很强、极富创造性的课程,必须并且只有经过实践,才能真正掌握知识和技能[2]。在传统的教学过程中,知识点分散,有的案例仅仅说明个别知识点,学生只见树木不见森林,无法将各种网站制作方法和技术融会贯通。因此在网页设计教学中,特别适合采用任务驱动法进行教学。任务驱动教学法就是让学生在一个典型的任务驱动下展开教学活动,从网页设计实际工作过程出发,抓住重点和难点问题进行任务设计[3]。这就对教师的业务水平提出了更高要求，教师不仅要转变教学观念, 而且对课程需要有很深的理解。教师通过精心设计一个综合案例,尽量将所有章节的知识点涵盖进去, 在教学过程中不断地运用“新任务”来引导学生学习，并按照上面所述的模块化教学内容,层层深入学习, 教师边实际操作边讲解涉及到的新知识,以前学过的旧知识也在这一过程中得以巩固。通过综合性案例的学习,学生能够轻松掌握网页制作方法并能够创作形式生动的网站。

任务驱动法不同于简单的案例教学,它是采用项目化教学方式，即教师不是围绕知识点去设计每个单独的案例, 而是针对整个课程设计一个贯穿项目, 这个贯穿项目由若干模块组成, 并能够覆盖课程的所有理论知识[4]。任务驱动法符合循序渐进的原则,由简单到复杂,由表及里。另处在完成任务的过程中,向学生传授了分析和解决问题的方法,在创作过程中,成就感激发了求知欲,从而培养出独立探索、勇于创新的能力。例如，设计一个综合的风景网站，讲解单元三时建一风景站点，讲解单元四时制作一两个风景网页，其中用到文本、超链接、背景音乐、图像、热点等基本网页元素，讲解单元五时用表格布局、框架布局、图层布局来制作页面。讲解单元六时新建若干样式表，统一该风景网站各页面的显示风格，如统一的背景图、字体、字号、边框等。讲解单元七时给页面上的对象加上一些特效，如滚动字幕、图片翻转、图层与行为特效等。讲解单元八时制作一个留言簿，制作表单供用户填写和选择信息，提交时通过ASP的ADO组件连接数据库，执行查询、插入、删除、更新操作，实现浏览者与服务器端的交互。讲解单元九时，利用Flash为首页制作几个文字或图片动画，用Fireworks制作导向栏和按钮，用切片分割图片制作出整体感强烈、浑然一体的版面效果。通过为网站不断添砖加瓦的方式，提出新任务，引导学生思考新问题，这样学生围绕着如何解决任务去掌握各个知识要点,并可以举一反三,灵活应用所学知识[2]。

三、层次化教学体系

网页设计不同于抽象的理论学习，教学目的是学生动手和创新能力的培养。网页本身就是一个绘声绘色的多媒体综合产物，兴趣是最好的老师，因此,要采用直观式教学，充分发挥多媒体计算机处理文字、图像、声音、动画、视频、音乐等多种信息的功能,让学生在一种愉悦的学习氛围和教学环境中,从而激发起学生的学习兴趣和求知欲[2]。另外教师可以通过展示一些经典的、美观的网站和学生的优秀设计作品,引导学生根据个人的兴趣爱好设计网页,激发学生创作的热情，培养学生的动手能力，一个学期总的来说，教学过程包括4个层次：

(1)课堂讲解示范。通过综合案例将网页制作的知识点和操作方法融入其中，以任务驱动法进行讲解示范[5]。

(2)课后作业。模仿课堂上讲解的方法，举一反三，发挥创意，上机实践，做出比课堂实例更丰富的网页。

(3)期中考试。在进行期中考试时，为考查学生知识点掌握情况，可以采用随堂考试的方式，以Word文档给出一个小型综合网站的首页及主要页面的截图效果，并提供部分图片、动画和音乐素材，该网站涉及所学的文本、日期、图像、超链接、动画、音乐、表格、框架等知识点，注意只给出大致要求即可，不要太细，如制作一个左右框架，点击左边的超链接在右边打开目标页面等，让学生按照指定要求自己设计页面布局结构、网页具体内容、色彩搭配、导航条、网页多媒体效果等[5]。

(4)期末作品。根据整个学期所学网页设计技术，结合自身兴趣爱好确定一个主题，独立完成制作一个不少于5个页面的网站作为作品，要求合理运用文本、图像、多媒体、布局合理美观、有生动的网页特效，内容丰富，有一定的交互性和独创性，根据平时占30%,作品占70%计算总评成绩，还可以采用答辩的方式让学生展示自己的综合作品，相互交流学习心得，促使学生产生学习成就感和竞争意识。

《网页设计与制作》课程的教学目标是培养学生的创新思维能力和思维方法,使学生的动手能力、分析和解决问题的能力、获取新知识的能力、团结协作的能力得以提高[6]。根据网页设计创新性、实践性强等特点，通过优化教学内容、采用任务驱动教学方法和层次化教学体系等几个方面的改革和尝试，学生既掌握了网页设计与制作的知识和技能，而且培养了学生动手解决问题和创新的能力。实践证明，任务式教学方法极大地激发了学生的学习热情，教学效果显著改善，教师的学科水平也得到了提高,促进了该门课程的规范化和系统化，符合专业培养目标和社会对数字媒体专业人才的需求。

[参考文献]

[1]王秀丽. 网页设计与制作[M].北京：清华大学出版社，2006.

[2] 蒋秀玲,邹淑英,陈文东.“任务驱动”教学法在Dreamweaver教学中的运用[J].通化师范学院学报，2009,30(10): 88-89.

[3] 殷兆燕，崔毓娟.《网页设计与制作》课程教学改革探索与实践[J]. 常州信息职业技术学院学报，2009, 8(4): 64-66.

[4] 陈义文.《网页设计》项目化教学的实践与思考[J]. 安顺学院学报，2009,11(4): 94-96.

[5] 谢晓能.“层次化”任务驱动教学模式提升高职学生网页制作能力的实践[J].南京广播电视大学学报，2009(3): 65-67.

[6]王晓红,周立.《网页设计与制作》课程教学改革[J].北京联合大学学报：自然科学版 ，2006, 20(4): 90-92.

杂志排行

1. 1《合作经济与科技》2024年13期

2. 2《婚育与健康》2024年10期

3. 3《思维与智慧·上半月》2024年7期

4. 4《陶瓷科学与艺术》2023年11期

5. 5《中国商人》2024年7期

6. 6《教师博览》2024年4期

7. 7《师道·教研》2024年6期

8. 8《中国对外贸易》2024年6期

9. 9《伴侣》2024年6期

10. 10《经济技术协作信息》2024年6期

关于参考网