时间：2023-08-03 17:28:37
开篇：写作不仅是一种记录，更是一种创造，它让我们能够捕捉那些稍纵即逝的灵感，将它们永久地定格在纸上。下面是小编精心整理的12篇网页设计的技巧，希望这些内容能成为您创作过程中的良师益友，陪伴您不断探索和进步。
关键词：Dreamweaver；网页；菜单；行为
中图分类号：TP393.092
Dreamweaver是一款专门用于网页设计与制作的软件，无论是作为Dreamweaver的初学者，还是专业的网页设计师，在进行网页设计时，经常需要创建菜单。网页菜单可以通过编写Javascript程序实现，但需要掌握复杂的编程语言，这对初学者掌握菜单设计会造成一定的困难。要想设计出效果满意且操作不复杂的网页菜单，利用Dreamweaver中的行为等属性，可以制作出从“导航条菜单”到“下拉菜单”等各种与众不同的特殊菜单。
1 导航条菜单
导航（Navigation）原意为“航行、航海”的意思，导航条（Navigation Bar）指的是可以为网络起到导航作用的条形菜单栏。导航条菜单可以是图像，也可以是文本。在Dreamweaver中与轮换图像一起使用的菜单称为“导航条”，通常的轮换图像菜单都是光标移动到菜单上方时菜单的图像发生变换，而光标离开菜单上方时，再返回到原来的图像。
导航条可以分为水平导航条和垂直导航条两种，以创建垂直导航条菜单为例，先在Common面板中单击Image菜单旁的小三角，从弹出菜单中选择Navigation Bar按钮，输入菜单名称，指定打开文档时显示的原图像；单击Up image文本框右侧的按钮，在Select image source对话框中选择轮换图像文件地址。接着单击Add item按钮可以添加多个导航条菜单项，单击按钮。最后观察插入在文档中的导航条菜单，可以看到自动生成了表格，并在各个单元格上分别插入了Up image和Over image。最后按F12键运行浏览器后，将光标移动到菜单上方，菜单变换为轮换图像了。
2 跳转菜单
网页文件中菜单只是在需要时使用，因此最好在尽量缩小菜单显示空间的同时，为内容分割出更多的空间，当网页内某一个主题连接了多个文档，但只选择其中一项来连接相关文档的时候，通常会使用到跳转菜单。
2.1 插入跳转菜单
以制作电子期刊的跳转菜单为例，在跳转菜单中选择想要查的过去期刊的月份，就可以链接到该月的相关内容上。首先显示Forms面板，单击Insert面板的子面板按钮，在弹出的菜单中选择Forms命令，出现Form面板后，单击Jump Menu按钮。接着为文档中插入跳转菜单，在出现的对话框内将跳转按钮的标题使用为第1个项目，在Text文本框中输入提示文字“请选择期刊月份--”；单击Add item按钮，创建第2个项目，在Text文本框中输入文字“2014年10月刊”，go to URL文本框中输入正确的链接地址。最后在Initially selected列表框中选择跳转菜单的标题作为跳转菜单的基本项目，按下键，在打开浏览器上进行确认。
初次接触跳转菜单时，会显示基本项目，而单击跳转菜单后，就可以在弹出来的列表中再选择所需的期刊月份，选择其中的一个项目，就会连接到所选期刊月份的网页中。
2.2 修改跳转菜单的背景色
在网页上使用了背景颜色或背景图像时，利用样式表，就可以给跳转菜单加入背景色，可以提高整体统一性。首先在CSS面板中单击CSS Styles标签打开CSS Styles面板，单击“创新新样式”按钮，在Type选项组中选择Class（can apply to any tag）单选按钮创建类样式，然后在Name文本框中输入jumpbg，再在Define in选项且中选择This document only单选按钮；在Category列表框中单击Background选项面板中的“背景色”按钮，在弹出的颜色选择器上选择所需的颜色；单击选中文档窗口中的跳转菜单后，在属性面板的Class下拉列表中选择jumpbg，就可以以跳转菜单上应用背景色。
3 创建弹出后消失的菜单
利用图层创建子菜单后，再指定图层的Visibility，应用Show-Hide Layers行为，可以制作光标移动到主菜单上方时显示子菜单，而光标离开主菜单上方时，又自动隐藏子菜单的特殊菜单效果。
首先在Behaviors面板中单击Add behavior按钮 ，在弹出的行为菜单上选择Show-Hide Layers行为，在Named layer列表框中选择layer “sub1”，单击按钮；选择layer“sub2”，单击按钮；onMouse-Down事件更改为onMouseOver事件。接着在行为菜单中选择Show-Hide Layers命令，在Named layers列表框中一个一个选择子菜单图层，将所有图层指定为隐藏状态，onMouseDown事件更改为onMouseOut。最后在Layers面板中单击sub1选择图层后，在Behaviors面板中单击Add behavior按钮 ，选择Show-Hide Layers命令，在Named layers列表框中选择layer “sub1”，单击按钮，把onClick事件更改为onMouseMove事件，按F12键在浏览器上进行确认。
4 创建下拉菜单
下拉菜单，是指当光标移动到主菜单上方时，在下面出现垂直方向的子菜单；当光标离开主菜单上方后，子菜单也会随之消失。
4.1 创建垂直方向的下拉菜单
在Behaviors面板中单击Add behavior按钮 ，在弹出的行为菜单中选择Show Pop-Up Menu行为，在Text文本框中输入第1个子菜单的名称，在Link文本框中正确输入与第1个子菜单相链接的网页地址。接着依次创建第2、第3个子菜单，单击Add item按钮，在Text文本框中输入第2、第3子菜单的名称，Link一项保存不变。
为了指定菜单形式，首先单击Appearance标签，在Up state区域单击Cell按钮，在弹出的颜色拾色器上设置默认状态时单元格的背景色；在Over state区域设置光标移动到菜单上方时单元格的颜色。接着单击Advanced标签，单击Border color按钮，在弹出的颜色拾色器上选择颜色，可以更换下拉菜单的边框颜色。最后单击Position标签指定下拉菜单的位置，在MenuPosition区域单击第2个按钮，单击按钮。经过上面的操作，在行为面板中自动添加了事件和动作，按F12键在浏览器上进行确认。
4.2 创建水平方向的下拉菜单
在行为面板中双击Show Pop-Up Menu行为，进入Appearance选项卡，把菜单的形式更改为水平方式Horizontal menu，并单击按钮。
按下F12键，在浏览器上进行确认。可以看到当光标移动到菜单上方时，会显示水平方向上。
5 结束语
总之，设计一个好网站，除了要掌握一定的网站基础知识外，还要掌握多种网页编辑的技巧。网页制作的主要目的就是要吸引人们来浏览，网页上新颖奇特的菜单可以激发浏览者的观看欲，提高浏览率。有关Dreamweaver中用于设计菜单的技巧还有很多，本文仅介绍其中操作简单、效果显著的几种，供大家在制作网页菜单时参考。
参考文献：
[1]高京熙.Dreamweaver从入门到与精通（第1版）[M].北京：中国青年电子出版社，2006.
[2]王强.Dreamweaver CS4入门与进阶（第1版）[M].北京：清华大学出版社，2010.
摘要:随着互联网的蓬勃发展,出现了许多优秀的企业主页
>> 浅析网页设计原则与制作技巧 网页设计原则及技巧 网页设计的小技巧 Dreamweaver必备网页设计技巧 浅谈网页艺术设计中的网页版式设计与编排 对网页设计艺术的探讨与研究 艺术高职院校网页设计教学的研究与实践 网页设计中艺术创新的研究与实现探讨 探讨网页设计的艺术与处理原则 浅谈网页艺术设计 网页艺术设计探索 网页艺术设计初探 《网页设计与制作》 网页设计的布局和用色技巧 网站设计及网页制作技巧 网页的版式设计技巧探讨 网页新闻编译的原则与技巧 网页配色的方法与技巧 浅谈网页制作的经验与技巧 板式设计课程中的网页版式设计结构与艺术性探索 常见问题解答 当前所在位置：或.html即可。这时,保存的位置中会出现相应的网页文件了,直接打开,就可看到网页的效果。但是单由记事本编辑出的网页在效果上会过于简单,不美观,或功能不是很完善,这就需要我们在简单掌握html语言后,利用其它的,更为直观的网页制作工具来进行网页的制作了。
1.2 掌握网页三剑客和简单的数据库使用
何为网页三剑客?是目前比较流行的制作网页的三个工具软件,Dreamweaver、Fireworks和Flash。其中Dreamweaver可用来制作静态网页、动态网页、创建和管理网站、制作样式表等等,功能强大,应用范围很广。Fireworks是图像处理软件,不仅具备复杂的图像处理功能,并且能轻松地把图形输出到第三方的应用程序中,它最大的特点是,应用网页制作方面的切片功能,使网页图片处理起来更方便,快捷了。Flas制作软件,目前,大大小小的网页中,都有flas存在着,给网页增添了精彩的效果,使网页更加精致,还可利用flash制作出有趣的游戏,留言板,聊天室等等,是功能强大的应用软件。
网页中经常会用到聊天室、留言板、用户注册、网上问答等等内容,这样网页就被分成了动态网页和静态网页二种,不使用服务器相关内容,不使用数据库链接的网页被称为静态网页,直接使用Dreamweaver来进行编辑就可以了,它的文件名中的扩展名为.htm或.html。而动态网页正是相对于静态网页来说的,它的扩展名一般为.asp或.php等等。这种网页要使用相应的服务器技术,并用到数据库和数据库链接知识。常用的数据库有Access数据库、SQL Server数据库等[2]。
3 网页内容的选取
网页的内容是灵魂,制作的网页是否受欢迎,是否能吸引访问者的眼球,是否能达到预期的效果。这些都是网页制作时我们必须要预先考虑的问题。
那么如何完成内容的定位泥?
① 在定位网站内容时,要做到小而精,切忌包罗万象。把你认为最精彩的东西都放在上面,那么往往会事与愿违,给人以内容泛泛,大而空的感觉.最好做比较专一的内容。试想,如果我们将自己最擅长的某种知识或技术等内容做到网页中,建立一个专题的站点,那么一旦有访问者第一次在这里一下子就找到了他想找的内容的话。那么如果再有这方面的需求,首先就会想到你的站点。
② 如果是个人网页,那就一定要突出自身的个性,当今社会是提倡张扬个性的时代,除了别人都有的内容之外,自己还要融入一些自身的特点,是内容要有亮点,配色也可不拘一格,大胆用色。从各个角度烘托出制作者的独特性格。
③ 如果是企业的站点,要注意的是:企业的运营宗旨是否能完好体现,能否在网页中最大限度体现企业网站功能和用户最需要的内容,用户的操作是否简便等;要做到网页内容主次分明,结构要清晰简洁。
④ 对于能留住访问者的另一个重要问题,就是网页的速度。对于一个浏览页面时间超长的网页,我想不会让人有再次访问的想法。对于线路和网路本身的速度我们不能控制,但我们可以在网页设计中避免一些影响速度的因素。好的网页应是越简单易读越好。我们可以从以下几个方面来考虑。首先,影响浏览速度的最重要因素之一是图片容量大小,漂亮的图片、绚丽的动画效果,会使你的主页增光添彩,但图片的容量大小却是直接导致浏览速度慢严重后果。尽管你的内容精彩绝伦,网页漂亮,但打开你的网页需要等上半天,在这时间就是金钱的时代,谁会再次的光顾呢?可利用图片制作工具将图片进行加工,在不太影响效果的前提下,可利用修改存储格式,降低像素,分辨率,减少动画应用等途经来达到目的。
4 网页制作步骤
制作网页和装修差不多,先从整体的角度构思出网页的内容、色彩等,然后利用相应的软件进行实际操作。
① 网站定位
先确定所要建立的网站的类型,确定网站风格,网站色调,网站层次,将网站结构先确立出来。
② 收集素材
现在的互联上的资源非常丰富,各种各样的图片资源、动画资源等多媒体资源比比皆是,就所确定的网站风格等因素,收集相关素材。
③ 使用Fireworks等图型制作软件将网页先画出来
这一步骤很关键,无论使用哪种网页制作软件,在进行编辑时经常用到表格,用表格来定位图片,用表格来定位文本,用表格来组合被切割的小图片等。因为网页时经常会出现后位置更改的现象,使用表格来规划网页,会得到事半功倍的效果。另外,小图片的下载速度要比一整张大图片的下载速度快的多,所以在网页中多是将大的图片切割成小部分后,利用无边框,无间距的表格将小图片组合成一张大图。那么,第一步,在使用表格制作前,应用图片处理软件进行网页设计,将整个网页的效果图片画出来。第二步,利用Fireworks的切片工具,将所画出的效果图切成适合的小图片,以备使用。
④ 利用Flas制作软件制作LOGO和Banner动画
LOGO是网站的标识,是一个站点的象征,是网站形象的重要体现。一个精美的LOGO可以很好地树立网站的形像。LOGO一般放在网页的左上角,大小有三种常用规格:88×31、120×60和120×90。Banner被称为网幅广告、旗帜广告或横幅广告,是网络广告的主要形式,一般使用GIF格式的图像文件,也可以使用静态图形,也可用多帧图像拼接为动画图像等[2]。
⑤ 添加相应的服务技术
网页如果被制作成动态网页形式,首先要添加相应的服务技术,在我们常用的windows系统中,先要添加IIS网络服务组件,这是windows系统的组件,需要到控制面板中的添加或删除程序对话框中,选择添加删除windows组件一项中进行internet信息服务(IIS)的添加,这时需要我们在光驱中放入系统,或者可以到网络上进行下载。
⑥ 创建数据库
网页中留言板、信息反馈、用户注册等等内容都要通过数据库对其内容进行存储,以备网页调用[3]。一般的asp动态网页使用Access做为数据库,Access使用起来很方便,可以根据向导来创建数据库内容。
⑦ 使用Dreamweaver制作网页
所有的准备工作已经差不多了,我们现在要做的是,用Dreamweaver网页制作软件将已有的图片、文本、数据库等等内容组合到一起,形成我们的网站。首先,创建一个新的站点,在站点内新建网页,一般使用index.htm或index.asp做主页名称。其次,在网页中插入表格,将已经完成的图片、动画等多媒体内容插入到网页中。然后,加入相应的图片效果、鼠标经过、超级链接等内容。最后添加相应的样式表内容,还可以利用行为面板,给网页加入一些特效,如弹出窗口、时间轴特效等。还可以从网站上下载插件,安装在Dreamweaver中,以增添效果。如果动态网页内容需要添加数据库链接内容,那我们就要在Dreamweaver中的数据库面板中进行操作,添加数据源、绑定数据、记录集和服务器等内容。使网页更具有实效性。
5 结束语
网页设计是一个注重实践操作和设计的课程,需要我们在制作中不断的学习,不断的探索;在互联网应用如此广泛的今天,网页制作的是否精美、实用,是否有访问量等等是评价网页优劣的最好方法。让我们在实践中进步,在实践中走出一条属于自己的路。
参考文献:
[1] 丁桂芝.ASP动态网页设计教程[M].北京:中国铁道出版社,2005:16-18.
【关键词】网页设计 表格 层 就业信息管理平台
【中图分类号】G 【文献标识码】A
【文章编号】0450-9889（2017）03C-0191-02
随着信息技术的日新月异，网页设计的重要性也逐渐凸显，如何快速、方便地设计出相关的网页、网站就显得非常重要。在网页设计与制作的教学过程中，如何让学生快速地掌握网页设计的一些排版技巧是非常有必要的。因此，笔者结合网页设计与制作教学中的一些体会，并通过就业信息管理平台的设计案例，探索网页设计中表格与Ap Div（层）的排版设计技巧。
一、Dreamweaver cs简介
Dreamweaver cs是由Adobe公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。目前，最新的版本为Dreamweaver CC，网页设计软件的功能强大。对网页的浏览已经是我们生活中的不可分割的一部分，网页作为网络信息传播的主要载体，其设计也为大家所关注。网页设计软件的种类有很多，但最出名、最专业的网页设计工具，非Dreamweaver莫属。它是著名的“所见即所得”的可视化网站开发工具，目前的网页设计几乎都采用Dreamweaver来设计。Dreamweaver不仅提供了强大的网页编辑功能，而且还提供了网页的上传工具。利用FTP进行大文件的传输，节省了文件的传输时间，它是一个集网页创作和文件传输管理等多功能的设计工具。
二、表格与层在网页设计中的使用
在就业信息管理平台的设计中，采用程序设计，可以很好地提高网页的下载与浏览速度，但对于初学者来说，程序设计是一件头痛的事。因此，如何利用表格与层来进行设计，就非常重要。网页设计中的排版有很多种方法，其中表格结合层的使用排版是最基本也是最有效的方法。表格与层，对职业院校的学生来说，非常容易学，而且使用也非常方便，做出来的网页也非常的漂亮，因此，在网页设计中表格与层是非常重要的。
（一）网页设计中表格的使用。在网页设计中，利用表格的排版，它的整体效果好是毋庸置疑的，表格在网页中的位置可以通过表格属性来进行设置。在Dreamweaver中，页面内容的设计、排版主要是通过表格来完成。通过表格的相互嵌套、合并与拆分，可以将自己构思好的页面完整地表现出来。表格在网页中的重要作用，主要是它在不同的显示上，可以根据网页的大小、显示器的大小进行相应的变化。并始终都处于浏览的相对位置，完整地把内容显示出来，具有很好的兼容性。因此，使用表格排版比较规范，整体性强，可以让网页的设计显得非常的整齐，达到想要的效果。但由于表格的整体性，在一些细微的地方以及操作上还不够细化，在内容的设计表现上还不够丰富。
（二）网页设计中层的使用。层的使用在网页设计中也是非常的普遍，由于它的定位比较精确，又是一种可视化操作元素，它的使用让网页增加了丰富的表现。层与表格的使用基本差不多，但在位置的定位上要比表格方便很多，这也是层的主要优点。在网页设计中，文本、图像、表格等元素只能固定其位置，不能相互叠加。如果要想使多个元素进行叠加或者定位要精确，在这种情况下，就需要使用层来进行设置。层具有很多表格所不具备的特点，如层的重叠、移动、隐藏等一些功能，层还可以添加一些动作行为，让层的内容表现更加丰富，也正是基于这一点，层成了网页设计中一个重要的元素。层的这些特点有助于设计思维不受局限，从而在设计上有很大的空间。由于它是一种流元素，层在具有上述优点的同时，也存在着一些不可避免的缺陷，例如层在网页中的定位不会随着浏览器大小的变化而变化，层的位置是固定不动的，在这样的情况下就失去了层在W页设计布局中的意义。
（三）就业信息管理平台中表格与层的结合使用。表格与层的结合使用才能更好地体现出它们的优势，层也才能更好地体现出它在网页设计中的强大功能。在网页设计中，如何做到表格跟层的统一、层与表格融为一个整体，这就要用到层在表格中的插入操作，以及层的嵌套使用，下面以就业信息管理平台中制作下拉菜单为例来设计。首先，在网页中插入一个三行一列的表格，在表格的第一行插入一张图片，作为网页设计的Logo，而在第二行中插入一个嵌套的一行五列的表格作为网页的导航条，表格的第三行作为主要内容的设计与排版。其次，在表格的第一格中插入一个Ap Div层，作为父层，操作步骤为：菜单栏中的插入―布局对象―Ap Div，插入后，这个层的位置左、上必须为空，没有任何内容。即它的属性设置为图1所示。
父层设置好后，就要进行下拉菜单的设计，即子层的设计，子层的设计主要通过层的嵌套来完成，完成后的效果如2图所示。
到这里基本完成了管理平台中表格结合层的使用，层就像表格一样，具有随着浏览器的变化而变化。下拉菜单的设计，需要结合层的行为来操作，这里就不再介绍行为的操作。这个简单的案例说明层要与表格结合使用，才能发挥出层最大的优势，当然这是对初学者来说的。层与表格的结合使用有很多的例子，有着非常丰富的内容，在此不再赘述。
三、表格与层的正确应用
表格与层在网页设计中虽然有强大的功能，但在使用的过程中也不能太随意，如果随意地使用就会增加浏览器的负担，浏览下载的速度就会变慢，影响网页的浏览。
（一）表格布局出现的问题。在网页设计中，利用表格排版的时候，不能使用一个大大的表格铺满整个页面，这样不利于浏览器的打开。浏览器打开一个表格，是要等一个表格全部下载完成，这样就需要很长的时间来打开这个网页。在表格的嵌套中，也不能无限制地嵌套下去，一般表格的嵌套，应该控制在最多三层表格，如果嵌套的表格太多，打开时也会消耗大量的资源，不利于网页的打开。有数据统计，一般浏览者打开网页的等待时间为7秒以内。如何解决这个问题，主要采用拆分表格的方法，将一个大的表格拆分成几个小的表格，并要尽可能地避免表格的层层嵌套。
（二）层布局出现的偏差。在网页的设计中，层的单独使用没有多大的意义，因为层是流元素，不会随着网页浏览器的变化而变化，它的位置是固定的，不会产生移动。虽然有时候，我们在利用表格与层排版的时候，看起来很整齐，但一预览就完全错位了，根本不是想要的效果。如何才能使层与页面中的表格一样，能够随浏览器的变化而产生相对位置上的变化，这就需要先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的一个单元格中，作为一个父层。操作的方法为：菜单栏中的插入―布局对象―Ap Div，插入后，这个层的位置左、上必须为空，没有任何内容。即设置好的属性就如图1所示。然后，其他的子层就通过这个父层进行嵌套，在这里必须强调的是，父层必须通过菜单栏的插入，不能通过用鼠标画出来的方式操作。采用这种方法设置层后，无论浏览器的窗口大小如何变化，它都会跟着变化，体现了与表格成为一个整体，在浏览时就不会产生位置上的移动，因此，层只有结合表格的使用才能更好地丰富网页内容。
总之，在网页设计中，表格c层是非常重要的元素，但在布局设计中，只有把表格与层结合使用，才能让网页的布局精美与丰富。网页中的内容虽然很重要，但网页中的设计与布局才是最重要的。因此，通过合理的布局设置，特别是主页设计要整齐美观，才可能更好地吸引读者。因此，在平时的网页设计中，要多看一些优秀网站的排版设计，只有这样，才能更好地提高自己的网页设计能力。
【参考文献】
[1]俞燕丹.项目教学法在《网页设计与制作》课程中的实践研究[J].新课程研究（中旬刊），2015（10）
[2]韩媛媛.浅谈Dreamweaver在网页设计中的应用[J].信息与电脑，2016（7）
[3]周金容.网页制作过程与技巧[J].软件导刊，2016（15）
[4]王浩.基于项目化的《网页设计》课程教学改革初探[J].信息与电脑（理论版），2014（11）
[5]钱丽丹.小组协同式学习在网页设计与制作课程中的应用[J].计算机时代，2015（4）
[6]陈静.基于项目驱动法的网页设计基础课程课堂教学改革探索[J].人才资源开发，2015（20）
【基金项目】2016年度广西高校中青年教师基础能力提升项目“基于WEB的高职院校就业信息管理系统的研发与应用”（KY2016YB685）
关键词：网页设计；制作；学生能力；培养
随着互联网的发展和普及，网页设计和制作技术成为网络时代非常实用的技术，这一课程也成为学校开设的热门课程。无论是计算机专业的学生还是非计算机专业的学生，网页制作都成了一门重要的基础性技术课程。但是很多学校在教学中采用传统的教学模式，导致学生的学习积极性不高，实际动手能力也比较差，为了让学生快速的掌握网页设计和制作的技术，需要采用一些新型的教学方法实施教学，加强学生综合能力地培养。
一、加强学生创新能力的培养
创新是一个民族的灵魂和动力，同时也是当今社会竞争的核心。学生创新能力的提升和创新意识的增强对于他们以后的发展具有非常重要的作用。网页设计与制作教学作为新时期教学的主要课程，在教学中培养学生的创新能力有利于促进整体教学的发展。因此，在教学中，可以通过多方面内容加强学生创新能力的培养，首先，可以通过兴趣教学法唤醒学生的求知欲望，兴趣是能够推动学生求知的内在力量，学生只有对某一学科充满兴趣，才能够持续的钻研该学科知识，从而增强学生的学习效率。在教学中，为了增强学生对网页设计和制作的兴趣，教师可以在上课时准备一些网页作品，让学生对作品进行点评，然后提出改造的意见。让学生在头脑中对网页设计有一个模糊的认识，产生做网站的想法，这样一来，通过教师的指导就能够让学生梳理一个成型的站点框架，紧接着引导学生如何做网页，如何使用工具，学生对这些内容产生兴趣，就会带着教师提出的问题进行主动探索和学习，以此增强学生的学习效果。
除此之外，还可以通过精品赏析的方式增强学生的学习灵感。网页设计和制作课程是一门艺术和艺术相结合的课程，学生不仅要掌握基本的网页制作技巧，还要具备欣赏美和创造美的能力。创造的来源是灵感，而灵感的来源则是通过观察，因此，可以在教学中设计精品赏析的环节，利用上课之前的时间展示作品，向学生展示一些布局合理，设计新颖的精美网页，让学生对这些网页进行观察和欣赏，这样不仅可以拓宽学生的视野，同时还能激发学生的创造灵感，为学生以后设计出精美的作品奠定基础。
二、培养学生的网页制作综合能力
在学生掌握网页设计和制作的基本知识之后，网页制作综合能力的培养就显得非常重要了。即使学生掌握了网页制作技术，也不一定能够设计出好的网站，只有提升学生的综合能力，加强对他们所掌握知识的综合应用，才能够设计出一个精美的网站。为此，需要注重学生在实践方面的能力培养，可以从教学实验方面入手，将所有的理论教学和实验教学都安排在计算机机房完成，可以让学生在学习理论知识之后直接进入实践探索阶段。此外，为了给学生提供更好的实践机会，可在学校建立计算机基础教学网，网页设计和制作教学的老师可以建立自己的教W网站，同时给学生分配相应的网站空间，要求学生建立自己的个人网站主页，然后将自己的实践作业上传到网站空间中，设计的风格和主题不受限制，网站主页的内容也不做要求，学生可以根据自己的兴趣进行网页的制作，将所学习的网页制作技术灵活的运用到个人网页的设计中，做好人个网站。为了让学生在网站设计中学会创新，教师可以搜集一些具有创意的网站和网页设计的素材，和学生一起分享，然后与学生所做的网站进行对比，从而提升学生的创新能力。在网站设计中，针对不同的设计环节，学生可以自己发现设计中存在的问题，然后进行分析和解决，对于学生综合能力的培养具有很大的帮助。
三、加强培养学生的团队协作能力
现在社会的分工越来越细，很多工作都需要人们协助完成，这样以来，团队精神就显得格外重要。协同合作是团队精神的核心内容，尊重个人的兴趣和成就是团队协作的基础。就学生而言，独立意识较强，现代的学生比较自我，沟通能力也有待提升，这些缺陷显然不适合学生未来的工作。网页设计和制作教学是一门实践性要求较高的课程，同时也对学生的团队协作能力要求很高。在教学中的综合实训中可以选择采取项目教学法实施教学，将学生分成不同的小组，在自愿的基础上进行强弱搭配，并且每一个小组推荐一位组长，在老师布置任务之后，组长可以做好小组内的分工，让学生能各司其职，然后合力完成作品的设计和制作。在作品制作中，如果组内的成员存在意见不同意的现状，组长可以和其他的成员进行沟通协调，最后达成一致，当组员能够为同一个目标一起努力时，无论最后的结果如何，学生最后都会有成就感。在这一过程中，有利于提升学生的团队协作精神，增强学生的沟通能力。
四、结语
网页设计和制作教学是一门实践性很强的课程，对于学生的综合实践能力以及创新能力的要求较高，因此，在教学中，教师要给根据学生的兴趣爱好设计教学内容，并且为学生提供一些优秀的教学作品，让他们进行赏析，在优秀作品的激励和教师的引导下，学生的学习兴趣会有很大的提升，从而真正的投入到网页设计和制作的探索当中，熟练的掌握网页制作方面的技巧，增强学生开发和维护网站的能力，使他们的知识结构不断得到完善，对于教学效果的提升会起到很大的作用。
参考文献：
[1]马玲燕. 《网页设计与制作》课程的教学实践研究[D].内蒙古师范大学，2013.
[2]毕惠丽. 浅谈网页设计与制作教学中学生能力的培养[J]. 新课程（上），2012，02：185.
[3]胡晓红，王丽芬，张景峰. 基于职业能力培养的《网页设计与制作》教学改革的研究[J]. 电脑知识与技术，2012，20：4953-4956.
【关键词】网页设计；制作；学生能力；培养
随着互联网的发展和普及，网页设计和制作技术成为网络时代非常实用的技术，这一课程也成为学校开设的热门课程。无论是计算机专业的学生还是非计算机专业的学生，网页制作都成了一门重要的基础性技术课程。但是很多学校在教学中采用传统的教学模式，导致学生的学习积极性不高，实际动手能力也比较差，为了让学生快速的掌握网页设计和制作的技术，需要采用一些新型的教学方法实施教学，加强学生综合能力地培养。
1加强学生创新能力的培养
创新是一个民族的灵魂和动力，同时也是当今社会竞争的核心。学生创新能力的提升和创新意识的增强对于他们以后的发展具有非常重要的作用。网页设计与制作教学作为新时期教学的主要课程，在教学中培养学生的创新能力有利于促进整体教学的发展。因此，在教学中，可以通过多方面内容加强学生创新能力的培养，首先，可以通过兴趣教学法唤醒学生的求知欲望，兴趣是能够推动学生求知的内在力量，学生只有对某一学科充满兴趣，才能够持续的钻研该学科知识，从而增强学生的学习效率。在教学中，为了增强学生对网页设计和制作的兴趣，教师可以在上课时准备一些网页作品，让学生对作品进行点评，然后提出改造的意见。让学生在头脑中对网页设计有一个模糊的认识，产生做网站的想法，这样一来，通过教师的指导就能够让学生梳理一个成型的站点框架，紧接着引导学生如何做网页，如何使用工具，学生对这些内容产生兴趣，就会带着教师提出的问题进行主动探索和学习，以此增强学生的学习效果。除此之外，还可以通过精品赏析的方式增强学生的学习灵感。网页设计和制作课程是一门艺术和艺术相结合的课程，学生不仅要掌握基本的网页制作技巧，还要具备欣赏美和创造美的能力。创造的来源是灵感，而灵感的来源则是通过观察，因此，可以在教学中设计精品赏析的环节，利用上课之前的时间展示作品，向学生展示一些布局合理，设计新颖的精美网页，让学生对这些网页进行观察和欣赏，这样不仅可以拓宽学生的视野，同时还能激发学生的创造灵感，为学生以后设计出精美的作品奠定基础。
2培养学生的网页制作综合能力
在学生掌握网页设计和制作的基本知识之后，网页制作综合能力的培养就显得非常重要了。即使学生掌握了网页制作技术，也不一定能够设计出好的网站，只有提升学生的综合能力，加强对他们所掌握知识的综合应用，才能够设计出一个精美的网站。为此，需要注重学生在实践方面的能力培养，可以从教学实验方面入手，将所有的理论教学和实验教学都安排在计算机机房完成，可以让学生在学习理论知识之后直接进入实践探索阶段。此外，为了给学生提供更好的实践机会，可在学校建立计算机基础教学网，网页设计和制作教学的老师可以建立自己的教学网站，同时给学生分配相应的网站空间，要求学生建立自己的个人网站主页，然后将自己的实践作业上传到网站空间中，设计的风格和主题不受限制，网站主页的内容也不做要求，学生可以根据自己的兴趣进行网页的制作，将所学习的网页制作技术灵活的运用到个人网页的设计中，做好个人网站。为了让学生在网站设计中学会创新，教师可以搜集一些具有创意的网站和网页设计的素材，和学生一起分享，然后与学生所做的网站进行对比，从而提升学生的创新能力。在网站设计中，针对不同的设计环节，学生可以自己发现设计中存在的问题，然后进行分析和解决，对于学生综合能力的培养具有很大的帮助。
3加强培养学生的团队协作能力
现在社会的分工越来越细，很多工作都需要人们协助完成，这样以来，团队精神就显得格外重要。协同合作是团队精神的核心内容，尊重个人的兴趣和成就是团队协作的基础。就学生而言，独立意识较强，现代的学生比较自我，沟通能力也有待提升，这些缺陷显然不适合学生未来的工作。网页设计和制作教学是一门实践性要求较高的课程，同时也对学生的团队协作能力要求很高。在教学中的综合实训中可以选择采取项目教学法实施教学，将学生分成不同的小组，在自愿的基础上进行强弱搭配，并且每一个小组推荐一位组长，在老师布置任务之后，组长可以做好小组内的分工，让学生能各司其职，然后合力完成作品的设计和制作。在作品制作中，如果组内的成员存在意见不同意的现状，组长可以和其他的成员进行沟通协调，最后达成一致，当组员能够为同一个目标一起努力时，无论最后的结果如何，学生最后都会有成就感。在这一过程中，有利于提升学生的团队协作精神，增强学生的沟通能力。
4结语
网页设计和制作教学是一门实践性很强的课程，对于学生的综合实践能力以及创新能力的要求较高，因此，在教学中，教师要给根据学生的兴趣爱好设计教学内容，并且为学生提供一些优秀的教学作品，让他们进行赏析，在优秀作品的激励和教师的引导下，学生的学习兴趣会有很大的提升，从而真正的投入到网页设计和制作的探索当中，熟练的掌握网页制作方面的技巧，增强学生开发和维护网站的能力，使他们的知识结构不断得到完善，对于教学效果的提升会起到很大的作用。
参考文献:
［1］马玲燕．《网页设计与制作》课程的教学实践研究［D］．呼和浩特:内蒙古师范大学，2013．
［2］毕惠丽．浅谈网页设计与制作教学中学生能力的培养［J］．新课程(上)，2012，02:185．
［3］胡晓红，王丽芬，张景峰．基于职业能力培养的《网页设计与制作》教学改革的研究［J］．电脑知识与技术，2012，20:4953～4956．
关键词：网页艺术设计；网页设计；视觉设计；艺术化；整体性；全媒体
网页艺术设计，顾名思义，指的是设计师以网页设计技术为基础，对网页内容进行艺术化、创造性规划与设计的过程。在网页艺术设计的发展与应用过程中，设计师所处的时代背景与技术发展情况尤为重要。在当下这样一个计算机技术为主导的信息时代，网页艺术设计的发展迎来了前所未有的机遇，其未来的前景也十分值得期待。
1 网页艺术设计的现状分析
所谓网页艺术设计的现状，指的是网页在开展艺术化设计的过程中所表现出的一些特征、征象，以及由此对设计本身产生的冲击。很明显，作为视觉设计的重要表现形式，网页艺术设计的应用已经呈现出方兴未艾的态势。
1.1 主题、内容与形式达成和谐的统一
显然，作为视觉设计的重要表现形式，网页艺术设计具备其自身的显著特性。从视觉角度看，网页艺术设计是一种基于计算机技术而产生的将视听元素与版式设计结合起来的设计样式，具备鲜明的表现特征，有别于传统的网页设计。当前网页艺术设计的一个基本现况就是“主题、内容与形式”的“三统一”。首先，网页艺术设计的主题就是网页的核心诉求所在，即设计所要表现出的标准与规范。比如，设计师在设计关于医药类的网页时，无论艺术化的形式如何变化，“医药”这个主题决定不能变。围绕“医药”主题开展的艺术化加工与设计，才是该种设计的本质。
此外，网页艺术设计必须追求内容与形式的完美统一，而且不可偏废。内容与形式的统一是当前网页艺术设计的基本现状，也是所有设计师必须遵循的基本原则。在考虑版式设计与视听元素的结合时，既要追求网页的“美感”和艺术效果，更加简明扼要的突出网页的核心内容，让访问者可以快速了解、认知网页的鲜明主题。总之，主题、内容与形式的完善结合是当前网页艺术设计的基本现况，也是优秀设计的核心理念。
1.2 网页整体性与艺术性的搭配是主流
何为网页的整体性，即在网页艺术设计的过程中既要遵循网页设计的基本诉求，将主题凸显出来，将内容与形式进行完善的搭配；同时，网页的整体画面感、形式美要艺术性要合理搭配，形成整体效应。这样，网页的基本内容能够一目了然，同时艺术性和美感也得以提升。因此，从整体角度衡量和操作设计，才是新时期网页艺术设计的主流。
例如，在版式设计上，要将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定。所以，从细节看到整体、从版式看到画面，这才是当下网页艺术设计的基本态势，也是优秀设计师必须遵循的准则。主要凸显出网页的整体性，其艺术性才能表现出来，网页的整体水准和质量才能得以提升。总之，规范的运用网页艺术设计的操作技巧，统筹整体性与艺术性，这显然是当前网页艺术设计的主流走向。
1.3 行业的发展催生了设计师的队伍壮大
很明显，相比于传统的网页设计，网页艺术设计更加注重网页的艺术性特征与美感的表现，更能吸引访问者与受众的注意，因此格外受到重视。可以看到，单就网页设计这一个行业来看，运用艺术设计的思维和元素已经是大势所趋。在行业急剧的变化和发展过程中，网页艺术设计师的队伍正在逐渐壮大，这正是依附于网页艺术设计的蓬勃兴起。
不难想象，未来的一段时期内，更多技能过硬、思维活跃和技巧多元的网页艺术设计师将“登堂入室”，进一步推动网页艺术设计行业的快速发展，这一点毋庸置疑。
2 网页艺术设计的发展趋势探究
前面就网页艺术设计的发展现况进行了简要的分析，同时也穿插着对网页艺术设计的原则、特点进行了剖析。展望未来，网页艺术设计的发展还是很具生命力和影响力的。
2.1 多种要素的交互与综合运用
很明显，未来随着计算机技术、多媒体技术的综合、快速发展，网页艺术设计必然受其波及，产生剧烈的变化。其中，设计过程中多元要素的交互与综合性运用能够增加网页的艺术性，提升网页的观感美感度，拓展网页的辐射力与影响力。未来，网页艺术化设计中诸如视频、音频、新型静态媒体、流媒体、自媒体等多种要素的综合交互是基本的趋势，也必然带动网页艺术设计的再一次变革。
2.2 移动互联网和全媒体的趋向
当前的网页艺术设计只限于计算机的操作，其发展和辐射的范围都是很有限的。未来，随着移动信息技术的快速发展，全媒体时代即将到来，而网页艺术设计也必然受其影响。所谓的全媒体，也可以理解为综合性的媒体形式，集中表现为移动信息技术条件下网页的艺术设计。比如，随着智能手机、平板电脑等移动智能终端的快速扩张，未来的网页艺术设计可能在这些设备上就可以完成，并且支持快速的分享与。所以，综合性媒体形式的多元化应用是未来网页艺术设计的一个重要方向。
综上所述，网页艺术设计是一种技术与艺术完美结合的设计样式，在当前的网页设计领域已经得到了广泛的应用，业已取得了不错的效果。随着科学技术的发展，未来的网页艺术设计一定可以再次焕发新貌，产生巨大的影响力。
参考文献：
[1] 杨艳霞.网页艺术设计要素探讨[J].山西煤炭管理干部学院学报，2010（02）.
[2] 严晨，杨智坤.抽象艺术设计思想在网页设计中的应用[J].科技与出版，2011（05）.
[3] 邓怀勇，马琴.浅析网页制作中的艺术设计[J].电脑知识与技术，2009（29）.
[4] 林南秀.论网页与界面设计中艺术的运用[J].重庆电子工程职业学院学报，2009（02）.
关键词： 网页设计 色彩 配色
计算机技术的发展使信息事业产生了飞跃，互联网在信息传播中扮演了无比重要的角色。从最初简单的纯文本界面到如今五光十色的多媒体界面，网页设计经过短短十多年的发展，已在世界各地产生了广泛的影响。作为一门与视觉传达设计密切相关，并具有功能性的设计艺术，网页设计始终必须遵循形式与功能的统一性和协调性，艺术与技术的高度统一。
网页设计者在掌握了网站、网页的构建技术之后，所面临的关键性的问题之一就是网页的色彩搭配。在五彩缤纷的世界中，色彩是吸引视觉的重要因素。就感觉而言，色彩与形状相比能够产生更直接、更强烈的影响。
一、色彩在网页设计中的地位
现代社会，人们每时每刻都要与色彩打交道，追求时尚、体验消费已经成为一种文化，体现出人们对高品质生活的追求愈加强烈。当我们步入商场、超市的时候，各类琳琅满目的商品，以优美的造型、鲜艳的色彩展现在我们面前，我们在仔细享受那些独特造型和美妙色彩的商品时，更容易被那些具有强烈色彩的物品所吸引，这便是色彩的作用，因为颜色在现代设计中具有强烈的视觉感召力和表现力。
对于网页设计来讲，其信息内容的有效传达是通过各种构成要素的设计来实现的。网页的构成要素包括文字、图形、图像、标志、色彩等。其中，色彩的设计尤为重要。从一定意义上说，网页也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使色彩可以产生强烈的视觉效果，使页面更加生动。而且浏览者在浏览网页时，留下的第一印象就是页面的色彩设计，它的效果直接影响到阅读者的浏览兴趣。因此，色彩设计在网页中居于十分重要的位置。
二、网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜明突出，容易引人注目。
2.色彩的独特性。要有与众不同的色彩，使得学习者对网页具有深刻的印象。
3.色彩的合适性。色彩和你表达的内容相适合。如用粉色体现女性主题网页的柔性。
4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和网页的内涵相关联。
当一个网页作品色调决定了之后，就应该考虑它的主次关系和色彩搭配，而不能平均的使用色彩。色彩面积大小是直接影响色调的重要因素，色彩搭配首先要考虑大面积色彩的安排。决定了画面中的主色，往往就决定了它的调子和方向，接下来就是要考虑用什么颜色来调配它们之间的比重，并确定调和到什么程度，才能符合自己策划的画面的氛围。得体的色彩表现和艺术处理，能在浏览者的视觉中产生夺目的效果。同时，色彩的运用要考虑内容的需要，用不同色彩对比的效果来表达不同内容和思想。
运用相同色系色彩。这种搭配易于使网页色彩趋于一致，使网页色彩达到网页和谐统一的效果，因而是一种风险极小的搭配方法，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部使用对比色彩的图片等。
运用对比或互补色。这种方式可以使色彩关系丰富多样，谐调、悦目，容易达到活泼、运动的网页效果，特别适合体现轻松素材的网站，在设计时需要注意主体色彩的运用，以一种或两种色彩占主导地位，再用相异的色彩作为陪衬、点缀和调节。
使用黑、白、灰的特殊作用。黑、白、灰的对比作用既强烈有效，又微妙而耐人寻味，不能因为它“无彩”而有所忽略，它们在画面中充当过渡色，能够以色彩的中性使画面调和，以自身的单调使画面丰富，使色彩搭配技术更上一层楼。
三、网页设计色彩运用的注意事项
1.网页设计要与网站的色彩相统一
网页设计要与网站的色彩相统一，是指在整个网站中，色彩的含义始终保持一致，不过多改变，在整个网页布局中，各区域的背景色，各种按钮的颜色应基本不变，在同一区域中，颜色的运用更应该保持一致。
2.色彩的运用要与内容主题相统一
网站色彩的运用要与内容主题相统一，是指在设计网页时，一定要根据内容确定一个色彩基调，如内容活泼的常用鲜艳、亮丽的色调。政治类的常用暖色调，它对于烘托主题思想，表现环境气氛，构成一定的情境有重要作用。
3.色彩的运用要注重突出内容主体
要通过色彩的对比，使网页内容主次分明、层次清晰，比如所以浅色背景用深色字，深色背景用浅色字，用鲜艳色彩作为活动中的前景，以冷色，暗色、浅色作为背景等。
四、网页设计中用色的小技巧
1.对多数网页特别是有大面积文字的网页来说，应采用白色或浅色的背景，如浅灰色、淡黄色、浅蓝色或浅绿色，文字采用黑色或深颜色；
2.避免在浅色背景使用明亮颜色的文字，因为这样文字会很难辨认；
3.深颜色背景上使用浅色的文字是一种很好的组合，但是如果不是特别需要，应留作那些需要引起浏览者特别注意的小块区域和场合，比如标题图形等；
4.使用黑色背景许多时候显得太沉重，可以考虑使用深灰色、深蓝、栗色等；
5.白色、浅灰色、浅蓝色、浅绿色、浅褐色很适合作为深色背景上的文字颜色；
6.大的、粗体的文字比常规尺寸的文字更适合使用；较强的颜色，可考虑鲜红色，橙色，明亮的蓝色，但注意不要滥用。
五、结语
网页色彩设计已经不只是一般的美工，而是综合了许多其他学科的实践应用领域，它涉及美学、光学、心理学、教育学和民俗学等多门学科。因此，网页的色彩设计需要有更高的要求。准确的、有创意的色彩设计，对网站的宣传推广有事半功倍的作用。
参考文献：
［1］索昕煜.网络界面色彩设计研究［D］.昆明理工大学学报，2005.
人们不断追求完美，网页设计亦是如此。它要考虑如何使受众能更多更高效的接受信息从而使他们对网站留下很好的印象。古往今来，关于形式美的规律被很多艺术家和学者所提出，因此，在网页设计过程中，设计者必须去研究，并主动地掌握并运用这些规律去发现美。当然，各个时代审美观念和美学特征不同。在信息高速发展的今天，新的审美需求随之产生。将网页设计推向了更高层次的境界，这也是网页设计发展的必然趋势。这就要求设计师们遵循条理与反复、变化与统一、均齐与平衡、对比和调和、节奏与韵律等原则，以及对网页中文字、图形、色彩的设计的规律，创造优秀的网页作品。
（一）网页的内容与形式必须统一和谐
任何设计都有一定的内容和形式，形式与内容的统一是设计网页的基本原则之一。一方面，内容占据主导地位，是设计存在的基础，被称为“设计的灵魂”；另一方面，形式不仅直接影响设计作品的表现，而且也有自身的审美价值，具有相对独立性。它要兼顾整体效果与细节的视觉效果。如图1《龙门飞甲》的电影主题网站的设计，网页视觉效果相当成功。设计师通过考虑电影宣传效果及网站整体功能要求的同时，在设计形式上赋予变化创新，不仅实现了形式美的表现，也深化了作品的内涵。
（二）主题元素突出
不同类型的网站都有自身所特有的主题，并按照阅读习惯和视觉心理将主题形象地传达给观者，使观者更好的理解和接受它，并满足观者的视觉审美需求。适合主题的需要是网页设计的前提。将自己的设计思想与网页的主题精髓相融合，才能展现网页设计所特有的审美形式。作为主题要素，要想成为观者的视觉焦点就必须注意编排的位置，从而使观者产生深刻的视觉印象。
二、创新性的视觉艺术表现在网页设计中的运用体现
（一）加强网页整体布局，合理分配版面提高网页整体美感
在网页设计中，很重要的一点是，整体一致性不仅存在于某个网页设计中的每个元素之间，也存在于整个网页上——一个网页必须被视为一个完整的单元，这就要求网页设计在整体的风格，色彩上保持统一。网页的整体性不仅包括功能上的整体性也包含了形式上的整体性，作为信息传达的重要载体，需要在特定的时间和空间环境里被人们所理解和接受，从而满足人们的使用需求。这就要求网页设计师在进行设计时，首先考虑网页的整体布局与版面的合理分配。
（二）传统与创新相结合，合理运用视觉色彩提升视觉冲击力
色彩作为网页设计的一个表现元素，不仅具有吸引浏览者视觉和维持网站形象的效果，而且具有有效传递页面主题信息的功能。在网页设计中，我们可能第一眼感知到的设计元素就是色彩了，如果设计色彩过多，用色过于混乱，造成了浏览者的视觉疲劳，久而久之容易导致网站浏览量的下降，难以达到视觉传达的目的。如图2，十二星座系列的官方网店的制作，运用主色调为蓝色的梦幻主题，彰显十二星座的特点，给人以遐想的梦幻空间，突出整个网店的风格和主题。
（三）灵活运用现代科技手段，发挥各大软件的优势
做出一个优秀的网页设计作品，要灵活掌握相关电脑软件，如：“Photoshop”“DreamWeaver”“Flash”“FireWorks”“AI”等，我们要熟练掌握这些设计工具软件，做到活学活用，并且就其特有属性将各种软件巧妙地结合起来。例如利用多维空间、动画3D技术等，静中求动，在二维空间中追寻三维甚至多维的智能化的设计。又如，我们将平面设计软件Photoshop与动画软件Flash软件进行穿插配合使用，把动画设计能在时间和空间上将物体进行运动的表现优势运用在网页设计制作中，从而使画面更加生动活泼，赋予强大的表现力和视觉冲击力。如图3、4运用平面软件与动画软件相结合穿插的使用，实现了网页的智能化设计，使画面更加生动。
（四）突出注重设计技巧，体现网页风格个性
关键词：网页设计；公选课；范例教学；
中图分类号：G642文献标识码：A文章编号：1009-3044(2012)03-0638-02
Study and Discussion of the Teaching of the Public Elective Course "Web Design and Production"
LIU Zhi-rong
(School of Computer Science, Guangdong Polytechnic Normal University, Guangzhou 510665, China)
Abstract: Having analyzed the importance of today’s college setting web design and production, we studied and discussed the teaching facility of this course, focusing on the teaching objectives ,teaching content and teaching mode.
Key words: web design; public elective course; example teaching
公选课即公共选修课是高校基于社会对高综合素质、复合型人才的迫切需要，为实施通识教育，提升大学生的全面素质，面向全校学生开设的跨学科、跨专业的选修课程。公选课的开设有利于学生自主学习、增强学习兴趣、提升学生的身心素质、人文素质、科学素质。
当今Internet使全球信息共享成为现实，电子政务、电子商务、网络文化等等为我们构筑了异彩纷呈的网络世界，它使人们的生活方式和工作方式发生了巨大变化，网页现成为人们获取与信息最为重要的途径，学习网页设计与制作既是享用现代信息技术成果的过程，又是应用创新的实践，网页设计与制作已成为大学生必备的重要知识与技能。它可开阔学生视野、拓宽学生知识面、训练学生网络应用技术能力、美学能力、文字能力、逻辑思维能力，全面提升大学生的素质，将它设为高校的公选课是非常恰当而必要的。
1教学目标分析
《网页设计与制作》公选课是面向全校非计算机专业学生设置的，由此应定位该课程的教学目标是通过本课程的学习,要求学生能够理解静态网站构建、静态网页制作的基本原理、基本概念，掌握网站开发流程，掌握网页设计与制作的方法与技巧，能够利用当前流行的专业网页设计工具Fireworks、Flash、Dreamweaver完成静态网站的构建和网页设计制作，学完本课程能根据任务需求建立和设计静态网站，为学生将来开发个人网站或制作一些企事业机构小型宣传活动网站打下技术基础，从而提升高校培养技能性人才的知识、能力、素质结构。
2教学设计
公选课面向全校不同专业的学生，教学时如何提高学生对本课程的学习兴趣对提高教学质量、实现本课程的教学目标无疑是至关重要的，这就要求教师在施教时要在教学内容设计、教学模式的实施上要做深入探讨和研究，将网页设计与制作的精髓高效地传授给学生。2.1先修课程
由于在我校一门公选课的课时是32学时，其中授课30学时、考试2学时，这样为保证在短短的30学时里，学生能较完善地获得静态网站构建和网页设计的基本技能和技巧，前提必须要求学生能较熟练使用windows系统、word软件等，为此要求选修该课程的学生必须先修过大学《计算机基础》课程。
2.2教学内容设计
针对网页设计与制作课程的教学目标，结合公选课学生特点和当今网页设计实用技术，我在授课时，将教学内容分为两大模块，网页素材设计制作模块和网页页面设计模块。其中，网页素材设计制作模块分为两个子模块，一是使用Fireworks设计制作网页图形图像子模块，二是使用Flash设计制作网页动画；网页页面设计模块依据网页需按一定逻辑关系组织形成网站才能，故该模块也分为两个子模块：一是网站规划和结构设计模块，二是网页设计编辑模块。详细见图1所示。
图1公选课《网页设计与制作》课程教学内容模块图
网页设计与制作是实践性很强的课程，培养学生的实践能力和创新能力是这门课教学的首要目的，因此，教学内容设置上，实践教学内容的设置也是教学中非常重要的环节。要紧密配合课堂教学知识点，通过实验引导和帮助学生加深对课堂所授的知识点的理解和融会贯通，从而激发学生的学习热情，调动其积极性，提高其分析问题、解决问题能力，同时培养其创新能力。为此设计了以下实训内容：
实训1利用Fireworks设计矢量图像、编辑图像；实训2利用Fireworks设计图像导航栏、logo标志；实训3利用Flash制作动画、网站banner；
实训4规划站点、利用Dreamweaver建立站点结构；实训5使用表格排版网页；实训6各种超链接的建立；实训7设计制作个人网站。
前6个实训是为配合课堂所授各知识点而设计的，这6个实训主要是要循序渐进引导学生掌握课堂知识点，每个实训由三大部分构成：一是巩固课堂知识，这部分主要是对教师课堂所授实例让学生自己再尝试一遍，加深其对课堂所授知识点的巩固；二是延伸课堂知识，这部分是教师精选一下能综合课堂知识点的作品，给出样式，让学生去分析如何利用课堂知识点去实现这些作品的设计。三是自我创新和发挥，这部分主要给出用文字描述的一些功能，由学生灵活地综合所学知识点，发挥其积极性和主动性，自主去创意一些图像、动画、网页，培养学生将分散知识联系在一起，灵活应用，从而提高他们多角度、多方位思考、分析、解决问题的能力。第7个实训，设计制作个人网站是让学生自己搜集资料、综合这门课所有知识点来进行个人网站开发，从而达到这门课的教学目标，让学生开发静态网站的专业技能有个质的飞跃。
32个课时，既要讲解知识点，又要做实训，是远远不够的，所以实训大部分内容要安排在学生们在课下完成。每次课留有1课时时间，辅导学生做实训及答疑解惑。
2.3教学模式设计
依据《网页设计与制作》课程的特点和教学目标，该课程主要以“范例教学”实施较为合适。范例教学是借助精选教材中的示范性材料使学生从个别到一般，掌握带规律性知识，并发展其能力的一种教学模式。范例教学是引导学生进行创新性学习最好的模式。有些教师在进行网页设计教学时，往往是不厌其烦地对学生历数Dreamweaver、Fireworks、Flash软件下各菜单的功能，学生听着乏味，而且听完后所获得的知识是零散的，仍不会综合使用这些菜单命令进行创造性的设计。而若采用范例教学法会很好地激发学生学习的兴趣和热情，以兴趣贯穿于整个教学过程中，激发学生的学习欲望，引发学生积极思维，培养其创新精神，促进学生探究新知识的积极性，对培养学生自觉、自主以及创造性学习是非常有效的。在《网页设计与制作》课程教学中，首先教师讲清本次课的教学重点和难点，让学生在头脑里有个目标，知道这次课主要要掌握哪些知识点，接着给学生展示教师精心设计制作包含本次课主要知识点的综合实例，这样先让学生对课堂知识点有一个感性认识，激发起学生的兴趣，再通过对实例实现的关键点进行讲解，融入相关理论知识和各工具软件的命令使用，由浅入深地、循序渐进地让学生在实例的学习中掌握网页设计与制作的理论知识点和各菜单命令的使用，这样既可营造宽松的学习环境，又可激发学生的学习兴趣；接着教师设计一些综合应用本次课堂知识点的范
例，只将最后的设计结果展示给学生，让学生亲自去分析、判断和动手去尝试实现它，引导学生发现规律的突破点和探索综合使用课堂知识设计出该范例，达到知识的巩固和灵活应用；最后，让学生应用课堂知识，充分发挥自己的主动性、积极性和创造力，自我设计相关图像、动画或网页。其中第三步是重视学生在学习过程中主体意识的发挥、重视学生在学习活动中主观能动性和创造精神的发挥。这样三步下来学生对网页三剑客工具和网页设计与制作知识的掌握是在一种轻松愉快的环境下学会，并能灵活应用它们进行有创意性的Web图像设计、Flas设计和网页设计。
教师施教时，要时刻把握范例教学的关键是教师设计的课堂范例要具有典型性、针对性，能涵盖一次课的重要知识点，能引导学生发现规律的突破点，有力地促进学生从知识到能力的转化，使学习变得更有效。
3小结
只有不断优化教学内容、改进教学手段和教学方法，才能提高公选课教学质量，使学生在短短32学时内掌握网页设计与制作的基本实用技术，提高其实践能力和创新能力，开阔其知识视野、扩大知识面，使高校的公选课能真正成为培养适应社会复合型人才的实用课程之一。
参考文献：
[1]吴才章.高校公选课建设与管理中存在的问题及对策[J].河南工业大学学报:社会科学版,2009,5(3):155-157.
[2]王秀莉,陈琼,宁正元.网页设计与制作[M].北京:清华大学出版社,2009.
第一阶段：网页创意风格定位阶段
一：网页设计为何需要创意风格定位
设计网页前要注意，设计一个网站前首先需要了解是为什么东西设计网页。每个网站都会有自己的风格。风格主要按该网页展示内容设定，因此需要了解网站展示的内容来确定风格。
二：网页设计如何来确定创意风格
网页最常见的大致有办公行政、服务、各式企业、纯商业网站或产品推广网站四大类。办公行政展现的是严谨、大方、内容为本；服务型的是以浪漫、温馨为主；各类企业一般都是采取清新、简洁、大方（跟办公行政类有点像，但形式上没有那么严谨，跟公司发展路线有关）；纯商业网站或产品推广网站则是抒情活泼的风格，画面上或许会大量采用图画。
第二阶段：网页主色调选择阶段
一：主色调含义跟作用
（一）：主色调作用
一个网页必有其主色调，确认风格后，就可挑主色调，一般一个网站只有一个主色调，这样好控制颜色搭配，若主色调多，页面容易混乱。
为什么设计师一开始设计就要确定主色调呢？如何理解主色调的作用？从视觉设计角度打个比方，一个企业往往会设计一个logo代表它，logo设计越出色、越适合企业形象，就证明它的代表性很强。例，看到铜钱，也许会想到工商银行logo也是铜钱的样子。它会不知不觉的打广告。经调查研究，主色调可分为两种形式，一是明确纯色的主色，二是有明确颜色变化方向的色调。
（二）：有明确纯色的主色含义
网页中有明确纯色的主色一般代表性强，视觉性强。例如淘宝，它的主色便是橙色了。橙色就成为淘宝的代表色了，看到淘宝我们便能想到橙色，反之也是如此。这便是视觉设计的效果了。
（三）：有明确颜色变化方向色调的主色含义
这种主色调不一定有第一种那么明确，反而更容易产生朦胧美，它也许是一张有明确颜色主色调的背景图片，也许是渐变色，或是明度变换后运用在网页各处，在整体上形成一种主色调。两者都能统一网页的风格，烘托主题。
二：主色选择步骤
（一）：主色选择步骤概论
选择主色有多种方法，可以从不同的角度选择主色。或是从色彩基本构成要素（色相、明度、纯度）着手。或是从色调着手。
经调查研究，最上手的方法是先从色调入手，选中色调后，再考虑色阶、明度。此法挑主色的范围可以简单的一层层缩小，不会因为颜色范围太大不知所措。纯度又指饱和度，简单理解为饱和度低，颜色暗沉；饱和度高，颜色鲜艳。一般纯商业网站或产品推广网站会使用较鲜艳的颜色吸引顾客。
（一）：色调选择
色调有冷暖之分，冷色调多为安静、清新、简洁；暖色调多为活泼、视觉冲击性强。例，环保型大多为绿色系，企业型大多为蓝、绿色，许多会选择跟logo搭配颜色。在确认启用主色调之后，开始挑色阶、明度。
（二）：色阶选择
色阶表示图像亮度强弱的指数标准，即颜色深浅。色彩千变万化，即使选择同一色调，其颜色的深浅所体现的视觉效果可能有截然相反的结果。同一色调，颜色深，一般会有沉稳、严肃的效果；颜色浅，一般会有一种鲜活的效果。
（三）：明度选择
色彩的明度指的是色彩的明暗程度。因明度分为不同色系之间跟同一色系之间，为了不搞混，就从同一色系中的色彩明度选择。例，暖色调中红色系，粉红色稍亮，紫红色稍暗；冷色调中天蓝稍亮，深蓝稍暗。看起来纯度明度相似，但明度跟纯度却不一定成正比。
第三阶段：网页配色选择阶段
一：配色的含义与作用
确认主色后，开始挑配色。一个网页不可能只有一种颜色，网页中有文字、logo、小图标、导航栏、背景等方面需要配色。在避免配色抢夺视觉效果下，适当运用配色，保持视觉的平衡、色调统一，主色占大部分，配色占小部分。为了让网页更美观，我们可以把视觉设计中学到的配色技巧运用到网页设计中。
二：配色选择方法
（一）：配色选择方法
配色可以通过色相配色、明度配色、纯度配色、强调冷暖色倾向配色、冷暖协调的配色。不同配色方法所呈现的视觉效果也不同。
（二）：色相配色
色相配色中单暖色调的配色，利用红、橙、黄在画面中占优势地位，会给人温暖感，有积极效果；在色相配色中单冷色调的配色，利用青、蓝、紫的冷色在画面中占优势地位，会给人寒冷感，有镇静、安神的效果。
（三）：明度配色
色彩的明度能够体现色彩的轻重感，明度配色能很好地表现网页空间感。例，黑、白、灰的配色。明度配色也可以运用到导航栏上。选择一种与主色适配的颜色作为导航栏背景色。因导航栏分多个模块，每个模块都可点击进入下个页面。在点击的过程中，为了突出点击的模块，增添动感跟空间感，一般会在鼠标放在模块上面的同时更换同一色系的明度。因需要保持网页整体色调的统一，颜色不能随意跟换，被更换的颜色大多与导航栏的颜色保持统一，在明度上进行变换。
（四）：纯度配色
纯度配色的作用是能简单明了的看出网页主题、重点。因为纯度的对比会形成视觉焦点。如网页产品展示图片，产品是高纯度比较鲜艳的颜色，背景一般使用低纯度颜色。那么在人体视觉上很容易能忽略背景，更能突出产品。
（五）：强调冷暖色倾向的配色
如果一个网页中把冷暖色调放在一起，冷暖对比则会比类似色的对比视觉效果更强烈，也会让画面更加丰富。当然，要注意冷暖色在网页中的主次地位。小面积使用鲜艳的冷暖色对比色相，即便整体颜色偏素雅，也可以给人生机勃勃的感觉。例如小图标的颜色运用，可参照此法。导航栏中，为了使画面更加活泼，也可运用此法，鼠标放到模块上，模块的背景颜色与原来的颜色可进行冷暖对比。
（六）：冷暖协调的配色
冷暖协调的配色会给人较强的韵律感，稳定的感觉，此法虽然没有以上三种方法的视觉冲击力强，但它的平衡感最稳定，因此也是让人看着最舒服的配色。黑色跟高纯度色彩放一起，在视觉上让高纯度的色彩显得更亮丽。因此在网页设计上文字大多用黑色衬托其他颜色的亮丽。白色跟高纯度色彩同一画面时，可以在视觉上提高纯色的明度，且会有透气、舒畅的感觉，不会很沉闷。导航栏上，若背景色较深，黑色的文字无法很好的显示，就可以运用白色文字，简单又透气。
在研究这个课题的过程中，主要通过了网页的创意风格定位阶段、网页的主色选择阶段、网页的配色选择阶段这三个步骤，把视觉传达中的色彩技巧运用在网页设计中，解释了如何进行网页创意风格定位，解释了为何要选择网页的主色以及如何选择主色，解释了如何在网页中进行配色。
参考文献：
[1]曹军，王诗彦，刘志农，陈德润，色彩形态构成[M]，中国民族摄影艺术出版社。
[2]曹军，王诗彦，刘志农，陈德润，色彩形态构成[M]，中国民族摄影艺术出版社。
[3]张晓景，设计师专业色谱与配色设计[M]，电子工业出版社，第1版（2011年10月1日）
关键词：网页设计；教学改革；案例教学；项目驱动
基金项目：梧州学院2010年院级教改项目“项目驱动式案例教学法在电子商务专业“动态网页设计”教学中的应用”
随着互联网的推广和普及，上网的人数越来越多，网页是互联网上信息传播的主要方式，因此《网页设计与制作》课程成为很多专业的基础课程。网页设计是一门很有创造性的课程，艰涩的学习过程和设计出的精美且具有创意的网页，让同学对这门课既畏惧又喜爱。我希望通过对以往一些教学过程的改革，使该门课程的学习过程也变得有意义，能吸引学生的兴趣，充分调动学生的积极性和创造性。
一、以往教学中存在的问题
在以往的教学中存在几点不足之处：1.教学内容的安排。课程主要内容是讲授网页三剑客，讲解网页设计工具的使用，大部分时间是教学生如何做一个网页，很少有时间教学生如何把一个网页做好；2.教材。教材是学生学习知识的主要来源，但是现在的很多教材都是泛泛而谈，说得不明白也不错误，学生不仅不能从中学到知识，反而越来越糊涂：3.考核方式。之前主要是笔试，对于网页设计这类操作性很强的课程，笔试并不能反映出学生的真实水平。
二、对教学内容改革的想法
网页设计是一门实践性和操作性很强的课程，在课程设计，教学内容，教学方法上，应该以调动学生的兴趣、实践操作能力和创造能力为主，以理论为辅；应该以传达给学生设计思路，创意为主，以技术讲解为辅；在这样的原则下，对教学内容改革作如下设计：
(一)第一阶段，案例教学法，以常用网站实例为例进行知识点的讲解。网页设计课程的入门阶段主要是一些知识点和技能技巧的学习，如果只是把这些知识点简单的介绍给学生，不会吸起学生的兴趣。所以应该改变一下教学方法。首先给同学看一下该知识点在一个具体网站应用的效果，再来告诉他们该如何实现这样的效果。比如，讲解这一对标签，先让同学看新浪网站上的滚动新闻，或者一些个人网站的文字图片等的滚动效果，这样先激发学生对这个知识的兴趣，再告诉他们怎么实现这样的效果，学生看到这样的漂亮效果，兴趣和积极性都调动起来了，就愿意主动地学习了。
(二)第二阶段，临摹优秀网站设计。在书法的学习中，有一个临摹的过程，在网页设计中，也可以使用此方法来练习和提高。在掌握了网站的常用技术之后，就需要开始设计网站，如果现在就直接给学生一个主题，让他们根据该主题来设计网页，学生会感到不知如何着手，第一阶段的知识只能让他们拼凑出一个网页，而对整个网页该怎样设计，如何才能让网页精美且与主题切合，学生是无法做到的。所以需要他们多学别人的网页，临摹别人的网页，在临摹的过程中，学会如何设计网页，学习网页的风格，网页的配色，网页的布局，以及如何审美网页。经过大量这样的临摹练习之后，才能学到不同的网页设计风格，并把别人有价值的东西转化为自己的知识，为以后的创作提供基础。通过该阶段的锻炼，使学生能够根据一个主题，利用自己的知识和创意，完整的设计出一个网页。
(三)第三阶段，项目驱动教学法。经过前两个阶段的学习和锻炼，学生对网页设计的基础知识和技能，对网页设计风格和布局有了比较全面的了解。这个时候就需要给他们一些具体的实践机会，让他们在实践中，使自己的技能、水平得到锤炼和提升。要实现真正的项目驱动教学法，需要找到一些实际的网站项目让学生去实践。可以将学校和系部的一些网站在老师的指导下让学生来完成；也可以在外面找一些公司的网站让学生来做。通过这样的方式，可以让学生在多方面获得益处：1.可以让学生的知识学有所用，设计出的网站被社会认可会，止学生体会的学习快乐，从而给他们提供新的学习动力；2.可以让学生学到给多的知识，课堂上的内容是有限的，实际的网站制作过程，会让学生在实践中学习更多的有用知识；3.可以锻炼学生的团体意识，使他们认识到：网站的设计和开发不是一个人就能够完成的，他需要一个团队的共同努力，需要团队之间的相互配合和胁作。所以，通过项目驱动教学，能使学生得以实践，在多方面得到提高和锻炼。
三、对教材选取和考核方式的想法
(一)教材的选取。网页设计课程设计的内容主要包括四方面：HTML、Dreamweaver、Fireworks、Flash。现在的教材中，讲解得不够详细，只是泛泛而谈。这就给学生的学习带来很多困扰。可以从两个方面弥补这个问题：一是给学生推荐好的参考书，并告知学生其中的重点和非重点，让学生学习有的放矢；二是编写适合自己教学需要的教材。
(二)考核方式的改革。该课程的考核内容应以实践操作为主。因此将考核方式定为考查，给出一定范围的主题，留给学生足够的时间完成作品的设计和制作，最后上交制作好的作品即可。留给学生足够的时间和发挥空间，可以使学生充分发挥他们的想象力和所学知识。这样的一种考核方式经过几届学生的实践，受到同学的好评，并且出现了相当一部分好的作品。
经过几年的教学实践和教学改革探索，以上的一些教学思路已经过教学实践验证，这样的教学方式受到学生的欢迎。该教学改革能为学生打下牢固的基础，也能够更好的调动学生的积极性和创造性，培养他们的团队意识。教学改革是一个不断进行的过程，以后也要根据教学实践，在教学改革上做出更多有益的尝试。
参考文献
[1]李淑珍，李晓宾《网页设计与制作》课程在不同阶段的不同教学方法探讨[J].软件导刊2008(4)：138-139
在我国，视觉传达教育起步较晚，但是发展迅速，其人才培养和教育模式倍受社会关注。目前很多高校在艺术类网页设计课程的教学上存在两种主要现象：一是重设计、轻制作；二是重软件、轻艺术。第一种培养出的学生一般只注重静态页面的视觉效果，对网站的动态更新关注较少，不利于网页后期维护；第二种培养出的学生侧重于Dreamweaver、Flash等软件的操作，对网页的版式、VI形象等关注较少，制作出的网页往往缺乏个性、艺术表现力不强。因此，对视觉传达专业的网页设计课程的教学改革势在必行。
二、课程教学目标的重新确定
我们都知道，一门学科的课程目标通常决定了该学科的最终导向，它不仅能为教师传授正确的学科理念提供依据，同时也给学生指明正确的课程学习方向。因此，视觉传达专业网页设计课程改革的首要环节就是对该课程教学目标的重新确立。众所周知，高等教育培养出来的人才最终要服务于社会，社会的需求决定了该学科的教学内容和教学目标。随着科技的进步，时代的发展，不同时期对网页设计人员的需求也是不同的。通过市场调研，我发现目前社会上网站分工越来越细，招聘的相关岗位大体分为三类：第一类为前台美工，以视觉传达专业为主，以网站的形象塑造和界面美化为岗位内容；第二类为网站后台服务，多以h7V5数据库等做交互型网站的，以计算机专业为主；第三类就是两者都要具备的全才网页设计师，是具有技术背景和多年实战经验的创意人才。由此我们可以确定视觉传达专业培养出来的网页设计人才的岗位定位应是网页美工师，他应该具有两种专业素质：一是掌握网页设计的基本要素和美学知识相结合的方法与技巧；二是懂得简单机算计软件（PS、Dreamweaver、Flash）的操作，便于在制作网页界面时考虑到后台维护的便利。而“艺术设计教育的人才培养目标是：培养综合素质高、创造能力强的高级应用型设计人才”。所以该课程教学目标应该是培养具有以上两种专业综合素质的、创造能力强的高级网络应用型设计人才。新的培养目标确定后，该课程的教学内容应该在此基础上重新调整。
三、课程内容的调整
视觉传达专业网页设计课程教学内容应该为教学目标服务，知识结构要合理，应注意知识点之间的交叉及有机结合，同时也要有效地培养学生的创新性思维及独立分析、解决问题的能力。基于此，新的教学内容调整为两大板块：理论课程内容和实践课程内容。
1.理论课程内容
理论课程内容在课程编排中为最先讲授内容，以教师PPT演示传授为主，学生讨论互动为辅，课时安排为总学时的四分之一。在教学过程中又分为两个环节来实现：（1）第一次课的设计把第一次课设置为课程概述，主要对网页设计课程的教学特点、教学内容、教学目的、教学重点和难点加以通篇介绍，对学生说明课程安排和考核要求，并通过简单上机实例操作来提高学生学习兴趣，进而引入网页基本理论教学环节。（2）网页基本理论学习网页基本理论学习包含三个知识板块：网页设计的基本要素、网页界面的版式设计、网页VI形象的美学塑造。我们知道每个设计门类都有自己独特的构成元素，这些不同的构成元素形成了该门类不同于别的门类的独特的艺术魅力。了解和掌握这些构成元素的特点和作用，有助于我们更好地进行设计工作。网页构成元素按功能和形式划分为两大类型，按功能划分为页眉和页脚、背景与底纹、按钮与控件、导航器和目录、功能板块和广告位；按形式分为文字、图片、色彩、多媒体和超级链接。网页设计中的构成语言不同于传统平面设计，它们之间存在很大差异，例如网页设计中的颜色是光色，是标准的RGB色彩，而传统平面设计中的颜色在输出过程中是以印刷色CMYK形式出现的；传统的平面设计不用考虑网络传输的因素，而网页设计中的构成元素应考虑在不影响显示效果的前题下，尽量压缩文件大小，便于网页文件的上传与下载；又如动画、音频等多媒体语言在传统平面设计中不用考虑，而在网页设计中它们是给网页增加活力的重要手段因此，教师在此板块教学中要选择大量实例进行比较，不但要指出网页设计各构成元素的特点和作用，而且还应指出与平面设计中相对应元素的异同之处，便于学生区别学习。网页界面的版式设计不同于传统平面设计的版式设计。平面印刷品有着各自固定的纸张大小或裁切规格，而网页界面则不然，它的显示尺寸受到电脑显示器的限制，不同尺寸的显示器显示的网页界面是有区别的。除此以外，它的最终显示控制权其实掌握在浏览者手中。如果过分注重网页界面版式设计的视觉完整性，就不能顾及网页设计元素的灵活性。所以，教师在此板块教学中应该强调网页界面版式的变化性，同时也要强调首页与内页版式的连贯性，要求学生在设计中注意网页界面版式完整性与灵活性的关系。网页设计是VI设计的一个重要组成部分，是企业视觉形象执行标准的延续和拓展。和所有的线下公司一样，一个好的网站也需要依助于VI设计。准确的、有创意的VI设计，有利于树立网站形象，使其在众多同类网站中脱颖而出，增加浏览者的浏览欲望和浏览记忆，对该企业的推广和宣传也能起到促进作用。网页设计课程上引入VI设计概念，教师应该保持教学的延续性，要求学生在进行网页设计的同时，将VI理念应用到网页界面中。网页设计应主题突出、富有创意，色彩搭配应协调统一，具有强烈的视觉冲击力，从网页LOGO到色彩运用均要突出企业视觉形象。
2.实践课程内容
视觉传达教育的目的就是培养出创造能力强的高级应用型设计人才。应用性人才的培养模式里实践性课程比例要大，网页设计课程也是这样，理论是基础，实践是灵魂。所以实践课程内容在课程编排中为比重最大的内容，课时安排为总学时的四分之三。实践课程包含软件操作板块、简单代码学习板块和实际案例制作板块三个知识点。此部分内容在教学过程中又分为两个环节来实现：
（1）软件操作和简单代码学习板块的教学
此部分教学为计算机软件学习阶段，Fireworks、Dreamweaver、Flash是传统的网页设计软件学习内容，根据当今互联网开放性的特点和视觉传达学生对现有软件知识掌握的情况（PS是基本功，是学生都已掌握的软件），把传统软件教学内容更改为“网页新三剑客”（PS+Dreamweaver+Flash）的学习。简单地说，就是用PS制作静态网页界面和切图，并处理图片，用Dreamweaver布局和超级链接，用Flash做特效。而这三个软件知识板块里面教学重点依次为Dreamweaver、Flash、PS。在软件教学环节，教师可借助类似“红蜘蛛”一样的网络教学平台和学生互动教学。学生可根据老师在线传送的素材临摹教师的操作，教师也可以在线观察学生执行情况个别辅导。同时根据艺术学生英语和数学水平普遍较低的特点，在教学中应该增加一些简单代码知识，介绍一些常用的代码语言及Html标签和CSS规则的使用方法，便于优化网页样式，使整个网站风格统一，也便于对已有的网页模板进行更改，进而大大提高学生的岗位实践技能。
（2）实际案例制作教学
此板块教学采用以项目为载体、以任务为驱动的教学方法。教师可以引入实际项目或者虚拟项目，提出项目名称和项目要求，辅导学生进行实际案例设计。实际案例制作教学应充分强调实用性和自主性，教学环节可分三步进行。首先是教师示范环节：教师要根据实例要求演示创作过程，从网站创意草图到制作静态界面；从创建站点到Dreamweaver网页布局，创建超级链接；从美化网页样式，到制作网页特效，利用简单的代码语言和Flas实现动态、实时、交互的页面效果教师应将每个创作环节一一展示，并将知识点设计应用到整个案例实际操作中去，做到知识点与案例有效融合，案例之间能承上启下，有机衔接。其次为学生设计环节：学生可以根据老师的思路对经典案例进行学习和分析，依据实际任务的要求，进行网页设计实际操作。其间遇到问题学生可以相互讨论，或求助教师解决难题。在整个讲课过程中，教师指导为辅，学生对案例进行学习和分析为主，充分发挥学生的主观能动性。要求学生充分发挥创意性思维，从被动学习转换为为了实现项目目标而进行多渠道主动学习，提高学生学习效率，缩短和实际岗位间的操作差距，进而为走向社会奠定基础。最后为展示评价环节：学生对自己的作品公开演示汇报，并鼓励别的学生对其作品评价，找出优劣点，好的保留，差的改正。教师根据作品质量和学生评价对作品打分，以此作为该生整门课程成绩的一个依据。
四、结语
