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

《[计算机软件及应用]网页设计之三》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第三讲网页设计之三：布局与流程目录1.网页布局的基本方法；2.网页设计的一般流程；1.网页布局的基本方法；网页布局就是把网页中的各种构成要素（文字、照片、图像、菜单等）在网页浏览器中有效的排列起来。网页布局一般都是通过表格来实现的（有时候也可以使用层，但现在比较少用），将不同的要素合理的放置在不同的表格中，充分有效的切割和利用空间，使得布局尽量合理美观。网页界面的构成要素网页浏览器部分（工具栏、状态栏、地址栏、菜单栏），这些不需要设计，但要考虑到它们的高度和宽度；网站内容：网站标志（Logo）；图像、版权说明、正文；导航（菜单、搜索等内容

2、）；广告条；1)网页布局设计的特点网页设计中，布局的基本要求是要考虑用户的方便程度并能明确地传递信息，进而兼顾视觉的造型性和美学的创造性，要能够凸显出网页设计的各个构成要素。网页布局的难点在于浏览者（用户）的环境是不同的，使用不同的浏览器（现在主要是IE、FIREFOX、Maxthon傲游等），不同的显示器（显示分辨率）。不同的显示分辨率问题我们只能在1024×768像素、800×600像素等长宽比为4:3的条件下完成网页设计（当然现在宽屏显示器的出现，又为我们提供了一些特殊的16:9、16:10的情况，如1280×800像素）。在不同分

3、辨率下都很美观的网页布局是十分困难的，我们只能考虑绝大多数的情况。一般我们只考虑能兼顾1024×768像素、800×600像素的情况，因为这是最为常用的分辨率。2)布局的主要构成原则醒目性：使用户把注意力集中到某网页并诱导其继续浏览；可读性：使网页的内容能够让人容易读懂；明快性：能够准确快速传递网站的内容；造型性：维持网页整体外型上的稳定感和均衡性；创造性：使得网站富有鲜明的特点和特色；其他原则统一、协调：整个网站的构成应该保持一贯性；避免让用户觉得混乱和不方便；流动：能让浏览者的视线产生自然的移动；主要是在构成元素和色彩方面；强调：突出

4、重点，活用色彩，适当留白；以提高可读性；均衡：要素排列应该合理，按照一定的顺序，以便于阅读，并照顾到视觉的稳定性。3)画出布局草图在纸上简单地画出网页的布局，分割空间，并对构成要素进行编排。注明，各部分名称、简要的说明、高度和宽度等尺寸、初步确定使用的颜色等。草图的横向长度，应小于显示器的横向分辨率，比如800×600像素的情况下，应该要小于800像素。草图样本DABCEFA：网站LOGO，80×40像素：B：主导航区主菜单等，680×40像素；C：图片、标语、广告等，760×100像素；D：副导航区等，80×600像素；E：主要内容（产

5、品介绍）等，680×600像素；F：版权等，760×20像素；4）网页布局的对齐方式左对齐布局；居中对齐布局；水平、垂直居中对齐布局；充满整个浏览器的布局。左对齐布局一般来说，左对齐是最常见的布局方式，它的宽度不超过800像素，考虑纵向滚动条等原因，一般应小于780像素。因为如果大于800像素，就有可能出现横向滚动条，这是用户所不习惯接受的。这样就兼顾了1024×768像素和800×600像素用户的需求，其余部分则为留白。居中对齐布局水平居中对齐也是一种常见的布局方式，这类布局给人以很好的均衡感。网页宽度也应以小于780像素为佳，两边的部

6、分可以留白或以其他彩色背景代替；如果不希望出现纵向的滚动条，那么高度应该小于560像素。水平、垂直居中对齐布局这类网页也经常能见到；宽度和高度应该小于780像素和560像素，以便在四周留出足够的空白；适合于内容较少的网站，或进入站点前的首页。充满整个浏览器的布局使用百分比而不是像素数来布局的网页，可以让网页充满整个浏览器；或者使用FLASH等矢量方式做作的网页就可以实现这个效果。5）网页布局的分割方式纵向分割：最常见的布局，左侧LOGO、导航菜单，右侧正文；横向分割：也是常见的布局，上面LOGO、菜单，下面正文。横向和纵向分割相结合：更多

7、的是横向和纵向分割相结合的例子。纵向网页布局细分通栏式；二分栏；三分栏；四分栏；1.通栏式该结构适用于信息较少的网站。非常方便突出主题。2.二分栏网络上十分常见的形式，往往左窄右宽，然后在右侧宽栏中嵌入多个横向的分栏，以便放下更多的信息。这种结构，效果简练，个性鲜明，各功能区域划分清晰，一目了然。3.三分栏三分栏也较为常见，其特点是结构清晰，分类明确，适合信息量大，更新迅速的门户类网站。4.四分栏四分栏应用相对较少，通常为了放下更多信息才选用这种结构,各分栏中应当放置短小而精练的标题或图片，不宜放置过多的文字。如运用不当，因分栏过多，容易

8、分散浏览者注意力，显得页面过于烦杂，造成不佳的效果。常用软件介绍网页制作工具：MacromediaDreamweaver；动画创作工具：MacromediaFlash；图像处理软件：Adobe