个人主页过把瘾(10)
第十讲 利用表格规划网页的布局

  我们在设计一个图文混排的网页或分栏的文字网页时,常常会感到文字及图片的定位不听使唤。利用表格的帮助,可以将它们按我们的需要放到任何位置。
  利用表格组织网页的内容,可以使网页更整洁美观。对于图文混排的网页,利用表格可以大大提高网页制作的效率。在隐藏表格框线后,浏览者几乎感受不到表格的存在。实际上FrontPage提供的各网页模板,就是用表格来组织的。
一、几种典型的网页布局
  如果希望自己制作的网页能够有好的浏览量,网页的布局非常重要。一个简洁明快的网页往往给人印象深刻,更容易吸引浏览者浏览。
  商业网站一般都有比较统一的布局设计,而个人主页由于内容专一,不可能像商业网站那样内容丰富,信息量大。但恰恰因为这个原因,个人主页的形式更灵活,更容易创造出美感。
  我们先来看一下三个风格迥异的网站,注意观察它们的布局:
  1、门户网站的主页

  上图是我国主要的门户网站新浪网的主页,我们可以发现主页的内容很丰富,栏目众多,色彩鲜艳并有许多大幅广告和浮动广告栏。
  2、专业网站
  下图是宁波市计算机学会的主页。与新浪网相比,它的内容比较专一,栏目也不多。不像门户网站给人一种繁杂的感觉。一般的企业网站也都设计成这种风格。

  3、个人主页
  下图是一个个人主页,它看起来更简单,但更容易给人清新的感觉。

  三个主页三种风格,没有优劣之分,它们的风格与网站的性质有着密切的联系。新浪网是很明显的商业门户网站,必须采用鲜艳的色彩吸引浏览者的注意,而广告是网站收入的重要来源,所以各种形式的广告是少不了的。计算机学会网站是一个专业团体网站,它只有特定的用户,所以不必借各种手段吸引浏览者,因为关心学会的用户自然会来,不需要的用户,即使你做得再漂亮也不会吸引他们。而“退休生活”显然更具备个性色彩,首页只是一页封面,具体内容有待“进入”。当然也有不少个人主页是开门见山的。多数个人主页网页还有与其它网站交换超级链接的“友情链接”,通过这种形式,个人主页之间可以互相介绍,提高主页的浏览量。
二、利用表格规划网页的布局
  由于FrontPage对于图片的精确定位仍存在缺陷,而图文混排的效果也不理想。而且在文字编排中分栏也比较困难,所以网页多采用表格来设计网页的布局。
  下图就是在网页中使用表格规划网页布局的一个例子。网页分成上下两区,中间用水平线隔开。上面的标题栏左边有一幅被称为LOGO(图标)的图片,右边则插入一幅小图片。由于采用了表格区隔,所以两幅图片和标题的定位关系非常简单。下面的主页面分左右二栏,左边是目录区,右边的空白区域可以放一个网页的主要内容。

  由于采用了隐藏表格框线的方法,所以在浏览器中丝毫看不到表格的影子。


在网页中隐藏了表格

  下面介绍一下这个网页的制作步骤:
  1)在FrontPage窗口中打开一个网站(本例中是“F:\myrice”),并新建一个新网页。
  2)在新网页中创建一个3×3的表格,右击表格,在弹出的快捷菜单中选择“表格属性”命令,打开“表格属性”对话框。在对话框中将“边框”的“粗细”设为“0”。
  3)拖动表格中间的二根列线,使中间那一列最宽,边上二列宽度够放得下图片就行。
  4)选中第二行的三个单元格,单击“表格”工具栏上的“合并单元格”按钮,使这一行变成一个单元格;再将第三行右边的的二个单元格合并成一个大单元格。
  5)在首行的左右二边的小单元格中各插入对应的图片;在第二行中插入一水平线并设置好粗细和颜色。
  6)输入所有文字,并设置好字体、字号和颜色,在热点文字上创建好超链接。

  7)将网页保存为“index.htm”文件
三、多表格与表格的嵌套
  1、用多表格规划网页
  表格在浏览器中显示时有一个缺点:只有表格中所有的内容都下载以后,表格里的内容才会显示,而不会下载一个显示一个。这样,如果表格里的内容太多而且网速较慢的话,浏览者就要等待很长的时间才能看到网页的内容。这显然给浏览者留下一种网页太慢的感觉,从而影响网页的浏览率。
  我们可以采用多表格的方法来解决这个问题,即:每个表格的内容都不多,哪个表格的内容先下载,哪个表格就显示,不至于让浏览者对着空白的屏幕发呆。
  因此前例中用一个3×3的表格规划的网页可以用三个表格(从上到下分别为1×3、1×1和1×2)来规划,大家可以试着自己做一做。
  2、表格的嵌套
  所谓表格的嵌套就是在一个表格的单元格中再画一个表格,在网页文件中经常会用到。它可以解决单层表格无法解决的困难。
  一个表格各行中的对应列线都应该在同一位置上,不能像下图那样让不同行的列线位置不一样。使用表格嵌套就可解决这个问题。

   
   

  【例】利用表格嵌套将前例主页的目录栏做成下图所示的卡片式按钮菜单形式:

  该网页的制作步骤:
  1)在FrontPage窗口中打开前例的“index.htm”文件。
  2)将表格的“单元格边距”、“单元格间距”和“边框”的“粗细”都设为“0”。
  3)将表格第二行的一水平线删除,并在其中插入一个1×12的第二层表格,该表格的“单元格边距”、“单元格间距”和“边框”的“粗细”也都设为“0”。
  4)第二层表格的12个单元格按每三个单元格组成一个按钮,总共可分四个按钮。移动列线,使每个按钮中间那个单元格宽度约为两边的单元格宽度的3到4倍。
  5)将第一个按钮的三个单元格和第一层表格的第三行的两个单元格设成同一个背景色;其它几个按钮设成另一背景色。
  6)在每个按钮左边的单元格插入一幅带弧线(270°~360°)的小GIF图片,在按钮右边的单元格插入一幅带弧线(0°~90°)的小GIF图片。这两个单元格属性的“垂直对齐方式”都设“顶边对齐”,右边单元格的“水平对齐方式”设为“右对齐”。

  7)输入所有文字,并设置好字体、字号和颜色,在热点文字上创建好超链接。最后在FrontPage窗口中的普通视图效果如下图:

  而浏览器中预览则看不见表格边框虚线。

  关于网页规划,最后要说明一点:为保持网站的统一协调性,各主要的索引网页在色调上应保持一致,最好顶端栏和底部栏都采用同样的格式。

【练一练】
  利用表格规划网页“index.htm”,使网页看起来更整齐。同时将其他网页也进行规划,并与网页“index.htm”保持一致。

回上讲 老顽童撰写 下一讲