学习目标

学习目标 • 能够插入表格，会使用属性面板和菜单对表格进行设定和编辑 • 能够运用表格及表格的嵌套和叠加进行网页布局 • 能够运用布局表格进行不规则网页布局

本章内容 3.1　表格的建立和编辑 3.2　表格在页面布局中的应用 3.3　布局表格的设置与应用

3.1.1 案例制作：2006世界杯E组对阵表 3.1　表格的建立和编辑通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制作细线表格。

3.1.2 新知解析 3.1　表格的建立和编辑 • 1.创建表格 • 创建表格可以通过“插入”面板或菜单两种方法实现。步骤如下： • 将光标移到要插入表格的位置。 • 打开“插入”面板，切换到“常用”选项下，单击表格按钮，或单击菜单“插入”→“表格”命令，弹出“表格”对话框，如右图所示，可根据需要进行相应的参数设置。 • 单击“确定”按钮。

3.1　表格的建立和编辑 • 需要注意的是下面的设置项目： • “表格宽度”的单位可以是百分比或像素。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。 • “边框粗细”设定表格边框的宽度，单位为像素。 • “单元格边距”为表格内容和边框之间的空白区域，单位为像素。 • “单元格间距”为单元格之间的距离，单位为像素。

3.1　表格的建立和编辑 2. 选取表格元素（1）选取整个表格将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取整个表格。（2）选取单元格将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击，就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖拽的方法可以选取连续的一片单元格。（3）选取行或列从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行或列的图标出现时，单击鼠标即可选择行或列。

3. 设定表格和单元格属性（1）表格属性 当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。 3.1　表格的建立和编辑

（2）行列和单元格属性的设定 这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目完全一样，差别只是应用属性的范围不同而已。选择行、列或单元格后属性面板如下图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、列或单元格属性的设定。 3.1　表格的建立和编辑

4. 编辑表格和单元格（1）调整表格大小 选中表格后，利用属性面板设定表格的宽和高来改变大小。或选中表格后，表格上会出现3个控制点。将鼠标置于控制点上，当出现调整图标时，按下鼠标左键拖拽边框到想要的位置。（2）更改列宽和行高选定相应的行或列，通过属性面板设定行高或列宽值，从而改变行高列宽。也可以用鼠标拖动列、行的边框来更改列宽或行高。（3）添加行和列将光标置于表格中的适当位置，单击菜单“修改”→“表格”→“插入行”命令，则在当前行的上方插入一行。或单击菜单“修改”→“表格”→“插入列”命令，则在当前列的左侧插入一列。 3.1　表格的建立和编辑

（4）删除行和列 将光标置于要删除的行或列中的任意一个单元格，单击菜单“修改”→“表格”→“删除行”或“删除列”命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择“表格”→“删除行”或“删除列”命令，则删除当前行或列。（5）拆分与合并单元格拆分只能在一个单元格中进行，合并单元格应在多于一个单元格中进行。合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮进行合并，或单击菜单“修改”→“表格”→“合并单元格”命令进行相应操作。拆分单元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮，或单击菜单“修改”→“表格”→“合并单元格”命令，会弹出“拆分单元格”对话框，如图所示。设定拆分方式和数值，单击“确定”按钮。 3.1　表格的建立和编辑

（6）表格的复制与粘贴 表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩形，点击菜单“编辑”→“复制”或者右击，在弹出的菜单中选择“复制”。表格的粘贴方法选择粘贴单元格的位置，点击菜单“编辑”→“粘贴”或者右击，在弹出的菜单中选择“粘贴”，会根据选择区域的不同粘贴单元格。 3.1　表格的建立和编辑

（7）表格的配色方案 通过表格和单元格的属性设置，我们可以对表格进行美化。在Dreamweaver中，系统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作出漂亮的数据表格。格式化表格的操作步骤：首先插入表格，在对应的单元格中输入数据，点击菜单“命令”→“格式化表格”，弹出“格式化表格”对话框，在左侧的列表中选择一个样式，右侧会显示预览效果。对话框的下部允许对表格的配色方案和文字、对齐等进行设置。然后点击“确定”按钮。 3.1　表格的建立和编辑

3.1.3 技巧提示 3.1　表格的建立和编辑 1.填充和间距 2. 细线表格和细线的制作

3.1.4 实战演练：网站“行星大观”页眉导航部分制作 3.1　表格的建立和编辑通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、单元格和设定单元格的高、宽、对齐方式、如何设置表格的背景图像、如何设置Flash背景透明。

3.2.1 案例制作：网站“球星风采”主页 3.2　表格在页面布局中的应用通过本案例的操作，你将学会：如何建立表格和设置表格的背景图像、如何选中表格、行、单元格和设定其尺寸、对齐方式、如何设定表格的嵌套和叠加、如何利用marquee语句制作跑马灯效果、如何利用表格单元格制作细线。

3.2.2 新知解析 3.2　表格在页面布局中的应用 1.表格的嵌套要设计一个版式精美的网站，需要应用表格的嵌套。原因有以下两个方面：首先，网页的排版有时会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。其次，浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。因此在版面设计中引入表格嵌套，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置。左图所示为表格嵌套的一个例子。创建嵌套表格的操作方法是：将光标置于要插入嵌套表格的单元格中，选择菜单“插入”→ “表格”命令。

3.2　表格在页面布局中的应用 2.表格的叠加当使用表格进行排版定位时，整个网页的结构都应用表格，而不能仅局部使用表格。由于浏览器解析网页时，是将整个表格的结构下载完毕之后才显示表格。表格过大、过于复杂，影响浏览下载速度。我们可以将复杂的表格拆分成上下叠加各自独立的表格，每个表格中再嵌套表格。这样在布局网页时既减轻难度，增加了灵活性，又加快了浏览下载速度。下图所示的网页结构就是采用表格的嵌套和叠加技术实现的。

3.2　表格在页面布局中的应用 3.利用<marquee></marquee>标记符设置跑马灯效果基本语法： <marquee>文字或图片</marquee> 该语法只适用于IE浏览器中显示，只能在<body>标记中使用。作用是实现标记中的内容在页面中移动的效果。

3.2.3 技巧提示 3.2　表格在页面布局中的应用 1.嵌套注意事项 2. 鼠标对跑马灯特效的影响

3.2.4 实战演练：网站“球星风采”子页的制作 3.2　表格在页面布局中的应用通过本案例的操作，你将学会：如何建立表格和设置表格的背景图像、如何选中表格、行、单元格和设定其尺寸、对齐方式、如何设定表格的嵌套和叠加、如何利用marquee语句制作跑马灯效果、如何利用表格单元格制作细线。

3.3.1 案例制作：网站“闪闪作坊”页眉部分 3.3　布局表格的设置与应用通过本案例的操作，你将学会：如何绘制布局表格、嵌套布局表格、布局单元格和移动布局表格、布局单元格、如何选中布局表格、布局单元格和设定其尺寸、对齐方式、如何插入鼠标经过图像。

3.3.2 新知解析 3.3　布局表格的设置与应用 1. 表格视图模式 Dreamweaver 8为表格提供了标准视图、扩展视图、布局视图三种视图模式。默认情况下是标准视图，即传统的表格使用方式。 2. 切换布局视图在“插入”面板的“布局”选项卡中单击“布局”按钮，进入布局视图模式。

3.3　布局表格的设置与应用 3. 绘制布局表格和布局单元格在“插入”面板的“布局”选项卡中单击“布局”按钮，进入布局视图模式。绘制布局表格时，单击“插入”面板上的布局表格按钮；绘制布局单元格时，单击“插入”面板上的绘制布局单元格按钮，光标变为十字形状。将鼠标放置在要绘制表格的区域，拖动鼠标绘制出所需的布局表格和布局单元格。布局表格的外框为绿色，左上角显示标签名称“布局表格”，其尺寸在表格下部显示。布局单元格的外框为蓝色。

3.3　布局表格的设置与应用 4. 绘制嵌套表格创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创建嵌套表格的步骤是：在布局视图中，单击“布局表格”按钮，在页面中绘制出布局表格。再单击“布局表格”按钮，在已有的表格中绘制表格，形成嵌套表格。 5. 在单元格中添加内容在布局单元格中可以插入任何类型的数据。在插入时，把光标移到要插入内容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数据的长度而变化。在输入数据时，只能向布局单元格中输入数据，而不能向布局表格中输入数据。

（1）表格的复制与粘贴 表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩形，点击菜单“编辑”→“复制”或者右击，在弹出的菜单中选择“复制”。表格的粘贴方法选择粘贴单元格的位置，点击菜单“编辑”→“粘贴”或者右击，在弹出的菜单中选择“粘贴”，会根据选择区域的不同粘贴单元格。（2）表格的配色方案通过表格和单元格的属性设置，我们可以对表格进行美化。在Dreamweaver中，系统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作出漂亮的数据表格。格式化表格的操作步骤：首先插入表格，在对应的单元格中输入数据，点击菜单“命令”→“格式化表格”，弹出“格式化表格”对话框，在左侧的列表中选择一个样式，右侧会显示预览效果。对话框的下部允许对表格的配色方案和文字、对齐等进行设置。然后点击“确定”按钮。 3.1　表格的建立和编辑

3.3　布局表格的设置与应用 6. 选择布局表格、布局单元格选择布局单元格的方法：用鼠标单击单元格外框，当单元格外框出现8个控制点时即被选中。或按住Ctrl键后在单元格的任意位置单击鼠标，也可选中单元格。选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制点时即被选中。 7. 调整布局表格、布局单元格大小首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小。 8. 移动布局表格、布局单元格用户可以随意移动位于布局表格中的布局单元格和嵌入的布局表格。首先选中要移动的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也可以使用方向键移动，每按一次方向键，移动1个像素的距离；如果按住Shift键，每按一次方向键，移动10个像素的距离。

3.3　布局表格的设置与应用 9. 清除单元格高度当在单元格中插入内容后，如果单元格的大小与所插入的内容不太匹配时，可以通过清除行高命令让单元格的高度匹配插入的内容。清除单元格高度的步骤为：选中单元格所在的表格，点击属性面板中的清除行高按钮；或点击表格上端的列标题上的按钮，打开列标题菜单，选择“清除所有高度”命令，如图所示，单元格的高度会随着单元格内容而变化。

3.3　布局表格的设置与应用 • 10.设置布局表格和布局单元格属性 • ( 1）设置布局表格属性 • “固定”：将表格设置为固定宽度 • “自动伸展”：将表格设置为自动伸展 • “高”：输入以像素为单位的数值，设置布局表格的高度 • “填充”：设置表格中单元格内容与边界之间的距离 • “间距”：设置表格中单元格之间的距离 • 清除行高按钮：清除布局表格中单元格的显示高度 • 使单元格宽度一致按钮：使HTML代码中的单元格的固定列宽和窗口中的宽度相匹配 • 删除所有间隔图像按钮：删除所有的间隔图像 • 删除嵌套按钮：删除嵌套表格，保留嵌套表格中的内容

3.3　布局表格的设置与应用 • （2）设置布局单元格属性 • “固定”：将单元格设置为固定宽度 • “自动伸展”：将单元格设置为自动伸展 • “高”：输入以像素为单位的数值，设置布局单元格的高度 • “背景颜色”：设置单元格背景颜色，单击按钮选取颜色，或输入颜色的十六进制代码 • “水平”：设置单元格中的内容的对齐方式为水平对齐方式 • “垂直”：设置单元格中的内容的对齐方式为垂直对齐方式 • “不换行”：选择该项时，输入较多内容时，单元格会自动伸展，防止换行

3.3　布局表格的设置与应用 11. 设置布局表格和布局单元格的背景图像在布局视图下，不能直接为布局表格和布局单元格设置背景图像。当需要设置背景图像时，需要先选中布局表格或布局单元格，切换到标准视图下，再在属性面板中设定背景图像。

3.3.3 技巧提示 3.3　布局表格的设置与应用 1. 吸附现象 2. 布局模式与标准模式的配合

3.3.4 实战演练：网站“行星大观”主页的制作 3.3　布局表格的设置与应用通过本案例的操作，你将学会：如何绘制布局表格、布局单元格和移动布局表格、布局单元格、如何选中布局表格、布局单元格和设定其尺寸、背景图像、水平和垂直的对齐方式、如何设置Flash背景透明和制作跑马灯效果。

学习目标

学习目标

Presentation Transcript