第5章-网页布局和排版.ppt

第5章 网页布局和排版 5.1 网页布局概述 所谓“网页布局”，就是给将要出现在网页中的所有元素进行定位。 网页布局类型大致可分为“同”字型、拐角型、标题正文型、框架型、封面型、Flash型等。 4种网页布局方法： (1)利用 Dreamweaver 中的表格工具和布局模式，通过拖动并重新安排页面结构来快速地设计 Web页。 (2)如果要在 Web 浏览器中同时显示多个文档，则可以使用框架对文档进行布局。 (3)Dreamweaver模板可以方便地将可重新使用的内容和页面设计应用于站点。设计者可以基于 Dreamweaver 模板创建新的页面，然后在模板更改时自动更新这些页面的布局。 (4)使用 DIV+CSS 定位样式创建布局。 5.2 表格 表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。 Dreamweaver 8 提供了两种查看和操作表格的方式： 在“标准”模式中，表格显示为行和列的网格 “布局”模式允许在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。 表格由一行或多行组成，每行又由一个或多个单元格组成。 单元格是用于放置数据和图像的空间。 表格用于网页布局时，只要把表格的边框设为0即可。 5.2.1 表格视图模式 “标准模式” : 基本按浏览器预览结果来显示网页。 “扩展模式”: 表格被强制以双线形式显示，方便了对表格的操作。 “布局模式”:可以在添加内容前使用布局单元格和表格来对页面进行布局。 5.2.2 插入表格 1．新建表格 在网页中插入表格的方式有两种： 插入表格 导入表格式数据 5.2.2 插入表格 5.2.2 插入表格 2．插入嵌入表格 嵌入表格即在一个单元格中再插入另外一个表格。 3．导入/导出表格式数据 可以将在另一个应用程序（例如 Microsoft Excel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到 Dreamweaver 中并设置为表格的格式。 也可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。 【例5-1】以下是用记事本编辑的文本文件,分隔符为Tab键。导入后的效果如图5-5所示。 周一 周二 周三 周四 周五 语文 数学 语文 数学 计算机 数学 音乐 语文 数学 地理 体育 作文 体育 音乐 政治 4．表格的HTML代码 表格：table 表格行：tr 表格列：td 5.2.3 编辑表格 1．选择表格元素 （1）选取表格 （2）选择行或列 （3）选择单元格 2．添加表格的行或列 （1）添加单个行或列 （2）添加多行或多列 3．删除表格的行或列 4. 删除单元格内容 5．拆分和合并单元格 6．复制和粘贴单元格 5.2.4 表格属性 5.2.5 单元格、行和列属性 【例5-2】表格布局实例 5.3 布局表格 为了简化使用表格进行页面布局的过程，Dreamweaver8提供了“布局”模式。在“布局”模式中，可以在添加内容前使用布局单元格和表格来对页面进行布局。 5.3.1 绘制布局表格和布局单元格 1．绘制布局单元格 2．绘制布局表格 5.3.2 编辑布局表格和布局单元格 1．调整和移动布局单元格 2．调整和移动布局表格 （1）调整布局表格的大小 （2）移动布局表格 5.3.3 布局表格和布局单元格属性 1．布局表格属性 2．布局单元格属性 5.4 框架 框架也是布局的工具，框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。 框架的最常见用途就是导航。 注意： （1）访问框架布局的网页时，必须在浏览器地址栏中输入框架集的URL，所有的页面内容才会出现在浏览器窗口中。 （2）建立N个框架，需要保存N+1个网页，除了N个框架页面外，还需要1个框架集网页。 （3）每个框架都显示单独的 HTML 文档。即使文档是空的，也必须将它们全部保存以预览它们。 5.4.1 创建框架集和框架页面 在 Dreamweaver 中有两种创建框架集的方法：既可以从 若干预定义的框架集中选择，也可以自己设计框架集。 1．选择预定义的框架集 （1）使用“新建文档”对话框 （2）使用“插入”工具栏 2．设计框架集 （1）拆分框架 （2）删除一个框架 （3）调整框架的大小 5.4.2 在框架中打开文档 （1）将插入点放置在框架中。 （2）选择“文件”|“在框架中打开”。 （3）选择要在该框架中打开的文档，单击“确定”。 该文档随即显示在框架中。 5.4.3 选择框架和框架集 （1）通过“框架”面板选择框架或框架集 在