网页设计与制作07

第7章

网页布局

本章要点：u

创建表格与嵌套表格u

编辑表格与设置表格的属性u

插入层u

调整层与设置层的属性u

层与表格的转换u

创建框架与框架集u

设置框架与框架集的属性u应用表格、层与框架设计网页

网页设计与制作07全文共29页，当前为第1页。网页设计与制作07全文共29页，当前为第2页。7.1表格的应用

表格由三个基本组件构成：

行（水平空间）

列（垂直空间）

单元格（行和列交汇的空间）

网页设计与制作07全文共29页，当前为第3页。网页设计与制作07全文共29页，当前为第4页。操作实例7-1在网页中按图7-1所示建立课程表操作步骤：①在本地站点新建网页或打开指定的网页。②在“修改”菜单中选择“页面属性”选项，将网页标题设置为“表格的应用”。③设置标题：在“文档”窗口的第一行输入标题文字“00111G班课程表”，并在属性面板中设置其属性为“隶书”、大小为“极大”、“居中对齐”。④在“文档”窗口中，将表格插入点设置在标题文字的下方，单击“常用”工具栏中的“表格”按钮。⑤在对话框中默认当前值或重新输入新值（“表格”对话框将保留最近一次创建表格时所使用的数据）。⑥单击“确定”按钮，网页中创建表格。

网页设计与制作07全文共29页，当前为第5页。7.1.2表格的基本操作与属性设置

操作实例7-2按图7-1完成课程表中的文字输入与设置操作步骤：（1）向表格中输入文字①在指定单元格中单击鼠标，设置插入点。②在插入点输入文字。在表格中输入课程表的信息如图7-1。（2）选中表格并设置表格的居中对齐①单击表格的左上角，或单击表格的右边界，或单击表格下边界的任何一处选中整个表格。②在属性面板中的“对齐”下拉列表中选择“居中对齐”，完成表格的居中设置。网页设计与制作07全文共29页，当前为第6页。（3）选中行或列并设置行或列文本的居中对齐①将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击选中行或列。②在属性面板中的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。也可单击属性面板中的“居中对齐”按钮完成。

（4）选中单元格并设置单元格文本的居中对齐①在单元格中单击，上下或左右拖动到另一个单元格选中一个或多个单元格。②在属性面板中的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。也可单击属性面板中的“居中对齐”按钮完成。网页设计与制作07全文共29页，当前为第7页。7.1.3应用格式表格

操作实例7-6使用“格式化表格”对话框操作步骤：①选定需要格式化的表格。②在“命令”菜单中选择“格式化表格”选项，弹出“格式化表格”对话框。如图7-6所示。③在左边列表中选择一个设计方案，右边将显示该方案的预览。例如，选择“Simple3”方案。网页设计与制作07全文共29页，当前为第8页。④如果需要进一步的定制设计，可以对“行颜色”，“第一行”及“最左列”进行修改。例如，将“第一行”的“对齐”设置为“居中对齐”，“文字样式”设置为“粗体”，“文本颜色”设置为“#0033CC”；将“最左列”的“对齐”设置为“居中对齐”，“文字样式”设置为“粗体”。⑤如果需要修改边框的宽度，可在“边框”中输入数值，例如，输入2。如果不需要边框则输入0。⑥如果需要对表格单元格（td标签）而不是表格行（tr标签）应用设计，则选择“将所有属性套用至TD标注而不是TR标签”选项。⑦单击“应用”或“确定”按钮，可将当前格式应用于所选表格。⑧按快捷键Ctrl+S保存网页，按快捷键F12预览网页。

网页设计与制作07全文共29页，当前为第9页。7.1.4表格的修饰和嵌套

操作实例7-8利用嵌套表格完成图7-9的效果操作步骤：①打开或新建一个网页文件，将页面标题设置为“表格嵌套”。②在“常用”工具栏上单击“表格”按钮，创建一个3行3列的表格，表格的宽度为400像素，边框为0，在属性面板中将表格设置为“居中对齐”方式。③单击需要插入第二个表格的单元格，例如，单击第2行第2列的单元格。④插入第二个表格，并指定表格属性：3行、3列、宽度100百分比、边框为1。网页设计与制作07全文共29页，当前为第10页。⑤单击“确定”按钮。⑥分别选中第一列与最后一列，在属性面板中合并单元格，并设置宽度为“5%”。⑦分别选中第一行与最后一行，在属性面板中合并单元格。⑧在属性面板中，分别为外围的单元格插入背景图像。⑨选中嵌套的表格，在属性面板中将“水平”设置为“居中对齐”，将“垂直”设置为“居中间”，并合并第一行。在嵌套表格中输入对应的文字。⑩按快捷键Ctrl+S保存网页，按快捷键F12预览网页。网页设计与制作07全文共29页，当前为第11页。7.2层的应用

7.2.1插入新层

1．创建新层·方法一：绘制层。单击“布局”工具栏的“描绘层”按钮，然后在文档窗口中拖动鼠标绘制层。

·方法二：插入层。单击需要插入层的地方设置插入点，在“插入”菜单选择“布局对象”、“层”选项。

·方法三：使用鼠标将“布局”工具栏的“描绘层”按钮拖动到文档窗口中。

网页设计与制作07全文共29页，当前为第12页。2．创建嵌套层嵌套层是创建在其他层中的层。·方法一：绘制嵌套层。单击“布局”工具栏的“描绘层”按钮，然后在指定层中拖动鼠标绘制制嵌层。·方法二：插入嵌套层。将插入点设置在当前层中，在“插入”菜单选择“布局对象”、“层”选项。

·方法三：使用鼠标将“布局”工具栏的“描绘层”按钮拖动到指定层中。

网页设计与制作07全文共29页，当前为第13页。7.2.2设置层的属性

图7-15层属性面板网页设计与制作07全文共29页，当前为第14页。7.2.3调整层

1．调整层的大小

执行下列操作之一，可调整层的大小。·选中层，拖动四周的任何调整手柄。

·选中层，按住Ctrl+方向键，每次调整1个像素。·选中层，按住Ctrl+Shift+方向键，每次调整一个网格。

·在“层”属性面板，输入高度与宽度值。

网页设计与制作07全文共29页，当前为第15页。2．移动层执行下列操作之一，可移动一个或多个层。·选中一个或多个层，拖动最后一个被选中的层。

·选中一个或多个层，按住Shift+方向键，每次移动1个网格。

网页设计与制作07全文共29页，当前为第16页。3．改变层的可见性

①在“窗口”菜单选择“层”选项，打开“层”面板②在层面板选中层的名称，单击眼睛图标设置该层的可见性。·打开的眼睛：该层是可见的，如图7-17所示。

·合上的眼睛：该层是不可见的，如图7-18所示。

·没有眼睛图标：该层继承其父层的可见性，如图7-18所示。

网页设计与制作07全文共29页，当前为第17页。4．对齐层

（1）对齐两个或多个层①按住Shift键，依次选中需要对齐的层，最后被选中的层以黑色高亮显示，并作为基准位置。②在“修改”菜单选择“对齐”选项中的一个对齐方式。

（2）将层对齐到网格①打开网格显示：在“查看”菜单选择“网格”、“显示网格”选项。②将层对齐到网格：在“查看”菜单选择“网格”、“靠齐到网格”选项（打开或关闭靠齐）；选中层并拖动，层将自动靠齐到最近的网格。

网页设计与制作07全文共29页，当前为第18页。5．防止层重叠执行下列操作之一，可以防止层重叠。·在“层”面板选中“防止重叠”选项。

·在“修改”菜单选择“排列顺序”、“防止层交迭”选项。

6．改变层的重叠顺序打开“层”面板，执行下列操作之一，可改变层的重叠顺序。·选中指定层名，将其拖动到所需的重叠顺序处，释放鼠标。

·在Z列中单击需要修改的层编号；若要上移则输入一个比当前值更大的数值；若要下移则输入一个比当前值更小的数值。

网页设计与制作07全文共29页，当前为第19页。7.2.4层与表格的转换

操作实例7-10将层转换为表格操作步骤：①在“修改”菜单选择“转换”、“层到表格”选项，弹出“转换层为表格”对话框。②在对话框中选取所需要的布局选项。·最精确：为每个层创建单元格，同时也为层与层之间的间隔创建单元格。·“最小：合并空白单元”：当层之间的边界距离在指定像素之内时，应互相对齐。·使用透明GIFs：使用透明的GIF填充表格的最后一行，确保表格在所有浏览器中都将在同一列里显示。·置于页面中央：将所转换的表格在网页居中。③单击“确定”按钮。

网页设计与制作07全文共29页，当前为第20页。操作实例7-11将表格转换为层操作步骤：①在“修改”菜单选择“转换”、“表格到层”选项，弹出“转换表格为层”对话框。②在对话框中选取所需要的布局选项。·防止层重叠：不允许层重叠。

·显示层面板：打开层面板的显示。·显示网格、靠齐到网格：显示网格，并使用网格帮助定位层。③单击“确定”按钮。

网页设计与制作07全文共29页，当前为第21页。7.3框架

框架的作用是将网页页面划分为多个相对独立的区域，每个区域相当于一个独立的页面，从而达到将几个独立页面同时显示在浏览器中的效果。框架（Frames）技术由框架集（Frameset）和框架（Frame）两部分组成。框架集是框架的集合，它定义了各框架的结构、数量、大小尺寸、装入框架中的HTML文件名和路径等属性。框架是框架集的组成元素。

网页设计与制作07全文共29页，当前为第22页。7.3.1创建框架

操作实例7-13插入框架操作步骤：①单击需要插入框架的位置，设置插入点。②执行下列操作之一，插入框架。·在“布局”工具栏的“框架”列表中，单击选择一种框架。·选择“插入”菜单的“HTML”选项，在“框架”的下级菜单中，单击选择一种框架。2．打开框架面板操作实例7-14打开框架面板操作步骤：执行下列操作之一，打开框架面板。·在“窗口”菜单选择“框架”选项。·按快捷键Shift+F2。

网页设计与制作07全文共29页，当前为第23页。3．选择框架与框架集

（1）直接在文档窗口中选择·按住Alt键在框架内单击鼠标，选中框架。·在框架的边框上单击鼠标，选中框架集。（2）使用框架面板进行选择·在框架面板中单击指定框架，选中该框架。

·在“框架”面板中单击环绕框架的边框，选中框架集。

网页设计与制作07全文共29页，当前为第24页。4．拆分框架·选中框架，按住“Alt”键，拖动框架边框，可将框架纵向或横向划分。·单击需要拆分的框架，在“修改”菜单选择“框架集”选项，在“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分下框架”四选项中选择一项。5．删除框架删除框架时，可拖动框架边框离开页面或拖动到其他框架的边框上。6．保存框架和框架集文件可以分别保存每个框架文件，也可单独保存框架集文件，还可以将整个框架集与它的各个框架文件一起保存。

网页设计与制作07全文共29页，当前为第25页。7.3.2设置框架与框架集的属性

1．打开属性面板

图7-28框架属性面板图7-29框架集属性面板网页设计与制作07全文共29页，当前为第26页。2．设置框架属性

·框架名称：可在文本框中为