第五章 布局网页精要.ppt

网页设计与制作 学时：60学时 第五章 布局网页 了解：了解表格在布局中的作用。 熟练掌握：掌握创建表格和设置表格属性的方法；使用表格布局网页。 掌握：掌握框架和框架集的操作，以及框架网页的制作。 第一节 使用表格布局网页 一、创建表格 一、创建表格 一、创建表格 创建表格有以下两种方法： 执行“插入”→“表格”命令。 在插入栏的“常用”类别中，单击“表格”按钮 。 然后按下图所示设置。 行数：输入表格的行数。 表格宽度：输入表格的宽度，并在右侧的列表中选择“像素”或“百分比”。 列数：输入表格的列数。 边框粗细：输入表格线的宽度，如果不需要显示表格线，则输入“0”。 单元格边距：指定单元格边框和单元格内容的间距。 单元格间距：指定表格中相邻单元格的间距。 二、设置表格和单元格属性 二、设置表格和单元格属性 （一）选择表格和单元格 表格与单元格有各自的边框颜色、宽度、高度、背景色、背景图像等属性。因此，要对这些属性进行设置，首先选中表格或单元格。 1.选择表格 要选择整个表格，可以执行以下3种操作： 单击表格的左上角、表格的上边框或下边框的任何位置或者行或列的边框。 单击某个单元格，然后在文档窗口左下角的“标签选择器”中选择table标签。 单击某个单元格，然后执行“修改”→“表格”→“选择表格”命令。 2.选择单元格 选择单元格有以下3种方法： 单击单元格，将光标定位到单元格中，然后在文档窗口左下角的标签选择器中单击td标签。 按住Ctrl键，单击要选中的一个或者多个单元格，可以选中一个或者多个单元格。 单击单元格，将光标定位到单元格中，然后执行“编辑”→“全选”命令，选中当前单元格。再执行一次“编辑”→“全选”命令可以选中所有单元格。 二、设置表格和单元格属性 （二）表格的属性设置 表格属性设置如下图： “将表格宽度转换成像素”按钮 ：将表格中每列的宽度设置为以像素为单位的当前宽度。 行和列：设置表格中行和列的数量。 宽度：设置表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比。 填充：设置单元格中的内容与单元格边框之间的像素数，也称单元格边距。 间距：设置相邻的表格单元格之间的像素数，也称单元格间距。 边框：指定表格边框的宽度（以像素为单位）。 ●对齐：设置表格相对于同一段落中的其他元素的显示位置。 类：对该表格设置一个CSS类。 “清除列宽”按钮 和“清除行高”按钮 ：分别用于从表格中删除所有明确指定的行高或列宽。 “将表格宽度转换成百分比”按钮 ：将表格中每列的宽度设置为按占文档窗口宽度百分比表示的当前宽度。 二、设置表格和单元格属性 （三）单元格的属性设置 单元格属性设置如下图： 合并单元格：将所选的单元格、行或列合并为一个单元格。 拆分单元格 ：将一个单元格分成两个或更多个单元格。 不换行：防止换行，从而使给定单元格中的所有文本都在一行上。 背景颜色：设置单元格、列或行的背景颜色。 垂直：指定单元格、行或列内容的垂直对齐方式。 水平：指定单元格、行或列内容的水平对齐方式。 宽和高：以像素为单位或按整个表格宽度或高度的百分比指定所选单元格的宽度和高度。 标题：将所选的单元格设置为表格标题单元格。 三、嵌套表格 三、嵌套表格 嵌套表格是在表格的一个单元格中再次插入一个表格。 在表格单元格中嵌套表格的操作步骤如下： （1）选中表格中要嵌套表格的单元格。 （2）执行“插入”→“表格”命令，打开“插入表格”对话框。输入表格的宽度为100%。 （3）单击“确定”按钮，该表格即出现在现有表格中。 四、使用表格布局网页实例 四、使用表格布局网页实例 下面通过一个简单的网页排版实例，来熟悉表格在排版中的作用。当然，这其中还要使用到上一章的CSS知识，一定要牢记：表格用来排版，CSS用于控制文字、图片等的外观。 本实例是一个电子商务网站的一个商务课程内容显示页如右图所示。 第二节 使用框架布局 一、创建框架 一、创建框架 在Dreamweaver CS4中系统预设了多种框架集供用户选择，使用这些框架，可以轻松地创建框架集，用户也可以自己创建框架集，操作步骤如下： 执行“文件”→“新建”命令，弹出“新建文件”对话框，在对话框最左侧的选项区中选择“示例中的页”，在中间的选项区中选择“框架页”，右侧会显示出框架集的设置类型，从中可以选择需要的框架结构，如图所示。 二、保存框架和框架集 二、保存框架和框架集 保存框架和框架集的操作步骤如下： （1）执行“文件”→“保存全部”命令，弹出“另存为”对话框，系统提示保存框架集文件，框架集文件默认的文件名为UntitledFrameset-2.html。（2）在对话框中输入要保存的名称后，单击“保存”按钮，框架集文件保存完毕，接着又弹出一个“另存为”对话框，这时系统要求保存剩下的两个框架文件，