第4章 网页布局表格.docx

3）选择多个单元格

方法一：

按住Ctrl键，单击所要选择的所有单元格。

方法二：

将光标置于单元格中，拖动鼠标，选择多个单元格。

方法三：

如果要选择整行，将光标置于该行的左边缘，当光标变成“→”形状时单击鼠标左键。

方法四：

如果要选择整列，将光标置于该列的上边缘，当光标变成“↓”形状时单击鼠标左键。

4）选择全部单元格

方法一：

将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。

方法二：

将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。

方法三：

将光标置于第1行的左边缘，当光标变成“→”形状时，向下拖动鼠标至最后一行。

方法四：

将光标置于第1列的上边缘，当光标变成“↓”形状时，向右拖动鼠标至最后一列。

2.更改表格结构

1）在现有的表格中插入单元行

方法一：

将光标移到要插入单元行的下一行，选择“修改”菜单下“表格”子菜单中的“插入行”命令。

方法二：

将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行”命令。

方法三：

在表格的最后一个单元格中按Tab键会自动在表格最后另外添加一行。

2）在现有的表格中插入单元列

方法一：

将光标移到在插入单元列的右边一列，选择“修改”菜单下子菜单“表格”中的“插入列”命令。

方法二：

将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入列”命令

3）如果想在现有的表格中添加多行或多列，可执行以下操作：

首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行或列”命令，或是选择“修改”菜单下子菜单“表格”中的“插入行或列”命令，将弹出如图4-5所示的“插入行或列”对话框。

在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。

图4-5“插入行或列”对话框

4）删除整行或整列

方法一：

先选择欲删除的整行或整列，直接按Del键，即可删除。

方法二：

先将光标移到要删除的行或列中，选择“修改”菜单下“表格”子菜单中的“删除行”或“删除列”命令。

方法三：

将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“删除行”或“删除列”命令。

5）合并单元格

首先在表格中选择需合并的单元格，属性面板变成“单元格”属性面板，然后执行下列操作之一：

方法一：

选择“修改”菜单下“表格”子菜单中的“合并单元格”命令。

方法二：

单击鼠标右键，在弹出的快捷菜单中选择“表格”中“合并单元格”命令。

方法三：

单击“单元格”属性面板上的合并单元格图标

。

6）拆分单元格

首先在表格中选择需拆分的单元格，执行下列任何一种操作：

方法一：

选择“修改”菜单下子菜单“表格”中“拆分单元格”命令。

方法二：

单击鼠标右键，在弹出的下拉菜单中选择“表格”中“拆分单元格”命令。

方法三：

单击属性面板上的拆分单元格图标

。

另外，在“拆分单元格”对话框中，可以选择拆分成行或列以及拆分的数量。

3.修改表格大小

1）设置表格的宽度及高度

方法一：

通过鼠标拖曳法可以粗略地调整表格的大小。

方法二：

通过“表格属性”对话框可以精确地调整表格的大小。

在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。

2）设置单元格的宽度及高度

在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。

如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。

在属性面板上可以改变单元格默认的宽度和高度。

将光标置于需要设置宽度或高度的单元格中，此时属性面板显示为单元格属性。

在属性面板上的“宽”或“高”文本框中输入适当的数值即可，这时单元格宽度与高度的单位使用像素；如果要指定单元格宽度与高度的单位使用百分比，需要在值后面使用百分比符号（%）。

4．表格数据操作

1）导入表格数据

Dreamweaver还支持将外部的数据导入表格，这些数据文件一般是纯文本或者Excel等工具创建的文件，一般是以制表符、逗号、分号等作为分隔符的格式。

方法一：

选择“文件”菜单下“导入”子菜单中的“表格式数据”命令，出现如图4-6所示的对话框。

图4-6“导入表格式数据”对话框

“数据文件”：

填写要导入的文件的名称。

单击“浏览”按钮可以选择一个文件导入。

“定界符”：

填写要导入的文件中所使用的分隔符。

“表格宽度”：

选择“匹配内容”，使每个列足够宽以适应该列中最长的文本字符串；选择“指定宽度”，可以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。

“格式化首行”：

用于确定应用于表格首行的格式设置，有四个选项中可供选择：

无格式、粗体、斜体或加粗斜体。

方法二：

在“插入”面板的“数据”类别中，单击“导入表格式数据”图标，也会出现如图4-6所示的对话框。

方法三：

选择“插入”菜单下“表格对象”子菜单中的“导入表格式数据”命令，同样会出现如图4-6所示的对话框。

2）导出表格数据

可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开，可以将逗号、冒号、分号或空格用作分隔符。

选择“文件”菜单下“导出”子菜单中的“表格”命令，出现如图4-7所示的对话框。

图4-7“导出表格数据”对话框

“定界符”：

指定应该使用哪种分隔符在导出的文件中分隔表格数据；

“换行符”：

用于选择将在哪种操作系统中打开导出的文件，是Windows、Macintosh还是UNIX。

若使用的是Windows操作系统，则在换行符框内选择“Windows”，单击“导出”按钮，打开保存文件窗口执行保存操作。

3）表格排序

在Dreamweaver中，可以根据表格单个列的内容进行排序，也可以根据两个列的内容执行更加复杂的表格排序。

对表格数据进行排序的方法如下：

定位光标到表格内，选择“命令”菜单下的“排序表格”命令，出现如图4-8所示的对话框，设置选项后，单击“确定”按钮开始排序。

图4-8“排序表格”对话框

排序按：

选择按哪一列的值对表格的行进行排序。

顺序：

有“按字母顺序”和“按数字顺序”两种方式，并可选择按升序（英文字母是按A到Z，数字是按从小到大）或降序排列。

需要说明的是，当列的内容是数字时，一般选择“按数字顺序”。

如果按字母顺序数字进行排序，则会将这些数字作为单词进行排序（排序结果如1、10、2、20、3、30），而不是将它们作为数字进行排序（排序结果如1、2、3、10、20、30）。

再按：

按上面排序后有并列数据时，再设置另一列数据进行排序时使用的排序依据。

排序包含第一行：

勾选此项，对表格的首行也排序。

若表格的首行是标题单元格，则应清除勾选。

排序标题行：

如果表格有表头，则对其排序。

排序脚注行：

如果表格有脚注行，则对其排序。

完成排序后所有行颜色保持不变：

勾选此项，表格排序后原表格的颜色不随顺序的变化而变化。

用于指定排序之后表格行属性（如颜色）应该与同一内容保持关联。

如果表格行使用两种交替的颜色，则不要选择此项，以确保排序后的表格仍具有颜色交替的行。

如果行属性特定于每行的内容，则选择此项，以确保这些属性与排序后表格中正确的行保持一致。

4.2.4使用可视化助理进行布局

1、设置标尺

标尺常用于帮助用户测量、组织和规划布局。

标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。

1）标尺有两种状态，即“显示”和“隐藏”。

若想在这两种状态之间切换，应选择“查看”菜单下的“标尺”子菜单，单击“显示”命令。

2）默认情况下，标尺的原点坐标位于“设计”视图中“文档”窗口的左上角。

如果要更改原点，可以将标尺原点图标拖到页面上的任意位置。

3）如果要将原点重设至它的默认位置，可以选择“查看”菜单下“标尺”子菜单中的“重设原点”选项，跟踪图像随即返回到“文档”窗口的左上角（0,0）；也可以在“文档”窗口的左上角单击右键，在快捷菜单中选择“重设原点”选项。

4）用户也可以更改标尺的度量单位，具体操作是：

选择“查看”菜单中“标尺”子菜单，然后根据自己的需要选择“像素”、“英寸”或“厘米”。

2、设置布局辅助线

辅助线是用户从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。

还可以使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分。

为了帮助用户对齐元素，Dreamweaver允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。

需要说明的是，只有在将元素绝对定位的情况下，才可使用靠齐功能。

当然，用户还可以锁定辅助线，以防止其他用户不小心移动它们。

1）创建水平辅助线或垂直辅助线

直接用鼠标拖动水平或垂直辅助线到“文档”窗口中的适当位置，然后松开鼠标按钮；如果需要重新定位“文档”窗口中辅助线，只需再次拖动该辅助线即可。

值得注意的是，在默认情况下，Dreamweaver用绝对像素度量值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。

若要以百分比的形式记录辅助线，可在创建或移动辅助线时按住Shift。

2）显示或隐藏辅助线

显示或隐藏辅助线，可以使用“查看”菜单中“辅助线”子菜单下的“显示辅助线”命令切换实现。

3）将元素靠齐辅助线

方法一：

若要将元素靠齐到辅助线，可以选择“查看”菜单中“辅助线”子菜单下“靠齐辅助线”命令。

方法二：

若要将辅助线靠齐元素，可以选择“查看”菜单中“辅助线”子菜单下“辅助线靠齐元素”命令。

需要注意的是，用户在调整绝对定位的元素（如AP元素）、表格或图像的大小时，所调整的元素也会靠齐辅助线。

4）查看辅助线并将其移至特定位置

首先应该将鼠标指针停留在辅助线上以查看其位置，然后双击该辅助线，最后在“移动辅助线”对话框中输入新的位置，然后单击“确定”即可。

5）更改辅助线设置

若要更改辅助线的设置，可以选择“查看”菜单中“辅助线”子菜单下“编辑辅助线”命令，在弹出的辅助线窗口中设置如下选项，如图4-9所示，然后单击“确定”即可。

图4-10“辅助线”窗口

3.使用布局网格

网格在“文档”窗口中显示为一系列的水平线和垂直线，常用于精确地放置对象。

可以让经过绝对定位的页面元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。

无论网格是否可见，都可以使用靠齐。

1）显示或隐藏网格

选择“查看”菜单中“网格设置”子菜单下的“显示网格”命令。

2）启用或禁用靠齐

选择“查看”菜单中“网格设置”子菜单下的“靠齐到网格”命令。

3）更改网格设置

首先选择“查看”菜单中“网格设置”子菜单下的“网格设置”命令，在弹出的“网格设置”窗口中设置相关选项，如图4-11所示，然后单击“确定”应用更改。

图4-11“网格设置”窗口

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

第4章 网页布局表格 网页 布局 表格

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。