1、第5章 网页布局和排版,5.1 网页布局概述,所谓“网页布局”，就是给将要出现在网页中的所有元素进行定位。 网页布局类型大致可分为“同”字型、拐角型、标题正文型、框架型、封面型、Flash型等。,4种网页布局方法：(1)利用 Dreamweaver 中的表格工具和布局模式，通过拖动并重新安排页面结构来快速地设计 Web页。(2)如果要在 Web 浏览器中同时显示多个文档，则可以使用框架对文档进行布局。(3)Dreamweaver模板可以方便地将可重新使用的内容和页面设计应用于站点。设计者可以基于 Dreamweaver 模板创建新的页面，然后在模板更改时自动更新这些页面的布局。(4)使用 DI
2、V+CSS 定位样式创建布局。,5.2 表格,表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。 Dreamweaver 8 提供了两种查看和操作表格的方式：在“标准”模式中，表格显示为行和列的网格“布局”模式允许在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。表格由一行或多行组成，每行又由一个或多个单元格组成。 单元格是用于放置数据和图像的空间。 表格用于网页布局时，只要把表格的边框设为0即可。,5.2.1 表格视图模式,“标准模式” : 基本按浏览器预览结果来显示网页。 “扩展模式”: 表格被强制以双线形式显示，方便了对表格的操作。 “布局模式”:
3、可以在添加内容前使用布局单元格和表格来对页面进行布局。,5.2.2 插入表格,1新建表格 在网页中插入表格的方式有两种：插入表格导入表格式数据,执行下列操作之一，打开“插入表格”对话框： 选择菜单“插入”|“表格”。在“插入”工具栏上选择“布局”分类，单击“表格”按钮。在“插入”工具栏上选择“常用”分类，单击“表格”按钮。按快捷键Ctrl+Alt+T。,5.2.2 插入表格,5.2.2 插入表格,2插入嵌入表格 嵌入表格即在一个单元格中再插入另外一个表格。 3导入/导出表格式数据可以将在另一个应用程序（例如 Microsoft Excel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号
4、、分号或其他分隔符隔开）保存的表格式数据导入到 Dreamweaver 中并设置为表格的格式。也可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。,注意:当导出表格时，将导出整个表格，不能选择导出部分表格。,【例5-1】以下是用记事本编辑的文本文件,分隔符为Tab键。导入后的效果如图5-5所示。周一周二周三周四周五语文数学语文数学计算机数学音乐语文数学地理体育作文体育音乐政治,4表格的HTML代码,表格：表格行：表格列：, 周一周二周三周四周五 语文数学语文数学计算机 数学音乐语文数学地理 体育作文体育音乐政治,5.2.3 编辑表格,1选择表格元素（1）
5、选取表格（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）调整布局表格的
6、大小 （2）移动布局表格,5.3.3 布局表格和布局单元格属性1布局表格属性2布局单元格属性,5.4 框架,框架也是布局的工具，框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。 框架的最常见用途就是导航。,注意： （1）访问框架布局的网页时，必须在浏览器地址栏中输入框架集的URL，所有的页面内容才会出现在浏览器窗口中。（2）建立N个框架，需要保存N+1个网页，除了N个框架页面外，还需要1个框架集网页。（3）每个框架都显示单独的 HTML 文档。即使文档是空的，也必须将它们全部保存以预览它们。,5.4.1 创建框架集和框架页面,在 Dreamweaver 中
7、有两种创建框架集的方法：既可以从若干预定义的框架集中选择，也可以自己设计框架集。1选择预定义的框架集（1）使用“新建文档”对话框（2）使用“插入”工具栏,2设计框架集（1）拆分框架（2）删除一个框架（3）调整框架的大小,5.4.2 在框架中打开文档,（1）将插入点放置在框架中。 （2）选择“文件”|“在框架中打开”。 （3）选择要在该框架中打开的文档，单击“确定”。 该文档随即显示在框架中。,5.4.3 选择框架和框架集,（1）通过“框架”面板选择框架或框架集在“框架”面板中单击框架。 在“框架”面板中单击环绕框架集的边框。 （2）在“文档”窗口中选择框架或框架集在“设计”视图中，按住 Alt
8、 键的同时单击框架内部。在“设计”视图中，单击框架集的某一内部框架边框。,5.4.4 框架属性5.4.5 框架集属性,5.4.6 保存框架和框架集网页,在浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。 1. 保存框架集文件 选择“文件”|“保存框架页”。 2. 保存框架中显示的文档 选择“文件”|“保存框架”或选择“文件”|“框架另存为” 3. 保存与一组框架关联的所有文件 选择“文件”|“保存全部”。,5.4.7 控制超链接的目标框架 链接的 target 属性指定在其中打开目标文件的框架或窗口。_blank 在新的浏览器窗口中打开链接的文档。 _parent 在显示
9、链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。,【例5-3】 框架布局实例,【例5-4】 页内框架布局实例,5.5 层,5.5.1 层的概念 层(Layer)是一种 HTML 页面元素，可以将它定位在页面上的任意位置。层是一个载体，可以包含文本、图像或其它HTML 文档。层的功能如下：对元素实现精确定位；随意放置元素；实现层的叠加；显示/隐藏层；制作动画；添加行为css样式表,5.5.2 新建图层,1. 层的代码Dreamweaver默认使用div标签创建层。
10、 2. 新建层 3. 嵌套层(1)绘制嵌套层(2)插入嵌套层(3)使用“层”面板(4) 在现有层中绘制层时自动嵌套层,5.5.3 设置层属性,1. 选择层(1)在“层”面板中选择一个层(2)在“文档”窗口中选择一个层 (3)选择多个层2.设置层属性,5.5.4 层面板,选择“窗口”|“层”,打开“层”面板，通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。,1.在“层”面板中更改层的层叠顺序2.更改层的可见性,5.5.5 操纵层,1.调整层的大小若要通过拖动来调整大小，拖动该层的任一大小调整柄。 若要一次调整一个像素的大小，在按箭头键时按住 Ctrl 键。 若要按网格靠齐增量来调整大小，在按箭头键时按住 Shift+Ctrl 键。 在“属性”面板中，键入宽度(W) 和高度 (H) 的值。 2. 移动层若要通过拖动来移动，拖动最后一个选定层的选择柄。 若要一次移动一个像素，使用箭头键。 按箭头键时按住 Shift 键可按当前网格靠齐增量来移动层。3. 对齐层 选择“修改”|“排列”，然后选择一个对齐选项。,5.5.6 层与表格相互转换,1. 将层转换为表格,2.将表格转换为层,【例5-5 】层布局实例,
