第5章使用表格设计网页布局

网页设计与制作——使用表格设计网页布局王海波Email:网页设计与制作1.表格布局的起源由于缺乏对页面进行排版布局的手段，早期的互联网上的网站页面比较简陋,网页上只能使用最基本的一些HTML标签来表现内容。1996年10月1日的雅虎网站首页<p></ul><li><ul>1.表格布局的起源1997年，DavidSiegel出版了“CreateKillerWebSites”一书，讲述了使用表格来进行网页布局的思路和方法，从而使得网站页面的布局得到极大改善。tdtdtdtdtdtabletable1.表格布局的起源2000年3月3日的雅虎网站首页<table><table><table><table>1.表格布局的起源2007年11月26日的新浪网站新闻首页我们可以把一个网页看做一个拼图。拼图的整体结构以及局部结构是由表格来进行规划，在设计网页时只是向不同的单元格中填充内容。2.使用表格布局的基本原理通过表格来布局页面——填空页面的不同层次根据页面的不同层次，可以把一个网站的页面分为首页（一级页面）、二级页面、三级页面等。首页中一般体现站点中的重点内容、精华内容、最近更新的内容等。一般来说，其中的文字或图像都较为简略，以容下更多内容的展示。二级页面可以对应某个栏目的首页，其形式和首页类似。在三级页面中，展示内容的具体细节，可以用丰富的文字和图像等元素来表现。不论哪种层次的网页，Logo,导航，版权信息都是不可缺少的。页面的不同层次——一级页面页面的不同层次——二级页面页面的不同层次——三级页面人们阅读网页时的视觉流程视觉流程，是视线在观赏物上的移动过程，是二维或三维空间中的运动。这种视觉的流动线极为重要。设计师应该善于运用这条贯穿页面的主线，设计易于浏览的页面。从某个角度讲，视觉流程的设计结果就是版式。人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。视觉流程的研究方法——眼动仪眼动仪通过眼动仪观测到的用户浏览器网页时的视觉热点顺畅的视觉流与凌乱的视觉流沉浸式阅读(immersivereading)与扫描式阅读(scanning)网页布局的设计原则对齐原则紧凑原则重复原则对比原则注：来自“写给大家看的Web和版式设计书”对齐原则页面上的每一项与页面上的其它各项建立视觉上的联系。在页面上对齐之后，各元素会形成一个更具凝聚力的单元，从视觉和意识上给人一个整体的感觉。对齐原则——居中对齐对齐原则——两端对齐紧凑原则将相关元素成组地摆放在一起，让它们彼此靠近，以便相关的元素看起来是一个整体，而不是一堆无关的东西。一般通过页面内容的模块化，可以良好地体现紧凑原则。紧凑原则分组1分组2分组3链接：分组1.1分组1.2分组1.3重复原则在整个页面中重复设计某些部分。重复可以理解为“一致性”，特定元素的重复和一致性，可以给浏览者留下统一的感觉。重复原则相同的格式和布局重复原则相同的格式和布局链接：对比原则对比是为页面添加视觉吸引力，以让阅读者对页面产生阅读兴趣的非常有效的方式。可以创建大、小字体之间的对比，字体与字体之间的对比，冷色与暖色之间的对比，宽间距与窄间距之间的对比等。对比原则通过对标题1，标题2，段落等原色设置不同的字体，字号，背景等，增加页面元素之间的对比。3.通过表格来布局页面的基本步骤1.规划页面的基本框架2.插入布局表格3.在表格的相应的单元格中插入页面的内容元素a.规划页面的基本框架网页头部主体内容网页底部网页头部主体内容网页底部a.规划页面的基本框架a.规划页面的基本框架——细分a.规划页面的基本框架——细分a.规划页面的基本框架Logo图像导航菜单板块一版权信息文字图片文字图片板块二文字图片文字图片板块三文字图片文字图片b.插入布局表格布局表格完成对网页中内容的约束作用，通过把布局表格放在一定的位置，从而使得其中的内容出现在期望的位置。通过把布局表格的align属性设置为center,可以使得其中的内容在网页上是居中对齐的位置。布局表格的cellpadding属性和cellspacing属性一般需要设置为0。布局表格的应用方式主要有2种：并列和嵌套。布局表格的并列在一个表格后面继续插入一个新的表格，新的表格会自动向下排列。外层的表格应该指定相同的宽度。表格1表格2表格3表格4width=numberpx布局表格的嵌套表格嵌套是指在一个表格内嵌套另一个表格。通过表格的嵌套，从而实现复杂的网页排版效果。用嵌套表格来实现导航菜单实例：利用表格布局网页链接：表格布局——两栏内容实例：利用表格布局网页链接：表格布局——三栏内容3.插入内容文字文字实例：北京旅游链接实例：美食林链接使用表格要注意以下几个事项:使用表格控制网页布局时尽量制小表而不制大表；这样做的原因是网页显示速度较快；另外网页各个部分相对独立，好修改。一般控制网页布局的表格的填充和边界都为0，宽度一般是绝对数；表格或单元格宽度或高度有“像素”和“百分比”两种单位,使用时要注意其作用。即使设置了表格的宽