网页排版——表格的使用
作者 ： wx@ay 发表于 2000-07-04
本页面由WORD 2000格式转换而来，其中难免存在排版上的错误，还望各位谅解
本页转换前 213K，转换后 34K，清除部分垃圾代码后20K。
一个网站的成功通常取决于以下几个方面：
1． 网站的技术含量
2． 网站的内容是否丰富
3． 网站的结构、网页的布局是否合理和美观
而这其中网页布局的合理与美观又是最重要的，因为浏览者首先看到的是网页，其次是内容，然后才能体会到技术。因此网站设计中网页的排版设计很大程度上影响着一个网站是否能够成功，一个好的设计会让人百看不厌，而低劣的粗制滥造的网页只会令浏览者大倒胃口。
表格是网页排版布局中最重要的工具。这是因为，除了 DHTML的层以外，表格是唯一能够让网页设计者随心所欲地排放页面上所有内容（包括图片和文字）的手段。表格的另一个好处是它可以在几乎所有的浏览器中被正确地显示，这就意味着无论你的网页在什么系统下开发，无论你使用何种浏览器进行测试，最终你的设计都可以在浏览者那里得到正确地执行。
Dreamweaver为设计者提供了强大的可视化的表格编辑功能，你可以方便地在网页中创建表格，设置表格和单元的对齐方式，修改表格和单元格的背景图像或背景颜色，设置表格和单元格的大小等等。
1.1 在网页中创建表格
在网页中创建一个表格， Dreamweaver为使用者提供了三种方法：
Insert（插入）菜单中 Table（表格）菜单、Objects（对象）浮动面板中 Insert Table（插入表格）对象以及快捷方式“Ctrl+Alt+T”。
无论你使用哪种方式， Dreamweaver都会弹出一个Insert Table对话框，如图2-1-1所示
图 2-1-1 Insert Table 对话框
对话框中可设置的选项如下表所示：
选项 默认值 说明
Rows（行） 3 行数的设置，初始默认值为 3，设计者可输入数值来调整
Columns（列） 3 列数的设置，初始默认值为 3，设计者可输入数值来调整
Width（宽度） 75% 表格的宽度设置，默认为 75%，设计者可调整数值及度量单位（可选百分比和象素）
Border（边框） 1 表格和内部单元格的边框的宽度，默认为 1个象素
Cell Padding （单元格填充） 单元格边框与内容之间的填充空间，默认为 1个象素（对话框中未显示），设计者可输入数值来调整
Cell Spacing （单元格间距） 单元格与单元格之间的距离，默认为 2个象素（对话框中未显示），设计者可输入数值来调整
表格宽度的单位可以选择为百分比和象素，当设计者需要一个固定宽度的表格时，可以在宽度文本框中输入数值并在下拉列表中选择象素（ Pixels）为单位。
& 技巧 ：表格宽度的单位决定了网页排版中一个重要的因素，那就是网页是否自动适应用户的分辨率设置。用户的监视器分辨率对于设计者来说是未知的，它会因用户所使用的监视器大小和个人喜好的不同而改变，为了能够使用户浏览页面时浏览器不出现横向的滚动条，通常表格的宽度使用百分比作单位，这样表格会根据浏览器窗口的实际宽度自行调整自身的宽度，即仅占用设计者指定的百分比宽度。
F 经验 ：当表格中的内容宽度大于表格百分比宽度时，表格将不再保持这个比例。例如，表格中的图像宽度大于百分比宽度时、表格没有使用自动换行而表格内的文字又较多时。因此，并不是设置了百分比宽度以后网页就一定能够自动适应分辨率。
1.2 表格的属性控制
插入表格对话框只能对表格做简单的设置，详细的表格设置还需要通过表格的属性浮动面板来设置修改。
当选择了一个表格以后，浮动属性面板将变为表格的属性面板，如图 2-1-2所示。选择一个表格的方法是：鼠标停留在表格的底边框或左边框，当鼠标形状变为上下（或左右）可调整提示时，单击鼠标左键，即选中这个表格。更快捷的方法是在状态栏的 HTML 标识选择区点击
标签。
图 2-1-2 表格的属性面板
表格属性面板中包括以下属性设置内容：
Table Name （表格名称）：表格在 HTML代码中名称，必须采用英文字母或数字书写，可以不设置。默认为没有。
Rows （行）：表格中所包含的行的数目
Columns （列）：表格中所包含的列的数目
Width （宽）：表格的宽度，单位百分比和象素可选
Hight （高）：表格的高度，单位百分比和象素可选，通常不设置，以便于表格的自适应分辨率时能够自动调整高度。
CellPad （单元格填充）：单元格内容与单元格边框的填充
CellSpace （单元格间距）：单元格之间的距离
Align （对齐）：表格的对齐方式，可选居左、居中和居右。
Border （边框）：表格边框宽度，单位象素
V Space （纵向距离）：表格与纵向相临元素的距离
H Space （横向距离）：表格与横向相临元素的距离
Light Brdr （浅色边框）：浅色边框的颜色，即表格边框的上部和左边（优先于表格边框颜色的设置）
Drak Brdr （深色边框）：深色框的颜色，即表格边框的下部和右边（优先于表格边框颜色的设置）
Bg （背景图像）（不带有颜色样本选择按扭）：表格的背景图像设置。可在文本框中直接输入图像路径和名称，也可以通过点按文件夹图标调出文件选择对话框来选择图像文件
Bg （背景颜色）（带有颜色样本选择按扭）：表格的背景颜色设置。可直接在文本框中输入颜色 16进制代码或名称，也可以通过颜色样本选择按扭在颜色样本中选择或利用颜色吸管工具选定页面上任何一种已有颜色。
Brdr （边框颜色）：表格边框的颜色。可直接在文本框中输入颜色 16进制代码或名称，也可以通过颜色样本选择按扭在颜色样本中选择或利用颜色吸管工具选定页面上任何一种已有颜色。当表格边框为0时，任何颜色设置将无意义。
清除列宽设置： 点击该按扭，则所选中的表格中的所有列的宽度设置自动删除。
清除行高设置： 点击该按扭，则所选中的表格中的所有行的高度设置自动删除。
转化表格宽度为象素值： 点击该按扭，则所选中的表格的宽度设置将由百分比转换为象素值。
转化表格宽度为百分比： 点击该按扭，则所选中的表格的宽度设置将由象素值转换为百分比。
& 技巧 ：属性面板上的对齐方式选择与 Text(文字)菜单中的对齐（Alignment）方式选择其结果是不同的。使用属性面板上的对齐方式选择可以得到表格附近元素环绕表格的效果。如图2-1-3所示，两个表格均设置对齐方式为居左，但设置的方式不同，得到的结果也不同。
图 2-1-3 选择Text或属性面板中
表格对齐方式所得到的不同效果
F 经验 ：当表格边框宽度设置为 0时，任何的表格边框颜色、浅色边框、深色边框的颜色设置将失去意义，因为它们不会被显示。合理利用边框宽度和边框颜色可以生成三维效果，如图2-1-4所示。
图 2-1-4表格边框及颜色设置可产生三维效果
单元格填充（ Cell Pad）和单元格间距（CellSpace）文本框中虽然显示无数值，但默认单元格填充为1个象素，单元格间距为2个象素，当你不需要单元格的填充和间距时就必须在文本框中输入数值0，例如当利用表格无缝拼接图像时。
1.3 单元格的属性设置
同样的，通过属性浮动面板我们可以设置和调整单元格的属性，即单元格的属性不一定跟随表格的属性，它可以单独设置背景图像及颜色、单元格内对齐方式等属性。当光标停留在单元格内时，属性浮动面板将显示单元格属性，如图 2-1-5所示。
图 2-1-5单元格属性面板
此时的属性面板分为两部分，上半部分为单元格内内容属性（即文字属性），下半部分是单元格属性。下面仅讲解单元格属性部分：
Horz （水平对齐方式）：单元格内水平方向的对齐方式，可选居左、居中和居右
Vert （垂直对齐方式）：单元格内垂直方向的对齐方式，可选顶部、中间、底部和基准线方式
W （宽度）：单元格的宽度，单位可选象素和百分比，只写数值则默认单位为象素。需要注意的是，一个单元格的宽度将影响到同一列的所有单元格的宽度，即同一列的单元格具有同样的宽度。
H （高度）：单元格的高度，只写数值则默认单位为象素。需要注意的是，一个单元格的高度将影响到同一行的所有单元格的高度，即同一行的单元格具有同样的高度。
No Wrap （不换行）：单元格内容不自动换行。此选项一般不选中，因为文本的自动换行属于浏览器的正常操作，除非你的单元格内放置有多张图像，而你不希望当用户浏览器分辨率改变时图像自动换行的情况发生时才使用此功能。
Header （表头）：确定该单元格是否是表格的表头。选中此选项，则光标所在单元格将作为表格的表头显示，默认属性是单元格内内容以黑体显示并且自动居中。（表头内容的显示属性可在 CSS中设置，参见“CSS应用”）
Bg （背景图像）（不带有颜色样本选择按扭）：单元格内背景图像。可在文本框中直接输入图像路径和名称，也可以通过点按文件夹图标调出文件选择对话框来选择图像文件
Bg （背景颜色）（带有颜色样本选择按扭）：单元格的背景颜色设置。可直接在文本框中输入颜色 16进制代码或名称，也可以通过颜色样本选择按扭在颜色样本中选择或利用颜色吸管工具选定页面上任何一种已有颜色。
Brdr （边框颜色）：单元格的边框颜色设置。可直接在文本框中输入颜色 16进制代码或名称，也可以通过颜色样本选择按扭在颜色样本中选择或利用颜色吸管工具选定页面上任何一种已有颜色。当表格边框为0时，任何颜色设置将无意义。
合并表格按扭：当选中多个单元个时，该按扭高亮，此时点击该按扭，即可将所选多个单元格合并为一个单元格。如果在选中多个单元格后点击右键弹出快捷菜单中选择 Table，再选择 Merge Cells（合并单元格），同样可以合并多个单元格为一个。
拆分单元格按扭：当光标停留在某个单元格中时，该按扭高亮，此时点击该按扭，即可将光标所在单元格拆分为多个。如果在单元格中点击右键弹出快捷菜单中选择 Table ，再选择Split Cell（拆分单元格），同样可以拆分一个单元格为多个。此时会弹出拆分单元格对话框，如图2-1-6所示：
图 2-1-6 拆分单元格对话框
Split Cell（拆分单元格）对话框中，Split Cell后面的单选按扭中选择你欲拆分的行或列，Number of Rows(Columons)后面的输入框中填写欲拆分的行或列的数字，也可以通过点击按扭增加或减少数字。然后点击OK按扭即可。
& 技巧 选中多个单元格的方法是：在某单元格中按下鼠标左键，不松开鼠标左键的情况下横向或竖向拖拉鼠标即可同时选中多个单元格，但此时选择的单元格必须要成为一个矩形。
要选择多个不相邻的单元格，可以按住 Ctrl 键不放，然后使用鼠标左键在欲选择的单元格中单击即可选中多个不相邻的单元格。
F 经验：当有大量的表格需要格式化时，可以使用Dreamweaver中的格式化表格命令快速完成。 Dreamweaver 中带有 17种式化好了的表格样式，你可以选择你创建的表格，然后点选Command（命令）菜单中的FormatTable（格式化表格）调出 Format Table 对话框，在滚动列表中选择一种你认为合适的表格样式来应用。FormatTable对话框如图 2-1-6 所示：
图2-1-6 Format Table 对话框
在滚动列表中所有的格式均列出，它们又可以分成三组：Simple、AltRows和 DblRows 。 其中 ：
Simple 类型中表格主要部分采用同一背景颜色，最顶行和最左列背景颜色或字体样式将不同于主体，预设 4种格式选择。
AltRows 类型中除最顶行不同于主体外，每一行的背景颜色将交替变换，预设 8种格式选择。
DblRows 类型中表格主体每两行背景颜色交替变换，预设 5种格式选择。
在滚动列表中选择任一种格式，其相对应的样式将出现在滚动列表的右边，同时下边显示表格中用到的各种属性，你可以通过选择修改各种属性来定义自己的表格样式。
1.4 使用表格排版网页
我们已经知道， 除了 DHTML 的层以外，表格是唯一能够让网页设计者随心所欲地排放页面上所有内容（包括图片和文字）的手段。当然，使用表格也要有一定的技巧才可以做到随心所欲，首先你必须掌握前面提到的 Dreamweaver对表格属性控制的方法，然后在你要开始动手制作之前先对要实现的网页做个规划，设计好网页大致的排版方式，这样在你应用表格时才能做到心中有数。
使用表格排版网页一般需要将网页内容（图像和文字）全部或部分放置在表格的单元格内，设置表格的对齐方式，单元格中的对齐方式等属性即可实现网页内容的排版。
在使用表格排版的过程中不可避免地要使用到表格的嵌套，虽然 Dreamweaever对表格的嵌套没有限制，但由于浏览器对表格的解释机理使得嵌套过多的表格的网页显示速度大大降低，所以在使用表格嵌套时要注意：
在使用表格嵌套前作好规划。这样可以省去许多的实验调整的时间。
不要使用过多的表格嵌套。原则上表格的嵌套不应该超过三层，能够不使用嵌套的应该尽量避免嵌套。
外部表格使用绝对象素值定义大小，内部嵌套的表格使用百分比定义大小。这样可以节省浏览器显示时计算表格宽度的时间。
将单元格间距（ Cell Space）设置为0。这样做可以节省出显示空间。
在 Dreamweaver中实现表格嵌套的方法很简单：先在网页中创建一个外部表格，将光标定位在你需要嵌套表格的单元格内，再在单元格内创建一个或多个表格，设置它们的属性使得它们在外部表格中合理排列即可。一般的网页排版表格嵌套形式参看图2-1-7，表格的嵌套简单示例：
图 2-1-7 表格嵌套排版示例
& 技巧 ：表格嵌套的合理利用也可以产生许多效果。例如表格的边框颜色的变化：使用一个表格嵌套一个表格，外部的表格设置背景颜色，内部的表格背景色和网页背景色相同，此时外部表格的背景色可以看成内部表格的边框颜色。但需要注意的是，此时外部表格不能设置高度，且单元格填充不为 0；而内部表格的宽度一定要设置为100%，否则产生的边框效果将无法达到设计者的目的。
F 经验： 当你设计的网页需要作到自动适应用户浏览器分辨率设置时，你可以将嵌套表格的最外层表格的宽度设置为百分比单位，而内部嵌套的表格则可以视情况来选择单位，一般也使用百分比单位
1.5 在表格内操作
在单元格内添加内容时，单元格的大小会跟随其内部内容的多少而自动扩展，且相邻的单元格会自动收缩，除非设计者也在其内部添加内容。因此，当设计者创建表格后，要根据网页内容先设置表格单元格的宽度，以免其他相邻单元格变形，单元格的高度一般不需要定义，它会随着内容的多少自动调整（除非你选择了 No Wrap ）。
在单元格中移动选择可以使用鼠标左键单击来实现。当你在一个单元格中输入完文本时，按一下 Tab键光标自动跳到表格同一行的下一个单元格中，如果在表格行的末尾单元格中，按下Tab键光标将自动跳至表格的下一行的第一个单元格中。如果设计者在光标处于表格的最后一行的最后一个单元格时按下Tab键，Dreamweaver将自动为该表格添加一个新行，该行将与最后一行有相同列数。
与普通文本编辑软件相同，键盘上的箭头按键一样可以实现光标位置的移动选择。
当需要在表格内做剪切、复制、粘贴操作时， Dreamweaver将限制使用者所选择的区域必须形成一个矩形。也就是说，虽然你可以选择不相邻的单元格，并修改它们的属性，但你不能剪切或复制它们。
当你选定一个单元格并且需要复制其内容时，你需要选择仅复制其内部内容还是全部复制（这里说的全部复制是指 Dreamweaver所默认的整个单元格属性及内容的全部）。特别是当你使用“Ctrl+鼠标左键单击”的方式选择一个单元格时，如果你只是简单地使用复制（Ctrl+C）和粘贴(Ctrl+V)，那么你粘贴到的单元格将具有被复制单元格的一切属性。如果你只复制内容，可以使用Dreamweaver提供的Copy Text Only(只复制文本)功能，快捷键是Ctrl+Shift+C。
所有表格和单元格在它们被创建时默认是没有高度设置的（除非你在创建时指定），但当你使用鼠标指针重新调整了表格或单元格的高度的后，在 HTML代码中它们将被加上高度设置代码，
F 经验：设置单元格的背景图像虽然在 Dreamweaver 的编辑状态下可见，但在浏览器中是不可见的。此时你需要自己手动将背景图像的HTML代码修改放置在标签中在浏览器中才可见。
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#52003/2/17 22:02:25
1.表格的分隔线可以隐藏 可以隐藏横向的分隔线
可以隐藏纵向的分隔线
可以隐藏横向和纵向的分隔线
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#62003/2/17 22:02:54
2.表格的边框不断在闪 以下方法可以令表格的边框不断在闪，很实用的 在BODY区加上 style="border:5px solid yellow">
加入任意的物件.加入任意的物件.
加入任意的物件.加入任意的物件.
加入任意的物件.加入任意的物件. |
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#72003/2/17 22:03:16
3.表格分行下载 这个对表哥内容很大比较实用 在需要分行下载处加上
比如：
flsdjfsdjfkdsjf |
skdjfsdjfksd |
flsdjfsdjfkdsjf |
skdjfsdjfksd |
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#82003/2/17 22:04:04
4.几种样式不同的表格 5.正立方表格 bordercolordark="#000000" style="position: absolute; left: 10; top:
49" height="26">
正立方表格 |
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#92003/2/17 22:04:31
6.细表格 bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="position: absolute; left: 11; top: 86">
细表格 |
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#102003/2/17 22:05:07
7.立体表格 bordercolordark="#ffffff" style="position: absolute; left: 10; top:
112" height="34">
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格 |
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
|
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#132003/2/17 22:06:48
11.表格中边框的显示 只显示上边框
只显示下边框
只显示左、右边框
只显示上、下边框
只显示左边框
只显示右边框
不显示任何边框
daxin1023
职务：普通成员
等级：3
金币：2.0
发贴：906
注册：2002/7/4 22:19:35
|
#142003/2/17 22:07:51
层拖拽行为不完全解析（Darg Layer Behaviors）：
作者:I 服了 YOU
首先我们来看一个层拖拽行为的最基本演示（见右侧）。这里只是指定了一个层（Layer），然后打开行为面板（Behaviors）选择拖拽（Darg Layer），不做任何设置，点击OK即可。默认的鼠标事件为转载（OnLoad）。从这个演示中我们可以看到，当点击并按住鼠标在层的任何部位时开始实现拖拽，你可以将层拖拽到场景中的任何一个地方。
2.演示２。 再看左侧的第二个演示。在这个演示中，层的拖动范围是做了限定的。也就是说针对该层的拖拽只在我们指定的范围内有效。拖动范围的设定是在Darg Layer-Movement（运动）对话框中进行的。在Movement下拉选项中有两个可选项，第一个为默认项Uncontrained（未约束的），第二项Constrained（约束的）就是用来设置可拖动范围的项目。在该项中可以指定针对某层相对于编辑区Up（上）、Down（下）、Left（左）及Right（右）的各个位置。
3.演示３。 第三个演示应用了拖拽行为中的Snap if Within()pixels of Drop Target（于某范围内贴紧目标）。需要说明的是，该功能只能对绝对定位的层产生效果，因为在设定贴紧目标范围之前必须要取得指定层的坐标，如果该层是相对定位的，也就没有了左边及上边的坐标值。在这种情况下我们就不能获得层的确切坐标。当在层相对定位的情况下获取坐标时DW会自动弹出一个提示框说明无法获得层位置。当我们获取了层的位置后，就可以在()pixels中写如一个数值了，默认的数值为５０像素．这个数值代表了，在距离这个层（获取坐标的层）５０个像素的范围内，拖拽的层在鼠标释放时会自动的帖紧目标．在左面的这个演示里只用到了一个层，如果您想了解到更详细明确的＂帖紧目标＂的概念可以自己动手作一下测试．
4.拖动这里
演示４。 观察左面的演示,我们会得到这样一个结论:拖拽层时触发鼠标事件的范围是可指定的。
触发鼠标事件的有效范围是在Drag Layer－Advancend（条件）-Drag handle（触发拖拽）项目中指定的。在Drag Hanfle选项的下拉列表中有两个可选项，第一个为默认项Entire layer（全部层），第二项Area Within Layer（层内范围）就是我们用来指定触发鼠标事件的项目。选择这一项，在对话框的左侧就会出现 T－（距离层顶部） L－（距离层左部） W－（有效范围的长度） H－（有效范围的高度）这四个待定数据项。多数的情况下，我们都无须指定T及L的数值，因为除了特殊的需要，我们都不会把触发鼠标事件的有效范围定义在中间或者其他角落这种特殊的位置．
完整的演示
左面是一个拖拽行为的完整演示．如果你细心的观察会发现，当两个层为重叠状态时点击任意层，受点击的层就会自动的跳到最上面来．这个小功能就是Advancend设置栏中While Dragging Bring Layer to Front（当拖拽停止时层处于前面）中完成的．其中While Dragging（当拖拽）有个可选项，默认为选择状态含义为＂当拖拽时＂层的位置,如果我们勾选掉这个项目，其含义就转变为＂正常状态下＂层的位置．所谓＂正常状态＂就是指层的索引顺序．再看右面的下拉列表，第一项＂ Leave on Top（留在顶部）＂，顾名思义，它来配合拖拽状态选项的含义就是：当层停止拖拽时，该层的位置留在顶部．第二项＂Restore Z-index（恢复索引顺序）．它的含义是指，保持层的先后顺序，先插入的层就在后插入层的上面，反之亦然．
提示：层的索引顺序我们可以任意指定，只需选中你要改变顺序的层，打开属性面板，你就可以看到Z-index项，在这里你可以输入一个数值，来定义层的先后顺序．
到这里未止，我们已经把关于拖拽层行为的基本要素有了一个大概的了解．
在Advancend设置栏中还有两个选项没有讲，因为它是附加在拖拽行为中js事件，脱离了拖拽的范畴，所以就不做详细的介绍了．下面就简单的说一下它们的含义：
一，call javascript：当鼠标开始拖拽时弹出警告．
二，when Dropped call javascript（）only of snapped：仅仅当拖拽放开，位置正确时触发js事件．注意：第二个功能只针对应用了＂贴紧目标＂的层所设．
以上两个功能因为我的DW被汉化了，所以测试得不到效果．所以在这里特别提醒各位能不用汉化最好就不用．好了，这个关于层拖拽行为的解析到此结束．如果您发现哪里讲的不正确请通知我．
本篇教程俺版权所有了，谁要转载请知会一声儿．谢了先．
|
| | |
