网页布局设计基础

　　正如您现在所看到的相同，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或说站点才是受人喜欢的。取任何一面您都无法留住太过“挑剔”的访问者。

　　一。网页布局的基本概念

　　最开始，网页呈现在您面前的时侯，他就似乎一张白纸，他需要您任意挥洒您的设计才思。在开始的时侯，您需要明白，虽然您能控制一切您所能控制的东西，但假如您知道什么是一种约定俗成的标准或说大多数访问者的浏览习惯，那么您能够在此基础上加上自己的东西。您当然也能够创造出自己的设计方案，但假如您是初学者，那么最好明白网页布局的基本概念。

　　1.页面尺寸：

　　由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于您无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给您的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为：620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600.从以上数据能够看出，分辨率越高页面尺寸越大。

　　浏览器的工具栏也是影响页面尺寸的原因。一般现在的浏览器的工具栏都能够取消或增加，那么当您显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不相同的。

　　在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。但我想提醒大家除非您能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。假如需要在同一页面显示超过三屏的内容，那么您最好能在上面做上页面内部连接，方便访问者浏览。

　　2.整体造型：

　　什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是个整体，图像和文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，您能够充分运用自然界中的其他形状连同他们的组合：矩形，圆形，三角形，菱形等。

　　对于不同的形状，他们所代表的意义是不同的。比如矩形代表着正式，规则，您注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示他的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但现在的网页制作多数是接合多个图像加以设计，在这其中某种图像的构图比例可能占的多一些。

　　3.页头：

　　页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，他将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志连同旗帜广告。

　　4.文本：

　　文本在页面中出现都数以行或块（段落）出现，他们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性很小，而随着DHTML的兴起，文本已能够按照自己的需要放置到页面的任何位置。

　　5.页脚：

　　页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或公司信息的地方。您能看到，许多制作信息都是放置在页脚的。

　　6.图片

　　图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而您的布局思维也将体现在这里。

　　7.多媒体

　　除了文本和图片，更有声音，动画，视频等等其他媒体。虽然他们不是经常能被利用到，但随着动态网页的兴起，他们在网页布局上也将变得更重要。

　　二。网页布局的方法

　　网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：

　　1.纸上布局法

　　许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让您设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出您页面的布局草图来。

　　准备一若干张白纸和一只铅笔，您要设计一个时尚站点。

　　*尺寸选择：

　　现在一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，您页面的尺寸以800X600的分辨率为准。

　　*造型的选择：

　　先在白纸上画出象征浏览器窗口的矩形，这个矩形就是您布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为他代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，您能够试者在增加一些圆形或其他形状。这样画下来，您会发现很乱。其实，假如您一开始就想设计出一个完美的布局来是比较困难的，而您要在这看似很乱的图像中找出隐藏在其中的特别的造型出来。还要注意一点，您不要担心您设计的布局是否能够实现。事实上，只要您能想到的布局都能靠现今的HTML技术实现。

　　考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形（也能够是一条线段）。

　　*增加页头：

　　。 jpg是我们从。jpg和2.jpg得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为。jpg增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交和左边的弧线。

　　*增加文本：

　　页面的空白部分加别加入文本和图像。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。

　　*增加图片：

　　图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。

　　经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，他不是最后的结果，而是您以后制作时的重要参考依据。

　　2.软件布局法

　　假如您不喜欢用纸来画出您的布局意图，那么您还能够利用软件来完成这些工作。这个软件就是Photoshop.Photoshop所具备的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop能够方便的使用颜色，使用图像，并且能够利用层的功能设计出用纸张无法实现的布局意念。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有