HTML网页设计中的布局技术分析

王立恒

【摘 要】在电子商务不断发展的过程中，网页的设计也得到迅速的发展，因此，对网页设计的要求也不断提高，尤其是在创新的社会背景下，网页设计的新理念和新方法，不断推陈出新。在这里，主要针对网页设计中的布局技术进行了简单分析与探讨。

【关键词】布局技术；HTML网页设计；运用

一、引言

现代社会是一个信息飞速发展的时代，网络作为一种传播信息的手段正在以超乎想象的速度不断向前发展，各种新技术，新模式应运而生。我国的网络建设更是取得了世人瞩目的成绩，网络用户成倍的增长，但是所有网站中页面的设计确是千篇一律，没有多大的提升。其实网站本身就是无数个页面的拼合，网页的设计是一种审美艺术的视觉表达，也是美学的一种体现和眼神，作为网页的设计人员，必须把传统的平面设计和现代的布局设计理念结合起来，才能做出有自我特色的网页，设计者应该结合网络的特点，关注网站所针对的人群，设计出具有自我的特色的网络传播页面。

在网页设计中，布局主要是利用各种元素在布局处理中的方法以及规律。从规律性上来讲，其主要的特点就是重复布局、近似布局、渐变布局、发射布局、特异布局，从非规律性的特点上来讲，主要表现为密集布局、分割布局、对比布局、肌理布局、空间布局。在网页设计中，布局作为整个设计的结构因素，必须要在布局中，通过科学安排相关的功能和区域，运用不同的形态、材料，重新组合成为一个新的单元，并赋予视觉化概念，将相关基本形任意组合成新的视觉元素，才能达到应有的设计效果。另外，布局关系到网页设计文化和水平的好坏，通过点、线、面的运用，以及各个元素之间关系的正确处理，满足不同文化环境对网页设计的要求，以便顺应人们的视觉感受，打动观看者的视觉，进而达到设计想要的效果。

二、HTML网页设计中常见的布局方式

（一）表格

表格布局是页面布局技术中最常见的布局方式。在Dreamweaver中插入表格就类似于在WORD里插入表格，具有所见即所得的特点。利用表格组织各种网页元素，既直观又操作简单。但是，使用表格进行布局不太方便，因为最初创建表格是为了了显示表格数据，而不是用于对web页进行布局，为了简化使用表格进行页面布局的过程，dreamweaver提供了布局视图。

在布局模式中，可以使用表格作为基础结构来设计自己的网页布局，并且可以避免使用表格带来的缺陷，例如可以在网页上轻松地画出单元格，然后定制和移动单元格到任何需要的地方，创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。当然也可以使用传统的表格来创建网页布局，或者是先创建多个互不重叠的层，让后将它们转换为表格。

由于在网页中插入大量表格，会造成页面源代码存在大量冗余、可读性差、直接导致网页读取速度慢的问题，不利于网站的更新和维护，目前大中型网站一般不用表格布局。

（二）框架

框架是将一个网页分割成多个HTML页面，每个框架页都是一个独立的HTML页面，通过框架集的使用，这些框架能够很好地在一起运作，使网站的风格一致。框架可以把浏览器窗口划分为若干区域，每个区域可以分别显示不同的网页，定义页面的导航区域和内容区域，它的主要特征是网页中的一部分固定不动，而另一部分换页更新内容。这样可以用来增强页面的导航功能。

框架布局比较灵活，若有效运用，则能使网页更整洁、清晰。但是，由于框架中链接目标属性较复杂，因此对于网页制作初学者来说使用框架过程中很难控制页面显示。对于内容多、布局复杂的网站，也不宜采用框架布局，因为，过多的框架会影响网页下载所需的时间，影响网页的读取速度，而且浏览器对框架结构的兼容性也不是很好。

（三）DIV+CSS

DIV+CSS布局技术的出现弥补了表格和框架布局的不足，优势在于代码精简、页面下载速度快，表现和内容相分离，布局灵活，便于维护。我们可以将样式单独保存在CSS文件中，例如用手机WAP上网时，样式文件就可以不加载，大大地节约页面下载时间。多个页面可共享一个CSS文件，要修改页面样式时，只需修改CSS文件即可实现对整个页面的重新布局，不影响网页内容。目前多数大型网站都采用此种方法进行布局，但是对于初学者来说，它的操作相对复杂，要求用户对代码有一定的了解。

三、HTML网页设计布局的运用方法

（一）图片的应用

图片作为网页中的重要组成元素，是说明网页内容和美化页面的关键。因此，需要设计师把握布局设计理念，把图片加到适当的地方，利用图片对页面进行处理。如利用Photoshop或Illustrator可以将图片切成小块，根据情况分别进行优化。一般我们把有较为复杂颜色变化的小块优化为jpg，而把那种只有单纯色块的卡通画式的小块优化为gif，这是由这两种格式的特点决定的。

（二）页面排版的应用

在网页设计中，页面排版作为视觉传达的重要手段，同样，决定着网页设计的成败。页面排版包括页面距、版面设置、表格处理、页码格式等内容，种类繁多，需要设计者从中寻找相关的规律，要根据网页的形式，利用特异处理，将一些相同的基本型中出现一个形状或者大小特异的基本型进行整合，进而达到和谐统一的画面效果机理。

以表格的处理为例进行说明，在使用Dream weaver制作网页时，会自动在每一个td内添加一个空字符“”。如果单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源代码内将其删去。

（三）造型组合的应用

造型代表着一个页面的整体形象，而这种形象一定要突出整体性。在网页设计中，要利用经典图形，用最简单的设计技术创造经典的视觉效果，同时，这也是创意和理论的高度结合，简单来讲，就是在确定好图形与背景之间的关系，通过双重意象的构建、产生与形成，吸引观众的注意力，使得他们的视线更多集中在图形或背景上，因此，这就需要强化页面布局的局部以及整体效果。比如我们平常所见到的页面布局，其在背景和图像的区别虽然不明显，但是却存在着一定的差异，由黑白条纹所布局，用上下交错的手法创造出了双重意象，给观者造成一种视觉上的错觉，能够让人反复的观赏画，成功地吸引了注意力。

【参考文献】

[1]郭军军，常用网页布局对比研究[J].信息技术，2012.

[2]张赵辉，探析网页前端技术及其升华[J].科技致富向导，2015.