网页布局设计初步

资料来源：网络整理时间：2023/3/22 4:23:10 共计：3575 浏览

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

　　一.网页页面部署布局的基本概念

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

　　1.网站页面尺寸：

　　网站页面尺寸和显示器大小及分辨率有关系，网页页面的局限性就在于你无法突破显示器的范围，而且因为查看浏览器也将占去不少虚拟空间，留下给你的网站页面范围变得越来越小。一般分辨率在分辨率在1024×768的情况下，网站页面的显示尺寸为1007×600象素；800x600的情况下，网站页面的显示尺寸为780×428个象素；而640x480的情况下，网站页面的显示尺寸为620×311个象素。从以上数值数据可以看出，分辨率越高网站页面的尺寸就越大。

　　查看浏览器的工具栏也是影响网站页面尺寸的原因。一般目前的查看浏览器的工具栏都可以取消或者提升增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，网站页面的尺寸肯定是不一样的。

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

　　2.整体造型：

　　什么是造型，造型就是创造出来的物体形象。这里是指网站页面的整体形象，这种形象应该是一个整体，图形与文本信息的结合应该是层叠有序。虽然，显示器和查看浏览器都是矩形，但对于网站页面的造型，你可以充分运用自然界中的其它形状以及它们的组合例如矩形，圆形，三角形，菱形等。

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

　　3.页头：

　　页头又可称之为页眉，页眉的作用是定义网站页面的主旨主题。例如网站站点的名称多数都显示在页眉里。这样，浏览访问者能很快知道这个网站站点是什么信息内容。页头是整个页面设计及制作的关键，它将牵涉到下面的更多设计规划和整个网站页面的协调性。页头常放置网站站点名称的image图片和公司企业标志以及旗帜广告。

　　4.文本信息：

　　文本信息在网站页面中出现都数以行或者块(段落)的形式，它们的摆放位置决定着整个网站页面部署布局的可视性。过去因为网站页面设计制作技术的局限，文本信息放置位置的灵活性非常小，而随着DHTML的兴起，文本信息已经可以按照自己的要求放置到网站页面的任何位置了。

　　5.页脚：

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

　　6.image图片

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

　　7.多媒体

　　除了文本信息和image图片，还有声音，动画，多媒体视频等等其它媒体。虽然它们不是经常能被利用到，但随着宽带网的兴起，它们在网页页面部署布局上也将变得更重要。

　　二.网页页面部署布局的方式方法

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

　　1.纸上部署布局法

　　许多页面设计网页制作者不喜欢先画出网站页面部署布局的草图，而是直接在页面结构网页设计软件里边设计规划部署布局边增加添加信息内容。这种不打草稿的方式方法很难让你设计规划出优秀的网页页面来。所以在开始网页制作时，应该先在纸上画出你网站页面的部署布局草图来。

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

　　*尺寸选择：目前一般800×600的分辨率为约定俗成的查看浏览屏幕大小。所以为了照顾大多数浏览访问者，你网站页面的尺寸以800X600的分辨率为准。

　　*造型的选择：先在白纸上画出象征查看浏览器窗口的矩形，这个矩形就是你部署布局的范围了。选择一个形状作为整个网站页面的主旨主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在提升增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计规划出一个完美的部署布局是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型来。还要注意一点，你不要担心你设计规划的部署布局是不是是否能够实现。事实上，只要你能想到的部署布局都能靠现今的HTML技术实现。考虑到左边向左凹的弧线，为了取得平衡我们在网站页面右边提升增加了一个矩形(也可以是一条线段)。

　　*提升增加页头：一般页头都是位于网站页面顶部，所以我们为网站页面提升增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们提升增加了一个矩形页头并让页头相交与左边的弧线。

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

　　*提升增加image图片：image图片是美化网站页面和说明信息内容必须的元素。在这里把image图片加入到适当的地方。

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

　　2.软件部署布局法

　　如果你不喜欢用纸来画出你的部署布局意图，那么你还可以利用软件来完成这项工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能在设计规划网页页面部署布局的设计规划上更是得心应手。不像用纸来设计规划部署布局，利用Photoshop可以方便地使用颜色，使用图形，并且可以利用层的功能设计规划出用纸张无法表现的部署布局意念。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：优秀网站制作的五大要素 | ·下一条：柏林网站制作说说APP开发要把握到的三大要素