网页制作中对版面设计的见解

核心提示：在制作网站中，特别是在网页的版面设计时，应呈现出独特设计风格。网页的版面设计要有统一的风格，形成整体，从更深层次、更为广阔的视野中来定位自己的版面样式，从而达到别人所没有做到的效果。

简介：在制作网站中，特别是在网页的版面设计时，应呈现出独特设计风格。网页的版面设计要有统一的风格，形成整体，从更深层次、更为广阔的视野中来定位自己的版面样式，从而达到别人所没有做到的效果。希望本文能给网站建设朋友们一点小小的帮助，当然本文主要谈的就是网站制作中网页的版面构造、元素、图片......最后能够形成统一的视觉识别。

1、课题研究背景

在网络高速发展的今天，网站成为信息的一种主要传播媒介。那么网站建设不仅要把握好网站整体界面设计，网站框架设计，网站优化技巧，更重要的是一种综合运营能力，包括审美，用户体验，创新，管理。那么怎样才能把网站建设好呢？首先，在制作网站前要对所制作的网站有一个整体的构造，包括文字的排版、图片的规划、表格的布局......。其次，就是对每个页面要合理编排和布局，也就是这里所说的版面设计，版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西，一种将不同介质上的不同元素巧妙的排列方式。再次，就是要正确看待建设网站的内容，不能把所有的网站都以一种固定样式进行制作，而是要根据具体的内容来安排所制作的网页版面格式。比如说：娱乐性的网站要求格式千变万化，而教育类网站总体上要求要单调一点较好。

做好这些工作以后，就要对网站的页面进行排版，也就是所说网页的版面设计。所谓的网页版面设计是指将网站的一个页面看着报纸、杂志或者说是某个门面进行布局、整理和排版。虽然今天的网站布局是千变万化的，但万变不离其中。所以固定的网页版面设计基础依然是必须学习和掌握的。在上网时，你会发现有些页面是很吸引人的、而有的呢却无法让人们停留他们的眼球，那就是网页的版面是否遵从读者的心理。这里网页版面设计包括网页的版面布局、版面的设计原则、版面设计的美化......。

2、网页的版面布局

布局，就是以最适合浏览的方式将图片、文字和表格有条理的排放在页面的不同位置。

在众多的网站版面布局中，主要有以下几种布局步骤：

2.1、草案

在新建的页面中，什么也没有，就像一张白纸，需要进行规划。当然最好是在纸画出大致的轮廓，这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

2.2、粗略布局

就是在草案的基础上进行更一步的修改，然后确定进行连接等一系列的操作（包括新闻、flash动画……）。在这里必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

2.3、定案

所谓的定案是将将粗略布局的页面做最后的修改，然后定下方案。

3、网站页面设计的原则

在今天网站页面的设计同样遵循一定的原则，就像一些综合期刊一样它也有一定的原则。俗话说：“不以规矩无以成方圆”，所以网站版面设计的原则有：有序性原则、平衡性原则、装饰性原则。

3.1、有序性原则

有序性是指在网站的页面编辑中要遵循一定的规范。比如说是按照左右型结构、左中右型结构、右左型结构、用表格（<table>……</table>和CSS系统来定位网页中版面的规划。在网页编排中应正确使用文字、标点符号、计量单位、规范使用术语、图片和Flash动画等。

3.2、平衡性原则

虽然网页不像图书、杂志那么复杂，不像他们的页面那么大。不过在读者的眼里一样要有视觉的均衡性，也就是所谓的平衡性原则。

版面构图的基本元素是点、线、面,其中单个的字符是点,由字符组成的行是线,由行组成的段落是面。线和面的运动方向可以归纳为水平、垂直和倾斜三种形式。水平和垂直给人以安静和固定的感觉,倾斜则具有运动感。水平、垂直和倾斜组合起来使用会给版面带来丰富和生动的效果,从而使版面在整体上保持平衡的前提下具有动感和变化。如有的期刊把文章的篇名、作者、摘要、关键词等前置部分采用右顶格排(而不是习惯上居中排) ,这种构图上的适度倾斜可以给读者在视觉上产生“顺势而下”的流畅感觉。

3.3、装饰性原则

这里最重要的是“虚”与“实”的对比以及巧妙的运用空白的装饰性原则。在版面设计中还要注意立体的装饰效果,比如“前景”标题可以用加大加黑的办法强化明暗对比,“中景” 正文突出文字与空白的黑白对比“, 背景”页码和注释、参考文献用缩小字号的办法使色调显得柔和轻淡一些。从而使版面在整体上体现出层次感。

4、营造网页版面的艺术美

任何东西都有它特定意识美，网站也不例外。网页版面不是单纯化装的脸，而是要把艺术形式和内容完美的结合起来，从而给读者一张生动、内容丰富的脸。网页版面以网站的每个页面为对象。对其进行美的视觉上的设计。所以有人把这种设计叫做：“美的视觉上的传达性”。

4.1、网页版面设计的统一性

统一是指事物的相继出现，并带有联属关系的属性。这里所讲的统一是指网页中应该出现的文字、图片等按照一定的规律有机的结合。网站页面的版面设计要求有统一的设计标准、统一的色彩和统一的风格，由此加深别人对此风格的认同。网页版面的统一有：

4.1.1、图片与版式的统一，

4.1.2、标题一版式的统一，

4.1.3、内容与版式的统一，

4.1.4、内容与版式的统一。

4.2、网页版面设计的广告性

网页版面的广告性就是该网页版面设计的醒目程度，它是表现网页内容的重要手段之一，被视为一种促销手段、一种说服艺术。在目前，网页的广告大致有三种表现形式：

4.2.1、内容直接展示型，

4.2.2、醒目展示型，

4.2.3、注重版面文字的潜在力。

4.3、网页版面设计的工艺性

网页的版面设计要求有一定的工艺性。不管是商业网站还是政府网站，甚至学校类网站都要求有一定的美感和艺术形式。特别是在今天人民疯狂的追求现实美和空间美，所以在设计中要体现这种美感。以求得到人们的认可。

5、网页版面设计要遵从读者的阅读心理

网站制作中网站设计者的思想、意图、网站的内容都是通过版面的设计来影响读者的心情。一个赏心悦目的版面能使网页增添色彩，也能使读者带着愉快的心情来看整个网站，大大增加了网站的阅读次数。相反一个糟糕的网站会使读者大大的打折扣。

6、用DIV和CSS设计网站的页面和易改变WEB信息

CSS主要是将网页上的内容与格式分开控制，也就是说当你把某个页面编辑好以后觉得不好的话可以利用CSS在后台进行再次排版。但是现在的网页在一般情况下都是用表格、层等，CSS多是潜入到HTML语言中，不能很随便的改变网页的版面布局，也不能很好的发挥CSS在版面布局中的作用。在这样的情况下，DIV诞生了。通过使用HTML的DIV和CSS一起就很容易而方便的改变网页的版面布局。CSS是网页制作技术, 能简化网页的格式代码。目前网页布局多用表格、层等, CSS排版功能得不到充分利用。和DIV的共同使用就把CSS的功能发挥的淋漓尽致。

CSS是跨平台浏览器之间的国际标准W9C中的一部分, 是一种对WEB文档添加样式的简单机制,属于表现层的布局语言，在CSS 标准里, 不仅重新定义了HTML 原来的样式, 使CSS 在格式定义方面具有特殊优势。更加入了区块设置、随意位置摆放等页面布局样式设定, 使CSS可以提供精确定位功能以及各种特殊效果。从而为网页布局和页面效果的制作提供一种新途径。

CSS元素的排版格式, 可以通过“#Classname标记{CSS代码}”放在任何HTML 标记上使用整个页面的排版, 借助于HTML“空元素”DIV 与CSS 来充分发挥CSS 布局功能, 使网页布局可以有很大的自由度。

6.1、用DIV与CSS技术设计网页

DIV 是HTML 的一个标记，用于定义内容块，并不显示任何内容, 通过对一个DIV 标记创建一个样式规则，可以将样式应用到所有包含在<IV>……</DIV>之间的不同标记上以及包含在DIV 标记之内的内容上, 不需要为每个个别的元素指定其自己的样式规则。

将网页内容规划成DIV块， 然后把每块内容定义好样式表，将多个样式定义汇集到一个样式表文件中, 应用Class=””或Id=””来应用CSS样式表项,其属性和值就可以格式化这个块内内容。

6.2、CSS与DIV共同应用的优点与缺点

6.2.1、DIV 块方便块间移动，版面格式容易更新，与CSS 配合方便网站改版，改变网页的布局、网页的外观。

6.2.2、使用CSS排版，由于内容和格式分离，可以每次只更改网页内容，或只更改样式以改变网页外观，从而满足于频繁更新的信息网站。

6.2.3、5.2.3、块内背景图片过多，网页加载量大，会导致网页下载速度慢。

7、网站版面的设计对营销的重要性

网站版面设计对网站营销的重要点是什么？这个可能是很多人都要问的问题，企业网站版面不就是一件漂亮的衣服吗？俗话说：货卖一张皮。网站版面就是企业网络宣传的一张皮。

7.1、网站版面要突出主题

想要突出什么，那么就要在网站的首页就要去体现，如何让客户更容易找到和理解，不要把网站的优势放在角落里面。在醒目的位置尽情展示。如要突出产品。那么就把所要放的产品放在最显眼的位置。

7.2、网站版面颜色基本上要和网站内容的行业相配合

设计风格和样式是跟据个人的审美观不同，而有所不同，没有统一的标准去衡量美，但颜色基调就可以大体一致。如美食行业和机械行业的颜色就完全要不样。不能是自已喜欢哪种颜色，就偏用哪一种。

8、用表格<Table>……</Table>来设计网页的版面

网页设计随着网络的高速发展地位变得越来越重要, 如何制作一个让人赏心悦目的网页已经成为许多人的追求。其中表格在网页设计中占有重要的作用, 可以作为页面的布局, 除此之外还有其他许多特殊的应用。跟数据库的连接就是表格在网页制作中的一个特殊作用，将代码预先设置好，然后运用超连接将数据库连接起来。这样可以方便读者的查询和网站管理员从事后台的操作。

一个好的网页往往版面规整, 内容摆放井井有条, 让人看了赏心悦目, 而这样的版式经常是由表格控制的, 只不过不显示表格的边框而已。在上网的时候，大家不难发现在很多网站中，表格的应用非常平凡。这些网站的大部分页面都是用表格布局的。那么表格到底是怎样在网站的版面设计中发挥作用呢？

表格由行和列构成, 所以常用的表格标记有：

〈table〉……〈/table〉表示表格的开始和结束，

〈tr〉……〈/tr〉表示表格的行, 有一行就有一对〈tr〉标志，

〈td〉〈/td〉表示表格的单元格, 一行中有多少单元格就有多少对〈td〉标志。

不管是FrontPage还是Dreamweaver中都可以直接插入表格，而在代码中将会自动生成。当然在设计表格时，可以在表格属性里面进行设置，当不喜欢表格边框时，在一般情况下是将边框象素设置为0。单元格间距指的是单元格和单元格之间的距离, 单元格边距指的是单元格和其中的内容之间的距离。如果想通过表格布局的话, 我们应该先对页面进行整体的规划, 分清整个页面的结构, 然后插入相应行数列数的表格, 有时还需通过合并单元格来实现, 接着对每个局部进行划分, 通过在单元格中嵌套表格来实现整个页面的布局。除这些之外表格还有许多特殊的作用：

8.1、单元格的合并

网页中单元格的合并是指将两个或者更多的表格合成一个表格。这就需要用Rowspan及Colspan属性。Rowspan属性用于向下延伸合并垂直单元格, 而Colspan属性用于向右延伸合并水平单元格。如:

   〈td colspan=2〉合并两个水平单元格〈/td〉，

〈td rowspan=2〉合并两个垂直单元格〈/td〉。

8.2、表格的边框变细

一般我们制作的表格边框要不就不显示, 要不就很粗, 如何可以制作一个边框非常细的表格呢? 做法其实很简单: 第一步插入一个表格, 设置表格的间距和边距都为1象素, 边框粗细也为1象素; 第二步设置表格的背景色为黑色; 第三步设置单元格的背景色为白色; 第四步设置表格的边框的颜色也为白色。这样做出的表格边框就非常细了。

8.3、制作虚线表格

先在Photoshop里新建一个尺寸宽高为2PX的图片, 在左上角画1象素的小点, 保存为web格式, 然后再在表格中设置其为背景图片再把表格中的cellspacing和cellpadding的值分别设为2( 开始背景图片的尺寸) 保存即可。代码如下:

在制作网页的过程中, 用到表格的地方非常多, 如果大家可以灵活运用这些技巧, 一定可以为我们的网页增色不少, 做出风格独特的页面。

9、网页版面设计的虚拟空间

一个好的网站必须讲求虚实得当，否则会给读者枯燥的感觉。虚实结合是制作网站的一项基本前提，它包括了图象、文字和图片等的重要艺术性和美学特点。

版式设计是一种艺术创作过程，也要讲究虚实相宜。在版面编辑中，编排的内容是实体，当每个实空间占据一定位置后，一定要有若干的虚空间来调节视觉强度，使其张力、动势得以释放和延伸，这个虚空间就是“留白”。？留白可以用来突出文字内容，起到引导读者阅读注意力转换的效果，空白的巧妙使用，使主体得到充分的发挥。所谓留白就是让网站充满虚拟和现实的一种比较。

把这些运用到网站的版面布局中，效果就大不一样了。比如，网页的白色背景太虚，则可以加些色快；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角试试。总之．版面设计关键还在于你的创意和设计，希望经过不断的尝试和推敲，这样的网页会更加亮丽起来。