第6章网页布局new综述.ppt

第6章 网页布局 2014.11 《网页设计与制作》 第6章 网页布局 《网页设计与制作》 本章要点 在网页中，表格、Div+CSS与框架主要用于网页的布局定位。表格用于精确定位，Div+CSS可以灵活定位，框架在定位的基础上，可以引入多个HTML文件。 创建表格与嵌套表格 编辑表格与设置表格的属性 创建框架与框架集 设置框架与框架集的属性 插入Div 绝对定位与相对定位 浮动定位 应用表格、Div+CSS与框架设计网页 《网页设计与制作》 6.1 应用表格布局网页 表格是一种在HTML页面上布局数据与图像的工具。表格为网页设计者提供了向网页添加垂直与水平结构的方法。例如，使用表格安排表格数据，在网页上布局文本与图像等。 表格由三个基本组件构成： 行（水平空间） 列（垂直空间） 单元格（行和列交汇的空间） 《网页设计与制作》 6.1 应用表格布局网页 创建表格 6.1.1 操作实例6-1 在网页中按图6-1所示建立表格 《网页设计与制作》 6.1 应用表格布局网页 创建表格 6.1.1 ·操作步骤： ①在本地站点html文件夹下新建网页blzl.html。 ②在文档头将网页“标题”设置为“巴黎之旅”。 ③设置标题：在“文档”窗口的第一行输入标题文字“巴黎之旅”，并在属性面板设置为“隶书”、大小为“xx-large”、水平为“居中对齐”。 ④设置表格插入点。在文档窗口，将表格插入点设 置在标题文字的下方。 ⑤执行下列操作之一，打开“表格”对话框。 ·单击“常用”工具栏的“表格”按钮。 ·从“常用”工具栏将“表格”按钮拖动到表格插入点， 即标题文字的下方。 ·在“插入”菜单选择“表格”选项。 《网页设计与制作》 6.1 应用表格布局网页 创建表格 6.1.1 ⑥在对话框中默认当前值或重新输入新值。如图6-2所示。 “表格”对话框显示的默认数据是最近一次创建表格时使用的数据。 ·在“行数”中，指定表格的行数。例如，输入16。 ·在“列数”中，指定表格的列数。例如，输入4。 ·在“表格宽度”中，指定以像素为单位或占浏览器窗口百分比的表格宽度。例如，输入宽度为85，选择单位为百分比。 ·在“边框粗细”中，指定以像素为单位的表格边框宽度，如果不需要边框可输入0。例如，输入1。 ·在“单元格边距”中，指定单元格内容与单元格边框之间的距离，单位是像素。默认边距为1像素，如果不需要边距可输入0。例如，输入1。 ·在“单元格间距”中，指定单元格之间的距离，单位是像素。默认间距为1像素，如果不需要间距可输入0。 ⑦单击“确定”按钮，网页中创建了一个16行4列的表格。 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 1．向表格中输入文字 操作实例6-2 按图6-1所示完成表格中的文字输入与设置 操作步骤： （1）向表格中输入文字 ①在指定单元格中单击鼠标，设置插入点。 ②在插入点输入文字。在表格中输入的信息如图6-1所示。 （2）选中表格并设置表格的居中对齐 ①执行下列操作之一，选中整个表格。 ·单击表格的左上角。 ·单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。 ·在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。 ·在表格中单击一次，在文档窗口下方的标签选择器中单击table标签。如图6-3所示。 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 ②在表格“属性”面板的“对齐”下拉列表中选择“居中对齐”。 （3）选中行或列并设置行或列文本的居中对齐 ①执行下列操作之一，选中行或列。 ·将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击鼠标左键。如图6-4、6-5所示。 ·在指定行或列，按住鼠标左键左右或上下拖动以选取行或列。 ②在行或列“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 《网页设计与制作》 6.1 应用表格布局网页 表格的基本操作与属性设置 6.1.2 （4）选中单元格并设置单元格文本的居中对齐 ①执行下列操作之一，选中一个或多个单元格。 ·在单元格中单击，上下或左右拖动到另一个单元格。 ·在单元格中单击，然后按下Shift键并单击另一个单元格，以这两个单元格为顶点的矩形区域中的所有单元格被选中。 ·按下Ctrl键然后依次单击单元格、行或列，选中不相邻的单元格、行或列。按