网页设计与制作案例教程 教学课件 作者 池同柱第6章 利用表格排版页面.ppt

《网页设计与制作案例教程 教学课件 作者 池同柱第6章 利用表格排版页面.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章利用表格排版页面一、插入表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。DreamweaverCS3提供了两种查看和操作表格的方式：“标准”模式（在该模式下，表格显示为行和列的网格）和“布局”模式（允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框）。我们先来学习在标准模式下的表格操作。将光标停在需要插入表格的位置，单击【插入】面板【常用】选项卡中的【表格】按钮，或者直接从菜单栏选择【插入记录】→【表格】命令，弹出【表格】对话框。如图6-13所示。其各个参

2、数的功能如下：对话框表格大小参数：用于设置表格的行数、列数、表格宽度、边框粗细、单元格边距、单元格间距6个参数。表格宽度：可以选择使用两种单位来指定表格宽度。像素即直接指定表格宽度的像素数，而若以百分比为单位，则代表该表格占整个页面的百分比，他可以随着页面的变化而变化。边框粗细：设置一个以像素为单位的数字指定表格边框的粗细。如果设置为0，则表示不显示表格边框。单元格边距：指单元格内容与单元格边框之间的像素数。单元格间距：相邻的表格单元格之间的像素数。页眉：指表格是否包含行列标题。无：对表格不启用列或行标题。左：可以将表格的第一列作为标题列，以便可为表格中的每一行输入一个标

3、题。顶部：可以将表格的第一行作为标题行，以便可为表格中的每一列输入一个标题。两者：在表格中列标题和行标题皆有。辅助功能：指定该表格的标题等信息。标题：提供一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。包括默认、顶部、底部、左、右五个选项。摘要：给出该表格的说明。在页面编辑时可以读取摘要内容，但是该不会显示在用户的浏览器中。1.在表格单元中添加内容（1）输入文字在表格单元格中可以插入文字、图像和其他对象（如嵌套表格）等。单击任意一个单元格，即可在该单元格中输入文本。此时，单元格宽度会随着键入文本自动扩展。（2）插入图像单击需要插入图像的单元格，选择

4、【插入】→【图像】命令，或者在【插入】面板的【常用】栏的【插入图像】按钮，再选择需要插入的图像即可。（3）插入表格在表格的单元格中可以插入一个表格，形成嵌套表格。先单击需要插入嵌套表格的单元格，插入方法和直接插入表格相同。二、编辑表格2.操作单元格在DreamweaverCS3中，可以对表格中的任意单元格进行复制、剪切、粘贴、删除等操作，还可以根据需要来拆分及合并单元格。单元格的复制粘贴等操作类似于Excel电子表格的操作，在这里不再赘述。（1）合并单元格当需要合并表格中两个或者多个单元格时，首先选择连续行中形状为矩形的单元格，所选部分是矩形的单元格时，可以合并这些单元格

5、。所选区域是矩形选中需要合并的单元格后，请执行下列操作之一：①选择菜单栏【修改】→【表格】→【合并单元格】。②在展开的属性面板中，单击“合并单元格”。合并单元格按钮注意：如果没有看到此按钮，则单击属性面板右下角的箭头，以便可以看到所有选项。合并单元格后，单个单元格的内容将会放置在最终的合并单元格中，所选的第一个单元格的属性将应用于合并的单元格。（2）拆分单元格当需要对单个单元格进行拆分时，可以使用拆分单元格。倘若选中多个单元格进行拆分单元格操作，操作仅对第一个单元格有效。选中需要合并的单元格后，请执行下列操作之一：①选择菜单栏【修改】→【表格】→【拆分单元格】。②在展开的

6、属性面板中，单击“拆分单元格”。然后在弹出的拆分单元格对话框中选择拆分的行数或者列数。3.使用扩展表格模式在DreamweaverCS3中，可以使用扩展表格模式更容易的编辑表格。“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，我们可以选择表格中的项目或者精确地放置插入点。这样，我们就可以更准确的将插入点放置在图像的左边或右边，从而避免无意中选中该图像或表格单元格。当需要切换至扩展表格模式的时候，选择菜单栏【查看】→【表格模式】→【扩展表格模式】，或者选择【插入】栏的【布局】类别，然后单击【扩展】按钮即可。注

7、意：一旦做出选择或放置插入点后，需要回到“设计”视图的“标准”模式来进行编辑。因为，诸如调整大小之类的一些可视操作在“扩展表格”模式中将会看不到效果。使用完毕后，再点击【布局】面板的【标准】按钮即可切换回标准模式。1.设置整个表格的属性选中需要设置属性的整个表格后，属性面板就会显示该表格的相关属性。下面重点介绍表格的各项属性参数的含义：表格ID：该表格的ID。如果需要在页面使用JavaScript语言来控制表格，那么就需要为这个表格命名一个ID。行和列：表格中行数和列数。宽和高：以像素为单位或按浏览器窗口宽度的百分比指定的表格