| 出版日期：1997-06-16 总期号：662 本年期号：22 |
|
 |
使用table功能布局web主页
董向东 frontpage是微软公司的产品，是建立和管理www网点的工具，它包括两个部分：explore是可视化的管理web页面的工具；editor是编辑web页面的工具，它类似word，不仅能编辑文档、表格、图象，还可包括声音和影像等，但它不像word那样能全屏幕的编辑，只能像行编辑一样一行一行的插入各种对象。 但微软、netscape等公司的主页并不像一行一行那样单调的布局，而是非常的丰富多采，当然这主要是美工的功劳，从装饰图形图象、美术字体到版面布局和整体色调等，但这一切实现的基础是如何象全屏幕编辑那样布置整个页面，这就需要灵活使用editor中的table表格功能。 在设计web页面时，table的使用主要有三个方面： 1、通常的列表显示，主要是规范数据的显示，如股票行情，电话簿等，如图一所示。 2、页面的整体布局如图二所示。 3、局部的布局包括图文并茂的文档组织（图三）或链接项的组织（图四）等。 table布局的使用技巧 如果要设计理想的web页面，必须将上面三种table的使用混合而成，主要有两种方法： ＊table嵌套table：比如整个页面的布局，内嵌一个链接项的局部布局，如图二嵌套图四。 ＊cell分割cell：表格单元的分割组合，使其错落有致，富于变化，布局更显生动（如图五）。 首先必须熟悉frontpageeditor中table菜单里所有命令的用法。 用图五做例子具体说明一下实现步骤： 1、首先在心中规划好如何分割cell使之能成图五的格局。 2、插入table，定义好行列数，以后还可随时调整（通过插入行列或单元）。 3、根据预先的规划，使用splitcell命令，在相应的cell单元中进行相应数量的行列分割，使之达到所要的格局。切记：先不要定义cell单元的跨度（span—所占行列数），在cell单元行列尺寸都为1的情况下，进行分割。 4、对相应的单元进行行列的跨度（span）定义，即单元尺寸的定义，或在输入文字时调整。 5、最后使用table、cell的属性可对表格或单元进行各种属性的定义（包括：边界的粗细及颜色、背景的颜色、文字的字体大小和颜色等）。 直接用html来描述： 笔者在使用frontpageeditor中cellsplit命令时，发现分割多次后，单元排列失去控制，说明该程序有bug。笔者在研究了html描述table表格的语法后，摸出了一些规律，看似复杂的表格也能很容易地描述出来。 表格标签简介： 用图五做例子说明如下： ＊对于一个表格是按行row从上到下，每行按单元cell从左到右依次描述的，描述过的单元无论跨度多大，只描述一次。 ＊每行用ΙtrΛΙ／trΛ对括住，有几行即对应几个ΙtrΛΙ／trΛ对。 ＊每对ΙtrΛΙ／trΛ之间包括对该行所有cell的描述，每个cell的描述各占一行，用ΙtdΛΙ／tdΛ对括住。 ＊每个cell尺寸的描述是用其行与列的跨度来表示的，单位跨度的概念是：1跨度对应1个cell。例如：图五中cell（1．1）横向跨过三个cell，表示为colspanΚ“3”，纵向跨过1个cell（可缺省不写）；cell（2．1）纵向跨过6个cell，表示为rowspanΚ“6”，横向跨过一个cell。 图五中的编号说明了table中每个单元的描述顺序，具体html描述参见下面。 ΙhtmlΛΙheadΛΙ／headΛΙtableborderΚ″1″Λ ΙtrΛΙtdcolspanΚ″3″Λ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdrowspanΚ″6″Λ＆nbsp；Ι／tdΛ ΙtdrowspanΚ″3″Λ＆nbsp；Ι／tdΛ ΙtdΛ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdΛ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdΛ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdcolspanΚ″2″Λ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdcolspanΚ″2″Λ＆nbsp；Ι／tdΛΙ／trΛ ΙtrΛΙtdcolspanΚ″2″Λ＆nbsp；Ι／tdΛΙ／trΛ Ι／tableΛΙ／bodyΛΙ／htmlΛ |
||||||||||||||||
