第6章 利用表格排版页面

第6章利用表格排版页面一、插入表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。DreamweaverCS5提供了两种查看和操作表格的方式：“标准”模式（在该模式下，表格显示为行和列的网格）和“布局”模式（允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框）。我们先来学习在标准模式下的表格操作。将光标停在需要插入表格的位置，单击【插入】面板【常用】选项卡中的【表格】按钮，或者直接从菜单栏选择【插入记录】→【表格】命令，弹出【表格】对话框。如图6-13所示。其各个参数的功能如下：对话框表格大小参数：用于设置表格的行数、列数、表格宽度、边框粗细、单元格边距、单元格间距6个参数。表格宽度：可以选择使用两种单位来指定表格宽度。像素即直接指定表格宽度的像素数，而若以百分比为单位，则代表该表格占整个页面的百分比，他可以随着页面的变化而变化。边框粗细：设置一个以像素为单位的数字指定表格边框的粗细。如果设置为0，则表示不显示表格边框。单元格边距：指单元格内容与单元格边框之间的像素数。单元格间距：相邻的表格单元格之间的像素数。页眉：指表格是否包含行列标题。无：对表格不启用列或行标题。左：可以将表格的第一列作为标题列，以便可为表格中的每一行输入一个标题。顶部：可以将表格的第一行作为标题行，以便可为表格中的每一列输入一个标题。两者：在表格中列标题和行标题皆有。辅助功能：指定该表格的标题等信息。标题：提供一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。包括默认、顶部、底部、左、右五个选项。摘要：给出该表格的说明。在页面编辑时可以读取摘要内容，但是该不会显示在用户的浏览器中。1.在表格单元中添加内容（1）输入文字在表格单元格中可以插入文字、图像和其他对象（如嵌套表格）等。单击任意一个单元格，即可在该单元格中输入文本。此时，单元格宽度会随着键入文本自动扩展。（2）插入图像单击需要插入图像的单元格，选择【插入】→【图像】命令，或者在【插入】面板的【常用】栏的【插入图像】按钮，再选择需要插入的图像即可。（3）插入表格在表格的单元格中可以插入一个表格，形成嵌套表格。先单击需要插入嵌套表格的单元格，插入方法和直接插入表格相同。二、编辑表格2.操作单元格在DreamweaverCS5中，可以对表格中的任意单元格进行复制、剪切、粘贴、删除等操作，还可以根据需要来拆分及合并单元格。单元格的复制粘贴等操作类似于Excel电子表格的操作，在这里不再赘述。（1）合并单元格当需要合并表格中两个或者多个单元格时，首先选择连续行中形状为矩形的单元格，所选部分是矩形的单元格时，可以合并这些单元格。所选区域是矩形选中需要合并的单元格后，请执行下列操作之一：①选择菜单栏【修改】→【表格】→【合并单元格】。②在展开的属性面板中，单击“合并单元格”。合并单元格按钮注意：如果没有看到此按钮，则单击属性面板右下角的箭头，以便可以看到所有选项。合并单元格后，单个单元格的内容将会放置在最终的合并单元格中，所选的第一个单元格的属性将应用于合并的单元格。（2）拆分单元格当需要对单个单元格进行拆分时，可以使用拆分单元格。倘若选中多个单元格进行拆分单元格操作，操作仅对第一个单元格有效。选中需要合并的单元格后，请执行下列操作之一：①选择菜单栏【修改】→【表格】→【拆分单元格】。②在展开的属性面板中，单击“拆分单元格”。然后在弹出的拆分单元格对话框中选择拆分的行数或者列数。3.使用扩展表格模式在DreamweaverCS5中，可以使用扩展表格模式更容易的编辑表格。“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，我们可以选择表格中的项目或者精确地放置插入点。这样，我们就可以更准确的将插入点放置在图像的左边或右边，从而避免无意中选中该图像或表格单元格。当需要切换至扩展表格模式的时候，选择菜单栏【查看】→【表格模式】→【扩展表格模式】，或者选择【插入】栏的【布局】类别，然后单击【扩展】按钮即可。注意：一旦做出选择或放置插入点后，需要回到“设计”视图的“标准”模式来进行编辑。因为，诸如调整大小之类的一些可视操作在“扩展表格”模式中将会看不到效果。使用完毕后，再点击【布局】面板的【标准】按钮即可切换回标准模式。1.设置整个表格的属性选中需要设置属性的整个表格后，属性面板就会显示该表格的相关属性。下面重点介绍表格的各项属性参数的含义：表格ID：该表格的ID。如果需要在页面使用JavaScript语言来控制表格，那么就需要为这个表格命名一个ID。行和列：表格中行数和列数。宽和高：以像素为单位或按浏览器窗口宽度的百分比指定的表格宽度和高度。这里，通常不需要设置表格的高度。填充：即单元格边距，指单元格内容与单元格边框之间的像素数。间距：相邻的表格单元格之间的像素数。边框：指定表格边框的宽度（以像素为单位）。如果没有明确指定边框、单元格间距和单元格边距的值，则大多数浏览器按边框和单元格边距均设置为1且单元格间距设置为2显示表格。若要确保浏览器不显示表格中的边距和间距，请将“边框”、“单元格边距”和“单元格间距”都设置为0。三、设置表格属性对齐：确定表格相对于同一段落中的其它元素（例如文本或图像）的显示位置。“左对齐”沿其它元素的左侧对齐表格（因此同一段落中的文本在表格的右侧换行）；“右对齐”沿其它元素的右侧对齐表格（文本在表格的左侧换行）；“居中对齐”将表格居中（文本显示在表格的上方和/或下方）；“缺省”指示浏览器应该使用其默认对齐方式。当将对齐方式设置为“默认”时，其它内容不显示在表格的旁边。若要在其它内容旁边显示表格，需要使用“左对齐”或“右对齐”。清除列宽和清除行高：从表格中删除所有明确指定的行高或列宽。将表格宽度转换成像素和将表格高度转换成像素：将表格中每列的宽度或高度设置为以像素为单位的当前宽度（还将整个表格的宽度设置为以像素为单位的当前宽度）。将表格宽度转换成百分比和将表格高度转换成百分比：将表格中每个列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度（还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度）。背景颜色：表格的背景颜色。边框颜色：表格边框的颜色。背景图像：表格的背景图像。2.设置行、列和单元格的属性如果选中表格中的单元格、行或列等元素时，属性面板就会显示对应表格元素的相关属性选项。按住Ctrl键，单击单元格的边框即可选中单元格，当鼠标停至表格某一列的上方或某一行的左侧时，鼠标指针变成一个箭头形式，此时单击鼠标可以选中表格中的一列或者一行。选中表格的一列的属性（注意鼠标指针的变化）行、列相关的属性主要有：水平：指定单元格、行或列内容的水平对齐方式。可以将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式（通常常规单元格为左对齐，标题单元格为居中对齐）。垂直：指定单元格、行或列内容的垂直对齐方式。您可以将内容对齐到单元格的顶端、中间、底部或基线，或者指示浏览器使用其默认的对齐方式（通常是居中对齐）。宽和高：所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，则需要在值后面使用百分比符号(%)。若要让浏览器根据单元格的内容以及其它列和行的宽度和高度确定适当的宽度或高度，请将此域留空（默认设置）。默认情况下，浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。这就是为什么当您将内容添加到某个列时，该列有时变得比表格中其它列宽得多的原因。不换行：这个复选框用来防止换行，从而使给定单元格中的所有文本都在一行上。如果启用了“不换行”，则当键入数据或将数据粘贴到单元格时单元格会加宽来容纳所有数据。标题：这个复选框将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。四、排序及整理表格和单元格内容1.排序表格在DreamweaverCS5中，我们可以根据单个列的内容对表格中的行进行排序，甚至还可以根据两个列的内容执行更加复杂的表格排序。需要注意的是，不能对包含合并单元格的表格进行排序。具体操作方法是：（1）选择该表格或单击任意单元格。（2）选择菜单栏【命令】→【排序表格】，弹出排序表格对话框。（3）在对话框中设置选项，排序按“列2”，顺序为“按数字顺序”，“降序”，然后单击【确定】。对于排序对话框各个选项的功能，简要介绍如下：排序方式：确定使用哪个列的值对表格的行进行排序。顺序：确定是按字母还是按数字顺序以及是以升序（A到Z，数字从小到大）还是以降序对列进行排序。再按/顺序：确定将在另一列上应用的第二种排序方法的排序顺序。在“再按”弹出菜单中指定将应用第二种排序方法的列，并在“顺序”弹出菜单中指定第二种排序方法的排序顺序。排序包含第一行：指定将表格的第一行包括在排序中。如果第一行是不应移动的标题，则不选择此选项。排序标题行和排序脚注行：指对标题行和对脚注行进行排序指定按照与主体行相同的条件对表格的标题或者脚注部分中的所有行进行排序。使排序完成后所有行的颜色保持不变：指定排序之后表格行属性（如颜色）应该与同一内容保持关联。如果表格行使用两种交替的颜色，则不要选择此选项以确保排序后的表格仍具有颜色交替的行。如果行属性特定于每行的内容，则选择此选项以确保这些属性保持与排序后表格中正确的行关联在一起。2.整理表格内容（1）HTML中的表格格式设置优先顺序在给表格内容设置格式时，我们看到可以对单元格、行、列以及整个表格进行属性设置，如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。即表格格式设置的优先顺序如下：单元格→行→表格。例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格格式设置。（2）导入和导出表格式数据在DreamweaverCS5中，可以直接将在MicrosoftExcel表格数据导入到Dreamweaver中并设置为表格格式。也可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开。您可以使用逗号、冒号、分号或空格作为分隔符。导入表格的操作方法有以下三种：选择【文件】→【导入】→【表格式数据】。在【插入】栏的【数据】类别中，单击【导入表格式数据】图标。选择【插入】→【表格对象】→【导入表格式数据”】。单击浏览选择要导入的文件名称，选择需要的分隔符（即定界符）并设置相关属性数据，单击【确定】按钮即可。导出表格对话框导出表格时，需要将插入点放置在表格中的任意单元格中，然后选择【文件】→【导出】→【表格】，在弹出的【导出表格】对话框中（如图6-23）选择分隔符、换行符后单击【导出】按钮。并在弹出的对话框中保存文件即可。五、表格的高级应用表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。合理的利用表格可以方便的美化你得页面。1.水平细线水平细线用以分隔页面，并且效果比直接插入的水平线更加美观。通过制作高为1像素的表格便可创建水平细线。注：上面的为单独插入的水平线，下面的为制作的水平细线。制作水平细线方法：首先在网页中插入一个一行一列的表格，并将单元格边距和单元格间距都设置为0，边框设为1，然后单击【文档】→【代码】按钮，切换到代码视图，将td和/td标签之间的” ”删除，再切换到设计视图，即可看到水平细线的效果。如果想让水平细线变为彩色的，可对表格设置边框和背景颜色。2.单像素表格单像素表格就是利用设置单元格间距的属性，来使表格在浏览器中在表格和单元格的周围显示一条细线