怎么设计网页

网页设计——根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

网页设计常用的工具包括AI、PS、FL、FW、DW等。

网页，是网站中的任何一页面，通常是HTML（是标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页通常用图像档来提供图画，网页要使用网页浏览器来阅读。

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制

作软件，就能搞好网页设计了。

其实网页设计是一银带嫌个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的

任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西

，并非在软件的应用上，而是在我们对网页设计的理解以及设计制作的水平上，在于我

们自身的美感以及对页面的把握上。

首先，我们要弄清楚网页设计的任务。

一、设计的任务

设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并

非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的

任务也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量

的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的

亲和等问题。

第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设

计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。然

而就现状上来看，这类网站有粗制滥造的嫌疑。

第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有

几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对

设计者的美工水平要求较高。

当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘

了最重要的一点，那就是客户的要求，它也属于设计的任务。

明确了设计的任务之后，接下来要想的就是如何完成这个任务了。

二、设计的实现

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在

纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，这里

面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页

面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个锋手软件的好坏，

只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件。当然，它应该

能满足设计者的要求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、

Flash以及Adobe的Photoshop、imageready，这些都是很不错的软件。

接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在

Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都

是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计

是失败的。在制作的过程中，我们会碰到许多问题，其中最敏感的莫过于页面的颜色

了。

四、造型的组合

在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一

个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要

素点、线、面来进行处理。在一幅成功的作品里，是需要行指点、线、面的共同组合与搭配

来构造整个页面的。

通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、

交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应

根据具体情况，选择最适合的表现手法，这样有利于主题的表现。

通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让

观者在感受美的过程中领会设计的主题，从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上

的各种元素有机的组织起来，它甚至还可以引导观者的视线。

三、色彩的运用

色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红

色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，

显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和

平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感

觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种

色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们

的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一

个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水

平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如

绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、

淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配

则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应

尽量使用网页安全色。

但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经

验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和

对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目

的视觉效果。

五、设计的原则

设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的

原则：统一、连贯、分割、对比及和谐。

统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中

切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表

现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯

，使整个页面设计的各个部分极为融洽，犹如一气呵成。

分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了

然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不

仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归

纳。

对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与

直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、

聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线

条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传

达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受

形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。

六、网页的优化

在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速

度和页面的适应性，影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用

css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，

颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，

我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。

图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下将其size降至最低

，这样可以成倍地提高网页的下载速度。利用Photoshop6或Fireworks4可以将图片切

成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们

把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优

化为gif，这是由这两种格式的特点决定的。

表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、

高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来

定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取

网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个

子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等

待多时无结果，按停止按钮却一下显示出页面就是这个原因。因此，我们在设计页面

表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要

少。在使用Dreamweaver制作网页时，会自动在每一个td内添加一个空字符“ ”。如果

单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源

代码内将其删去。

网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们

将会看到不同的结果，因此设计时要统筹考虑。一般我们在800*600下制作网页，最佳

浏览效果也是在800*600分辨率下，在其它情况下只要保证基本一致，不出现较大问题

即可。

说了这么多，只是希望能对做“网页设计”的人有所帮助，希望他们在做网页的时候能

够从整体着眼，无愧于“设计”这两个字。顺便说一下，本文只代表本人个人观点，仅

供参考。

对于网页的框架与定位,这个是很难说得清楚的,这要看你在做网站时,对网站的

规划,并不能一并而论的,如果你没有这方面的经验,就多多在网上看看别人是如何设计

的吧,是非常的用的,可以把他们给抓下来,做个图库,方便自己设计

其实看看一些设计精良的网页，会对自己有很大的作用，

把别人的网页下载下来，再用相关的软件，进行分析，

可以学到许多的东西的，是一种快捷的学习方法，

但决不是COPY

我认为首要的是突出主题

一个好的网站(个人的只能算做网页)最首要的是突出你的主题,在别人搜索或访问时首

先就看有没有自己所需要的内容,要么就直奔主题.然后再在主题鲜明的基础上做好框架

设计.一个好的网站要做到层次分明,结构合理,让人一看就能明白你想要表达的中心思

想是什么,以及怎样才能以以最快的速度找到自己想要的内容.这两个主要问题解决后再

在一些细节上加以润色,就能制作出赏心悦目的网站.

1. 首先确定网页的尺拆枝目的和主题，确定网页的定位和受众人群。2. 对网页进行规划，如布局、配色、字体等方面进行设计。3. 设计网页的导航栏，确保用户能够方便地找到所需信息。4. 编写网页的HTML和CSS代码，并在必要时添加JavaScript代码。5. 检查和测试网页的渲染效果御差和功能，确保网页能正常地在各种浏览器和设备上正常呈现。6. 优化网页的性能和便于搜索引擎收录。7. 发布网页并进行后续的分析和维护工作陵敏。

一般都是用Photoshop 来做设计的...

多去看看好的网站吧。

1、内容明确

在设计制作网页的时候，首先要考虑的就是网站的内容，一个网页在设计的时候明确了内容，才能将网站进行精准的定位从而确定网站的具体功能，明确内容后整个设计都应该围绕这个方面来进行，针对用户的具体需求来进行网站的设计。

2、色彩选择

色彩搭配是一个网站风格组成的不可缺少的重要因素之一，也是在用户初次访问网站是吸引客户的一个重要因素，这是个非常重要的手段。每一个网站都应该有一个属于自己的主题颜色誉毕，确定主题颜色后可以围绕这个主题颜色引画出辅助颜色和渐变色来点缀网页色彩，让客户看一件就能方便用户更好的识别这个网站，所以大家一定要注意我在色彩的搭配，，这样就避免了用户因为不能迅速进入网站或因为操作不方便而进入了对手网站。

3、内容优化

网站的内容是核心部分，企业的网站就好比是广告册，如果里面有大量的图片的话，会影响到网页打开并加载图片的速度。因此，网站的内容要丰富多样化，图文并茂，简洁有新意，让用户在最短的时间内找到自己需要的信息，这样网站的设谈让计才是成功的。

4、设计情感化

一个好的设计师在设计网页的时候，是可以把自己的感情融入之中，古往今来出名的画家的每一个作品都是生活活的把自己当时的情感表达出来，设计师也是一样能把情感融入到设计中，设计出来的作品才是优秀的作品，要随时注意网站的运营情况。由于即使是性能良好的主机也会因为访问人数增多而运行缓慢。因此，只有不断地计划将网站进行升级才不会失去大量的访问者。

5、提升网站下载速度 关注一品威客网

在用户浏览网页时，最忍受不了的就是网页打开时候加载页面了。也相信大家都遇到错这样的情况，好不容易找打了自己想要的网页，可以打开时候一直在加载，迟迟打不开而放弃，有统计显示，一般在选择要看的页面开始算，经过互联网下载到自己的电脑上做多不能超过30秒，如果超过的话大部分人都是选择放弃的，因此，标准的网页不应该大于60k，过大的页面会让用户由于等待时间过长而失去浏览的兴趣。

6、学习html

html是个非常简单的编程语言，也是网页前端设计的基础，下载互联网上很容易找到一些html的学习资料，如果不懂HTML，可以通过购买网页设计的工具来创建网站，古月建站最初就是使用Dreamweaver来设计网页的，上网学会了切图和div+css，下载比较流行html5+css5。因此，为了更好更成功庆侍芹的设计网站，要提前了解HTML是怎样工作的。使用HTML来设计网站，能够控制设计的全过程。这个虽然难度不高但是比较繁琐，稍不注意就会出错，还好现在有专业工具可以检测统计，如果是网站设计新手的话，可以选择一个网页的设计工具来帮助学习HTML。