使用表格和表格模式布局页面.ppt
课堂讲解 上机实战,第8章 用表格和表格布局,表格的基本html命令.-定义表格-定义表行-定义表头-定义表元(表格的具体数据),8.1 创建表格,表格用于在网页上显示表格式数据以及对文本和图形进行布局的工具插入栏表格按钮，出现表格对话框,表格大小,单元格内容和边界的距离,表格行列的标题,相邻的单元格之间的像素数,整个表的标题,表格标题相对于表格的显示位置,表格的说明,8.2 选择表格,选择表格元素选择后，可以复制和粘贴这些元素，修改其属性等。,选择整个表格单击表格的左上角单击单元格，标签选择器中选择table标签单击单元格，修改表格选择表格选择行或列鼠标在行的左边缘或列的上边缘，单击,选择单元格单击单元格，然后标签选择器中单击td标签单击单元格，编辑全选，选择整个单元格，再次编辑全选，会选择整个表格。按住Ctrl键，单击单元格。,选择一行或矩形的单元格块从一个单元格拖到另一个单元格单击一个单元格，按住shift单击另一个单元格。选择不相邻的单元格类似word的做法，按住Ctrl键单击相应的单元格,使用扩展表格模式查看表格模式扩展表格模式扩展表格模式可以暂时放大表格尺寸以便于操作。“扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，您可以选择表格中的项目或者精确地放置插入点。例如，您可能扩展一个表格以便将插入点放置在图像的左边或右边，从而避免无意中选中该图像或表格单元格。,8.4 设置 表格属性,优先顺序：当在“设计”视图中对表格进行格式设置时，可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。表格格式设置的优先顺序如下：单元格 行 表格,例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格格式设置。注意当设置列的属性时，Dw更改对应于该列中每个单元格的 td 标签的属性。,查看和设置表格属性选择表格，查看属性检查器。更改表格的格式设置设置单元格、行和列的属性:1）选择，2）设置属性,8.5 编辑表格,修改表格 菜单中包含了有关表格的命令使用菜单添加行或列单击一单元格修改表格插入行、插入列、插入行或列在表格最右下角的单元格按tab，插入一行,使用菜单删除行或列选择整行或整列，使用编辑清除或者delete键即可实施删除。属性检查器添加或删除行列选择整个表格属性检查器中，增加或减少行，在表格底部增加或删除。增加或减少列，在表格右边添加或删除列。,合并单元格选择连续的单元格，形状必须为矩形，然后修改表格合并单元格，或属性检查器中的“合并单元格”按钮。每个单元格的内容放置在最终的单元格中。,拆分单元格单击单元格。执行下列操作之一：选择“修改”“表格”“拆分单元格”。在展开的属性检查器（“窗口”“属性”）中，单击“拆分单元格”按钮。注意如果没有看到按钮，请单击“属性”检查器右下角的箭头，以便看到所有选项。在“拆分单元格”对话框中，指定如何拆分单元格。,增加或减少行或列的宽度单击一单元格，表格修改增加行宽，增加列宽，减少行宽，减少列宽。嵌套表格单击单元格，插入表格,8.6 关于表格布局模式,作用：使用表格为基础结构来布局页面，即组织网页各元素的位置。切换到布局视图首先要切换到布局视图，单击插入栏布局类别中的“布局模式”按钮。退出：单击插入栏布局类别中的“标准模式”按钮,8.7 绘制布局单元格和表格,布局单元格不能单独绘制，若绘制一布局单元格，系统会自动绘制布局表格以容纳该单元格。布局表格会自动填满整个设计视图。,绘制布局单元格布局模式下，单击绘制布局单元格按钮，然后在页面拖动即可。按住键，拖动鼠标可以创建多个布局单元格。布局单元格不能重叠,绘制布局表格布局模式下，单击绘制布局表格，在设计页面上拖动鼠标以绘制布局表格。布局表格不能互相重叠。这样，修改一个布局表格中的单元格不会影响到另一个布局表格。说明：不能在布局表格的右面绘制布局表格，只能在其下方绘制。如果其下方控件太小，也会禁止绘制。,8.8 绘制嵌套布局表格,绘制嵌套布局表格在布局表格的空白区域，拖动鼠标创建嵌套布局表格。说明：不能在布局单元格中创建布局表格，只能在现有布局表格的空白区域或现有单元格周围创建嵌套布局表格。,在现有布局单元格绘制布局表格使用绘制布局表格按钮，在布局单元格周围绘制一个矩形。移动和调整大小最外层的布局表格只能调整大小，不能移动单元格不能重叠，布局单元格不能超过包含它的布局表格的边框，也不能小于其内容的大小。,布局表格不能重叠，布局表格不能也不能小于其内容的大小。调整布局单元格的大小单击单元格，然后拖动其控制点。移动布局单元格单击一单元格，在其边缘且鼠标为箭头状时，拖动,调整布局表格的大小单击表格顶部的标签选择一个布局表格，然后拖动其控制点。移动布局表格单击表格顶部的标签选择一个布局表格，拖动之。说明：只能当布局表格嵌套在另一个布局表格中时，才能移动该布局表格。,向布局单元格中添加内容,类似表格操作，向其中可以添加文字和图象等只有在布局单元格中添加内容，灰色区域不能添加布局单元格会随着其中内容的增加而变化。,8.10 设置布局单元格和表格外观,选择一布局单元格或布局表格在属性检查器中进行设置。布局表格有关属性清除行高：清除多余高度，和其中内容保持一致使单元格宽度一致：单元格和其中内容宽度一致,8.11 设置列宽,列宽可以固定，也可以自动伸展。自动伸展的列会随着浏览器窗口大小的变化自动扩展。在一个布局表格中，只能让一个列自动伸展。应首先创建完整的布局，并在使列自动伸展时使用间隔图像。,设置列为自动伸展在列顶部菜单选择“列设置为自动伸展”。列中选择一个单元格，在属性检查器中单击“自动伸展”。底部出现波浪纹线设置列为固定宽度列标题菜单选择单元格：单击并在属性检查器中设置“固定列宽”，并输入数值。,8.12 使用间隔图像,用途：保持单元格列宽不小于间隔图像。组成：由一个单象素的透明GIF图像组成。系统自动添加间隔图像。包含间隔图像的列在列标题具有双线。,设置间隔图像：添加：列设置为自动伸展，或单击“添加间隔图像”菜单。删除：从列标题菜单选择“删除间隔图像”删除所有间隔图像：列菜单选择布局表格属性检查器中，单击“删除所有间隔图像”按钮。,8.13 设置布局模式参数,默认情况下，标有“布局表格”的标签显示在布局视图中每个布局表格的顶部，并显示列宽度。编辑首选参数分类中选择“布局模式”,实例：使用表格布局网页,参考教程：网页制作利器中文版 Dreamweaver MX完全实战，王克杰，p361，22.3实战操作厦门特产网主页：http:/,
