(1)-网页的构图

1、因为受到网络带宽的限制，网页设计中的图象处理也不同于平面设计，为了加快下载速度，在图象保持质量的前提下我们要尽可能的缩小其文件大小，而不像平面设计那样为了追求图象的质量而不管其文件大小。作为一名合格的网页设计师，在处理网络图形时应做到在保持图象清晰的前提下尽可能的缩小图象的文件大小。C、功能的异同很多人在设计网站的时候会有这样的一个现象，做出来的网站是很漂亮，但是让访问的人无从下手来进行访问，想从这个网站里找点自己感兴趣的内容但就是怎么也找不到，但也不是说这个网站里没有这些内容，有是有，但就是找不到或者找起来很麻烦。这说明了一个问题，即向导性和可操作性。传统的平面设计作品是以向人们传达某种信息

2、或诉求为目的；而网页设计除了拥有平面设计作平的功能以外，还有重要的向导和连接功能，即网页具有很强的可操作性和互动性。我们都知道在制作一个网站的时候一定会有个名为index.html的页面，我们一般把它称为“首页面”。一般在我们浏览网站的时候，在IE的地址栏里输入域名后直接打开的就是这个文件名为index.html的页面，那么它的作用是什么呢？我相信大家都有在书上找某部分内容的经历，我们一般都会打开书的目录来进行查找，为什么？我想我在这里就不用多说了吧？那么同理，如果把我们的网站看成是一本书的话，那么“首页面”我们就把它看成是书的目录，它的作用就是使我们尽快的找到自己想查看的信息。动静结合是网页

3、设计的另一重要特色，这点在平面设计里是无法实现的。专题讲座：网页设计与构图(2)-网页设计的基本元素网校教师：刘涛接上专题讲座：网页设计与构图不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。A、 页面标题在站点的没一个页面中都有一个标题，用来提示页面的主要内容，着一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单 标题名称B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如

4、果该企业（社团）已经导入了CIS（Corporate Identity System）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。如图：C、页眉页眉指的是页面上端的部分，大家可以参照下图，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的

5、则把它设计成广告位出租。D、 页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。E、导航导航是网页设计中的重要部分,也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着举足轻重的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图象相结合。它的布局通常按内容的分类进行

6、分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的做上位置，次要的内容安排在右下方。专题讲座：网页设计与构图(3)-网页空间与页面尺寸网校教师：刘涛网页设计的特殊性在于其最终显示的平台是计算机的显示器，人们通过15寸或者17寸的显示器来看我们的网站，因为浏览器的工具条要占部分屏幕空间，所以在不同的显示条件下的屏幕尺寸也不相同。目前，大部分人使用的是15寸的显示器，其显示分辨率一般设置为800X600。显示分辨率设置为640X480或1024X768的只是少数，所以我们在进行网页设计的时候要以800X600为标准。相信大家都见到过很多网站上都有“建议分

7、辨率为800X600”的字样吧。A、页面的安全宽度我们在进行网页设计的时候都希望所有的浏览者在访问我们的网站的时候看到的都是最好的效果，不管他们是使用的什么样的操作系统，什么样的硬件设备。自己做的是什么样，访问者看上去就是什么样。但是我们要考虑到使用不同的显示器时分辨率的问题。当显示分辨率设置为800X600时，即浏览器的屏幕最大宽度为800像素，因为页面最右边的滚动条占去20像素，所以网页的安全宽度应该为780像素，所以，网页设计宽度只有限制在780像素以内，在用800X600分辨率的显示器浏览的时候，水平方向才能够在视屏范围。在网页设计中，我们可在HTML 语言里控制当前页面内所有对象距离

8、页面左边框的距离，在默认的状态下，页面中的所有对象都距边框10像素。如图：所以现在页面的安全宽度应该是760像素。而当我们更改了这一默认值以后，把左边距改为0的时候，HTML语法：效果如图：那么这个时候的页面安全宽度应该就是780像素了。一般来说，我们在设计页面的时候是要避免在浏览器的窗口下方出现水平滚动条的，这样访问者必须拖拽水平滚动条才能浏览到网页的全部内容，那么这张网页设计的并不成功，且不管它是多么的漂亮。专题讲座：网页设计与构图(4)-网页中最常见的构图布局网校教师：刘涛网页的构图布局与平面构图布局有着很大的相似之处，但是因为技术的局限，网页构图远不如平面设计那样挥洒自如。接触过平面设

9、计的朋友应该知道，我们在平面设计中想把某一对象放置到某一位置的时候只需要简单的拖拽就可以完成。但是在网页设计中我们想对某一对象进行定位的话就不是这么简单的了，必须有HTML语言的支持才行。所以在进行网页设计的时候，除了要有好的创意，还应该考虑到技术上的可行性。常见的网页布局有以下几种：左右对称结构布局、“同”字型结构布局、“回”字行结构布局、“匡”字行结构布局、“厂”字行结构布局、自由式结构布局、“另类”结构布局等，这些只是我个人的总结，还有待进一步完善。A、 左右对称结构布局这类布局是采用分割屏幕的方式实现的，是网页布局结构中最为简单的构图。一般来讲，页面的左半部设置栏目导航，而右半部分则列

10、举多篇重要内容的概要或者一整篇详细内容，这有利于访问者直观另类，尽管是被动接受，但页面的信息含量较低，不适合大型专业化的网站。见下图B、“同”字型结构布局从“同”字字体形状上也可以直接看出该类页面的布局是以页面顶部为主导航条（主菜单），页面的左右两侧分别列出二级栏目条或综合性热点区（如广告条、搜索引擎、友情链界、登录面板、注册按钮等）。这种是互连网上常见的布局，其优点是直观、条理、均衡。缺陷是版式呆板、僵化。在采用这种布局时要注意色彩的和谐搭配，通过巧妙的用色，能够调节页面的整体韵律。C、回字型结构布局所谓“回”字型结构，就是指以“同”字型结构布局为基础，又在页面的底部增加了一条横向的菜单（或

11、广告条、或本站的另一大版块的超链接区）。这样做的目的是为了充分利用有限的页面空间，增大主页面的信息量，缩短了和正文链接的路径。使访问者比较便捷、直观地浏览所需要的信息，少走弯路。其缺点是页面拥挤、四面封闭。这种页面布局在我过网站中出现的较多，这大概是受“四合院文化”的影响吧。D、“匡”字型结构“匡”字型结构布局其实是“同”字型结构布局的变形，将“同”字型结构逆时针旋转90度，就是这种布局。或者说是把“回”字型结构布局的页面上的右边的栏目条删除后所得到的一种结构布局。这种布局结构克服了“回”字型结构封闭的缺陷，所列信息量和“同”字型结构大体相同。 E、自由式结构布局 如果将以上三种结构布局称做“

12、传统型”页面布局，那么自由式结构布局可以称的上是“现代型”结构布局。因为这种结构布局打破了“同”字型、“回”字型、“框”字型布局的菜单框架的固定模式，大胆地发挥空间想象，把页面设计成一张极具创意的广告作品。这种页面的结构布局通常用精美的图片、网站标识性图案（Logo）或变形的艺术化文字作为设计中心进行主体构图。菜单栏目条则当作次要元素处理，自由地安排在页面上，起到点缀、修饰、均衡页面的效果。这类结构一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点。专业性的商务站点不宜采用。这中结构布局优点是靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。但是缺点是下载速度缓慢、文字信息量

13、少，浏览者不能直奔主题，需要费些周折才能找到所需要的信息。F、“另类”结构布局除了以上几种页面布局以外，还有一种以整体图案为主体的布局结构，在该类的页面中，所有元素有机地组合在一起，无逢连接，浑然一体，有着强烈的立体空间感。一般地是把主体图案设计成一模拟的实物或场景，把带有链接性的按钮设计成实物的某一部件或场景中的个体。给访问者的第一感觉就是“酷”，很前卫。这类网页有着明显的叛逆的特色，故称为“另类”结构布局。这种布局一般是以设计类网站居多。设计这类的主页必须有独特的创意和娴熟的网页图象处理技巧，否则有可能使页面的字节数量更大。 专题讲座：网页设计与构图(5)-构图前的准备工作网校教师：刘涛在

14、了解了常见的页面的结构布局之后，我们并不能马上在电脑里着手设计。需要对所建网站有充足的认识和了解，做大量的前期准备工作。A、确立网站类型我们在具体设计网页之前要了解建设网站的目的，分析受众对象（访问群体），从而确立网站类型。在不明确站点类型的情况下设计出来的网页将是不伦不类，着就好象不测量一个人的体型就去裁衣一样。不同类型的网站有着不同的受众对象。我们设计出来的网页风格特色应该和该网站的主体诉求相吻合，才能使该类信息的需求群体产生信任感。按站点的内容来分大致有以下类型：法律、金融机构咨询站点、电子商务站点、教育科研机构站点、折服机构站点、社团站点、报纸杂志电子刊物站点、娱乐站点、艺术站点、体育

15、站点、搜索引擎及软件下载站点、个人站点、还有一部分是大型的综合门户类网站。网页的设计艺术必须为网站的内容服务，而不是单纯地为表现艺术而设计。B、 合理规划网站目录网页设计之初，摆在我们面前的往往是搜罗来的一大堆内容和素材。我们应根据网站的建设目的和服务宗旨，将内容按一定的方法进行分类，为它们设置专门的栏目。并明确哪些栏目版块是重要的，哪些是次要的；哪些需要在主页面上出现的，那些是隐藏在二级链接内的。大家可以参看天极网的首页面 天极网的主栏目设置：硬件、商务应用、E企业、商情、数码、软件、游戏、下载、E时代、论坛、专栏天地、通信与网络、Chinabyte这几个重要版块放在显要位置，在版块内又列出

16、了相应的二级栏目，使访问者一目了然。将栏目进行合理的规划，能够使访问者快速地了解本站的内容结构，到相应的栏目内查阅到所需信息。模糊的栏目设置常常使浏览者迷失方向。C、 选择网站链接结构网页设计与传统的平面设计最大的区别就是网页的可操作性。网页的可操作性是通过页面间的链接实现的。所谓链接结构就是指网页页面见的互相链接关系。选择适当的链接结构对整个站点的各个页面设计将起到很大的指导作用。若链接的结构使用不当，会使重要页面深藏不露，重要的信息不能让访问者获取，违背了网站设计者的初衷。一般链接结构分为线形结构和非线形结构。线形结构表现单一，子页面由父页面扩展而出，页面一级一级展示，整个站点只沿着水平方

17、向移动。这类结构适用与内容简单的站点及个人主页。见下图：非线形结构分类较多，常用到的有三种。、树状链接结构由主页面链接指向多个一级页面，而一级页面的链接又指向多个二级页面，这样层层渐进，反向点击链接时又层层渐退。星状链接结构该结构就是在每个页面上都设置有与其它页面的链接，从任何一个页面都可以进入其它页面，没有明显的级别区分。这种链接结构最明显的优点就是浏览方便，能使访问者快捷地进入到想要浏览的页面。使用这种结构，必需在每一个页面内占用一大块面积来设置链接。致使页面的有效浏览面积大幅减少。再者，页面内的链接过多，容易使浏览者感到迷茫，不知所措。、树状、星状复合型链接结构大多数网站都是采用的这种结

18、构，这种组合方式对两者对立使用所具有的优缺点进行了互补，在网站设计过程中，通常在主页和第1、第2页面间的链接采用星状结构，而在第2、第3、第4级页面间的链接采用树状结构。见下图：D、确立网站CI要素网站的功能不仅仅局限在信息的传播，在提升品牌、树立形象方面的功能不亚于报刊杂志等印刷媒介。一个知名的网站如同其所有者一样，需要有整体的形象设计。准确、完整、富有创意的CIS识别系统的导入，不仅有利于网站所有者（企事业单位）形象传播，对网站本身的宣传与推广也将起到很大的作用。网站CI要素包括：标识性图案（Logo）、标准色彩、标准字体和广告宣传语、标志性图片等。当这些要素确立后，我们在网页构图设计时才有一个明确的指导方向。示例网站：，E、网站特色定位网站的建设宗旨和服务项目不同，面向访问群体（既受众）也就不同。我们应根据潜在的访问群体进行网站特色定位。如果访问对象是年轻群体，网站应具有版式活泼、基调明快的特色；如果访问对象是科研人员，网站应体现严谨、理性、科学等特点；若受众对象是老年人，那么网站整体应营造一种温馨、关爱、轻松、愉悦的氛围。网站的特色定位是对所要建设的网站的类型、风格、栏目设置、内容安排、链接结构、CI要素、受众对象等诸多元素综合分