网页设计与制作07.pptVIP

第7章 网页布局 本章要点： u??????? 创建表格与嵌套表格 u??????? 编辑表格与设置表格的属性 u??????? 插入层 u??????? 调整层与设置层的属性 u??????? 层与表格的转换 u??????? 创建框架与框架集 u??????? 设置框架与框架集的属性 u 应用表格、层与框架设计网页 7.1 表格的应用 表格由三个基本组件构成： ????????? 行（水平空间） ?????????? 列（垂直空间） 单元格（行和列交汇的空间） 操作实例7-1 在网页中按图7-1所示建立课程表 操作步骤： ①在本地站点新建网页或打开指定的网页。 ②在“修改”菜单中选择“页面属性”选项，将网页标题设置为“表格的应用”。 ③设置标题：在“文档”窗口的第一行输入标题文字“00111G班课程表”，并在属性面板中设置其属性为“隶书”、大小为“极大”、“居中对齐”。 ④在“文档”窗口中，将表格插入点设置在标题文字的下方，单击“常用”工具栏中的“表格”按钮。 ⑤在对话框中默认当前值或重新输入新值（“表格”对话框将保留最近一次创建表格时所使用的数据）。 ⑥单击“确定”按钮，网页中创建表格。 7.1.2 表格的基本操作与属性设置 操作实例7-2 按图7-1完成课程表中的文字输入与设置 操作步骤： （1）向表格中输入文字 ①在指定单元格中单击鼠标，设置插入点。 ②在插入点输入文字。在表格中输入课程表的信息如图7-1。 （2）选中表格并设置表格的居中对齐 ①单击表格的左上角，或单击表格的右边界，或单击表格下边界的任何一处选中整个表格。 ②在属性面板中的“对齐”下拉列表中选择“居中对齐”，完成表格的居中设置。 （3）选中行或列并设置行或列文本的居中对齐 ①将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击选中行或列。 ②在属性面板中的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。也可单击属性面板中的“居中对齐”按钮完成。 （4）选中单元格并设置单元格文本的居中对齐 ①在单元格中单击，上下或左右拖动到另一个单元格选中一个或多个单元格。 ②在属性面板中的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。也可单击属性面板中的“居中对齐”按钮完成。 7.1.3 应用格式表格 操作实例7-6 使用“格式化表格”对话框 操作步骤： ①选定需要格式化的表格。 ②在“命令”菜单中选择“格式化表格”选项，弹出“格式化表格”对话框。如图7-6所示。 ③在左边列表中选择一个设计方案，右边将显示该方案的预览。例如，选择“Simple3”方案。 ④如果需要进一步的定制设计，可以对“行颜色”，“第一行”及“最左列”进行修改。例如，将“第一行”的“对齐”设置为“居中对齐”，“文字样式”设置为“粗体”，“文本颜色”设置为“#0033CC”；将“最左列”的“对齐”设置为“居中对齐”，“文字样式”设置为“粗体”。 ⑤如果需要修改边框的宽度，可在“边框”中输入数值，例如，输入2。如果不需要边框则输入0。 ⑥如果需要对表格单元格（td标签）而不是表格行（tr标签）应用设计，则选择“将所有属性套用至TD标注而不是TR标签”选项。 ⑦单击“应用”或“确定”按钮，可将当前格式应用于所选表格。 ⑧按快捷键Ctrl + S保存网页，按快捷键F12预览网页。 7.1.4 表格的修饰和嵌套 操作实例7-8 利用嵌套表格完成图7-9的效果 操作步骤： ①打开或新建一个网页文件，将页面标题设置为“表格嵌套”。 ②在“常用”工具栏上单击“表格”按钮，创建一个3行3列的表格，表格的宽度为400像素，边框为0，在属性面板中将表格设置为“居中对齐”方式。 ③单击需要插入第二个表格的单元格，例如，单击第2行第2列的单元格。 ④插入第二个表格，并指定表格属性：3行、3列、宽度100百分比、边框为1。 ⑤单击“确定”按钮。 ⑥分别选中第一列与最后一列，在属性面板中合并单元格，并设置宽度为“5%”。 ⑦分别选中第一行与最后一行，在属性面板中合并单元格。 ⑧在属性面板中，分别为外围的单元格插入背景图像。 ⑨选中嵌套的表格，在属性面板中将“水平”设置为“居中对齐”，将“垂直”设置为“居中间”，并合并第一行。在嵌套表格中输入对应的文字。 ⑩按快捷键Ctrl + S保存网页，按快捷键F12预览网页。 7.2 层的应用 7.2.1 插入新层 1．创建新层 ·方法一：绘制层。单击“布局”工具栏的“描绘层”按钮，然后在文档窗口中拖动鼠标绘制层。 ·方法二：插入层。单击需要插入层的地方设置插入点，在“插入”菜单选择“布局对象”、“层”选项。 ·方法三：使用鼠标将“布