网页设计论文范例

一、教学内容的分析与改进

1、大多数教师的教学内容主要为以下几种类型：

（1）上课主要讲解Dreamweaver软件的使用，主要介绍如何使用这个工具进行网站的开发。

（2）介绍fireworks如何绘图，并将绘图的内容切片，将网页展现出来。

（3）将Dreamweaver、Flash和Fireworks分别教给学生。由于课时的原因，学生每种都会点，但没有一样能精通。

2、存在的不足：

经过与现从事网站建设相关工作的学生调研，我发现上面的任何一种教学内容，都无法在实践中得到充分的应用，原因如下：首先，从事网站设计的企业，一般都有专门的美工，负责网页界面的设计，他们的美术功底及设计能力远非计算机专业的学生能达到。其次，现在的网站基本采用DIV+CSS进行设计，原先采用表格设计网页的技术已处于淘汰阶段。而在目前的教学中，DIV+CSS在中职学校中根本没有开展教学。于是就出现了这样的现象：计算机专业的学生在网页设计的岗位上美工做不好，页面也不会设计，教学内容和实际需求的能力脱节。

1课程体系，精选教材

在一个合理的课程体系的基础之上，针对目前中职学生基础差，学习积极性不高的特点，选择一本好的教材，在一定程度上也影响了学生的学习兴趣和教学效果。在选择教材时，一定要坚持少理论，多应用实例的原则，如果条件允许，可以根据本校学生的实际情况编写校本教材。比如，可以编写一门《网页美工设计》的教材，内容分为Photoshop和Flash两大部分，在Photoshop部分主要学习如何应用该软件处理网页图像以及设计网页布局和对网页进行切片的技术，而在Flash部分主要是学习如何制作网页的动态元素。考虑到中职学生英语基础差，对程序代码的理解能力有限，在动态网页制作教材的选择中，要优先选择利用Dreamweaver软件的服务器行为实现动态技术的教材，尽可能减少对程序代码的过多讲述，以提高学生学习的兴趣和自信心。

2突出实践能力，部分内容实行协同教学

2.1设计学习任务，激发学生的学习兴趣

兴趣是最好的老师。在进行入门教学的时候，如何激发学生的学习兴趣，使得学生在主观上由“要我学”转变为“我要学”，是个关键问题。以讲授网页美工设计的内容为例，在开始几节课，要结合国内外的几个知名网站的整体结构进行分析，介绍知名网站在版面设计方面如何布局，在色彩搭配方面如何合理地统一网站的风格、网站Logo和Banner的设计理念，以及如何对网页图片进行处理才能更加吸引网民的眼球等，让学生意识到网页世界的丰富多彩，从而激发他们的学习兴趣。与此同时，在每个学习阶段结束的时候，都要求学生独立完成一个任务，从最基本的图片处理、Logo设计到整个网站结构的布局和色彩搭配，这样学生就会在自己心里形成一个风格，这也是学生学习好网页设计课程的基础和前提。

2.2举一反三，培养学生学习能动性

网页设计是一门专业技能，非常注重学生实际动手能力的培养。在实际教学中，教师要充分准备大量的具体案例，采用提问法、任务驱动教学法、讲练结合法等方法对学生进行教学。在开始教授一个新的内容时，要提出一个问题，让学生带着疑问去学习，这样才能有的放矢。教师可以先在教师机上演示操作一个具体案例，在演示的过程中，采用边讲边练的方式，让学生在“做中学”，然后布置一个与此案例类似的任务，让学生独立完成，在任务结束的时候，根据学生的完成质量情况，让做得比较好的学生在教师机演示自己的成果，谈谈自己在做的过程中的心得体会。这样，在课堂上，大部分的时间就交给了学生，让学生始终处于动手的状态。作为教师，在学生实施任务的过程中，不要过多干涉学生，而是多给学生以引导，让学生自己思考、设计、完善，让学生在实践中自我摸索，不断提高。通过这种方式，不仅起到了举一反三的教学效果，而且充分发挥了学生的学习能动性，使得学生学得扎实，记得牢固，也进一步提高学生的分析问题和解决问题的能力。

1网站色彩的合适性

作为视觉元素的重要组成部分，色彩的适合性在很大程度上决定着网站网页的质量和水平，尤其是正负网站是否可以通过色彩向传达信息。色彩定位过程中，应当与受自然属性、众定位以及情感属性等因素相适应，研究目标受众的习惯、价值观以及其内心的期望。政府网站即为民众服务网站，设计过程中应当注意配色合适，应当充分考虑民众背景以及他们的审美要求；其次，色彩应用控制在五种以内，在视觉上给广大观众营造一种简约、沉稳、以及舒适和和谐感觉；最后，搭配过程中，应当与网站基调相吻合，确保整体风格上的一致性和相互补充。

2合理应用多媒体技术营造视觉效果

在网站网页设计过程中，较之于传统的商业网站来说，政府网站一定不能盲目、随意地应用各种计算机多媒体技术设备。在此过程中，需要注意的是不能应用飘浮广告条、大量图片和动画，以免影响网站网页反应时间，延长访问等待时间。就视觉传达而言，主要是图片、动画两个方面。其中，图片应用在政府网站建设与设计过程中，其辅助作用非常明显。

在图片选择与设计时，应当紧密围绕主题，选择拥有独特性、排他性图片，根据需求对尺寸进行设计，并对图片在网站页面中的位置进行明确，最大限度的使其凸显出鲜明的特色；同时，每一个单独图片，应当严格控制在40KB大小范围内，整个网站的页面不大于200KB。就动画来说，实际设计过程中常用的是flash，其主要的应用效果是炫酷；对于政府网站而言，不能一味地追求炫酷，为能够准确地突出主题，在flash应用过程在，需动、静结合，表现出一定的节奏感强，以免造成视觉疲劳感。同时，版面应严格控制，防止喧宾夺主，影响网杂网站信息的呈现和访问速度。

3借鉴国外优秀设计方案

在设计政府网站、政府业务系统的页面或开通动画时，设计初期应根据网站所属单位的工作性质、特点进行设计，而不是怎么好看怎么设计，所以在视觉和触觉上给人的感觉就是符合这个单位的风格。同时，还应当有所创新，学习国外的优秀政府网站、系统设计理念，在视觉、触觉上展现更好的效果，给人带来深刻的印象。传统理念下，很多政府网站非常的乏味、无聊。如今，为更好的贴近民众、深入民心，政府网站上投入更多心思以吸引更多用户浏览。

一、网页色彩设计要符合受众心理习惯

人对色彩的心理想像往往支配自己的购买行为。咖啡、巧克力的包装纸必须使用咖啡色或红色。来自美国的调查报告证实，以紫色，蓝色、咖啡色包装纸包装咖啡、巧克力、牛奶，大部分消费者深感不快，致使销售量锐减。在日本，为使蜜桔、苹果、西瓜等水果显示本身的固有色、而迎合消费者心理，不少水果店不得不借助染色剂。消费者重视固有色，设计色彩时不能忽视这一因素。近年来，为了保护人身健康，虽已停止使用在安全上有问题的色素，但是，以木纹三合板作为桌面的铁桌子比比皆是，可见，人们对固有色的推崇是根深蒂固的。尊重消费者的心理习惯，要科学、合理地安排网页色彩设计。

二、网页色彩设计要遵循受众视知觉特征

色彩的位置与方向在页面构图中是很重要。蓝色在视域的顶部、底部、左侧或右侧，其作用各不相同。底部的蓝色是重的，高部的蓝色是轻的。顶部的深红色表现为沉重紧急的重量，在底部却表现为稳定的事实。黄色在顶部时产生一种毫无重量的效果，在底部时其效果就像受控制的浮力。色彩分布的平衡是页面构图的最重要的目的之一。正如天秤的秤杆为支撑平衡而需要支点一样，在一个页面里平衡的垂直轴线也是必需的。色域的重量在轴线的两边起作用。在寻求决定一幅画中的“左侧”和“右侧”的价值时，我们首先会想到人类的身体。左侧通常比较被动，右侧意味着活力。右侧倾向于向前和向上，而左侧则后退和下坠。许多绘画作品都是从画左下侧的重点开始的，然后向右上方运动。在进行网页色彩设计时设计师要充分考虑色彩给受众的视知觉感受，除了色彩的相对位置外，色彩量的比例、它们的纯度和明度也是重要的。

三、网页色彩设计的原则和方法

⑴网页色彩设计的原则：

在进行网页设计色彩选择时，要遵循网站自身的特点并掌握一定的配色规律，进而设计出优秀精美的页面。

一、课程的教学现状

在我国，视觉传达教育起步较晚，但是发展迅速，其人才培养和教育模式倍受社会关注。目前很多高校在艺术类网页设计课程的教学上存在两种主要现象：一是重设计、轻制作；二是重软件、轻艺术。第一种培养出的学生一般只注重静态页面的视觉效果，对网站的动态更新关注较少，不利于网页后期维护；第二种培养出的学生侧重于Dreamweaver、Flash等软件的操作，对网页的版式、VI形象等关注较少，制作出的网页往往缺乏个性、艺术表现力不强。因此，对视觉传达专业的网页设计课程的教学改革势在必行。

二、课程教学目标的重新确定

我们都知道，一门学科的课程目标通常决定了该学科的最终导向，它不仅能为教师传授正确的学科理念提供依据，同时也给学生指明正确的课程学习方向。因此，视觉传达专业网页设计课程改革的首要环节就是对该课程教学目标的重新确立。众所周知，高等教育培养出来的人才最终要服务于社会，社会的需求决定了该学科的教学内容和教学目标。随着科技的进步，时代的发展，不同时期对网页设计人员的需求也是不同的。通过市场调研，我发现目前社会上网站分工越来越细，招聘的相关岗位大体分为三类：第一类为前台美工，以视觉传达专业为主，以网站的形象塑造和界面美化为岗位内容；第二类为网站后台服务，多以h7V5数据库等做交互型网站的，以计算机专业为主；第三类就是两者都要具备的全才网页设计师，是具有技术背景和多年实战经验的创意人才。由此我们可以确定视觉传达专业培养出来的网页设计人才的岗位定位应是网页美工师，他应该具有两种专业素质：一是掌握网页设计的基本要素和美学知识相结合的方法与技巧；二是懂得简单机算计软件（PS、Dreamweaver、Flash）的操作，便于在制作网页界面时考虑到后台维护的便利。而“艺术设计教育的人才培养目标是：培养综合素质高、创造能力强的高级应用型设计人才”。所以该课程教学目标应该是培养具有以上两种专业综合素质的、创造能力强的高级网络应用型设计人才。新的培养目标确定后，该课程的教学内容应该在此基础上重新调整。

三、课程内容的调整

视觉传达专业网页设计课程教学内容应该为教学目标服务，知识结构要合理，应注意知识点之间的交叉及有机结合，同时也要有效地培养学生的创新性思维及独立分析、解决问题的能力。基于此，新的教学内容调整为两大板块：理论课程内容和实践课程内容。

1.理论课程内容

1案例驱动的应用现状

目前，案例驱动教学在高等教育各学科中广泛使用．但由于很多教师对案例驱动教学法的内涵、特点及组织过程的认识不透彻，导致案例教学法的使用存在许多误区．

(1)案例设计不当．

案例驱动教学本质上应是通过“案例”来诱发、加强和维持学生的成就动机，成就动机是学生学习和完成任务的真正动力．因此，案例驱动教学法的案例设计是教学成败的关键因素．案例过于简单、欠缺针对性、设计不清晰等都会影响案例教学的教学目标．一个具体的案例设计，必须考虑周全，保证案例的可行性和有效性．进行案例设计时，要以学生为中心，教师为主导，兴趣为主线，使学生在完成任务的过程中掌握知识、技能、方法并学以致用．

(2)组织实施过程并非案例教学．

案例教学是师生的双向活动，通过具体案例引导学生参与分析、讨论，让学生在具体的案例情景中积极思考，主动探索．在实际教学过程中，有些教师只是把案例呈现给学生，像讲故事一样叙述一遍，没有引导，没有总结，缺乏交流与互动;有些教师在课堂上引用了案例，但教学方式还是沿用传统的灌输式的教学，仍然以教师为主体．以上种种教学方式看上去是引用了案例，但并非采用了案例教学法，更谈不上通过案例驱动去激发学生的学习兴趣，培养学生分析问题解决问题的能力，提高学生自主学习及与他人协作的能力．上述种种对案例驱动教学法的不恰当使用，将直接影响学生学习的深入和教学目标的达成．本文结合“案例驱动在网页设计类课程中的应用”的教改课题，对案例驱动在实际教学工作中的应用进行了探讨和反思．

2案例驱动的教学实践

1常见处理技术

网页中的图像，按照存储格式不同可以分为矢量图和位图，按照使用用途的不同，大致可以分为地址栏图像，网站Logo，网页内容图像等。地址栏图像类似一个图标，显示在地址栏网址前边，一般经过精心设计，能够传递公司专业与精细的形象。内容图像是指嵌在网页中或者作为网页背景的图像。伴随网络技术和软件技术的进步，用于图像处理设计的软件有了很大的发展。网页三剑客中的Dreamweaver在进行网页设计的同时，可以对一些图片进行简单的变化处理，fireworks能满足对网页图片处理的大部分功能要求。对于一些有特殊要求的图像，可以使用Adobe公司的Photoshop软件进行处理；在进行Logo等设计时，一般使用CorelDraw或Illustrator等软件来完成。在进行图像的设计、选择和处理中，掌握专业软件的基本使用技巧是必需的，图像在网页设计中的功能主要可以分为视觉吸引、信息引导两方面。要达到这样的目的，需要对图像进行合理的处理。使用动画图片，以及适当的色彩对比，形成版式的变化，吸引浏览者的注意，引导其对网站内容的阅读。根据公司对网站的功能定位，其所承载的任务与指向有所不同，对浏览者所作设定亦有差异。比如腾讯公司的腾讯网（qq.com）和腾讯（tecent.com），一个作为门户内容网站，一个作为公司形象网站是两个独立的网站，设计风格，内容和要求差异很大。

2新技术

网络作为第四媒体，其显示终端可能是计算机，平板，电视或智能手机，为了页面兼容等原因，前端设计出现了很多新技术，如div+css技术，Javascript技术等，为了方便管理，一般采用对象的结构、表现和行为分开。结构是对象的内容，表现是其外观，而行为是与浏览者的交互，或者说是浏览者进行鼠标点击或输入内容等操作时，页面的反应。在进行网页设计过程中，图像对象也是如此，利用代码可以对图像进行一些效果的处理，起到资源占用少，页面维护容易等目的，还可以达到一些用基本图像处理技术不易实现的效果。用div+css结合Javascript技术可以实现在网页前端一些设计效果和逻辑处理功能，比如图像轮播和验证码校验功能。在一个存在后台管理的网站中，网页的很多内容来自于后台数据库，一些图片也不例外，内容需要和后台交互，根据数据库的内容和页面的特定逻辑，决定图像的外观。这是基本图像处理技术无法实现的，需要设计者了解动态页面设计技术，常见的技术有asp.net，php和jsp技术等。

3结论

传统网页设计技术一般分为前台和后台技术，前台主要负责页面的版式和效果设计，在设计过程中，需要对图像处理有较好的理解，随着技术的进步和观念的变化，一般认为，网站的功能是第一位的，在此基础上，需要有良好的显示效果。技术是手段，是媒介，不能一味追求技术的先进与绚丽，设计要同公司网站的定位紧密相关，综合运用多种技术实现。网站的视觉吸引、信息引导两方面的功能并没有变，但是如何达到这一目的，是设计者关注并努力的方向。在功能完成的基础上，使浏览者获得良好的体验，简洁明快的设计往往会给用户留下较深的印象。页面图像设计者要对相关技术有较好的理解，页面前台效果不是孤立的，任务进行过程中，美工需要和后台设计人员进行沟通，反复修改，共同完成设计。

作者：智立甫 王春写 单位：石家庄职业技术学院电气与电子工程系 石家庄市市容环卫服务中心

1传统教学存在的问题

1．1知识点孤立，教学效果较差

传统的网页设计课程是按照教材的内容，讲解HTML语言和DreamWeaver工具的使用。学生往往不能将所学知识联系起来。学期结束后，学生对整个网站的构建缺乏清晰的概念，提交的作品质量较差。在对学生进行期中课程质量问卷调查中，80％的学生都认为课程所学内容可以理解，但是当教师要求学生动手完成网站时，90％的学生都不能很好完成。这正是因为在传统教学中一般采用讲授法和实验法，一周2学时的理论讲解，2学时的实验课。教师按照教材章节进行教学并布置实验内容，这样就造成了学生只对单一章节知识的理解，难以将所学内容联系在一起。

1．2教材过时，影响教学效果

网页设计课程是一门应用极强的课程，技术和工具的更新换代较快。而与之矛盾的却是教材的出版周期较长，往往跟不上技术发展的脚步。例如，当前，DreamweaverCS6已经成为主流网页设计的软件，但是一些教材还停留在讲解Dreamweav－erCS3上，导致学生的兴趣不高，不利于学生创造能力的培养，违背了教学目标的要求。同时，按照教材的内容讲解也限制了教师的教学，目前高校中使用的网页设计教材分为两种，一种是基于理论性质的，单纯讲解HTML，一种是介绍Dreamweaver网页开发的。前一种不适合非计算机专业学生学习，内容比较枯燥，学生在没有计算机程序语言的基础上很难理解。一般高校对非计算机专业学生都选择使用第二种介绍Dreamweaver的教材，而该教材则会造成学生的开发水平较低，过度依赖工具，无法解决实际问题。

1．3教学方法单一，学生学习兴趣不高

对于公共课来说，学习兴趣是学生是否能学好课程的重要因素。对于计算机应用能力较差的非计算机专业学生来说，在学习网页设计这门课程时，如何提高学生的兴趣至关重要。传统的网页设计课程的教学采用2学时理论和2学时实验课的形式进行，学生缺少动手的机会，往往使学生对课程缺乏兴趣，这阻碍了学生的能动性与创造性的发挥。对学生进行调查问卷中，70％的学生都提出课程设置实验时间较少，应将课程都安排在实验室等问题，还有一些学生认为网页设计课程应以提高学生兴趣为出发点。这些都说明了学生对于增加自己实践机会的渴望。