第30卷（2010年）第9期第57－59页
教育理论与实践Theory and Practice of Education
Vol．30（2010）No．9P 57－P 59
高职院校《网页设计》课程教学设计
■都桂英
作者简介：都桂英（1974-）,女，青海西宁人，青海交通职业技术学院计算机系讲师，主要从事计算机应用研究。
摘要：高职院校《网页设计》课程是以Fireworks 、Flash 、Dreamweaver 软件为讲授内容，集理论性与实践性为
一体的课程。《网页设计》课程要从教学目标、课程内容、首次课内容、考核方式等方面进行科学设计，并运用以项目为载体、以任务为驱动的教学方法调动学生学习的积极性，充分发挥教师的主导作用和学生的主体作用。
关键词：高职院校；《网页设计》；教学设计
中图分类号：G712
文献标识码：A
文章编号：1004－633X(2010)09－0057－03
高职院校《网页设计》课程以Fireworks 、Flash 、Dreamweaver 软件为讲授对象，是集理论性与实践性为一体的学科，它重点介绍这三个软件结合使用制作静态网页的方法。该课程的安排是先学习《Photoshop 图形图像处理技术》
，后学习《网页设计（动态）》部分，这样，学生在学习了
《Photoshop 图形图像处理技术》后学习该门课程中的Fireworks 软件将更加得心应手，而且也能用Photoshop 软件进行网页中图形图像的制作与处理，同时，这门课程又是《网页设计（动态）》课程的基础课程。
一、高职院校《网页设计》课程的学习目标
高职院校《网页设计》课程旨在培养计算机静态（前台）网页制作人员，并为学生学习动态网页的制作打下基础。因此，高职院校《网页设计》课程应以行业需求确定专业培养目标，以职业能力为目标实施教学活动，以学生为中心组织教学过程，以灵活的教学方法和考核方法评价教学效果，并突出能力目标。
学习完本课程后，学生应掌握前台美工制作处理技术（网页背景、图片、线条、简单GIF 动画的制作），掌握广告动画和网页LOGO 的制作，掌握网页的编辑与处理技术，能够熟练制作网页所需的图形图像，制作和网页内容贴近的LOGO ，制作网页中显示的动画广告，制作并编辑网页。
二、高职院校《网页设计》课程教学设计的思路
高职院校《网页设计》课程的教学设计遵循6+2原则，“6”指的是：（1）职业活动导向；（2）突出能力目标；（3）项目任务载体；（4）用任务训练职业岗位能力；（5）以学生为主体；（6）知识理论实践一体化的课程设计。“2”指的
是：（1）某些课程教学内容（如德育、外语内容等）必须“渗透”到全院所有课程中去，而不能依赖集中上课的形式；（2）对于职业能力中的“核心能力”，如自学能力、与人交流能力、与人合作能力、解决问题能力、信息处理能力、创新能力、
数字应用能力、外语应用能力等，也必须要“渗透”
到所有课程中去，而不能仅依赖集中培训等方式。从以往《网页设计》课程的教学情况来看，学生在学习了这门课程后虽能掌握基本的理论知识，但在实际应用中，作品的使用性较差，一方面表现在网页色彩的使用上，另一方面则表现在网页的内容定位上。为此，教师在进行教学设计时，应以一个实际的项目为载体，将这一整体项目分解为若干小项目，以每一个小项目为一个学习任务，并贯穿在教学中。当每一个小项目完成后，一个知识点也就掌握了，就这样最终让学生学会运用这三个软件进行网页的制作。
在课程编排上，教师应首先给学生讲解《网页设计》课程的学习思路和需要完成的项目要求，接着让学生学习如何使用Dreamweaver 软件搭建所需的网页框架，网页框架搭建好后学习网页中所需基本元素的插入方法。教师应指导学生学习如何使用Fireworks 处理图形图像和如何使用Flash 制作动画。当掌握了这一部分知识后，学生就可以制作网页中所用的图形图像和动画，接下来再回到Dreamweaver 软件的学习中。这时再学习这三个软件的结合使用以完成网页的链接、美化，最终完成整个网页的制作。
课程实施时，教师应首先让学生观看与所需完成的项目相关的一些网页，让学生去感受这些网页的风格，接
着再介绍本次项目网页制作的要求，确定该主网页的基本框架、内容，子网页的框架、内容以及色彩要求，然后再让学生学习网页制作的具体内容。网页制作的具体内容主要包括三部分，第一部分是使用Dreamweaver软件搭建主页框架和插入网页元素的方法，这一知识点学习完成后，要求学生能够搭建出主网页和各子网页的框架，并留出网页元素的空间，接下来就可以学习能够实现效果的内容；第二部分是使用Fireworks软件制作网页背景、导航图片、线条、GIF动画等，这一部分学完后，网页色彩就有了，但网页整体看起来还不生动，这就要求学习第三部分的内容了；第三部分的内容是使用Flash软件制作网页中所需的动画，学习完这一部分后，每一个子网页就已经成形了，但各网页之间还没有相互链接，这时再回来学习使用Dreamweaver软件将各网页链接起来，形成完整的网页，并进行再次美化。
三、高职院校《网页设计》课程教学设计的内容
（一）教学目标的设计
教师可以将《网页设计》课程分为四个模块：运用Dreamweaver软件搭建网页、运用Fireworks软件处理网页中的图形图像、运用flash软件为网页制作LOGO及广告动画、三个软件的综合使用，并分别确定如下目标：
1.能力目标
这一目标主要有：能够组织和管理网页文件和文件夹；能进行网页布局；能够在网页中插入各种超链接将整个网站链接起来；能插入网页元素；能用Fireworks制作和处理网页中所需的图形图像；能用Fireworks设计制作网页中的主题文字；能用Fireworks制作网页中所需的线条及边框；能够制作网页动画；能够制作网站LOGO；能用Fireworks与Flash软件美化、修饰网页。
2.知识目标
这一目标主要有：掌握Dreamweaver的工作环境、菜单、工具栏的使用方法；掌握新建网站的方法、文档的保存方法；掌握网页的编辑技术；掌握网页超链接的插入和编辑技术；掌握表格、布局表格、单元格、框架、层的辅助定位工具操作；掌握文本、图片、动画、视频的插入、编辑、格式设置的方法；掌握利用Fireworks制作网页中所需图像的操作方法及图像格式转换技术；掌握利用Fireworks设计处理网页中的文字；掌握利用Fireworks制作网页中所需的线条及边框；掌握绘图工具绘制图形的方法；掌握基本动画的制作；掌握引导动画的制作；掌握遮罩动画的制作。
3.素质目标
这一目标主要有：培养学生的敬业精神、团队协作精神；自主学习能力；沟通能力、感悟能力；表达能力、知识应用能力；获取知识能力、自我发展能力、创新能力；责任感、效率观念。
（二）课程内容的设计
教师根据划分的模块可以将整个项目分为四个子项目，每个子项目又分为若干个子任务：搭建网页，处理网页中的图形图像，制作LOGO及广告动画，美化、修饰、合成网页。每个子项目对应的子任务如下：
1.搭建网页
组织和管理网页文件和文件夹；进行网页布局；超链接的制作和编辑；网页元素的插入和编辑。
2.处理网页中的图形图像
制作和处理网页中所需的图形图像；设计制作网页中的主题文字；制作网页中所需的线条及边框。
3.制作LOGO及广告动画
制作网页动画；制作网站LOGO。
4.美化、修饰、合成网页
网页美化、修饰；作品展示、评析。
（三）第一次课的设计
1.引入课程，说明课程安排，介绍授课目标和考核要求
（1）优秀网站展示
教师可展示一些国内外著名公司的网站、上一届学生的优秀网页以及与本次项目相关的网站，以引起学生学习的兴趣，然后再引入本门课程的学习内容。
（2）介绍本门课程的课程安排和学习目标
教师应让学生明白，本课程是计算机网络技术专业的核心技术课，Fireworks、Flash、Dreamweaver软件是网页制作常用的编辑软件，这三个软件在网页制作课程中具有重要的作用。《网页设计》课程是集理论性与实践性为一体的学科，重点介绍三个软件结合使用制作静态网页的方法。其中Fireworks是进行网页中图形图像、背景、线条、边框、导航图片及简单GIF动画制作的软件；Flash是进行网页中广告动画、LOGO制作的软件；Dreamweaver是进行网页框架搭建、页面布局、各种网页元素的组合、网页之间链接的软件。
（3）考核要求说明
本课程的考核分为三部分：一是平时的学习态度、考勤（30%）；二是每一子项目的完成情况（20%）；三是整体项目的完成情况（50%）。
2.根据学生以往对软件的掌握，让学生自行进行尝试性练习
这一步主要是让学生从浓厚的学习兴趣状态过渡
58教育理论与实践2010年
都桂英：高职院校《网页设计》课程教学设计
到对知识的渴求阶段，以利于新课的学习。学生在进行尝试性练习时会发现很多问题，如软件不能启动、无法理解工具等。面对这些问题，学生感觉无从下手，这时他们就会产生学习相关知识的欲望。
3.讲授新课
教师在总结学生的练习过程之后，引入新课，介绍Dreamweaver软件环境、窗口界面、工具的使用。
4.学生再次进行实践性练习
在这一步中，学生针对教师的讲解进行正确的练习，并在练习过程中穿插教师对本节课的总结。
（四）考核方式的设计
《网页设计》是一门计算机网络技术专业的必修课程。为适应该课程培养创新性专业人才的目标需要，在教学过程中，教师应重视理论与实践的结合，注重培养学生运用理论进行观察、分析和解决问题的能力。
为了能准确反映出课堂的教学效果，《网页设计》课程的考核将着重测试学生运用理论解决实际问题的能力。《网页设计》课程的学期总评成绩=平时的学习态度、考勤、理论作业（30%）+平时项目（子项目）的完成情况（20%）+整体项目的完成情况（50%）。
对于一个整体项目，应从以下几方面进行评价：页面结构设计、网页中导航的制作、网页中动画的制作、网页中图像的制作、子页面的制作、网页中的链接和整体效果。要求整体风格统一、完整完成主网页及二级页面的布局；要求布局合理、美观，文件夹组织有序、标准，文件命名正确、符合行业标准，按要求编辑网页元素和制作网页导航，导航清晰，有一定动画效果；能使用Flash软件完成标志性的动画、LOGO的制作，并符合网页的整体设计需
求；能使用Fireworks软件处理图像、图片、边框、线条，并符合网页布局要求，突出网页主题文字，子页面内容完整、链接有序、风格统一，页面干净清晰，颜色使用合理，内容完整。评分时，教师可以结合学生平时的操作情况以及作品展示时其他同学的评价给出一个综合分数。
总之，教无定法，重在得法。以项目为载体、以任务为驱动的教学方法对高职院校的学生来说是一种能调动其学习积极性的行之有效的方法，能充分发挥教师的主导作用和学生的主体作用。学生在进行项目设计时，操作更加灵活，能充分发挥自己的想象，展示自己的思路，从而更主动地参与到教学活动中来，促使学生为完成项目而进行多渠道的自主学习，以扩大学生的知识面，实现个性化、分层次和弹性教学，提高学生解决问题和综合应用知识的能力，培养学生的创新意识，让学生能在知识的学习和将来的工作岗位间实现零距离接触，为学生走向工作岗位奠定一定的基础。
参考文献：
〔1〕曾广雄.中文Dreamweaver网页制作实例教程〔M〕.北京：研究出版社，2008.206.
〔2〕周奇.新编网页设计与制作教程〔M〕.北京：研究出版社，2008.185.
〔3〕贾勤.网页设计三合一能力教程〔M〕.北京：中国铁道出版社，2006.54.
〔4〕姚琳.网页设计与制作三合一〔M〕.北京：中国铁道出版社，2008.180.
作者单位：青海交通职业技术学院计算机系，青海西宁邮编810028
第9期59 Teaching Design of Course“Web Design”in Vocational College
DU Gui-ying
（Computer Department of QingHai Communication Technical College）
Abstract:The course“Web Design”of vocational college is based on soft wares Fireworks,Flash and Dreamweaver which are used as the teaching contents,setting theory and practice in one.We should design“Web Design”course scientifically in teaching objectives,course content,the first lesson content,assessment methods,and apply the task-driven teaching method with the project as the carrier to mobilize the studying enthusiasm of students,to give full play to the leading role of teachers and the subject role of students.
Key words:vocational college;“Web Design”;teaching design