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

《网页设计与制作_第6章 网页构图与色彩》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第六章网页构图与色彩通过本章的学习，理解页面平衡的概念，掌握处理页面失衡的方法。了解色彩的基本概念、属性、搭配等色彩运用的基本知识，理解计算机配色的原理，能够在计算机上进行配色。了解GIF，JPEG两种图像格式的优缺点，能够依据要求选择图像格式。了解Web安全色的原理，能够在使用色彩时考虑安全色及解决方法，掌握网页文本颜色体系。了解页面基本构图法：大色块构图法和抽象线条构图法。6.1页面的重心平衡本章主要阐述如何设计一个页面，不必着急把FrontPage打开，因为目前尚未真正开始运用软件开始制作网页的时候，当务之急在于“创作”而不是“制作”。然而“创作”并非没有章法，是有其原则的，本章所要

2、阐述的就是单独制作一个页面的原则。首先要考虑的问题就是页面的重心平衡。我们知道，精美的页面并不是由精美的图片机械地堆砌而成的。当有许多图片可以利用时，图片在网页上如何进行安排就显得非常关键，所遵循的一个重要原则就是页面的重心要平衡。6.1.1重心平衡概述重心平衡，即页面重心反映的网页上各种元素分布的协调程度。任何一张图片或者一段文字，都在网页上占据一定空间。作为一个模块其本身就具有重心位置，当插入到空白网页后，就会明显改变整个网页的重心。如图6-1所示，当把一张照片插入网页的左侧时，给人的感觉就是整个页面的重心偏左，看起来显得左重右轻。为了保持网页重心的平衡，使页面的重心仍然位于页面中线，

3、就需要在右侧适当地放置一些元素，这些元素可以是一段文本，也可以是图片。重心平衡并非代表网页必须是对称布局，虽然对称布局更容易获得重心平衡，但对称布局非常死板，容易使页面失去活力，因此非对称布局反而是更多网页的首选。非对称布局也可以通过调整页面对象来调整重心，只要适当分布网页上的元素。一般情况下，重心平衡是指左右重心的平衡，而“上重下轻”也是网页构图通常采用的做法，即对页面上下重心的平衡上要求不严。这是因为由于浏览器通过滚动显示整个页面，访问者一般不会注意上下重心的分布，采用“上重下轻”的方案是因为浏览器显示页面效果总是由上而下的，所以页面开发人员自然而然把网页的重点落在上部。虽然重心平衡的

4、原理很简单，但初学者在实际操作中往往会忽视这个问题，或者感到束手无策无法调整妥当。网页上的元素众多，除了经常遇到的图片和文字外，还有页面背景、表格、表单元素（如文本框、列表框、按钮等）等，这就使得重心变得更加难以平衡。6.1.2重心平衡设计实例一般来说，为了确保网页的生动性如果采用同一类元素去保持重心平衡那么就会适得其反，因为同一类元素本身的重心是一样的，除非他们呈对称分布，否则网页的重心不能获得平衡。而不同元素由于有不同的重心，在网页上就容易取得不对称布局时的重心平衡。1、新民生公司主页的重心平衡设计如图6-2所示的新民生公司就体现了网页重心平衡的设计原则。页面的四周使用深黑色围起，中心

5、形成一个椭圆形造型，左上角放置着公司Title，在页面的中央则放入了一个浅色的钟，这时整个页面的重心是偏向了左上角，如图6-3。为了平衡重心，页面设计者把栏目导航栏的子菜单巧妙地放置在页面的右下方，这个小小的处理不仅使页面一下子生动起来，同时最重要的是在无声无息中使页面的重心向右下方移动。因此，最终页面是平衡的。2、LufthansaTechnik公司页面的重心平衡设计看看LufthansaTechnik公司网页的页面平衡问题，该网页如图6-4所示。在这里网页重心的平衡原则运用相当明显：页面中央放置了一幅大型的公司标志性主图片，让浏览者对公司性质一目了然，由于这幅大型的主题图片位于页面的右

6、方，重心偏右。如果只是单纯的这样摆设，整个页面造型给人的感觉就很不稳定。为了改变重心偏移的问题，聪明的设计在页面上的左上角加了一块简单的渐变图案和几行看似漫不经心的右对齐的文字（右对齐的文字是对整齐的主图片的一种呼应），就是在这寥寥的几笔摆弄下整个页面的左边神奇的饱满起来达到了一定的平衡效果。但是仅仅这样做是不够的，页面重心仍然没有达到平衡的效果，重心改为偏上。为了解决问题，接下来设计者又分别在页面的右上角和左下角分别放置了一幅标志性的图片和几个小色块，这样，不仅整个页面的重心巧妙地得到了平衡，并且标志性的图片和几个小色块的颜色与大型主题图片的色调一致，使整个页面给人和谐平衡的美感。3、B

7、IRMINGHAM公司的主页平衡BIRMINGHAM公司的主页如图6-5所示。在这个网页中，重心的平衡原则运用得相当明显。整个页面的空间分为两大部分，左边空间由一幅象征着飞向明天飞向希望的展翅高飞的飞机图片作为背景，在此背景上方放置着栏目导航条，这样不仅可以让浏览者清晰地读到信息，最重要的是和右边空间中央放置的具有公司Title的图片相互呼应，达到了左右平衡之效果。但是这时，整个页面的重心还是偏在左方，如图6-6。为了平