|
二、表格(table) 作 者 : 阿文
表格在网页设计中的意义远非一般概念中的表格应用的理解,它更大的用处在于控制页面元素,比如设置文字和图像在页面中出现的精确位置。举个例子来讲,假如你要在页面的右下方放上一首竖行字的古诗,古诗的四周各让出
30
个像素大小的空白,如果不利用表格要想实现这种效果,这是不可能的。因此娴熟的掌握表格技巧,是每个主页设计者都应该完成的基本任务。下面就来介绍
Dreamweaver 中表格制作的方法和一些技巧。 启动
Dreamweaver ,如果看不到 Objects 工具面板,选择主菜单 Windows/
Objects 以使其显示出来。
1 、插入表格。 单击面板上的 Table
图标,弹出对话框,取其默认数值,按 OK
键,插入一个三行三列、占据页面 75% 宽、边框线粗为 1
的表格。
2 、设置表格。 用鼠标单击表格的任意一条边框,即可选中该表格,此时按住鼠标左键不放拖动鼠标可手工改变行或列的宽度或高度。把鼠标放在每一行的左边,或每一列的上方,鼠标变成一个小小的箭头,单击左键此时可选中单独的一行(或一列),不放开左键继续拖动鼠标,可选择多行(或多行)。而把鼠标置于单元格内任意拖曳,则可选择一个或多个单元格。当鼠标置于某一个单元格中,实际上就已经表示选中了这个单元格。
选中表格,并点取
properties 面板最右下方的小三角形,使之完全显示出来 。 从图中看得比较清楚,
Properties 面板上显示的是这个表格的 各项设置。 Boder
是指表格边框的粗细,如指定其为 0
,表格将被隐形显示,这对于
控制页面布局但不需要显示表格是极其有用的。 Cell Padding
表示单元格的边框和单元内容 之间的距离; Cell Spacing
表示单元格与单元格之间的距离。 Align
设置表格放置在页面的左边、右边或是中间。 V Space
定义表格上面和下面分别留出的空间, H Space
定义表格左右两边预留的空间,通过这两项能够精确控制表格在页面中的显示位置。通过
Gg 一栏,则可以指定表格的背景颜色或图像。
3 、设置单元格。 选中单元格或是选中一整行一整列以后的具体操作行为是相同的,现在以选中某个单元格为例,来说明如何通
过 Properties 面板具体设置单元格的内容。
Properties 面板上面两排用于设置单元格中的文字
内容,如字体、字号、颜色、链接等。 Horz 和 Vert
分别用于指定单元格内容的浮动位置和方向,如图设置的是其内容位于单元格中间及底部。此外还可以具体设置所选单元格的宽度及高度。注意到图示
Cell
的下方有两个小按钮,当你选中有多个单元格时,第一个小按钮是有效的,它代表着合并所选单元格;选中一个单元格时,单击第二个小按钮,它会问你怎样来分割这个单元格,使之变成两个或两个以上的单元格。
Properties
面板几乎聚全了任何功能,唯独没有增删行列的功能实现。当你要增加或删除表格的某一行或某一列时,把光标定位在某一单元格中,选择主菜单
Modify/ Table 下的相应命令,实现增删操作。 事实上表格操作时多用鼠标右键不无益处,主菜单的
Table
命令同时是上下文相关的右键菜单。上述操作通过单击右键一样可以实现。
4 、定制表格外观。 定制合理的外观最好还是自己动手,不过,
Dweamweaver
还是提供了一系列预置的表格外观,以帮助懒人的大忙。如果你认为它提供的式样刚好合乎你的心意,那无疑妙之极矣。
选择主菜单
Command/ Format Table
,找到一种你比较喜欢的式样,还可以对表格各项进行简单的调整。例如底色、行间底色的变化、线宽、首行首列的浮动位置,等等(如图所示)。
5 、表格排序。 Dreamweaver
还提供了对表格的简单排序功能。光标定位在将要进行排序的表格中,选择主菜单
Command/ Sort Table 。 表格排序有两个分类,根据字母排序,或是根据数字进行排序,排序的方法有升序和降序两种。首先规定某一列作为第一排
序的目标,在此前提下,还可设置第二优先级,在满足了第一排序的前提下,根据第二优先级,再进行一次排序。
表格排序的功能虽然并不强大,但是显而易见可以看到它对于某些场合还是非常有用的。
6 、表格之中继续插入表格。 通常要精确定义页面中各项元素的位置,仅仅是一个表格是远远不够的。表格允许多重嵌套,
把光标定位在你需要添加表格的单元格中,按照前面所介绍的,单击
Objects 面板的 Table
图标,插入新的表格。对这个新表格的所有设置方法
与设置第一个表格都相同。 可以这么说,你在 Internet 上见到的任何复杂的网页,都是借助表格建立起来的。表格的操作并不复杂,但是要掌握使它千变万化的技巧,必须经过大量的实践,才可能随心所欲的建立各种巧妙精致的页面。 |