选修课论文

姓

学

学

专

指 导

名： 沈基旺 号： 20xxxxxxxxxxxx8 院： 商学院 业： 会计 教 师： 孙斌 年4月5日 1 2013

目录

一、引言..............................................................................................................3

二、网页设计流程..............................................................................................3

三、网页制作......................................................................................................4

(一)制作步骤................................................................................................4

(二)常用参数................................................................................................4

(三)网页布局................................................................................................5

(四)网页色彩................................................................................................6

(五)细节把握................................................................................................8

(六)常用工具介绍........................................................................................9

四、网页制作实例..............................................................................................10

五、参考文献.......................................................................................................10

浅谈网页设计

程瑞玲 指导老师：王忠

2

交通与信息学院 2009级计算机应用专业

【摘要】网页设计既是一门全新的设计领域，又是平面设计在信息时代的多元化发展的一个重要方向。文章以上海银龙网站为例，诠释了网页设计，并分析了网页设计与平面设计有着相同的视觉传达和审美目的，但在设计范畴等方面和平面设计有着不同特点。这些不同之处是由网络技术的特性决定的。网页设计是设计艺术与网络技术的结合,是对传统平面设计的延续和革新。

关键词 网页 色彩 布局 HTML

一、引言

随着网络的发展，很多企事业单位和广大普通网民对建立自己的网站的需求越来越强烈。中国互联网信息中心统计的数据显示，截止20xx年6月30日，我国的上网用户总人数为3.38亿人，我国网民规模、宽带网民数、国家顶级域名注册量(1296万)三项指标仍然稳居世界第一，互联网普及率稳步提升。可见。我们已经离不开互联网了，它已成为我们生活的一部分。

二、网站设计的流程

1、策划：

首先要线对要做的项目进行了解，找相关的材料，只有了解产品的性质才能更好的设计网站，，对网站的定位、背景、预期、有一个充分的认识。与客户沟通，根据客户的的要求进行策划，这里的银龙网站，是属于农业类的网站，主要用户群是普通人群，，希望呈现给客户的网站的一个专业的就有特色的，同事还要推销出农产品打分特色，网站以绿色为主色，橙黄和红色作为点缀，是整个网站看起来健康清新。

2、粗略定局：

在前期策划沟通了一定的结果后，就可以开始设计草稿，也称初稿，可以是手绘，也可以是电脑绘制，现在我们一般都是直接跳过手绘，直接电脑制作，如果客户有要求也会手绘草稿，也就是初稿，不需要太规整，只要拍出他需要的模块，一级初级功能，网站的走向流程，体验下 网站可不可行，功能上是否有缺失，布局是否有问题，网站初稿通过，可就可以进行下一步了。

3、定稿：

3

根据前期的工作，接下来可以开始设计，整个网站，用photoshop或其他工具制作出效果图，在首页上要突显的是农庄的特色，首页制作完成后交给客户验收，然后给客户确定，待所有的页面都经过客户确定后，完成网页制作进程，交给程序员添加程序。

四、网页制作：

（一）制作步骤

网站网站是网页的集合。一个站点的所有网页构成一个网站，网页是网站的表现形势，网页设计是针对整体网页设计，包括布局，色彩，风格，内容，功能等。网页设计包含的内容非常多，答题分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片、平面设计，静态图文和动态声音、影像等；另一方面就是网站的延伸设计，包括网站主题、浏览群的定位、只能交互、制作策划、形象包装和轩窗营销等。

（二）常用参数

制作网页，我们要考虑到网速的问题，图片的大小，对传输速度的影响，如果图片过大就回影响浏览速度，访问者就会容易很快对这个网站失去兴趣，只有成分了解图片质量和下载速度广西，并了解不同的文件格式，才能更有效的表达内容。

1、分辨率

因为要通过显示器页面， 显示器的分辨率起绝对作用，大多数显示器使用的是1024*768的分辨率，所以用分辨率并不会增加图片质量相反还会降低图片下载速度。

2、位图

习惯性称为图像，而将矢量图成为图形，位图是映射图像的简称，也可以栅格图。它将衣服图像分成N个栅格，栅格的每一个点就是图像的像素，其值就是像素打分亮度和色彩度，扩大位图的尺寸的效果是增多像素，从而讲使线条和形状显的参差不齐，位图去分辨率密切相关，因此在处理位图时，必须设置合适的图像分辨率。否则输出图像是会遗漏细节，是图像模糊。

3、矢量

矢量图也称为面向对象的图像或绘图图像，繁体版本上称之为向量图，是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的 4

逼真图像效果。 矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其它对象。这些特征使基于矢量的程序特别适用于图例和三维建模，因为它们通常要求能创建和操作单个对象。基于矢量的绘图同分辨率无关。这意味着它们可以按最高分辨率显示到输出设备上。

4、图片格式

网页制作好，可以保存为给中格式，其中包括gif、jpg、png等，gif格式即图形交换格式，其图片只能使用256种颜色，不适合显示色彩丰富的图像内容。其特点是1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。Jpg可以显示颜色复杂的图片，但是在处理面积大的色块是可能会出现明显的压缩痕迹。Png格式的图片兼有gif和jpg的优点。

（三）网页布局

常见的网页布局结构有以下几种：

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 。 综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术。

（四）网页色彩

色彩作为视觉信息无时无刻不在影响着人类的正常生活。美妙的自然色彩刺激和感染着人的视觉和情感，陶冶着人的情操，提供给人们丰富的视觉空间。学习和研究色彩的只是和理论体系，才能更深刻、全面、科学地认识色彩，改版视觉和思维方式。激发创造热情，丰富和充实色彩资源“储蓄”，逐步走向自由驾驭色彩的天地。

1、色彩属性

5

色彩的三个属性：色相(Hue)表示色的特质，是区别色彩的必要名称，例如红、黄、橙等，色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异；明度：(Value)色彩的强度，是指色彩感觉的明亮或晦暗程度，包括本身的明暗程度或是一种色相在不同强弱光线下呈现的明暗程度。

彩度(Chroma)：又叫纯度，表示色彩的饱和度。具体来说，是表明一种是否含有白或黑的成分，它如果不含黑或白的成分就说明纯度越高。

一般网页中用216网页安全色彩，它在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示色彩集合，也就是说在任何浏览用户显示设备上都能显示相同的效果的色彩，避免失真而问题。

2.色彩心理表现

蓝色——蓝天白云，沉静整洁的颜色。蓝色是幸福色，表示希望、科技、理智、诚实、真实和可信，在西方蓝色是身份高贵的象征。

绿色——绿白相间，雅致而有生气。绿色为植物的原色，表示健康、自然、和平、清新安静。虽然象征生命，但是在网络上一绿色为主色的网站不多。如果将它与蓝色、黄色搭配，就是设和更多信息类型我那个站，并增加一丝活泼、轻快的感觉。 橙色——活泼热烈，标准的商业色调。橙色表示温暖、健康、欢喜。它既有红色的热情，又有黄色的光明，以及活泼的特质，是人们普遍喜欢的色彩。

暗红——宁重、严肃、高贵，需要配黑灰来压制刺激的红色。

3、颜色的忌讳

忌脏：背景与文字内容对比不强烈，灰暗的背景令人沮丧。

忌纯：艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。

忌跳：再好看的颜色，也不能脱离整体。

忌花：要有一种主色贯穿其中，主色并不是面积最大的颜色，而最重要最能揭示和反映主题颜色，就像领导一样，虽然在人数上居少数，但起绝对作用。 忌粉：颜色浅固然显的干净，但如果对比过弱，整的苍白无力了。

4、几种固定搭配

蓝白橙：蓝色为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。

绿白蓝：绿色为主调。白底，绿标题栏，蓝色或橙色按钮或ICON做点缀。 橙白红：橙色为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。 6

暗红黑：暗红主调，黑或灰底，暗红标题栏，文字内容背景为浅灰。

5、色彩表达的感觉

不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知，对色彩搭配所产生的心理联想，会导致不同的心理反应。

空间感——色彩的空间感与色彩对比的知觉度有关，对比度强和高纯度的色彩具有前进感，对比度弱和低纯度色的色彩具有后退感。

色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。

亲切感——色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。

使用具有亲切感的色彩，可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。

庄重感——通常，明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配，搭配不当则会产生沉闷、呆板的感觉。

神秘感——色彩的神秘感，并不是色彩本身具有的，而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩，多为明度较低、色相不明确、纯度也不高的色彩，如昏黄的氛围、幽暗的巷子、夜晚的角落，都可以用来营造色彩的神秘感。

兴奋和忧郁感——色彩和人的个性一样，具有明朗与忧郁的区分。明朗的色彩必然是明度高、对比较强的色彩，以及纯度偏纯的色彩，忧郁的色彩则是明度低、对比较弱的色彩，以及纯度偏低且色性偏冷的色彩。

一般来说，暖色较易引起心理的亢奋和积极性，属于兴奋色，其中朱红色最具兴奋作用，其他明度较高、纯度较高的颜色（如黄色、橘黄色等）也具有煽动性、倾向于兴奋色。

6、配色方案

7

采用不同色调的同一色相时，称之为统一色相配色；而采用浪测相近颜色时陈志伟相似色想配色。类似色相到时指色相环中相邻的两种色相。同一色相配合和相邻色相配色时，会给人一种安静整齐的感觉。

类似色调配色是指色调相近的配色方式。相反色调配色是色调较远的配色方式，如明清色和暗清色调的配色方式。

鲜艳色调：鲜艳色调的功能特点是色彩艳丽鲜明，强烈生动，有视觉冲击力。色彩感强的设计容易减弱形态感和材质感，在有大量配图的网页上，设计是要注意引起注意。

明亮色调：可以称作宝石色调，清澈而有光辉。忧郁它的明度与纯度都比较高，因此在配色中容易突出，是整个色彩活泼明朗、温和快乐。在需要体现柔美、轻快的网站风格时常用这一色调。

朴素色调：这一色调是浊色调，因为他们都含有不同程度的灰度，明度、纯度都不高，这些色调的配色容易取得稳重、朴实、传统和古典的效果，偏于保守，但又能显示出一定的风格。

深暗色调：有彩色中最深暗的3个色调，属暗清色调。它的色彩厚实，有趣味感，能使人感到厚重、致密、严肃，能表达古典美、机械美。

无彩色色调：没有色彩的感觉，只有浓淡区分的一组色调，给人以冷淡而理智的印象。无彩色本身容易调和，与有彩色配色也易于取得调和效果。

（五）细节把握

网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。

1． 颜色。

在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。

2．线条的运用。

很多朋友在制作网页的时候，在两块过渡的地方，如banner和导航条之间会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀。 8

3．图标。

网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。

4．文字。

网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。

（六）常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

Photoshop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和

Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

四、网页制作实例

1．我以上海银龙网站为例，该网站以农业企业、特色农产品营销为中心的面向企业分销商和高端个人消费者的农产品网络营销网站，我以绿色为主，蓝、橙色为点缀，使网站健康、清新。

9

2．利用PS来进行具体的设计，利用辅助线画出框架图，不同模块之间要画两条辅助线，并留一定的距离，便于对网页的控制，接下便可以制作企业的logo、广告条、导航条等主要内容，然后依次完成其他模块的制作。

3．对色彩、文字的排版、导航条、底部内容进行细化，使网站达到一定的品质感，完成首页的全部制作后就可以把做好的页面发给客户确定。

4.首页确定以后，便开始内页的制作，内页的制作相对简单，保持首页的整体风格不变，对相应的版块就行修改即可，相同模块的内容只需要制作一个即可，内页制作完成后发给客户确定，完成整个网页的设计，并交给程序员切片添加程序。

以本人在上海吉运软件技术有限公司实习过程中，通过对其页面的制作，结合本论文写作，将主页（index.asp）效果图/展示如图1所示。

五、参考文献

[1]梁景红,网站设计与网页配色.人民邮电出版社，2004.8

[2]周陟，网页设计解析.清华大学出版社，2009.3

[3]许凌云，柳勇良.网页设计全方位学习[M].北京：清华大学出版社，2008，11

[4]陈琳.photoshop cs3 入门实战与提高[M].北京：电子工业出版社，2008，11

[5]卓越科技.PHOTOSHOP CS3 美工广告设计百炼成精[M].电子科技出版社，2009，3

[6]邓文渊.网页制作高手[M].北京：人民邮电大学出版，2007.6

[7]李宪广.网页制作边学边用[M].北京：清华大学出版社，2009.3

[8]戴一波.Dreamweaver CS3网站制作炫例精讲[M].北京：电子工业出版社 2008.1

[9]何秀芳.网页制作与网站建设课堂实录[M].北京：人民邮电出版社. 2009.3

[10]孙连三.新编网页制作与网站建设入门与提高[M].人民邮电出版社. 2008.9

[11]邓文渊.网页制作高手FLASH 8[M].北京：人民邮电出版社,2007.6

[12]胡崧.超梦幻劲爆网页[M].中国青年出版社.2008.7

10