网页设计技巧经验

网页设计技巧经验

色彩是艺术表现的要素之一，在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。下面介绍网页设计技巧经验，希望可以为您带来帮助。

1.色彩在网页设计中的作用。

色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS(企业形象识别系统)，我们将按照其中的VI进行色彩运用。

2.简化网页代码。

搭建网页前端的时候，使用有语义的代码。用描述性的标签组织页面结构，可以提高内容对搜索引擎的可读性。这也会让修饰页面的工作变得更简单干净。

3.模块化和可修改性强。

模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就涉及一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。

无论是架构还是模块或图片，都要考虑可修改性强。举个简单的例子，logo、按钮等，很多人喜欢制作图片，N个按钮就是N张图片。

如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了

4.版式设计通过文字图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。

为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。

5.避免使用Flash或者图片作导航栏。

FLASH虽然有着漂亮的效果，但对于搜索引擎优化来说很不友好，因此我们建议不要用FLASH和图片作为导航。

网页设计中表格和层排版的使用技巧

表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方便，可以设为隐藏，还可以添加许多行为来丰富页面效果。所以，很多情况下，可以同时使用表格与层搭配进行排版，既可以使用到表格的整体规范性，又可以利用到层的灵活性与丰富功能，从而设计出更加精彩的页面。

使用表格和层排版

在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。

表格排版

在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。

层转换成表格排版

前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：

(1)首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象;

(2)在页面中绘制若干个层，把页面中的各元素添加到层里面;

(3)把每个层自由地排列到页面中各个相应的位置;

(4)使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。

排版时容易出现的问题及解决方法

整体表格排版出现的问题

有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。

层排版出现位置偏差

在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。

结语

总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。

网页设计步骤是什么

1布局

页面布局，是对整个网页的整体规划，包括页面尺寸确定、整体造型设计、各类元素(页头、文本、页脚、图片、多媒体)的大致摆放等问题。页面的尺寸大小应根据分辨率大小来进行设定，正确的宽度尺寸是比分辨率宽度值偏小。向下拖动页面是惟一给网页增加更多内容(尺寸)的方法，一般来说，除非你能肯定网页的内容能吸引访问者不厌其烦地拖动，否则不要让页面拖动超过三屏。网页拖动超过三屏，最好考虑在页面内做一个内部链接。

整体造型是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。整个页面的造型可运用自然界中的其它形状以及它们的组合，例如矩形，圆形，三角形，动物形状等。不同的形状，所代表的意义是不是同的。像矩形代表正式、规则，多用于制作政府网页;圆形体现的是柔和、团圆、安全、团结等，多用于制作时尚站点以及节日庆典时产品的宣传;三角形代表警示和危机等，多用在带有警示性的报道中;动物形象代表可爱、亲近，像许多关于幼儿的网页都采用了动物的卡通形象。

页头又可以称之为页眉，它的作用是定义页面的主题，常放置站点的图片、公司标志旗帜以及广告。一个站点的名字也多数显示在页眉里，这样访问者一打开网站便能很快知道这个站点是什么内容。文本在页面中出现都以行或块(段落)出现，它们的摆放位置决定着整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。页脚通常是放置制作者信息或是公司信息，和页头首尾相呼应。图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。多媒体包括声音、视频和动画等其它媒体，随着现代技术的发展以及动态网页的兴起，它们在网页布局上也是一个不可或缺的重要基本环节。以上各元素的摆放位置，无不体现着制作者的布局思维，影响着整个网页的设计效果。

布局的方法可采用纸上布局法或采用photoshop、coreldraw等软件布局法两种。纸上布局法是通过纸笔的方式，将大致思路画于纸上。而photoshop、coreldraw等软件布局法，是通过photoshop、coreldraw等软件，将布局思路画出来，需要网页制作者对photoshop、coreldraw等软件所具有的图像编辑功能也要能够熟练掌握。从色彩和形象角度来说，后者更胜一筹，尤其是可以利用层的功能设计出用纸张无法实现的布局意念。网页布局的技术可以选择以下三种：应用层叠样式(css)、表格布局或者框架布局。CSS能够完全精确的定位文本和图片。采用表格布局能对不同的对象加以处理，而又不用担心不同对象之间的影响，在定位图片和文本上比用CSS更加方便，需要掌握的专业技术低。使用框架布局可以非常方便地在浏览器中同时浏览不同的页面效果，并且每个框架之间的内容相对独立，内容过长时可以有自己独立的滚动条，互不干扰，不失为一个布局的好方法。

2色彩选择

制定好网页的布局，确定了网页想要突出的主题之后，接下来就要为网页选择合适的色彩方案。不同的颜色可以给人不同的心理感受，表达不同的情感，具有不同的宣传效果。

好的准确的色彩能够传达给人正确的信息品质。对于一个好的网页，有针对性的主题色彩相当重要。不仅要和所要表达的内容与气氛相适应，还要与网页的精神内涵相关联。如何选择正确的色系，在网站开始动手制作前，就应该做好规划设计。整个网站用什么样的底色，什么样的艺术字色系、什么色系的图片才能搭配，用什么样的颜色作边框等，这些都应该在必须考虑的范围。

网页中的各构成要素

1、风格定位

对于设计某个网站来说，要做的第一步工作就是确定网站整体的风格，不同的网站需要有不同的风格，其风格要与主题内容相统一。目前，网页的种类很多，较为常见的有：新闻机构类、政府机关类、科教文化类、娱乐艺术类、电子商务类、个性化网页类。这些不同性质的网页应体现不同的风格，比如，娱乐类网页风格应体现活泼生动一些，政府机关类网页应体现出比较庄重、严肃的感觉。在统一的风格页面中，添加图片、文字、动画等元素，来丰富页面内容，在添加这些元素的过程中也要注意色调的统一，这就需要设计师具备良好的美术修养。

2、版面排版

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。当我们确定了网页总体风格之后，我们要根据现有的图片、文字等素材进行页面划分，文字作为最原始、最有力的信息传递方式，在网页设计中也是至关重要的。

3、色彩的运用

在网页设计中，好的色彩搭配是网页设计成功的一半。在一个色彩搭配具备专业水平的网站，即使只使用很少的图形，仍会带给浏览者深刻的印象和舒适的视觉感受。一般来说，色彩，在一个页面不应超过三个，其中择一为主色调;应恰当使用颜色蕴含的文化心理信息。色彩的运用遵循“总体协调，局部对比”的原则，也就是主页的整体色彩应该是和谐统一的，只有局部运用一些强烈的色彩对比。新晨范文网

不同网页的主题可以用不同的色彩来表现。以下为几种常用色系：

(1)蓝色，是商业宣传用色，能使网页显得非常有专业水准。体现出一种专业和正式氛围。蓝色往往也被用为严肃庄重的场合，体现出一种凝重和肃穆。(2)绿色，是自然色，给人以清新自然的感觉，可以大大舒缓视觉上的压力。绿色可以用于与环保相关的主题，如旅游风景区网站。(3)红色，是比较热烈的颜色，会使网页变得生机勃勃。红色也是运动的色彩，有很强的视觉感染力和号召力。(4)黄色系也是宣传色系中的一种。黄色给人轻松随意的生活气息，能够体现出一种友善和多维的效果。同时，黄色又是一种非常鲜明的色彩，它可以与许多种颜色搭配起来使用。

此外,我们还可以适当的运用一些黑、白、灰的颜色搭配使用，可以产生意想不到的效果。

一个页面中尽量不要超过4种色彩，色彩太多找不到主题色，会显得没有主次，令人眼花缭乱。再者，需要注意的是文字的颜色与背景颜色的区分，对比太强或太弱都会影响浏览者的阅读。

除了以上论述的几种要素，还有页面的布局、框架的构成等也属于网页的构成要素。