网页设计与制作_第6章 网页构图与色彩.ppt

第六章第六章 网页构图与色彩网页构图与色彩通过本章的学习，理解页面平衡的概念，掌握处理页面失衡的方法。了解色彩的基本概念、属性、搭配等色彩运用的基本知识，理解计算机配色的原理，能够在计算机上进行配色。了解GIF，JPEG两种图像格式的优缺点，能够依据要求选择图像格式。了解Web安全色的原理，能够在使用色彩时考虑安全色及解决方法，掌握网页文本颜色体系。了解页面基本构图法：大色块构图法和抽象线条构图法。6.1页面的重心平衡页面的重心平衡本章主要阐述如何设计一个页面，不必着急把FrontPage打开，因为目前尚未真正开始运用软件开始制作网页的时候，当务之急在于“创作”而不是“制作”。然而“创作”并非没有章法，是有其原则的，本章所要阐述的就是单独制作一个页面的原则。首先要考虑的问题就是页面的重心平衡。我们知道，精美的页面并不是由精美的图片机械地堆砌而成的。当有许多图片可以利用时，图片在网页上如何进行安排就显得非常关键，所遵循的一个重要原则就是页面的重心要平衡。6.1.16.1.1重心平衡概述重心平衡概述重心平衡，即页面重心反映的网页上各种元素分布的协调程度。任何一张图片或者一段文字，都在网页上占据一定空间。作为一个模块其本身就具有重心位置，当插入到空白网页后，就会明显改变整个网页的重心。如图6-1所示，当把一张照片插入网页的左侧时，给人的感觉就是整个页面的重心偏左，看起来显得左重右轻。为了保持网页重心的平衡，使页面的重心仍然位于页面中线，就需要在右侧适当地放置一些元素，这些元素可以是一段文本，也可以是图片。重心平衡并非代表网页必须是对称布局，虽然对称布局更容易获得重心平衡，但对称布局非常死板，容易使页面失去活力，因此非对称布局反而是更多网页的首选。非对称布局也可以通过调整页面对象来调整重心，只要适当分布网页上的元素。一般情况下，重心平衡是指左右重心的平衡，而“上重下轻”也是网页构图通常采用的做法，即对页面上下重心的平衡上要求不严。这是因为由于浏览器通过滚动显示整个页面，访问者一般不会注意上下重心的分布，采用“上重下轻”的方案是因为浏览器显示页面效果总是由上而下的，所以页面开发人员自然而然把网页的重点落在上部。虽然重心平衡的原理很简单，但初学者在实际操作中往往会忽视这个问题，或者感到束手无策无法调整妥当。网页上的元素众多，除了经常遇到的图片和文字外，还有页面背景、表格、表单元素（如文本框、列表框、按钮等）等，这就使得重心变得更加难以平衡。6.1.26.1.2重心平衡设计实例重心平衡设计实例一般来说，为了确保网页的生动性如果采用同一类元素去保持重心平衡那么就会适得其反，因为同一类元素本身的重心是一样的，除非他们呈对称分布，否则网页的重心不能获得平衡。而不同元素由于有不同的重心，在网页上就容易取得不对称布局时的重心平衡。1、新民生公司主页的重心平衡设计如图6-2所示的新民生公司就体现了网页重心平衡的设计原则。页面的四周使用深黑色围起，中心形成一个椭圆形造型，左上角放置着公司Title，在页面的中央则放入了一个浅色的钟，这时整个页面的重心是偏向了左上角，如图6-3。为了平衡重心，页面设计者把栏目导航栏的子菜单巧妙地放置在页面的右下方，这个小小的处理不仅使页面一下子生动起来，同时最重要的是在无声无息中使页面的重心向右下方移动。因此，最终页面是平衡的。2、LufthansaTechnik公司页面的重心平衡设计看看LufthansaTechnik公司网页的页面平衡问题，该网页如图6-4所示。在这里网页重心的平衡原则运用相当明显：页面中央放置了一幅大型的公司标志性主图片，让浏览者对公司性质一目了然，由于这幅大型的主题图片位于页面的右方，重心偏右。如果只是单纯的这样摆设，整个页面造型给人的感觉就很不稳定。为了改变重心偏移的问题，聪明的设计在页面上的左上角加了一块简单的渐变图案和几行看似漫不经心的右对齐的文字（右对齐的文字是对整齐的主图片的一种呼应），就是在这寥寥的几笔摆弄下整个页面的左边神奇的饱满起来达到了一定的平衡效果。但是仅仅这样做是不够的，页面重心仍然没有达到平衡的效果，重心改为偏上。为了解决问题，接下来设计者又分别在页面的右上角和左下角分别放置了一幅标志性的图片和几个小色块，这样，不仅整个页面的重心巧妙地得到了平衡，并且标志性的图片和几个小色块的颜色与大型主题图片的色调一致，使整个页面给人和谐平衡的美感。3、BIRMINGHAM公司的主页平衡BIRMINGHAM公司的主页如图6-5所示。在这个网页中，重心的平衡原则运用得相当明显。整个页面的空间分为两大部分，左边空间由一幅象征着飞向明天飞向希望的展翅高飞的飞机图片作为背景，在此背景上方放置着栏目导航条，这样不仅可以让浏览者清晰地读到信息，最重要的是和右边空间中央放置的具有公司Title的图片相互呼应，达到了左右平衡之效果。但是这时，整个页面的重心还是偏在左方，如图6-6。为了平衡重心，页面的右下角加上一条长长的蓝色横线，此横线是整个页面的点睛之笔。整个页面的重心通过这条横线向页面右方移动，从而达到平衡。小小的横线不仅使页面空间分割很合理，而且它是左边飞机机翼的一种无形延伸，给人一种很强的视觉冲击力。以上介绍的是关于网页中心平衡的一些实例，可见重心平衡是设计一个网页时必须考虑到的重要因素。当发现自己的网页看上去不协调时，首先需要考虑到的就是网页的重心是否平衡的问题。当然，网页的重心本身不是独立的，下面一节介绍的页面色彩在网页上同样会发挥相当的作用，如果两者结合起来相互配合可起到事半功倍的效果。6.2页面色彩以及面色彩以及图片的格式片的格式色彩具有强大的精神影响力，人常常会感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同的层次中，有些属于直接的感官刺激，有些要通过间接的联想，更高层次则涉及到人的观念、信仰。对于艺术家和设计者来说，无论哪一个层次的作用都是不能忽视的。对于网页设计者来说，色彩的心理作用尤其重要。因为在网络世界这个特定的历史条件与社会环境下（即高效率、快节奏的现代生活方式中），就需要所设计的网页能把握住人们在这种生活方式下对网络消费的一种心理需求。1、网页用色概述作为网页设计师来说，做到有针对性地用色是相当重要的。因为网站往往是为达到各种各样的目的而建立的，有大型公司、政府组织、体育组织、聊天室、新闻信息以及个人主页等等。不同内容的网页，用色应该有较大的区别，所以要合理使用色彩来体现网站的特色是高明的做法。例如：做公司的网页，就不能仅仅使用一些不着边际的颜色来吸引人，而要让人一看到这个网站的用色就立即明白该公司的主题。怎么能做到这一步呢，应该从公司的标准色入手。一个公司的CI是灵魂，做网站往往是为了提升公司的形象。因此把表现企业主题的标准色应用到网页中去，一定会给浏览者留下深刻的印象，这就牵涉到标准色的组合应用。有一个色彩的基调问题，要抓住自己的主色再配以不同的辅色，这样既突出了公司的特色，又能使页面丰富多彩。当然，用色方法还有很多，这只是一种用色的参考，版面设计和内容同样也能体现出企业的形象与风格，只是色彩更加容易达到引人注目的效果。在做到用色有的放矢之后，再回到平面设计上来，因为网页设计实际上就是平面设计，只不过目的性、时效性更强而已。每一次网页设计都可以被当作是做平面设计，但也有一些不同。例如，网页的外框是受电脑的屏幕所限制的，具有特定的比例。同时还有一个与电脑屏幕的颜色搭配问题，在普通的平面设计中一般是不会受到任何限制。在用色的要求与规律方面，网页设计和普通的平面设计是相通的，即包括搭配色彩的明暗、轻重、冷暖等等，以及调整色彩对比度的应用等。应该针对不同站点的主题来布置色彩，比如健康类的网站就不能采用较为刺激的大红或黄、橙以及象征死亡和神秘的黑色和紫色，这样会给浏览者造成一种紧张和某种程度的恐慌以及一些不利于健康的联想。而相对较多的采用一些较纯的绿色或者相关不同明度的绿色，这样能带给人以宁静、安详与平和，如同让人置身大自然感受那些清新，这样使人身心受益。同样的道理，做新闻类的网站就不能这样用色，考虑到访问者浏览网站的目的是获取大量的信息，所以最好采用较为鲜艳的色彩组合，这样就能使读者快速地获取信息，感受到信息的高速传递，像快餐店里采用的大红色彩特别适合于现代社会快节奏高效率的生活方式。不断地用色彩来吸引顾客，这是平面设计的一种用色彩表达心理的方式，很好地把握住这种用色的技巧，灵活地应用是网页成功的一个方面。用色往往并非是简单地运用，还要考虑诸多因素。例如，浏览者的类别、社会背景、心理需求和场合的差异等等，这就要求网页设计者认真地分析网站的受众，并且要多收受众取所反馈信息，找出他们满意或不满意的原因，综合予以考虑。社会背景不同的人，个人的目的不同，他们对色彩的感受也不同，所以网站的用色就要考虑到多方面的需求，尽可能地吸引各种注意力。访问者如果大多是素质较高的人，就应该考虑用色讲究，要有一定的品位，有所偏向。网页设计的用色也要特别地关注流行色的发展，每年西方都要发布一些流行色，这些色彩是从人们喜好的颜色中挑选出来的。关注、有心地研究它，而且努力地将这种观念应用到自己的设计中去，就会使自己的网页富有朝气、更受欢迎。同时多研究别人的用色习惯，多看一些网友对各类网站的评价也是相当重要的，做到这一点，能提高自己的色彩品位。多用一些受人喜爱的颜色，才能吸引人的注意。另外，作为一名网页设计师需要有自己的特色。例如，自己钟爱的颜色和用色的一些独特的方面，这点不要轻易地舍弃。用他人喜欢的色彩是不会掩盖设计师的特色的，因为设计师用色往往是在保留自己的用色方式上再去采用一些比较让人接受的颜色。相信，随着用色方式的日趋规范合理会逐渐让人感到如同艺术品一样让人赏心悦目。网页色彩的运用问题比处理网页重心问题显得更为复杂，有些商业网站的网页看上去十分典雅、有品位、令人赏心悦目，但是页面结构却很简单，图像并不复杂，这主要缘于色彩运用得当。相比之下，个人网页时常会出现这样的情况：从网页设计上看并没有什么问题，各种元素的安放位置也恰当，但网页的颜色看起来却让人觉得不舒服，这就是在色彩搭配上出现了问题。另外，初学者有一个通病：为了把网页制作得漂漂亮亮，什么颜色都希望能够在页面上得到使用，但是这样很快就会发现，Windows提供的色彩不够用了，当把所有色彩都用了一遍之后，不管再想添加哪种颜色，都觉得别扭。初学者不明白配色原理，制作的网页就很难达到设想的要求，不能认为只要把赤橙黄绿蓝紫都弄到网页上，就可制作出优美的网页。强调主要色调，就是希望网站有一个统一的颜色氛围，它并不是让制作者乱用颜色。后面的章节中将要讲到一些基本的配色原理，就是要告诉初学者，如何搭配出简单而美观的颜色体系。由于本书并不是专门的美工教材，因此在色彩问题上不可能讨论太过细仔。然而，要想设计出精彩的网页，必须要有色彩的概念。而且网页作为一种展示形象的宣传品，不能不考虑到色彩的运用，这对于日常生活的方方面面都是非常有用的，下面将主要介绍一些常用的基本色彩的概念。2、色彩的基本概念自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑、白色和各种深浅不一的灰色，其他颜色属于彩色。彩色具有三个属性：色相（Hue）、饱和度(Saturation)、明度(Brightness、Lightness或Luminosity)。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑、白色和各种深浅不一的灰色，其他颜色属于彩色。彩色具有三个属性：色相（Hue）、饱和度(Saturation)、明度(Brightness、Lightness或Luminosity)。色相：是颜色的基本属性，反映颜色的原貌。通过色相，人们才能区分种种色彩。人们通常所说的颜色，其实就是指色相。饱和度：也叫纯度，指颜色的原貌。饱和度大，颜色就显得生动、活泼，有很强的视觉冲击力；如果饱和度小，颜色就不纯净，看起来显得模糊。明度：也叫亮度，体现颜色的深浅。我们通常说的颜色“淡了”、“浅了”，就是指明度的高低。然而，非彩色只有明度属性，没有色相、饱和度属性。在著名的图象处理工具Photoshop中有专门的色彩属性对话框，如图6-7所示，就包含了上面所讲到的色彩的三个属性。这个对话框非常重要，在制作风格化的主题图形以及进行照片阴影设计中，都可用到。所有的色彩都可以通过三原色调配出来，电脑屏幕的色彩就可以调配出其他的颜色。每种颜色可调配的范围从0255共计256个色阶。如果用十六进制表示，就是00FF。在这样的标记中，#FFFFFF代表白色，而#000000代表黑色。这就是说设置了该网页是黑底白字。所有图像处理软件，都提供色彩调配功能，可通过输入三原色的数值（包括十进制和十六进制）来调配颜色，也可以直接根据软件提供的调色板来选择颜色。Photoshop中的调色板就提供了这两种功能，如图6-8所示。除了应该了解如何调配色彩之外，网页制作还需要对色彩表现的内涵有所熟悉。页面中应尽量使用比较淡雅、简洁的色彩；背景尽量少用色调灰暗、深沉的色彩（除非特殊需要），并且要根据主页面的主题来选择主色调，因为不同的色彩能带给人们不同的感觉：红色：代表热情、奔放、喜悦、庆典。黑色：代表严肃、夜晚、沉着。黄色：代表高贵、富有。白色：代表纯洁、简单。蓝色：代表智慧、天空、清爽。绿色：代表生命、生机。灰色：代表深沉、阴暗、消极。紫色：代表神秘、浪漫、爱情。棕色：代表土地。3、色彩和GIF，JPEG文件格式色彩的载体是图像，图像的载体是文件格式，采用不同格式存储的图像与最终显示给用户的效果与文件的格式息息相关。在互联网上，最为常用的图像格式一般都采用GIF和JPEG两种格式。初学者可能一时分不清什么时候该用GIF格式，什么时候该用JPEG格式。因为粗略看来两者没有区别，其实二者之间有着一定的区别，各有区别，否则两种格式是无法同时存在的。有一个非常简单的原则来判断应该采用哪种文件存储格式：如果是自己设计的线条简单、色彩种类比较少的图形，或者是制作透明图形、制作动画就用GIF格式，因为GIF文件能够做动画，而且它的压缩算法是通过精简色彩集来实现的；如果需要在网页上放置一幅照片，或者是处理过的照片，那么就使用JPEG文件格式，因为JPEG的压缩算法对包含有复杂的颜色的图片很有效，下面将对GIF文件格式体系和JPEG文件格式体系进行比较。在表6-1中列出了GIF和JPEG两种文件体系和压缩算法的各自特点。可以看出，在GIF格式中最多允许有256色，而JPEG则没有这个限制，且可以显示所有的RGB颜色。RGB颜色在一般的个人电脑上可以从000000FFFFFF，也就是所谓的24位真彩色，它共有256256256=16,777,216种不同的色彩。而GIF的颜色只用8位表示，所以其色彩范围为00FF，只能显示256种颜色。为什么有这样的差异呢，这就要从计算机的基本原理说。计算机的一个bit（位）可以有0和1两种状态，如果对应为颜色，可以表示黑和白2种颜色；如果是2个bit，就有00，01，10，11，这4种状态，就可以对应4种颜色了。依次类推，若采用8bit来表示颜色就是用000000111111之间的所有变化来对应颜色的种类，共有256种颜色；如果是24位真彩色呢，那么颜色种类为16,777,216种。因此，用来表示颜色的位越多，可表现的颜色种类也越多。当为32位色彩时，颜色的种类已经达到4,294,967,296种，但是这些颜色的数量早已超出了人类肉眼可以识别的色彩数量了。所以，一般来说计算机所使用的色彩位数不会超过32位真彩色，再多的话就变得没有意义，而且会因为文件过于庞大而造成存储空间的浪费。在使用彩色照片时，由于彩色照片属于连续色调的图像，因此它所包含的颜色数目一般远远大于256色，如果把它保存为GIF格式的文件，将不能把这些颜色都显示出来。GIF的原理是先为所有的颜色建立一个索引，然后选择其中256种最常见的颜色进行显示。因此GIF用来处理高清晰度照片是不太适合的，而简单的线条或者大色块的图像则不然，它们应当保存为GIF格式。显然，如果颜色数目少于256色，保存为真彩色的图像就会造成浪费，因为在保存为真彩色（JPEG）的过程中，对每一个像素点都要建立颜色信息，这样就会有大量的颜色信息是重复的，图片文件自然就会增大了。而GIF与JPEG的不同，如前面所述，它首先在GIF文件头部建立一个颜色索引表，然后仅仅保存各像素点对应的颜色索引号。当软件在显示这个文件时，首先对GIF图像进行解码，就会按照索引号在表中寻找对应的颜色。因此在保存简单颜色的图像时，GIF大量采用索引，就比JPEG直接存储各点的颜色信息节省得多。GIF图像中的色彩不一定是256色，如Photoshop就能够让用户对GIF进行减色，减少值可以是128，64甚至可以减少到2。另外，如果图像本身就是由简单的颜色组成，选用256色的GIF就显得没有必要。Photoshop推出的GIF(LossyGIF)技术,不仅可以通过Color选项把用以索引的颜色减少到256色以下，而且利用Lossy功能一步就可减少图片尺寸。由实际效果对比和表中参数可以得出这样几个结论：当图像色彩较少时保存JPEG并不合算，不仅文件体积大而且图像边缘失真。均采用64色GIF时，不使用抖动选项时图像比较尖锐，尺寸居中。仅添加抖动时图像尺寸一般都要变大，但画面更柔和。当Lossy的值为50%以上时，图像尺寸大幅减少，但图像品质下降。因此，只要图像品质可以接受，采用Lossy就能大幅度减少GIF尺寸。4、网页色彩搭配的原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。5、网页色彩掌握的过程随着网页制作经验的积累，我们用色有这样的一个趋势：单色-五彩缤纷-标准色-单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。6、网页色彩搭配的技巧这里推荐一点技巧，可以帮助你迅速成为调色大师。用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了。用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。在网页配色中，忌讳的是：不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。6.3图象的象的优化化Web图形设计的最终目的就是可以让用户能在网页上欣赏到效果最好的图像，并且能以最快的速度在浏览器中显示出来。这样就需要在图像的大小和质量之间寻找一个合适的平衡点，使用FireworksMX提供的【优化】面板可以帮助用户出色地完成图形的优化工作。1、预览优化设置图像优化是在【优化】面板中进行的，选择【窗口】|【优化】命令即可调出【优化】面板。根据导出格式的不同，优化面板上显示的参数项也不同，如图6-10所示为GIF格式图像的【优化】面板。FirworksMX预设了很多优化设置，对于大多数用户可以直接使用这些预设优化格式。打开优化面板【设置】下拉列表，即可选择FirworksMX预置的优化模式，各种优化模式简单介绍如下：GIF网页216：GIF格式图形，最多可以使用256色。选择该优化模式，可以将图形中所有的色彩都用最简单的方式转换为216种安全色彩中的颜色。GIF接近网页256：该模式为256色，接近网页优化模式。所谓接近网页，就是通过特殊的色彩算法将图形中的非安全色“吸附”到相应的安全色，这样处理后的图形色彩与简单的非安全色转换为类似的安全色的效果相比，更接近原图形色。GIF接近网页128：该模式为128色接近网页的优化模式。选择该模式，将仅使用128种安全色彩来处理图形。GIF最适合256：该模式为GIF图形所独有的适应色彩优化模式。所谓适应色彩优化，就是首先将图形中符合Web安全色的色彩进行匹配，然后再分配剩余的非Web安全色，分配方式可以是最适合网页的吸附方式。JPEG较高品质：该模式以保持文件质量为主的JPEG优化模式，选择该模式进行优化后得到的JPEG图形质量较高。JPEG较小文件：该模式将保持文件大小为主要标准的JPEG优化模式，得到的JPEG图形文件较小。动画GIF接近网页128：使用128色动画GIF格式，使用颜色为网络安全色，适用于动画GIF图片。当选中了一种内置优化模式后，可以在画布窗口中通过【预览】窗口、【2幅】窗口、【4幅】窗口观察效果。在各个浏览方式中，【4幅】窗口可以同时显示4个窗口，其中一个为【原始】编辑窗口，另外3个都是可以进行优化预览，而且每个窗口都可以是不同的模式。如图6-11所示的【4幅】效果分别是不同模式的预览。6.4页面构图方法随着计算机应用的发展，网页的布局设计变得越来越重要。重心平衡和色彩的运用只是其中的两个方面，如何对页面的元素进行排版、布局同样非常重要。虽然网页的内容很重要，但只有当网页布局和网页内容成功结合后，这种网页或者站点才会受浏览者喜爱。单独注重任何一方面而没有和另外一方面进行配合，就无法吸引浏览者继续访问站点内的其他内容。1、网页布局相关的基本概念在开始进行网页设计的时候，网页呈现在开发人员的面前就好像一张白纸，可以由他们任意挥洒设计和构思。.但是，虽然能随意控制页面上所有的元素，但假如不知道什么是约定俗成的标准或者说大多数访问者的浏览习惯，那么就不可能在此基础上加上自己的东西来被广大浏览者所接受、欣赏。当然，也可以创造自己的设计方案但如果是初学者，那么这种方案是很难成功的，因为没有最基本的一些概念来支撑它。这些概念也就是人们常说的章法，因此要做好页面设计，就必须先了解一些网页布局的基本概念。1页面尺寸页面尺寸和显示器大小以及分辨率有关系，网页设计的局限性就在于无法突破显示器所显示的范围，而且因为浏览器的界面也将占去不少屏幕空间，留下的页面范围变得非常小。一般来说，当显示器分辨率在800600的情况下，浏览器为标准工具栏，页面的显示尺寸为620311个像素；分辨率在1024768的情况下，页面的显示尺寸为1007600。从以上数据可以看出，分辨率越高可供使用的页面的尺寸越大。浏览器的工具栏也是影响页面尺寸的原因，目前浏览器的工具栏一般都可以取消或者增加。那么，显示全部的工具栏还是关闭全部工具栏，其页面的尺寸是不一样的，如图6-12所示。在网页设计过程中，当前浏览器的分辨率为固定的时候，向下滚动页面是惟一给网页增加更多内容（尺寸）的方法。但要注意除非能肯定站点的内容能吸引浏览者向下滚动，否则不要把页面的长度设为多于三屏。如果确实需要在同一页面超过三屏的内容，那么最好能在页面上根据内容做出页面内部链接，方便访问者浏览。2整体造型什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中各种几何形状：矩形、圆形、三角形、菱形等及它们的组合。同色彩一样，不同的形状所代表的意义是不同的，比如矩形代表正式、规则，可以注意到很多政府网页都是以矩形为整体造型；圆形代表柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表力量、权威、牢固、侵略等，许多大型的商业站点为显示他的权威性常以三角形为页面的整体造型；菱形代表平衡、协调、公平，一些交友站点常用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是结合多种图形加以设计的，但其中某种图形的构图比例可能占得多一些。3页眉页眉又可称之为页头，其作用是定义页面的主题，比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点主要是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。在页眉部分通常放置站点名字、图片和公司标志以及旗帜广告。4文本文本在页面中多数是以行或者块（段落）出现，它们的摆放位置决定着整个页面布局的可视性。过去因为页面制作技术的局限，放置文本位置的灵活性非常小，但随着DHTML（动态HTML）的普及，文本、段落已经可以通过层的概念按要求放置到页面的任何位置。5页脚页脚是指在页面最下方的一块空间，它和页眉相呼应。页眉是放置站点主题和标志的地方，而页脚则通常是放置制作者、公司相关信息、版权的地方，有时候，还会放置一个导航栏。6图片图片和文本是网页的两大构成核心，缺一不可。如何处理好图片和文本的排列放置成了整个页面布局的关键。7多媒体除了文本和图片外，还有声音、动画、视频等其他媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，他们在网页布局上也将变得更重要。2、网页页面布局的方法在进行网页布局时，需要有一片空白的空间供创作人员自由发挥，主要可以通过两种工具来进行创作。第一种工具是纸，在一张白纸上进行布局构思；第二种工具是计算机，通过某些软件来进行页面布局构思。下面分别加以介绍：1纸上布局法目前有许多网页制作者喜欢直接在网页设计器里一边设计页面布局一边加内容，而不喜欢先画出布局的草图。其实，如果不是在胸有成竹的情况下，这种不打草稿的方法很难设计出优秀的网页。因为，即使是可视化的网页设计器也还达不到完全随意控制元素、挥洒自如的程度。而如果先有草图，知道最终要设计成什么样子，那么通过可视化的网页设计器来实现就容易得多。所以在开始制作网页时，最好先在纸上画出希望得到的网页的布局草图来。我们以设计一家时尚店站点的页面为例步骤一：准备若干张白纸和几支削好的铅笔（或自动铅笔），橡皮一块。要保证不会由于工具的问题而打断自己的思路。步骤二：选择页面尺寸。目前一般800600的分辨率为约定俗成的显示模式，所以为了满足大多数浏览者，页面的尺寸以800600为准。步骤三：页面总体造型的选择。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是要布局的范围，代表目标页面。如图6-13所示。步骤四：选择一个形状作为整个页面的主题造型。选择圆形，因为它代表着柔和，与时尚流行的主题比较相称。然后在矩形框架中根据感觉画出来，可以试着再增加一些圆形或者其他形状，如图6-14所示。在画完之后，也许会发现页面显得很乱，不用着急，要知道一开始就想设计出一个完美的布局来是比较困难的，多画几次之后，就可以在这看似很乱的图形中找出隐藏在其中的满意的造型来。要不断地提醒自己，不必担心所设计的布局是否能够实现，因为只要能想到的布局，靠当今的网页排版技术都能实现。步骤五：在构思了许多图形之后，选择一个满意的基本结构作为整个页面的主题造型，如在图6-14所示的两幅简图中选择右边的图形作为构思基础。可以看出，页面的重心是偏左的，为了保证页面平衡需要在页面右边增加一个矩形，如图6-15所示。步骤六：开始增加页眉。图6-15是我们从步骤四中加以演化而得到的布局造型，下一步应该增加页眉。一般页眉都是位于页面的顶部，所以在图6-16上方增加了一个页眉，为了和左边的弧线以及右边的矩形取得平衡，所使用的是一个矩形页眉并与左边的弧线相交。步骤七：增加文本。根据设计习惯，一般采用从上到下的设计思路。在确定页眉之后，应该确定页面主体文本的位置，页面的空白部分可以加入文本或图形。由于在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，见图6-17。图6-17 页面构图步骤七步骤八：增加图片。前面讲到过，文本和图片是页面中的两大元素，同时图片是美化页面和说明内容必须的媒体，把图片加入到自己认为适当的地方，如图6-18所示。图6-18 页面构图步骤八经过上面八个步骤，一个时尚站点页面的大概布局就出来了。当然，它不是最后的结果，而是后面制作页面时的重要参考依据之一。2软件布局法如果不喜欢用纸来做布局设计的工作，当然可以利用软件来完成这些工作，最方便的软件就是Photoshop。将Photoshop所具有的图像编辑功能用到设计网页布局上更显得心应手，不像用纸来设计布局，利用Photoshop可以方便地使用颜色和图形，并且可以利用层的功能设计出用纸张无法实现的布局意图，而且还容易修改。3、页面构图实例在前面已经将页面构图的基本步骤进行了介绍，下面将介绍两种利用颜色和造型相结合的页面构思实例。1大色块构图图6-19所示是某公司的主页，这个页面是大色块构图的典型。图6-19 采用大色块构图的页面大色块构图的思路在网页制作中比较流行，这是因为进行大色块构图时，可以充分利用表格单元格的底色来形成大幅面的色块，而不需要制作如表格那么大的单色图像。在色块的边缘用图像来拼接，就可做出立体效果来。这样就比较经济，而且制作出的网页不至于过大。此外，大色块构图具有很强烈的视觉冲击力，因为大色块色彩集中、醒目，并且，采用大色块进行设计最容易掌握。它不用考虑复杂画面的拼接，只需掌握各色之间的搭配与对应，色块一般是矩形，几乎没有其他形状，处理起来很方便。下面介绍两种大色块构图的思路（1）对称色块构图。图6-20属于典型的对称色块设计，它用粗黑的边线组成一个田字形色框，在四个小色框内，采用了四种非常鲜艳的颜色亮紫、橙色、亮蓝、草绿色。值得注意的是，在每个色块中的前景文字颜色是统一的，这是大色块构图的一个要点。该色块构图在色彩处理上既有不同颜色的对比，又有同种颜色不同色阶的呼应、色彩统一，整个页面显得活泼、有序。图6-20 对称色块构图（2）非对称色块构图。非对称色块是指对各色块的份量、形状、位置等不同的色块运用，它要求设计者对各种颜色代表的内涵有一定的了解，能合理地分配各种色块。一般来说浅色调显得轻浮，而深色调显得凝重。在运用颜色主导时重心会随着颜色而偏移，这时在进行对称布局时必须仔细权衡，图6-21是非对称色块构图实例。图6-21 非对称色块构图该主页主要有两种色块，紫红色调在其中起主导作用，显得有条不絮。为了突出这种主导作用，紫红色块的分量被加大了，占了将近整个页面是二分之一。另外把页面中的冷色调灰和黑的明度都降低，使之起到了烘托作用。图6-22是logan公司的主页，它以黑色为基本色调。与黑色调相配的色彩有很多种，比如黄色、白色等，每一种都可以产生很强烈的视觉效果，因为黑色很容易衬托出这些色彩来。当页面基本被一种色系占据时，另一色系的亮色将会强烈冲击浏览者的视线，一般这种亮色被用在制作需要访问者特别注意的广告或提示中。现代设计崇尚简单明快，对渐变色块运用的好坏与否就显得非常重要，它体现了一个设计师对颜色的领悟与把握。当初学者在制作网页时，如发现页面色彩过于刺眼，无法确定页面的焦点，可以尝试改用同一色系的颜色配合白色、黑色来布局。同一色系的颜色由于色相(Hue)基本接近，在视觉上不会表现得不融合。灵活运用色块是网页设计中的一项重要技能，掌握它确实有一定困难，需要一定的美术功底，这里给出运用色块制作网页时需要掌握的几个要点：冷暖色调在均匀使用时不宜靠近，如果必须的话，应当使用中间色（白色或黑色）分隔过渡，在对称色块构图中更应该注意。纯度相同的两种颜色也不宜放在一起，如亮红和亮绿。颜色太纯，对眼睛有强烈刺激，容易造成眼睛疲劳，应降低其中一种颜色的纯度，可以选择在亮色中加入其他颜色加以平衡的办法。如：可以使用墨绿配亮红色，这样焦点将滞留在红色上，绿色也不会扰乱视线。整个页面中最好有一个主色调，否则整个页面就显得凌乱。在制作非对称色块网页和渐变色块网页时，这是一个原则。2抽象线条构图与大色块构图相对应的是抽象线条构图。抽象线条构图也是一种流行的构图趋势，如图6-23所示是hom公司的主页。图6-23 抽象线条构图之一在整个页面中，没有突出的大面积的色块，取而代之的是一些圆弧线、直线以及一些小线段，这些线段的互相搭配形成一种简洁爽朗的风格，线条和页面中央的思考者的图片构成了一个引人无限想象的宇宙，体现公司以创造性思维为主的思想。单一线条本身并不构成画面，但组合在一起就有一种抽象的美感，每个人都可以从中产生各自的感觉，这就是抽象线条构图，即仅仅凭借简单的线条（圆、直线、圆弧等）形成的网页。抽象线条的构图并不是独立的，由于线条纤细，很容易造成重心不稳，因此抽象线条构图往往需要搭配一些图片，以起到画龙点睛的作用。但是这样的图片不能过多，否则抽象美就不存在了。抽象线条构图一定要注意留给抽象线条充分的表现空间，在抽象线条构图中，色彩一般使用统一色调。在图6-23中，无论是短粗线段，还是纤细的圆弧，都是黑色。使用统一色调对于页面融合有很大好处，同时也便于突出中心图片。图6-24是otsignstudid的主页，很明显，也属于抽象线条构图，抽象线条使首页面看上去很简洁，在滥用Web图片的今天，这种构思独树一帜。在页面中央是大量的抽象线条把各个站点内的栏目串联起来，有助于页面平衡，同时使用抽象线条构图比较符合该网站的风格简洁明了，动态十足。图6-24 抽象线条构图之二otsignstudid主页的设计布局给我们的启示：按钮的制作并不需要很“漂亮”，网页的制作不是为了让人们关注这些“漂亮”的小按钮，而应把重点放在制作优秀的主题图形上。国际上网页的按钮外观正变得越来越简单，在这个网站上，没有过多地修饰按钮，而只表明那是个单击点。导航的设计越简单就越清晰，主题图形自然而然得到了强调。需要注意的是，初学者比较容易犯的一个错误就是用心地去修饰按钮，事实上栏目按钮无形中使得页面“过载”，因为按钮数目是和栏目保持一致的。如果每一栏目页上都需要显示所有栏目，就会导致栏目过多，页面就“重”。如将按钮换为超级链接就很容易和文本混淆，这样的网站没有美感可言。只要网速不是太慢，制作几个抽象线条的按钮并不太费时，对页面的影响也不大。当连抽象线条按钮也无法添加时，那么只能说明主页所在的服务器速度太慢。6.5文本色彩体系如果你经常查看网页的源代码的话，经常可以在Web页面发现类似这样的代码：这些代码的作用在于为整个网页规定了色彩体系，包括背景色（bgcolor属性）#00000（黑色），文字前景色(text属性)#FFFFFF（白色），超级链接文字(link属性)#FF0000(红色)，在单击链接(vlink属性)之后变成绿色，在单击的瞬间(alink属性)为浅兰色，整个网页的文本颜色体系基本是就是用这行HTML语句规定的。目前，HTML已经有了长足的发展，颜色体系的规定也变得复杂起来，其中CSS就是功能更为强大的样式创造者，而样式中就包括颜色。在颜色设置指导选项组中包含数项调整项，网页开发人员可以针对某种类型的文本进行调整，直接拉动分别代表RGB三个色彩分量的滑块就可以改变相应文本的颜色了。最下方的示范文字用来预览显示效果，有关说明如下：所有的普通文字的色彩：显示正常文本颜色。Link颜色示范：显示未访问的超级链接颜色。vlink颜色示范：显示已经访问过的超级链接的颜色。alink颜色示范：显示超级链接被激活时的颜色。当把所有颜色都设置好后，在中间的文本框中的HTML源码即为当前颜色体系的HTML源代码。比如设计时采用“文本色白色、未访问链接红色、访问链接绿色、激活的链接浅蓝色、背景黑色”这样的颜色体系，获得的HTML源代码就是：要注意的是，并不是所有颜色都能在网页上得到完美显示，这是因为浏览器同样可能显示不出用户想要的颜色而发生“抖动”，