网页设计教程04-06插入和编辑网页基本元素-创建网页超链接与页面布局介绍.ppt

6.3.5 使用布局模式进行页面布局 使用布局表格可以更方便快捷的定位网页元素 演示如何使用布局模式进行页面布局 本章小结 设计网页不仅仅是把内容添加到页面中就可以，它还要求设计者合理的安排这些内容，那么就涉及页面布局。在本章前部分介绍了页面布局的设计和方法，后部分通过表格的创建、表格属性的编辑、合并拆分单元格等来说明表格的使用，再通过利用表格进行页面布局来引导读者掌握页面布局的作用和方法，制作出更具条理性、精确度较高的网页。 实训 完成实训——第6章 网页页面布局设计实训 6.1.2 页面布局的方法 （1）表格布局 （2）层布局 （3）框架布局 6.2 表格的创建及编辑 表格是网页设计中最常用的工具，它既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具。表格是由“行”和“列”构成的，利用“行”和“列”的分隔，可以更方便灵活的在适合的位置插入和排列文本、图像等网页元素，从而使页面更具条理性、更加美观。 6.2.1 创建表格 表格的功能这么强大，就需要掌握如何应用它，在Dreamweaver CS3中可以很方便地创建表格，下面介绍如何创建表格。 创建表格可以执行下列方法之一，都会弹出一个“表格”对话框，根据需要在该对话框中设置相关的参数。 方法一：选择菜单“插入记录”→“表格”命令。 方法二：单击“常用”工具中的“表格”按钮 。 “表格”对话框参数说明 参数 说明 行数和列数 确定表格的具有多少行和列，直接输入数目。 表格宽度 以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。 边框粗细 以像素为单位的表格边框的宽度。设置为0时，将在浏览器中不显示边框。 单元格边距 用来指定单元格内容与边框的距离。如不明确指定，则大多浏览器按1显示。 单元格间距 相邻的两个单元格之间的距离。如不明确指定，则大多浏览器按2显示。 页眉 指定表格标题显示方式，有“无”、“左”、“顶部”、和“两者”4种。 标题 指定表格标题，显示在该表格外面。 对齐标题 如果设置有表格标题，则用来指定表格标题相对于表格的对齐方式。主要有“默认”、“底部”、“顶部”、“左”和“右”5种，“默认”为“顶部”。 摘要 用来说明表格信息，不会显示在浏览器上。 6.2.2 表格的选定 1．选定表格 选定表格的方法有以下几种： （1）单击表格的边框线。 （2）将光标定位在表格内部任意位置，选择“修改” →“表格” →“选择表格”命令。 （3）将光标定位在表格内部任意位置，单击“标签”选择器中的如图6-3所示的table标签。 2．选定单元格 单元格的选定包括选定一个单元格、选定连续的多个单元格和选定不连续的多个单元格。 （1）选定一个单元格的方法有以下几种： A.按下Ctrl键的同时，在单元格内单击即可选中该单元格。 B.将光标定位在所要选定的单元格内，单击“标签”选择器中的如图6-5所示的td标签。 2．选定单元格 （2）选定连续的多个单元格的方法： A.用鼠标左键在连续的多个单元格中拖动。 B.将光标定位在所选单元格的第一个单元格中，按住Shift，单击最后一个单元格。 （3）选定不连续的多个单元格的方法是按住Ctrl键，同时单击要选定的单元格。 3．选定行或列 在Dreamweaver中，可选择单个行或列也以及多个行或列，被选中的行或列的边框线都是以黑色粗线显示。 6.2.3 表格的编辑 对表格的编辑包括修改表格的属性、调整表格的结构。 （1）表格属性的修改 选定了表格之后，就可以在相应的“属性”面板中查看或修改属性值。表格的属性包括表格的大小、背景颜色、表格间距等。 表格“属性”面板的参数 属性参数 说明 表格ID 指定表格的名称 行和列 指定表格的行数和列数 宽 以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。 填充 单元格内容和单元格边框之间的距离，相当于创建表格时的“单元格边距”。 间距 相邻的两个单元格之间的距离，相对于创建表格时的“单元格间距”。 表格“属性”面板的参数(续) 对齐 表格在浏览器中的对齐方式，有默认、左对齐、居中对齐和右对齐4种。 边框 以像素为单位的表格边框的宽度。 类 设置表格的样式 清除列宽 清除所设置的列宽，根据内容调整表格各列宽度。 清除行高 清除所设置的行高，根据内容调整表格各行高度。 将表格宽度转换为像素 将原来宽度为百分比的表格转换为相应的像素 将表格宽度转换为百分比 将原来宽度为像素的表格转换为相应的百分比 背景颜色 设置整个表格的背景色。 边框颜色 设置表格边框颜色。 背景图像 设置图像作为表格背景。 （2）单元格属性的修改 为了对放置在表格的文本进行排版，有时也需要对单元格进行属性设置。选定了单元格之后，就可以在相应的“属性”面板中查看或修改属性值。单元格的