网页制作与网站设计_DreamweaverCS3表格布局讲述.ppt

项目七 Dreamweaver CS3表格布局 内容摘要 介绍了表格的创建及其参数设置 介绍了单元格的基本编辑及单元格属性 介绍了选择表格及增加行和列并设置其属性 介绍了布局表格和布局单元格的创建方法 学习创建表格方法及在扩展表格模式下编辑表格 了解表格属性参数及单元格属性参数含义 学习选择、添加、删除、拆分、合并表格行列、单元格的方法并能正确设置表格内容的格式 掌握布局表格及布局单元格的创建方法及运用布局表格布局页面 学习目标 任务1　表格的创建  1. 任务描述 在Dreamweaver中表格可以实现将网页划分为不同的部分，实现对元素的准确定位，使得页面中的文本、图像等元素排列得更有条理 2. 任务说明 本任务主要介绍在标准模式下创建表格，以及使用扩展表格模式编辑表格两个操作。扩展表格模式临时向文档中的所有表格添加单元格边距和间距，以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或精确地放置插入点。 3. 操作步骤 （1） 在标准模式下创建表格 1）打开一个网页，光标插入点定位在要放置表格的地方。 2）选择菜单“插入/表格”命令，或单击“插入”工具栏按钮图标，调出“插入表格”对话框，如图7-1所示。 3）设置插入表格的行数和列数，如按图7-1参数设置后，得到图7-2所示表格。 图7-1 “插入表格”对话框 图7-2 3行3列的表格 （2）使用扩展表格模式编辑表格 1）选择“查看”菜单下的“表格模式/扩展表格模式”命令，或者单击“布局”选项卡中的“扩展”按钮图标，即可进入扩展表格模式。 2）单击文档顶部的“扩展表格模式”条上的“退出”，或单击“布局”选项卡中的“标准”按钮图标退出扩展表格模式，如图7-3所示 。 图7-3 扩展表格模式 任务2　单元格的基本编辑  1. 任务描述 规则的表格插入后，有可能还要将它修改成不规则的表，或者调整表格大小 。 2. 任务说明 单元格是构成表格的基本元素，应熟练掌握单元格的编辑方法。 本任务介绍单元格的选中方法，拆分和合并单元格，单元格的属性的设置 。 3. 操作步骤 （1）选中单元格 1）选中一个单元格。 ① 将光标置于要选中的单元格中，按住CTRL键的同时单击该单元格。 ②将光标置于要选中的单元格中，单击文档窗口底部的“标签选择器”中的td标签。 ③ 将光标置于要选中的单元格中，按住CTRL+A组合键 2）选中相邻的多个单元格 ① 将光标置于要选中的相邻单元格中的第一个单元格中，按住SHIFT键的同时单击最后一个单元格。 ② 将光标置于要选中的相邻单元格中的第一个单元格中，拖动鼠标至最后一个单元格后再释放鼠标 3）选中不相邻的多个单元格 按住CTRL键，用鼠标左键分别点选相应的单元格，则当前单元格即被选中 （2）合并和拆分单元格 1）拆分单元格 选中需要拆分的单元格，执行命令“修改/表格/拆分单元格”，在弹出的“拆分单元格”对话框中输入要拆分的行数和列数。 选中需要拆分的单元格，单击“属性”面板中的“拆分单元格为行或列”按钮,在弹出的对话框中进行相应设置。 2）合并单元格 ① 选中需要合并的单元格，执行命令“修改/表格/合并单元格”。 ② 选中需要合并的单元格，单击“属性”面板中的“合并所选单元格”按钮 （3）设置单元格属性 在文档窗口中选中需要设置的单元格后，在“属性”面板（如图7-7所示）就会显示出相关属性。 属性面板中各个参数的含义如下： 1) 格式：用于设置单元格中内容的格式。 2) 样式：用于设置单元格中文本的CSS样式。 3) 字体和大小：用于设置单元格中文本的字体样式和大小。 4) 水平：用于设置单元格中内容的水平对齐方式。 5) 垂直：用于设置单元格中内容的垂直对齐方式。 6) 不换行：如果不选中该选项，则当单元格中输入的文本长度超过单元格宽度时文本将自动换行，以保持表格单元格的宽度不变。 7) 背景：设置当前选中单元格的背景图片，可以直接在后面对话框中输入背景图片路径，也可以点击旁边的文件夹图标选择背景图片所在位置。 8) 边框：设置单元格的边框颜色。 图7-7 单元格属性 任务3　表格的属性设置  1. 任务描述 表格是处理数据时常用的形式，也是网页的一个重要元素，广泛的应用于数据、资料的显示和处理中。 固定行列的表格制作后，还需增加行和列。 2. 任务说明 本任务介绍表格的选中方法，增加行和列、