_网页设计与制作_教学实践与实验教学设计_丁海燕

云南大学学报（自然科学版），2012，34（S2）：327 330CN53－1045/N ISSN0258－7971 Journal of Yunnan University http：//www．yndxxb．ynu．edu．cn
“网页设计与制作”教学实践与实验教学设计
丁海燕
（云南大学信息学院，云南昆明650091）
摘要：“网页设计与制作”课程集知识和技能于一体，具有很强的创造性和实践性．本文根据课程自身的特点，并结合云南大学开设的“网页设计与制作”课程的教学实践，从教学内容设计与实验教学设计两方面阐述
了如何改进该课程的教学效果，实现了教与学的统一，从而培养学生的信息技术应用能力．
关键词：网页设计与制作；教学实践；教学设计
中图分类号：G642文献标识码：A文章编号：0258－7971（2012）S2－0327－04
随着信息化进程的推进，人们通过互联网的WWW服务获取信息，网页则是网络信息传递的载体，因此掌握网页设计与制作已成为信息时代必备的计算机应用技能．网页制作类课程随之也成为近几年国内高校普遍开设的课程，该课程涉及到平面设计、软件和编程等，内容丰富、实用性强，深受学生欢迎．该课程既要注重知识的传授，也要注重技能的培养，如何在有限的课时中使学生掌握网页设计的精髓，提高学生的实践和创新能力，是教师在教学中要解决的核心问题．本文结合在云南大学讲授“网页设计与制作”课程的教学经验，从教学内容设计和实验教学设计两方面来探讨这一问题．
1课程情况
网页设计与制作是计算机领域应用最广泛的技能之一，在云南大学教学体系中属于全校素质选修课的技能应用系列课程，教学目标是培养学生的网页设计与制作能力、信息获取和加工能力、自主学习和创新能力以及团队协作能力［1］．该课程集知识与技能于一体，要求学生既要学好理论知识，又要掌握网页制作的操作技能，还要具备一定的设计创新能力，以及独立收集信息、加工处理信息并解决实际问题的能力．
网页制作的知识体系非常庞杂，包括网络基础知识、网页制作技术、平面设计和动画制作等基本要素［1］．具体涉及到网页制作软件、图像处理软件、动画软件、数据库知识、脚本语言、ASP动态服务器编程技术等．教学内容比较多，知识点比较分散［2］，而周学时仅为2个学时，为解决该课程学习内容多、课时少这一突出的矛盾．在教学设计上以网站制作为学习任务，以任务驱动教学活动，针对每一章的知识点，精心设计教学案例和与之配套的实验内容，每次作业都是一个由若干页面构成的小型网站，学习内容由浅入深，循序渐进地完成网站的建设，并且在获取新知识的同时旧知识也得到了巩固和强化，体现了任务驱动法的教学本质．
2教学定位及教学设计
本课程性质是全校性公共计算机选修课，教学对象是全校各专业的非计算机专业的大一学生，因此教学内容定位于静态网页的制作，以Dream-weaver软件为主线，介绍静态网页设计和制作的基本技术．目前很多网页教材是基于网页三剑客的（即Dreamweaver、Firworks和Flash），然而在周学时少以及大一非计算机专业学生的条件下，根本做不到三四个软件都讲到位，事实上每个软件分开都可成为一门选修课，而网页设计课程只能以网页制作软件Dreamweaver为主，其他软件为辅，并且其
*收稿日期：2012－11－26
基金项目：2011年云南大学教学改革研究项目；高等学校“第三批特色专业建设点”资助项目（TS11135）．
作者简介：丁海燕（1974－），女，云南人，硕士，副教授，主要从事：计算机应用、数据库方面的研究．E－mail：teidhy@163．com．
他软件制作的作品要与网页密切相关．为了解决内容多、学时少的矛盾，有利于教学的开展和培养学生的动手能力，作者对课程的教学内容重新进行了合理的调整：没有单独去讲Fireworks和Flash这两个软件，而是围绕Dreamweaver软件讲解网页制作的方法和技巧，只有在制作图像缩略图、切片、按钮、LOGO图片等时候，才辅助其他软件加工素材或者制作动画．作者将Dreamweaver教学内容分为10个单元：网页基础知识、HTML语言基础、初识Dreamweaver、网页制作初步、网页布局和排版、行为、CSS及其应用、模板和库、表单和动态网页、综合实例．各个单元相对独立，便于实现课程模块动态组合，实施分层次教学［2］．教学内容设计的总体原则是：
2．1案例教学，从浅到深、从基本到综合，技术与理论相结合根据教学目的和教学内容选用典型案例，通过对案例的分析，讲授案例中所用的理论知识，融枯燥的理论学习于生动的例子中［3］．课程开始首先展示一些网站给学生，引入网页的基本概念和术语，引起学生的兴趣．然后介绍编写网页的基本语言HTML，通过Dreamweaver的拆分视图让学生同时看到网页的设计效果与网页的源程序，这样对照着很容易理解和记住常用的HTML标记符．HTML语言是进一步学习CSS和动态网页编程的基础，一些网页的特殊效果如背景音乐、滚动字幕、嵌入式框架等都需要通过HTML代码编写来实现．这也体现了技术与理论的结合．讲解网页制作时先讲文字、图像、超链接、列表、水平线等基本元素的使用方法，再讲如何将各种元素合理地放置在网页上，方便用户浏览并产生美观的界面，即网页的布局，这也是网页设计的难点和重点之一．然后利用CSS和行为美化网页和实现特效，最后用模板和库实现批量网页的制作和修改．
2．2以Dreamweaver网页制作软件为主，穿插图像和动画软件网页制作通常需要网页制作软件、图像处理软件和网页动画制作软件的配合使用，才能制作出风格独特，美观的网页，但学时有限，不可能面面俱到．为达到良好的教学效果，教学内容的设计以用Dreamweaver软件设计制作一个综合网站为主线，将各个知识点、操作步骤和技巧的讲解融入到各个章节和不同软件当中．以“够用、实用”为原则，有针对性的讲解Flash和Fireworks软件，Fireworks中只讲解与网页密切相关的图像处理，如LOGO图片、按钮、切片、滤镜和阴影、导航栏的制作等．Flash中只讲解动画基本制作方法和简单文字动画、逐帧动画，以突出教学重点．
2．3重视网页的样式和行为的高级应用网页设计入门容易，但要设计制作出技术与艺术性融合的网页却不是简单的事情，网页除了掌握HTML语言和工具软件之外，CSS（层叠样式表）技术和行为特效在网页设计中也是必不可少的，也是网页学习的难点．采用CSS技术，可以对页面的布局、字体、颜色、背景等实现更加精确的控制，使网页代码简练，不但实现了网页内容和格式的分离，还起到了统一网站不同页面风格的效果［4］．设计者需要掌握CSS设置页面元素特定的格式，美化页面，实现HTML标记本身无法实现的格式．另外CSS还可以与层配合实现网页的精确布局．而且CSS样式一旦更新，所有引用CSS的元素也自动更新，这样可大大提高网页制作的效率．行为本质上是当用户在对象上触发了某个事件时所执行的客户端的Javascript程序，通过使用Dreamweaver自带的多种行为，设计者无需编程就可以实现“打开浏览器窗口”、“转到URL”、“显示/隐藏层”、“交换图像”等多种网页特效［5］．
3实验教学设计
“网页设计与制作”是一门技术性和实践性很强、极富创造性的课程，必须并且只有经过实践，才能真正掌握知识和技能．实验教学能够帮助学生消化吸收课程内容，使学生迅速抓住学习的重点，并且通过实验教学的实施，一方面学生可以不断地获得成就感，从而更大地激发他们的求知欲望，另一方面促使学生掌握网页设计与制作的知识与技能，提高学生的信息技术应用水平，从而培养出独立探索、勇于开拓进取的自学能力［6］，因此，实验教学内容的设计对教学效果起着至关重要的作用．3．11+1教学模式我们以培养学生动手能力为目标来指导整个教改思路，为了使学生高效地掌握网页设计制作的知识与技能，采取在机房上课，这种教学环境实现了“教”与“学”的同步，第一节课教师演示，第二节课布置实验作业，要求学生当场完成并通过网络提交作业．机房授课的好处一是学生可及时将学到的知识应用于实践中，在实践中检验知识和技能掌握情况；二是学生上机出现问题时教师可及时指导学生；三是通过在机房安装的红
823云南大学学报（自然科学版）第34卷
蜘蛛等网络教室软件的教师机可以方便、快捷地发布讲稿、课件、上机素材等学习资源，提高教学效率．这种边讲边练的方式和案例教学法，锻炼了学生解决实际问题的能力、自主学习能力和协作学习能力［1］．
3．2因材施教，设计实验内容目前的网页教材通常只是给出每个知识点的简单案例，每一章提供的上机实验内容并不多，实验题目没有素材和说明，不方便学生使用．并且每个高校的学生层次不同，为了体现因材施教学的教学原则，教师应当根据各个学校的教学特点来设计实验内容，实验设计的原则是尽量多地覆盖教学大纲的知识点，每个实验给出基本要求和素材，实验内容既要有典型性、基础性、美观性，还要有扩展性和综合性．作者结合课程内容，精心设计了11个与教学内容配套的实验内容，期末考试则要求学生发挥创意，提交个人设计制作的一个网站作品．11个实验内容分别是：（1）通过一个综合网站案例体现站点的创建，文字、图像、超链接、动画、音频、视频等网页基本元素的用法．
（2）通过网站相册、图像查看器、透明Flash 作背景、导航条等案例，介绍各种网页制作技巧，拓展设计思路．
（3）利用表格嵌套或布局表格布局方法，实现并列的排版效果．并且在单元格内通过＜marquee ＞标记符实现水平或垂直滚动字幕．
（4）表格布局案例，如图1所示，通过该案例使学生了解表格布局的特点和实现步骤，该案例的制作体现了表格的创建、表格/行/列/单元格的属
性设置、细线表格制作技巧、超链接等诸多知识点
．
图1表格布局实例
Fig．1Example of table layout
（5）框架布局案例，通过该案例使学生了解框架布局的特点和实现功能，该案例的制作体现了框架网页的创建、保存、属性设置、设置超链接的目标窗口、嵌入式框架、设置贯穿网站的背景音乐等诸多知识点．
（6）层布局案例，通过该案例使学生了解层布局的特点和使用方法，该案例的制作体现了层的操作、属性设置、层布局的灵活性、层与行为相结合产生网页特效等诸多知识点．
（7）行为综合案例，通过该案例使学生了解行为的概念、要素和使用方法，该案例的制作体现了“打开浏览器窗口”、“转到URL”、“交换图像”、“设置文本”、“显示/隐藏层”、“弹出消息”、“检查表单”等诸多行为的合理应用．
（8）层叠样式表案例，通过为文字、图片、列表、段落、超链接等应用样式，使学生了解CSS的概念，选择器类型和Dreamweaver中的CSS样式定义的方法，该案例的制作体现了CSS的新建、编辑、套用、导出、导入等知识点．
（9）层叠样式表综合案例，通过导出和导入外部层叠样式表来统一网站不同网页的文字、背景图像、超链接特效、边框、段落缩进等格式．
（10）表单案例，通过该案例使学生了解表单的概念、常用表单元素、表单的设计方法以及表单的功能，结合用户登录、注册、注销、修改密码，以及留言本的制作（包括提交和显示留言功能）这一综合表单案例体现了利用Dreamweaver可视化地设计与制作动态网页，实现了对网络数据库表的查询、增加、删除、修改操作．引入了网络编程的概念，并为将来进一步深入学习动态网页编程技术打下基础．
（11）模板和库案例，使学生了解模板和库的概念、作用和用法，结合该案例的制作体现如何通过模板和库快速开发风格统一的批量网页．
图2为实验“模板与库”的最终效果，该实验主要知识点有设置表格布局、模板与库文件的创建，缩略图的制作、套用模板到页面，插入库项目和超链接等．这样在掌握新技能的同时，巩固了学过的知识，还锻炼了动手能力．
4小结
通过教师在课堂上实施案例教学法，为学生设计学习任务和实验内容，极大地激发了学生的学习兴趣和求知欲，从而使学生主动学习，提高了学习能力．通过鼓励学生用团队协作的方法完成网站开
923
第S2期丁海燕：“网页设计与制作”教学实践与实验教学设计
发任务，锻炼了学生的团队协作能力．通过该门课程，学生不仅掌握了网站制作技术，而且提高了信息应用水平和就业技能，在全校253门素质课中学生评为名列第3，取得了优良的教学效果．
图2模板与库实例
Fig．2Example of template and library 参考文献：
［1］安颖莲，李秀，姚瑞霞，等．“网页设计与制作”课程教学设计与实践［J］．中国教育信息化，2007（9）：53-
55．
［2］丁海燕．“网页设计与制作”课程优化与教学方法探索［J］．云南农业大学学报，2011，5（3）：73-76．
［3］张伟娜．“网页设计与制作”课程教学的探讨与实践［J］．中国教育信息化，2008，3：77-78．
［4］张瑞娟．浅谈网页制作中css样式的应用［J］．电脑知识与技术，2009，5（18）：4911-4912．
［5］丁海燕．Dreamweaver网页设计与制作案例教程［M］．北京：清华大学出版社，2012．
［6］殷兆燕，崔毓娟．“网页设计与制作”课程教学改革探索与实践［J］．常州信息职业技术学院学报，2009，8
（4）：64-66．
Teaching application and experiment teaching design of
webpage design and making
DING Hai-yan
（School of Information Science and Engineering，Yunnan University，Kunming650091，China）
Abstract：Webpage design and making course integrate knowledge with skill，it has strong creativity and practicality．According to the features of this course and teaching application of webpage design and making course offered in Yunnan university，this paper elaborated how to improve teaching effects from two aspects：teaching contents design and experiment teaching design in order to realize unification of teaching and study，and develop information technology application ability of students．
Key words：webpage design and making；teaching application；teaching design
033云南大学学报（自然科学版）第34卷。