第6章 网页的排版布局.ppt

第6章 网页的排版布局 本章学习要点： 常见的网页布局结构 表格布局 框架布局 使用层 6.1 网页布局基础 ★ 页面版式草图设计 6.2 常见的布局结构 ★ “T”字型 ★ “口”字型 ★ “三”字型 ★ 海报型 ★ 标题文本型 ★ 框架型 6.3 表格布局 ★ 创建表格 (4) 单元格的合并及拆分 (5) 调整表格大小 (6) 为表格添加内容 6.4 使用布局表格 ★ 布局视图 ★ 绘制布局表格和单元格 6.5 框架布局 ★ 创建框架与框架集 ★ 编辑框架 6.5 层的使用 ★ 创建层 ★ 设置层属性 ★ 设置布局表格和单元格属性 在Dreamweaver 8.0中，可以使用“属性”面板来改变布局模式中的任何布局表格或布局单元格的外观。 在“属性”面板中，可以为布局表格设置内容对齐方式、宽度和高度、背景颜色等属性。 (1)设置布局表格属性 当选中一个布局单元格时，“属性”面板中将显示该单元格的属性，可以为布局单元格设置内容对齐方式、宽度和高度、背景颜色等属性。 (2)设置布局单元格属性 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页，并且替换窗口中的内容时，各个窗口之间没有影响。 通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。最典型的应用就是论坛。 一个框架结构主要包括两个部分： 框架(Frame)：将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时，网页中一部分区域（如公司Logo、导航条）内容不改变，而其他区域内容在不断发生改变。 框架集(Frameset)：即框架的集合，也是一个网页文件，用于在一个文档窗口显示多个页面文档的框架结构。框架集定义了框架数、框架的尺寸、载入到框架的网页等内容； 在Dreamweaver 8.0中，创建框架集的方法有两种：一种是用户自己设计框架集，另一种是使用系统预定义的框架集。 主要有从“新建文档”对话框中创建和从“布局”插入栏中创建两种方式。 (1)使用预定义框架集 (2)创建自定义框架集 方法：将鼠标移到文档窗口的边界线上，当光标变成双向箭头时拖动光标至相应的位置，即可创建框架。 小技巧：将光标移到框架边框的任意角上，拖动鼠标至相应位置，可一次拖出4个边框。 (3)创建嵌套框架集 嵌套框架与嵌套表格相似，就是在已经创建的框架中再插入一个框架。一个框架集文件可以包含多个嵌套框架集。 在创建框架集后，通常需要对框架或框架集进行多种操作，如选择、删除、保存以及设置属性等。 (1)框架面板 “框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。当在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。 (2)选择框架和框架集 方法一：在编辑窗口中将鼠标光标移动到要选择的框架上，按住Alt键不放，然后单击鼠标左键即可。 方法二：在“框架”面板中单击框架区域中的任意位置即可选择框架，选中的框架以粗黑框显示。 选择框架 方法一：在编辑窗口中将鼠标光标移动到框架集的边框上，单击鼠标左键即可将其选中。 方法二：在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。 选择框架集 (3)保存框架和框架集 保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。 保存时可以分别保存这些文档，也可以一次性保存所有的文档。 “保存框架”命令：单独保存某框架页面。 “保存框架页”和“框架页另存为”命令：保存框架集文档。 “保存全部”命令：可以同时将框架及网页文档及所有的框架网页文档进行保存。 说明：“保存全部”是通常先保存框架集网页文档，再保存各个框架网页文档。被保存的当前文档所在的框架或框架集用粗线表示。 (4)设置框架的背景 用户可以为框架添加背景，背景可以是图像也可以是颜色。如果网页上有多个框架，可以为每个框架设置不同的背景。实际上，设置框架的背景与添加网页的背景相同，只是前者是为单个框架设置背景，而后者是为整个网页设置背景。 若要删除框架，只需将要删除框架的边框拖至编辑窗口外即可。 (5)删除框架 (6)设置框架和框架集属性 框架和框架集都有自己的属性面板，利用属性面板可以非常方便地控制两者