网页设计与制作教学研究

前言：想要写出一篇引人入胜的文章？我们特意为您整理了网页设计与制作教学研究范文，希望能给你带来灵感和参考，敬请阅读。

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

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

1.1图像和动画的教学设计

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

1.2动态网页的教学设计

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

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

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

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

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

2教学方法

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

2.1案例教学

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

2.2任务驱动教学法

任务驱动法是采用项目化教学方式，即教师不是围绕知识点去设计每个单独的案例，而是针对整个课程设计一个贯穿项目，这个贯穿项目由若干模块组成，并能够覆盖课程的所有理论知识。本课程以一个学习任务(制作一个网站)作为教学主线自始至终贯穿课程，整个学习活动的展开都围绕着这条主线进行。为此，我们原创设计了一个综合性的网站作品“昆明之光”，尽量将所有章节的知识点涵盖进去，在教学过程中不断地运用“新任务”来引导学生学习，并按照模块化教学内容，层层深入学习，在机房一边实际操作一边讲解涉及的新知识，以前学过的旧知识也在这一过程中得以巩固。

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

鉴于课程本身操作性的内容很多，在机房采用边讲边练的方式，优越性是:

(1)学生人手一台机器，远比教室的大屏幕投影清晰得多;

(2)这种教学环境实现了“教”与“学”的同步，学生可及时将学到的知识付诸实践，在实践中检验知识和技能掌握情况，出现问题可及时请教教师;

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

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

为了使学生在很短时间内抓住学习的重点，掌握网页制作的方法和技能，原创设计了11个上机实验，知识点覆盖教学内容的80，期中和期末的实验有一定的综合性，而且对学生已掌握的知识和技能有所超越，能使学生产生兴趣，激发学生的求知欲，从而使学生主动学习。鼓励学生用团队协作的方法完成复杂程度较高的开发任务，锻炼学生的团队协作能力，为日后实际工作奠定基础。

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

为了使学生重视平时的课堂教学和上机练习，培养学生的动手和创新能力，激发学生内在的学习动力，本课程实施“上机作业+上机考试+网站开发”三位一体考核方式由平时上机作业成绩(20)、期中上机考试(20)和期末个人网站作品(60)，并给出作品的量化评价指标。

4结束语

通过项目法，以设计学习任务(开发一个网站)为教学主线贯穿整个教学活动，再辅助课外网络教学系统，有效解决了“学习内容多、课时少”的突出矛盾。在教学过程中提出并践行了基于“在做中学”的教学理念，有效解决了学生缺乏创新能力，动手能力差、重理论、轻实践的困难局面，激发了学生的学习兴趣和成就感。在实际教学过程中针对不同的知识点进行了合理的教学案例设计，理论联系实际，取得了很好的教学效果。学生从自己搜集素材、加工处理素材、到能够综合使用多种软件进行设计、开发网站，不仅培养和提高了学生的信息处理能力，而且极大地提高了学生学习的兴趣，学生在“做中学”，学习非常有成就感，而成就感进一步激发了学生内在的学习动力。通过设计、开发网站也培养了学生解决问题的能力与创新精神，而且在社会能力方面，锻炼了沟通交流的能力，以及团队协作和组织管理的能力，总的来说提高了学生的数字媒体设计与制作水平.

作者：丁海燕 袁国武 林玲 单位：云南大学