第五章 网页中布局.ppt

* 网 页 设 计 Web net design 第五章 网页中的布局 一 、表格的创建和应用 （1）表格的设置 ●表格——是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。 光标在页面上，之后单击常用工具栏上“表格”，在弹出的对话框里进行设置 ： 网 页 设 计 Web net design 行数：确定表格具有的行的数目，也就是横着的几行。 列数：确定表格具有的列的数目，也就是竖着的几列。 表格宽度：以象素为单位或按所占浏览器窗口宽度的百分比来指定表格的宽度。 边框粗细：指定表格边框的宽度（以象素为单位）。默认为“1”象素，若要确保浏览器显示的表格没有无边框，必将边框粗细设置为“0”。 单元格边距：确定单元格边框和单元格内容之间的象素数。默认是“1”象素，如果确定想完全没有则设置为“0”。 单元格间距：确定相邻的表格单元格之间的象素数。默认是“2”象素，如果想要完全没有，则设置为“0”。 页眉:设置表格中显示的文字的属性. 网 页 设 计 Web net design 表格插入到页面上之后，我们可以看见下面的属性面板，显示的就是当前表格的属性 ： 行和列是表格中行和列的数目。 宽和高是以象素为单位或按所占浏览器窗口宽度的百分比计算的表格宽度和高度。在这里表格的高度一般不需要做设置。 填充：确定单元格边框和单元格内容之间的象素数。默认是“1”象素，如果确定想完全没有则设置为“0”。 间距：确定相邻的表格单元格之间的象素数。默认是“2”象素，如果想要完全没有，则设置为“0”。 边距：设置表格边框显示的粗细。默认为“1”，完全没有则设置为“0” 背景颜色：设置整个表格的背景颜色。 边框颜色：设置表格边框的颜色，默认是灰色的而且有立体的效果。 背景图像：设置整个表格的背景图像，如果图片小，可以自动重复；如果图片大，那么只显示局部。 网 页 设 计 Web net design 2）单元格的设置 ●单元格——表格中的每一个小格子都叫单元格，是表格中的最小单位。把光标放在表格的某一个单元格中，属性面板则显示该单元格的属性,可以进行设置。 水平：设置单元格中的内容水平的对齐方式，可以将内容对齐到单元格的左侧、右侧或使之居中对齐。 垂直：指定单元格中内容的垂直对齐方式，可以将内容对齐到单元格的顶端、中间、底部或基线。 宽和高：以象素为单位或按占整个表格宽度或高度百分比计算的所选单元格的宽度和高度。如果要指定百分比，则在值后面使用百分比符号 (%)。 背景：设置该单元格的背景图像，如果图片小，可以自动重复；如果图片大，那么只显示局部。 网 页 设 计 Web net design 背景颜色：设置该单元格的背景颜色。 边框：设置该单元格的边框颜色。 不换行：可以防止换行，从而该单元格中的所有文本都在一行上。如果启用了“不换行”，则当您键入数据或将数据粘贴到单元格时单元格会加宽来容纳所有数据。 标题：可以该的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。 合并单元格：可以将所选的单元格合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合并这些单元格。选择连续行中形状为矩形的单元格才可以执行此操作。 拆分单元格：可以将所选的单元格分成两个或更多单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。在弹出的对话框中，可以选择把该单元格拆分成几行或者几列。 网 页 设 计 Web net design （3）添加或删除表格的行和列 添加表格行或者列：将光标放到表格或者表格中的某一单元格里面，“鼠标右键：表格：插入行或列”,在弹出的对话框里面，可以进行插入表格的设置。插入行或者列，插入行或者列数值，以及在当前行或者列的上下还是前后。 删除表格的行或者列：将光标放到表格或者表格中的某一单元格里面，“鼠标右键：表格：删除行”， “鼠标右键：表格：删除列”，这样就可以删除当前表格的行或者列。 网 页 设 计 Web net design （4）单元格的拆分与合并 ●方法一：可以选择属性面板上的单元格拆分、合并来设置。 ●方法二：单元格的拆分，可以将光标表格中，“鼠标右键：表格：拆分单元格”； 单元格的合并，可以用光标选中要合并的单元格，“鼠标右键→表格→合并单元格”。 （5）嵌套表格图 嵌套表格是在一个表格的单元格中插入新的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其长度和宽度受它所在单元格的长度、宽度的限制。其中表格所具有的属性，嵌套的表格都具有。 网 页 设 计 Web net design （6）导入表格数据图 光标在页面中，选择“文件菜单