主页制作简单学──精雕细刻之表格篇

数码时尚

  上次我们过了把多媒体瘾,我想大家的心中还有一股余兴吧。趁热打铁,本期将借助表格把网页布局得井井有条。

  表格是由许多行和列组成的,它能够以有序、整洁的方式来表现信息。在FrontPage(以下简称FP)的表格中我们可以放入任何东东,如文本、图片等,正因为表格的这个优点,所以在一般做页面之前,网页设计者们喜欢使用表格来布局页面,布局完成之后再将信息放入表格中事先规定好的位置,如同用模子做出来的器具,什么样的模子决定了什么样的器具。下面我们就来做一个网页的“模子”。

  一.表格基本操作

  1.插入表格

  第一步,我们新建一个网页,将它以“Mystory.htm”保存到“Myweb1”站点中。

  第二步,打开“Mystory.htm”,并单击菜单“表格→插入表格”弹出如图1所示的窗口:

  在图1的“行数”中选择欲建立的表格的行数,在“列数”中选择或输入欲建立的表格的列数。在此我们分别选择“5”和“3”,将“边框粗细”设置为0,选中“指定宽度”并选择“百分比”,最后单击“确定”按钮即可看到图2所示的效果。

  小知识:在网页中添加表格有好几种方法,上面用到的是其中的一种方法,我们还可以通过工具栏上面的“插入表格”命令插入表格,也可以通过手工来绘制表格,还可以通过将现成的文本转换成表格。

  通过上面的两步,我们已经将“模子”初步制造起来了,还要通过许多精细的加工才能运用到实际“生产”当中。下面我们就在这个模子的“约束”下对表格进行一系列的“锤炼”,打造出更好的效果来。

  2.合并单元格

  在图2中,我们准备只使用表格的3行,而在插入时我们插入了5行,现在我们通过合并单元格的操作来达到目的。

  要合并单元格方法很简单,用鼠标从欲合并的区域的左上角的单元格开始拖动到右下角的单元格并释放鼠标即可选中这个区域,然后单击菜单“单元格→合并单元格”即可将选中的单元格区域合并成一个单元格,现在我们就可以在这个单元格中输入文字或是插入图片。方法在稍后会介绍。

  3.删除表格

  删除表格的方法非常简单,鼠标选中要删除的行或列,右击鼠标,选取删除命令即可。

  二.修饰表格

  1.线条和边框设置

  在图1所示窗口的下面还有一些控制表格的设置,这些参数设置的适当与否会直接影响到页面的效果。下面我们来看看这些设置的意义。其中“对齐方式”是设置表格在页面中的位置,“边框粗细”是设置表格的边框线的宽度,有时我们将表格只作为布局之用,这时我们就可以将边框粗细设置为0,这样在网页设计时显示为虚线,起到标尺的作用,在浏览网页时表格不会显示出来。“单元格边距”设置表示插入在两个单元格中的对象之间的距离,“单元格间距”表示设置两个单元格之间的距离,“指定宽度”复选框设置表示是否可以通过设置下面文本框中的数值来定制表格在整个页面中的大小。在此我们经常选择的是百分比,这样不管浏览者显示器的分辨率是多少都不会影响到整个网页的显示效果。

  2.插入LOGO

  首先,把我们网站的“LOGO”添加到左上角的单元格当中。将光标放入左上角的单元格中,然后单击菜单“插入→图片→来自文件”在弹出的对话框中选择“LOGO”文件并单击“插入”按钮,此时单元格肯定不能满足图片的大小,不过单元格会自动调整大小来适应图片的大小,如图3所示。

  插入了LOGO之后我们现在就可以向表格中插入一些文字,这步操作在我们的前几期中有介绍,在此就不再重复了。插入文字之后的效果如图4所示:

  小技巧:在表格中输入文字需要换行时,如果按回车键鼠标光标将会跳动到下两行的位置。如果需要使光标跳到下一行,在按回车键的同时按住Shift键不放。在需要改变表格行高和列宽时,我们可以将鼠标光标移动到欲调整的表格的边框线上,当鼠标变成左右或上下方向箭头时,按住鼠标左键并拖动鼠标即可调整。如果在一个单元格中欲再次布局页面的话,我们可以在这个单元格中再次插入一个表格,方法是把光标放入这个单元格,然后执行和插入表格一样的操作步骤即可。

  3.通过表格实现首字下沉效果

  为了引起浏览者的注意,我们可以通过首字下沉来达到目的。例如在图5中,我们可以分别给三首歌词实现首字下沉效果,如图5所示的效果。

  首先,选中欲首字下沉段落的第一个字,然后单击“表格→转换→文本转换成表格”在打开的“文本转换为表格”对话框,在此对话框中选择“无(文本位于单元格中)”单选按钮,再单击“确定”按钮,FP会将选定的文本转换成只有一个单元格的表格。

  用鼠标右击转换后的表格,从弹出的快捷菜单中选择“表格属性”命令,打开“表格属性”对话框,在此对话框中的“布局”框中,将“浮动”属性框中的值设置“左对齐”,并将“单元格边距”和“单元格间距”设置为0。

  最后,单击“确定”按钮,并相应地,设置首字下沉效果的那个字体的属性,在此我们设置为7号字。再用鼠标来调整这个只有一个单元格的表格的大小即可。

  小技巧:在上面的设置中,我们只要设置一个字的首字下沉效果即可,然后通过工具栏中的格式刷即可方便地设置后面两首歌词的首字下沉效果。

  4.设置表格背景

  如果适当给表格应用一些色彩将会给页面带来赏心悦目的效果,我们现在就给表格添加一些背景颜色和改变一下字体的颜色,使页面摆脱那种“白纸黑字”的尴尬。

  不过给表格添加背景颜色要注意一点,是给整个表格添加背景还是给某一个单元格添加背景颜色,如果给整个表格添加背景颜色,那么所有的单元格将会获得同样的颜色,有时候我们希望给某一个单元格添加背景颜色。如果是给整个表格添加背景颜色,要将插入点放入该表格中,然后单击“表格→表格属性→表格”命令,弹出“表格属性”对话框,在此对话框的“背景”区中,从“颜色”下拉列表中选择一种颜色,在此我们选择绿色,最后单击“按钮”即可将颜色应用到整个表格中去了,效果如图6所示:

  欲给某个单元格设置颜色,在上面的步骤中,选择“表格→表格属性→单元格”然后作相应的设置即可。

  5.表格拼图

  现在我们新建一个页面,这个页面是显示一幅照片的,并将它命名为“Myphoto.htm”,将它保存到“Myweb1”站点中。

  一般一幅照片都是比较大的,如果网速很慢,浏览那些拥有照片的网页时会花费很长的时间,这样浏览者就会对它顿失好感。要想克服这个缺点,通过表格的表格拼图功能就可以达到目的了。原理是:将一幅图片切割成多块,然后分别将这多块图片按它们在原来图片中的位置为序放入表格中,当浏览者浏览此页面时,浏览器会将图片一块一块地下载,下载完毕之后整幅图片就显示在浏览器中,这样就不会给浏览者造成网页“停死”的感觉。具体实现方法也很简单。

  首先用图像处理软件(如Photoshop、Fireworks等)将照片裁剪成4张小图,并分别以不同的文件名保存到“Image”文件夹中。

  然后在“Myphoto.htm”页面中插入一个两行两列的表格,并将表格的边框粗细设置为0,然后就按照前面插入图片的方法将4幅小图片按它们在照片中原来的位置次序插入到相应的单元格中,再适当地调整一下表格边距即可。