关于设计网页布局.docVIP

设计网页布局 本章要求： 1．掌握插入表格的方法及表格属性的设置 2．掌握单元格格式的设置、添加和删除行或列以及单元格的合并及拆分 3．掌握布局表格和布局单元格的绘制、属性设置和内容编辑 4．悉在网页中插入框架和嵌套框架，制作框架页面 重点：表格的插入和单元格的编辑，布局表格和布局单元格的绘制及编辑。 难点：表格数据的导入和导出，布局单元格的排版及嵌套布局表格的使用。 一．表格布局 设计网页的第一步是设计版面布局。所谓布局，就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。 案例：①在网页中插入表格，不显示边框只用来布局；②在单元格内插入文字、·图片，设置丰富的效果； ③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。 1．插入表格 插入表格的具体操作步骤如下： 1）将光标定位。选择【插入】→【表格】命令或在“常用”插入栏中单击“表格”按钮 ，打开“表格”对话框。 2）在该对话框中可进行表格行数、列数、表格宽度、边框粗细、单元格边距等属性设置。 3）单击”确定“按钮即可按设置创建表格。 2．设置表格属性 选中表格后其“属性”面板，在其中可进行表格的属性设置，各项参数的含义如下： “表格Id”下拉列表框：为表格进行命名。 “行”和“列”文本框：设置表格的行数和列数 “宽”和“高”文本框：设置表格的宽度和高度，在其后的列表框中可选择单位像素和百分比 “填充”文本框：设置单元格边界和单元格内容之间的距离。 “间距”文本框：设置相邻单元格之间的距离。 2．设置表格属性 “对齐”下拉列表框：设置表格与文本或图像等网页元素之间的对齐方式，只限与表格同段落的元素。 “边框”文本框：设置表格边框的粗细。 “边框颜色”文本框：设置表格边框的颜色。 “背景颜色”文本框：设置表格的背景颜色。 “背景图像”文本框：设置表格背景图像，单击文本框右侧的“浏览文件”按钮 ，可在打开的“选择图像源文件”对话框中选择背景图像。 “清除列宽”按钮 、“清除行高”按钮 ：分别为清除已经指定过的列宽和行高。 “将表格宽度转换成像素”按钮：将表格宽度由百分比转为像素 “将表格宽度转换成百分比”按钮：将表格宽度由像素转换为百分比。 3．设置单元格、行或列的属性 先选中单元格、行或列，在“属性”面板中进行设置， 属性面板如图： 1）水平：设置选定单元格内元素的水平对齐方式，有“默认”、“左对齐”、“居中对齐”和“右对齐”4种选择。 2）垂直：设置选定单元格内元素的垂直对齐方式，有“默认”、“顶端”、“居中”、“底部”和“基线”5种选择。 3）宽、高：设置单元格的宽度和高度。 4）不换行：选中此选项可以使单元格的宽度自动调整来适应输入内容的增加。 3．设置单元格、行或列的属性 5）标题：选中此选项可以将单元格设置为表格的表头元素。一般表格的第一行、第一列为表头元素，表头元素的默认格式为粗体、居中。 6）背景：设置选定单元格的背景图像。 7）背景颜色：设置选定单元格的背景颜色。 8）边框：设置选定单元格的边框颜色。 9）“合并单元格”按钮：合并所选单元格，选择的区域必须为矩形才可以合并为一个单元格。 10）“拆分单元格”按钮：拆分单元格为行或列，在弹出的对话框中选择将单元格拆分成行还是列，以及输入拆分的行数或者列数。 4．表格基本操作： 1）增加表格行与列 增加行或列的步骤如下。 ①将光标置于要插入行或列的单元格内。 ②右击，在快捷菜单中选“表格”→“插入行”/“插入 列”/“插入行或列”，也可选择菜单“修改”→“表格”→“插入 行”/“插入列”/“插入行或列”。 “插入行”：在所选单元格上面插入一行。 “插入列”：在所选单元格左边插入一列。 “插入行或列”：弹出如图4-8所示对话框，可以选择插入“行”或“列”，输入插入的行数或者列数，选择插入位置，单击“确定”按钮。 2）删除表格行与列 删除行或列的步骤如下。 ①选定要删除的行或列。 ②右击，在快捷菜单中选择“表格”→“删除行”/“删除 列”，也可选择菜单“修改”→“表格”→“删除行”/“删除列”命令，或者按Delete键也可以删除行或列。 3）合并单元格 选定要合并的单元格。执行下列操作之一： ①选择菜单“修改”→“表格”→“合并单元格”命令。 ②右击，在快捷菜单中选择“表格”→“合并单元格”命令。 ③单击单元格属性面板上的“合并所选单元格”按钮 4）拆分与合并单元格： 选定要拆分的单元格，执行下列操作之一： ①选择菜单“修改”→“表格”→“拆