[计算机软件及应用]网页设计之三.ppt

第 三 讲 网页设计之三：布局与流程 目 录 1.网页布局的基本方法； 2.网页设计的一般流程； 1.网页布局的基本方法； 网页布局就是把网页中的各种构成要素（文字、照片、图像、菜单等）在网页浏览器中有效的排列起来。 网页布局一般都是通过表格来实现的（有时候也可以使用层，但现在比较少用），将不同的要素合理的放置在不同的表格中，充分有效的切割和利用空间，使得布局尽量合理美观。 网页界面的构成要素 网页浏览器部分（工具栏、状态栏、地址栏、菜单栏），这些不需要设计，但要考虑到它们的高度和宽度； 网站内容： 网站标志（Logo）； 图像、版权说明、正文； 导航（菜单、搜索等内容）； 广告条； 1)网页布局设计的特点 网页设计中，布局的基本要求是要考虑用户的方便程度并能明确地传递信息，进而兼顾视觉的造型性和美学的创造性，要能够凸显出网页设计的各个构成要素。 网页布局的难点在于浏览者（用户）的环境是不同的，使用不同的浏览器（现在主要是IE、FIREFOX、Maxthon傲游等），不同的显示器（显示分辨率）。 不同的显示分辨率问题 我们只能在1024×768像素、800×600像素等长宽比为4:3的条件下完成网页设计（当然现在宽屏显示器的出现，又为我们提供了一些特殊的16:9、16:10的情况，如1280×800像素）。 在不同分辨率下都很美观的网页布局是十分困难的，我们只能考虑绝大多数的情况。 一般我们只考虑能兼顾1024×768像素、800×600像素的情况，因为这是最为常用的分辨率。 2)布局的主要构成原则 醒目性： 使用户把注意力集中到某网页并诱导其继续浏览； 可读性： 使网页的内容能够让人容易读懂； 明快性： 能够准确快速传递网站的内容； 造型性： 维持网页整体外型上的稳定感和均衡性； 创造性： 使得网站富有鲜明的特点和特色； 其他原则 统一、协调： 整个网站的构成应该保持一贯性；避免让用户觉得混乱和不方便； 流动： 能让浏览者的视线产生自然的移动； 主要是在构成元素和色彩方面； 强调： 突出重点，活用色彩，适当留白； 以提高可读性； 均衡： 要素排列应该合理，按照一定的顺序，以便于阅读，并照顾到视觉的稳定性。 3)画出布局草图 在纸上简单地画出网页的布局，分割空间，并对构成要素进行编排。注明，各部分名称、简要的说明、高度和宽度等尺寸、初步确定使用的颜色等。 草图的横向长度，应小于显示器的横向分辨率，比如800×600像素的情况下，应该要小于800像素。 草图样本 4）网页布局的对齐方式 左对齐布局； 居中对齐布局； 水平、垂直居中对齐布局； 充满整个浏览器的布局。 左对齐布局 一般来说，左对齐是最常见的布局方式，它的宽度不超过800像素，考虑纵向滚动条等原因，一般应小于780像素。 因为如果大于800像素，就有可能出现横向滚动条，这是用户所不习惯接受的。 这样就兼顾了1024×768像素和800×600像素用户的需求，其余部分则为留白。 居中对齐布局 水平居中对齐也是一种常见的布局方式，这类布局给人以很好的均衡感。 网页宽度也应以小于780像素为佳，两边的部分可以留白或以其他彩色背景代替； 如果不希望出现纵向的滚动条，那么高度应该小于560像素。 水平、垂直居中对齐布局 这类网页也经常能见到； 宽度和高度应该小于780像素和560像素，以便在四周留出足够的空白； 适合于内容较少的网站，或进入站点前的首页。 充满整个浏览器的布局 使用百分比而不是像素数来布局的网页，可以让网页充满整个浏览器； 或者使用FLASH等矢量方式做作的网页就可以实现这个效果。 5）网页布局的分割方式 纵向分割： 最常见的布局，左侧LOGO、导航菜单，右侧正文； 横向分割： 也是常见的布局，上面LOGO、菜单，下面正文。 横向和纵向分割相结合： 更多的是横向和纵向分割相结合的例子。 纵向网页布局细分 通栏式； 二分栏； 三分栏； 四分栏； 1.通栏式 该结构适用于信息较少的网站。 非常方便突出主题。 2.二分栏 网络上十分常见的形式，往往左窄右宽，然后在右侧宽栏中嵌入多个横向的分栏，以便放下更多的信息。 这种结构，效果简练，个性鲜明，各功能区域划分清晰，一目了然。 3.三分栏 三分栏也较为常见，其特点是结构清晰，分类明确，适合信息量大，更新迅速的门户类网站。 4.四分栏 四分栏应用相对较少，通常为了放下更多信息才选用这种结构,各分栏中应当放置短小而精练的标题或图片，不宜放置过多的文字。 如运用不当，因分栏过多，容易分散浏览者注意力，显得页面过于烦杂，造成不佳的效果。 常用软件介绍 网页制作工具：Macromedia Dreamweaver； 动画创作工具：Macromedia Flash； 图像处理软件：Adobe Photoshop；同时作为网页页面设计的