效果如图：
那么这个时候的页面安全宽度应该就是780像素了。
一般来说，我们在设计页面的时候是要避免在浏览器的窗口下方出现水平滚动条的，这样访问者必须拖拽水平滚动条才能浏览到网页的全部内容，那么这张网页设计的并不成功，且不管它是多么的漂亮。
专题讲座：
网页设计与构图（4）--网页中最常见的构图布局
网校教师：
刘涛
网页的构图布局与平面构图布局有着很大的相似之处，但是因为技术的局限，网页构图远不如平面设计那样挥洒自如。
接触过平面设计的朋友应该知道，我们在平面设计中想把某一对象放置到某一位置的时候只需要简单的拖拽就可以完成。
但是在网页设计中我们想对某一对象进行定位的话就不是这么简单的了，必须有HTML语言的支持才行。
所以在进行网页设计的时候，除了要有好的创意，还应该考虑到技术上的可行性。
常见的网页布局有以下几种：
左右对称结构布局、“同”字型结构布局、“回”字行结构布局、“匡”字行结构布局、“厂”字行结构布局、自由式结构布局、“另类”结构布局等，这些只是我个人的总结，还有待进一步完善。
A、左右对称结构布局
这类布局是采用分割屏幕的方式实现的，是网页布局结构中最为简单的构图。
一般来讲，页面的左半部设置栏目导航，而右半部分则列举多篇重要内容的概要或者一整篇详细内容，这有利于访问者直观另类，尽管是被动接受，但页面的信息含量较低，不适合大型专业化的网站。
见下图
B、“同”字型结构布局
从“同”字字体形状上也可以直接看出该类页面的布局是以页面顶部为主导航条（主菜单），页面的左右两侧分别列出二级栏目条或综合性热点区（如广告条、搜索引擎、友情链界、登录面板、注册按钮等）。
这种是互连网上常见的布局，其优点是直观、条理、均衡。
缺陷是版式呆板、僵化。
在采用这种布局时要注意色彩的和谐搭配，通过巧妙的用色，能够调节页面的整体韵律。
C、回字型结构布局
所谓“回”字型结构，就是指以“同”字型结构布局为基础，又在页面的底部增加了一条横向的菜单（或广告条、或本站的另一大版块的超链接区）。
这样做的目的是为了充分利用有限的页面空间，增大主页面的信息量，缩短了和正文链接的路径。
使访问者比较便捷、直观地浏览所需要的信息，少走弯路。
其缺点是页面拥挤、四面封闭。
这种页面布局在我过网站中出现的较多，这大概是受“四合院文化”的影响吧。
D、“匡”字型结构
“匡”字型结构布局其实是“同”字型结构布局的变形，将“同”字型结构逆时针旋转90度，就是这种布局。
或者说是把“回”字型结构布局的页面上的右边的栏目条删除后所得到的一种结构布局。
这种布局结构克服了“回”字型结构封闭的缺陷，所列信息量和“同”字型结构大体相同。
E、自由式结构布局
如果将以上三种结构布局称做“传统型”页面布局，那么自由式结构布局可以称的上是“现代型”结构布局。
因为这种结构布局打破了“同”字型、“回”字型、“框”字型布局的菜单框架的固定模式，大胆地发挥空间想象，把页面设计成一张极具创意的广告作品。
这种页面的结构布局通常用精美的图片、网站标识性图案（Logo）或变形的艺术化文字作为设计中心进行主体构图。
菜单栏目条则当作次要元素处理，自由地安排在页面上，起到点缀、修饰、均衡页面的效果。
这类结构一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点。
专业性的商务站点不宜采用。
这中结构布局优点是靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。
但是缺点是下载速度缓慢、文字信息量少，浏览者不能直奔主题，需要费些周折才能找到所需要的信息。
F、“另类”结构布局
除了以上几种页面布局以外，还有一种以整体图案为主体的布局结构，在该类的页面中，所有元素有机地组合在一起，无逢连接，浑然一体，有着强烈的立体空间感。
一般地是把主体图案设计成一模拟的实物或场景，把带有链接性的按钮设计成实物的某一部件或场景中的个体。
给访问者的第一感觉就是“酷”，很前卫。
这类网页有着明显的叛逆的特色，故称为“另类”结构布局。
这种布局一般是以设计类网站居多。
设计这类的主页必须有独特的创意和娴熟的网页图象处理技巧，否则有可能使页面的字节数量更大。
专题讲座：
网页设计与构图（5）--构图前的准备工作
网校教师：
刘涛
在了解了常见的页面的结构布局之后，我们并不能马上在电脑里着手设计。
需要对所建网站有充足的认识和了解，做大量的前期准备工作。
A、确立网站类型
我们在具体设计网页之前要了解建设网站的目的，分析受众对象（访问群体），从而确立网站类型。
在不明确站点类型的情况下设计出来的网页将是不伦不类，着就好象不测量一个人的体型就去裁衣一样。
不同类型的网站有着不同的受众对象。
我们设计出来的网页风格特色应该和该网站的主体诉求相吻合，才能使该类信息的需求群体产生信任感。
按站点的内容来分大致有以下类型：
法律、金融机构咨询站点、电子商务站点、教育科研机构站点、折服机构站点、社团站点、报纸杂志电子刊物站点、娱乐站点、艺术站点、体育站点、搜索引擎及软件下载站点、个人站点、还有一部分是大型的综合门户类网站。
网页的设计艺术必须为网站的内容服务，而不是单纯地为表现艺术而设计。
B、合理规划网站目录
网页设计之初，摆在我们面前的往往是搜罗来的一大堆内容和素材。
我们应根据网站的建设目的和服务宗旨，将内容按一定的方法进行分类，为它们设置专门的栏目。
并明确哪些栏目版块是重要的，哪些是次要的；哪些需要在主页面上出现的，那些是隐藏在二级链接内的。
大家可以参看天极网的首页面
天极网的主栏目设置：
硬件、商务应用、E企业、商情、数码、软件、游戏、下载、E时代、论坛、专栏天地、通信与网络、Chinabyte这几个重要版块放在显要位置，在版块内又列出了相应的二级栏目，使访问者一目了然。
将栏目进行合理的规划，能够使访问者快速地了解本站的内容结构，到相应的栏目内查阅到所需信息。
模糊的栏目设置常常使浏览者迷失方向。
C、选择网站链接结构
网页设计与传统的平面设计最大的区别就是网页的可操作性。
网页的可操作性是通过页面间的链接实现的。
所谓链接结构就是指网页页面见的互相链接关系。
选择适当的链接结构对整个站点的各个页面设计将起到很大的指导作用。
若链接的结构使用不当，会使重要页面深藏不露，重要的信息不能让访问者获取，违背了网站设计者的初衷。
一般链接结构分为线形结构和非线形结构。
线形结构表现单一，子页面由父页面扩展而出，页面一级一级展示，整个站点只沿着水平方向移动。
这类结构适用与内容简单的站点及个人主页。
见下图：
非线形结构分类较多，常用到的有三种。
①、树状链接结构
由主页面链接指向多个一级页面，而一级页面的链接又指向多个二级页面，这样层层渐进，反向点击链接时又层层渐退。
②星状链接结构
该结构就是在每个页面上都设置有与其它页面的链接，从任何一个页面都可以进入其它页面，没有明显的级别区分。
这种链接结构最明显的优点就是浏览方便，能使访问者快捷地进入到想要浏览的页面。
使用这种结构，必需在每一个页面内占用一大块面积来设置链接。
致使页面的有效浏览面积大幅减少。
再者，页面内的链接过多，容易使浏览者感到迷茫，不知所措。
③、树状、星状复合型链接结构
大多数网站都是采用的这种结构，这种组合方式对两者对立使用所具有的优缺点进行了互补，在网站设计过程中，通常在主页和第1、第2页面间的链接采用星状结构，而在第2、第3、第4级页面间的链接采用树状结构。
见下图：
D、确立网站CI要素
网站的功能不仅仅局限在信息的传播，在提升品牌、树立形象方面的功能不亚于报刊杂志等印刷媒介。
一个知名的网站如同其所有者一样，需要有整体的形象设计。
准确、完整、富有创意的CIS识别系统的导入，不仅有利于网站所有者（企事业单位）形象传播，对网站本身的宣传与推广也将起到很大的作用。
网站CI要素包括：
标识性图案（Logo）、标准色彩、标准字体和广告宣传语、标志性图片等。
当这些要素确立后，我们在网页构图设计时才有一个明确的指导方向。
示例网站：
，，，，
E、网站特色定位
网站的建设宗旨和服务项目不同，面向访问群体（既受众）也就不同。
我们应根据潜在的访问群体进行网站特色定位。
如果访问对象是年轻群体，网站应具有版式活泼、基调明快的特色；如果访问对象是科研人员，网站应体现严谨、理性、科学等特点；若受众对象是老年人，那么网站整体应营造一种温馨、关爱、轻松、愉悦的氛围。
网站的特色定位是对所要建设的网站的类型、风格、栏目设置、内容安排、链接结构、CI要素、受众对象等诸多元素综合分析后，围绕中心思想，用独特的视觉语言进行艺术化的特色描述。
F、技术实现
网页的构图与传统的平面构图最大的区别就是技术的可实现性。
在进行网页设计时必需时时提醒自己，所设计的作品最终是通过互连网传输到客户端，经过调制下载，再用浏览器浏览。
这里要受信道带宽和显示器的限制。
再者，所有网页的后端语言都是以HTML为基础，辅以JavaScript或VBScript编写的程序，有些动态特效实现起来难度较大。
所以，网页设计人员在做构思创意时，要考虑到技术上能否容易实现。
一味地追求视觉效果上的创意而忽略技术上的限制，顾此失彼，再好的构思也只好放弃。
不能在网页设计中实现的创意，对网页设构图来说是毫无价值的。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 