网页布局与优化设计.doc

网页布局与优化设计 目 录 摘要 1 一、前言 2 二、网页布局概述 2 （一）网页布局有关基本概念 2 （二）网页布局的步骤 3 （三）网页布局的类型 4 三、网页布局设计与优化 5 （一）变化与统一 6 （二）对称与均衡 6 （三）节奏与韵律 6 （四）对比与调和 6 （五）比例与适度 7 （六）重复与交错 7 四、结束语 7 参考文献 9 【摘要】网页布局设计是网站视觉设计研究中的重要环节之一，是将网页上的图片、文字、色彩、动画等视觉构成元素进行合理配置与表现的过程。网页布局设计既要满足实用功能，也要体现审美功能。研究网页布局的形式原理、概念要素与优化方法，既可以为建立网页的视觉秩序提供有效的途径，也可以为提升网页的艺术性，满足受众的审美需求，提高网页信息传递的效率服务。 【关键词】：网页设计，布局，搭配 一、前言 网页是网站构成的基本元素。决定网页是否精美的因素有很多，最主要的是网页内容以及色彩搭配，除此以外，还有一个非常重要的因素———网页的合理布局（1ayout）。网页设计中的布局就是把网页的各种构成要素（文字、照片、图像、图表、菜单等）在网页浏览器里有效地排列起来。在设计网页时，要从整体上把握好各页面的布局，主要是利用表格或网格等把网页设计的要素协调安排起来。只有充分地利用，有效地分割有限的空间，创造出新的空间，并使用合理布局，才能制作出精美的网页。同时，随着网页制作技术和浏览者需求的提高，网页设计被赋予了许多新的内容，主要表现在两个方面： 首先是网页的整体设计。浏览者对整个网页浏览的过程中，会自然而然的形成—种对网页整体的看法，这种看法是附带有感情色彩的，比如舒服与不舒服、好与不好等，这正是网页布局合理性的体现，是网页设计网页是网站构成的基本元素。是网页设计者将内容和色彩通过合理布局，合理搭配所产生的效果。其次是在网页设计中，必须考虑浏览者的方便程度并能明确地传达信息，进而兼顾视觉的造型性和美学的创造性，凸显出网页设计的各个构成要素[1]。 在网站林立、网页纷飞的今天，通过合理的布局，将网页中具有闪光性的内容加以强化，既可以将网页设计者的设计思路淋漓尽致的表达出来，同时也可以赢得浏览者的青睐。 由此可见，要完成一个精美网页的设计制作，如何将网页内容合理分布尤为重要。然而，网页的布局问题恰恰正是网页设计者感到最棘手的问题。在进行网页设计过程中，首先要有一个网页布局的整体概念，然后再通过布局工具加以实现。 二、网页布局概述 （一）网页布局有关基本概念 网页设计不仅仅是把相关的内容放到网页中就行了，它还要求网页设计者能够把这些内容合理安排，给浏览者以赏心悦目的感觉，这样才能达到内容与形式的完美结合，增强网站的吸引力。要做好页面设计，就必须先了解一些网页布局相关的基本概念。 1、页面尺寸 显示器的大小及分辨率的高低决定显示页面的尺寸，网页的最大局限性在于页面显示无法突破显示器的范围。由于浏览器本身也占用了网页显示的一部分，所以能显示网页的页面范围已经相当紧张。一般情况下，显示器在640*480像素的分辨率下，页面的显示尺寸为620*311像素；在800*600像素的分辨率下，页面的显示尺寸为780*428个像素；在1024*768分辨率下，页面的显示尺寸为1007*600像素。可以看出，显示器的分辨率越高，能显示的页面尺寸就越大[2]。 2、整体造型 造型就是创造出来的物体形象，这里指页面的整体形象。尽管显示器和浏览器都是矩形，但对于页面的造型，可以充分运用各种形状以及它们的组合：矩形，圆形，三角形，菱形等等，但图形与文本的结合应该层叠有序。 3、页头 页头又称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多都显示在页眉里。这样，浏览者一看就能知道该站点的主题是什么。 4、文本 文字是网页的主体，是传达信息的最重要的方式一方面是因为浏览网页上的文字和看书很相似，比较符合一般人的习惯，另一方面也因为文字所需要的存储空间非常小。文本的摆放位置决定着整个页面布局的可视性。在过去由于网页制作技术的局限，文本放置的位置灵活性非常小，随着Dhtml的兴起，文本已经可以放置在页面的任何位置[3]。 5、页脚 页脚是和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置作者或公司等各种制作信息的地方。 6、图片 图片在网页中占有非常重要的地位。因为采用图片可以减少纯文字给人的枯燥感，巧妙的图像组合可以带给浏览者美的享受。 7、多媒体 多媒体一般指音频、视频、动画、虚拟现实等形式。将多媒体引入到网页，可以在很大程度上吸引浏览者的注意。利用多媒体文件可以制作出更有创造性、艺术性的作品，它的引入使得网站成了一个有声有色，动静相宜的世界。 （二）网页布局的步骤 网页布局一般分为一下三个步骤： 第一步：草案。新建的页面就好像