Web信息系统设计基础第5章网页布局和框架.ppt

第五章 网页布局和框架 内容提要 p5.1 布局模式 p5.2 绘制布局表格和布局单元格 p5.3 使用标尺与网格 p5.4 调整布局表格及布局单元格 p5.5 设置布局模式的首选参数 p5.6 框架的使用 5.1 布局模式 法一：“查看”|“表格模式”|“布局模式” 法二：“插入” - “布局”按钮 1、切换到 “布局”模式 5.2 绘制布局表格和布局单元格 p5.2.1 绘制布局表格 p5.2.2 绘制布局单元格 p5.2.3 绘制嵌套布局表格 5.2.1 绘制布局表格 步骤一：在插入工具栏下方的“布局”类别中单击 按钮，该按钮位于工具栏倒数第二个，此时光标变成 加号（+）形状。该布局按钮在“代码”状态下是不能使 用的，建议切换到“设计”模式，如： 步骤二：将光标放在页面中要绘制布局表格的位置 ，按下鼠标左键并拖动，从而在页面上绘制出布局表 格，如图5-3所示。在拖动过程中，表格的长和宽会动 态地在Dreamweaver下方的状态栏中显示出来。 标签：辨别和选择表格 表格和单元格的宽度 (像素) 5.2.2 绘制布局单元格 步骤一：在插入工具栏上的“布局”类别中单击 按钮，该按钮 位于工具栏最右边，此时光标变成加号（+）形状。 步骤二：将光标放在布局表格中要绘制单元格的位置，按下鼠 标左键并拖动，在表格中绘制出布局单元格，如左下图所示。布 局单元格只能在布局表格内拖动显示，当鼠标在布局表格外的位 子拖动是无法绘制布局单元格的。 步骤三：布局单元格绘制完成后，在插入工具栏上的“布局”类 别中单击“标准”按钮，切换到“标准”模式，布局表格变成普通表 格，如右上图所示。用户可以在表格中插入各种页面对象。 5.2.3 绘制嵌套布局表格 步骤一：在插入工具栏上的“布局”类别中单击 按 钮，光标变成加号（+）形状。 步骤二：将光标放在现有布局表格中的空白区域， 按下鼠标左键并拖动，在页面上绘制出嵌套布局表格 ，如下图所示。 5.3 使用标尺与网格(“布局”模式 ) p1、使用标尺 查看”|“标尺”|“显示” (1)“查看”|“网格 ”|“显示网格 ” p2、使用网络 (2)“查看”|“网格 ”|“网格设置 ” (3)单击“确定”按钮应用更改并关闭对话框。 5.3 使用标尺与网格(“布局”模式 ) p网格设置 颜色：指定网格线的颜色。 显示网格：选中该复选框可以使网格在“设计”视图中可见。 靠齐到网格：选中该复选框可以使页面对象和网格线靠齐。 间隔：控制网格线的间距。 网格设置 显示网格 5.4 调整布局表格及布局单元格 p5.4.1 选择布局表格和布局单元格 p5.4.2 调整布局表格和布局单元格的大小 p5.4.3 移动嵌套布局表格和布局单元格 p5.4.4 设置布局表格和布局单元格的属性 p5.4.5 设置列宽度 5.4.1 选择布局表格和布局单元格 单击两次布局表格顶部的标签，当表格边框上出现选择控制点时 ，该表格处于选中状态。另外，单击表格中的空白区域，也可以 选中表格。 单击单元格的边框，边框上出现8个选择控制点，可以确定该单 元格处于选中状态。此外，在按住Ctrl键的同时，在单元格中的 任意位置单击也可以选中单元格。 5.4.2 调整布局表格和布局单元格的大小 选中布局表格，将光标放在表格的选择控制点上，光 标形状变成双向箭头，按下鼠标左键并拖动，可以调 整表格的宽度和高度 选中单元格，可以拖动选择控制点来调整单元格的宽 度和高度 5.4.3 移动嵌套布局表格和布局单元格 只有嵌套布局表格才能移动。首先选中嵌套表格边缘，然后按下 鼠标左键拖动表格到合适的位置。 选中嵌套表格后，使用方向键也可以移动表格。每按一次键盘上 的方向键，表格就会在相应方向移动1个像素。如果在按住Shift 键的同时按一次方向键，表格就会在相应方向移动10个像素。 移动布局单元格和移动嵌套表格的方法 。 5.4.4 设置布局表格和布局单元格的属性 p1. 设置布局表格的属性 布局表格，打开“属性”面板 ： l固定：将表格设置为固定宽度。 l自动伸展：使表格最右边的列自动伸展，以布满屏幕。 l高：设置表格的高度（以像素为单位）。 l填充：设置单元格内容和单元格边框之间的间隔 l间距：设置相邻单元格之间的间隔（以像素为单位）。 清除行高 删除所有间隔图像 使单元格宽 度一致 删除嵌套 5.4.4 设置布局表格和布局单元格的属性 p2. 设置布局单元格的属性 单击布局单元格边缘，显“属性”为 ： l固定：将单元格设置为固定宽度。 l高：设置单元格的高度（以像素为单位）。 l背景颜色：设置单元格的背景颜色。 l水平：设置单元格内容的水平 对齐方式, “左对齐”、“居中对齐” 、“右对齐”和“默认” l垂直：设置单元格内容的垂直对齐 方式, “顶端”、“居中”、“底部”、“基 线”或“默认” l不换行：禁止文字换行 。 l自动伸展：使单元格自动伸展，以布满屏幕 。 5.4.5 设置列宽度 p1. 使用间隔图像 步骤一：单击列标题菜单，选择“添加间隔图像”命 令 步骤二：如果尚未给站点设置间隔图像，将打开“选择 占位图像”对话框。 创建一个GIF图像作为间 隔图像，并允许用户 选择一个存储该间隔 图像文件的文件夹。 使用现有的图像文件 作为间隔图像 5.4.5 设置列宽度 步骤三：如果选择“创建占位图像文件”单选按钮，将打开“保存 间隔图像文件为”对话框，指定间隔图像文件名和存储该文件的 文件夹，完成后单击“保存”按钮。如果选择“使用现存的占位图 像文件”单选按钮，将打开“选择间隔图像文件”对话框，选择现 有的图像文件作为间隔图像，完成后单击“确定”按钮。 步骤四：间隔图像插入到列中，该图像是不可见的，列的底部 会显示双横线以表明它包含一个间隔图像，如下图。 若要从单个列中删除间隔图像，单击列标题菜单，选择“删除间隔图像”命 令。若要从表格中删除所有的间隔图像，单击表格标题菜单，选择“移除所 有分隔符图像”命令： 5.4.5 设置列宽度 p 2.列设置为自动伸展 步骤一：单击列标题菜单，选择“列设置为自动伸展”命令。 步骤二：如果尚未给站点设置间隔图像，将打开“选择占位图像 ”对话框，新增了“对于自动伸展表格不要使用间隔图像”单选按 钮，选中该选项表示避免向表格中自动添加间隔图像。选择对话 框中的某个选项，单击“确定”按钮，完成相应设置。 步骤三：自动伸展列的底部出现波浪线。其余列的底部出现双 横线，表明自动添加了间隔图像。 若要取消列的自动 伸展，单击自动伸 展列的标题菜单， 选择“列设置为固 定宽度”命令即可 5.4.5 设置列宽度 p 3.列设置为固定宽度 步骤一：选择列中的一个单元格，打开“属性”面板 。 步骤二：选择“固定”单选按钮，在后面的文本框中 输入单元格（列）的宽度。 当在“布局”模式中设置好布局表格和布局单元格后， 就可以在单元格中输入文本或插入其他页面对象了， 表格的空白区域不能插入内容。 当用户添加宽度大于布局单元格的内容时，该单元格 将自动扩展。当单元格扩展时，该单元格所在的列随 之扩展，周围单元格的大小也会相应地自动调整。 5.5 设置布局模式的首选参数 “编辑”-“首选参数”-“分类”-“布局模式” l自动插入间隔符： 指定是否应该在将列 设置为自动伸展时自 动插入间隔图像 l站点的间隔图像： 指定要设置间隔图像 的站点。 5.6 框架的使用 p5.6.1 关于框架和框架集 p5.6.2 创建框架和框架集 p5.6.3 选择框架和框架集 p5.6.4 保存框架和框架集文件 p5.6.5 设置框架和框架集属性 p5.6.6 为框架设置链接 p5.6.7 处理不能显示框架的浏览器 5.6.1 关于框架和框架集 p框架是浏览器窗口中的一个区域，它可以显示 与浏览器窗口其余部分所显示内容无关的 HTML文档。 p框架集是HTML文件，它定义了一组框架的布 局和属性，包括框架的数目、大小和位置，以 及在每个框架中初始显示的页面的URL。框架 集文件本身不包含要在浏览器中显示的HTML 内容，它只是向浏览器提供应如何显示一组框 架以及在这些框架中应显示哪些文档的有关信 息。 5.6.2 创建框架和框架集 p1. 使用预定义的框架集 法一：文件”-“新建”-“新建文档” -“示例中的页”-“框架集” -“创建” 法二：“插入记录”|“HTML”|“框架”-选择预定义的框架集 5.6.2 创建框架和框架集 法三：“插入”-“布局” -“框架”- -选择预定义的框架集 创建好的框架页 5.6.2 创建框架和框架集 p2. 设计框架集 1)创建框架集： “修改” -“框架集” -选择拆分项 注：如果当前设计视图 的框架边框不可见，可 通过选择“查看”|“可视化 助理”|“框架边框”命令， 使框架边框在设计视图 中可见。 5.6.2 创建框架和框架集 p 2)拆分框架：将光标放置在要拆分的框架内，选择“修改”菜单中 的“框架集”命令，从子菜单中选择拆分项。要以垂直或水平方式 拆分一个框架或一组框架，可将框架边框从设计视图的边缘拖入 设计视图的中间。要将不在设计视图边缘的框架边框拆分成一个 框架，可在按住Alt键的同时拖动框架边框。要将一个框架拆分成 四个框架，可将框架边框从设计视图的一角拖入框架的中间。 5.6.2 创建框架和框架集 单独拆分一个框架，首先选择“窗口”菜单中的“框架”命令，然后 在显示的“框架”面板上单击待拆分的框架，再用光标拖动相应框 架的边框，此时就可将单独的框架拆分成两部分。 3) 删除框架: 直接将框架 边框拖离页 面或拖到父 框架的边框 上 5.6.3 选择框架和框架集 p1. 在文档窗口中选择框架和框架集 选择框架：在设计视图中，按住Alt键的同时单击框架内部，这时 在框架周围会显示一个选择轮廓 选择框架集：单击框架集的某一内部框架边框，则在框架集周围 显示一个选择轮廓。 选择不同的框 架或框架集 l当前选定内容的同一层次级别选择下一框架（ 框架集）或前一框架（框架集），按住Alt键的同 时按下左箭头键或右箭头键。 l要选择父框架集（包含当前选定内容的框架集 ），在按住Alt键的同时按上箭头键。 l要选择当前选定框架集的第一个子框架或框架 集 5.6.3 选择框架和框架集 p2. 在“框架”面板中选择框架和框架集 “框架”面板提供框架集内各框架的可视化表示形式，它能够非常 直观地显示框架集的层次结构。 在“框架”面板中 选择框架集： 在“框架”面板 中选择框架： “窗口”-“框架” 5.6.4 保存框架和框架集文件 p1. 保存框架集文件和所有带框架的文档 “文件”-“保存全部” p2. 保存框架集文件 如果想单独保存框架集文件，可以在“框架”面板或文档窗口中选 择框架集，然后选择“文件”菜单中的“保存框架页”或“框架集另 存为”命令，将框架集文件另存为新文件。 p3. 保存带框架的文档 如果想单独保存在框架中显示的文档，可以将光标放置在目标框 架内，然后选择“文件”菜单中的“保存框架”或“框架另存为”命令 ，将框架中显示的文档另存为新文件。 5.6.4 保存框架和框架集文件 p 4. 改变带框架的文 档 （1）将光标放置在右框 架中。 （2）选择“文件”菜单中 的“在框架中打开”命令 ，打开“选择HTML文 件”对话框。 （3）选择要在右框架中 显示的文档，然后单击“ 确定”按钮，该文档随即 显示在框架中。如右图 。 5.6.5 设置框架和框架集属性 p1框架属性及其设置方法 （1）选择框架 在文档窗口的设计视图中，按住Alt键的同时单击一个框架；或者 选择“窗口”菜单中的“框架”命令，打开“框架”面板，在“框架”面 板中单击一个框架。 （2）打开“属性”面板 选择“窗口”菜单中的“属性”命令， 打开“属性”面板，单击右下角 的展开箭头，可以查看所有框架属性，如下图所示。 5.6.5 设置框架和框架集属性 （3）命名框架 在“框架名称”文本框中输入名称。在这里输入的框架名，将被超 链接和脚本引用。命名框架必须符合下列条件：框架名应以字母 开头，允许使用下划线（_），但不能使用横杠（-）、句号（。 ）和空格，不能使用JavaScript的保留字（例如top或navigator等 ） （4）设置其他框架属性 l源文件 l滚动 l不能调整大小 l边框 l边框颜色 l边界宽度 l边界高度 其他框架属性 5.6.5 设置框架和框架集属性 p2. 框架集属性及其设置方法 （1）选择框架集 在文档窗口的设计视图中，单击两框架之间的边框；或者选择“ 窗口”菜单中的“框架”命令，打开“框架”面板，在“框架”面板中 单击框架集边框。 （2）打开“属性”面板 选择“窗口”菜单中的“属性”命令， 打开“属性”面板，单击右下角 的展开箭头，可以查看框架集的所有属性，如图5-37所示。 5.6.6 为框架设置链接 步骤一：在设计视图中，选择文本或对象。 步骤二：打开“属性”面板，在“链接”文本框中输入要链接的文 件名，或者单击文件夹图标选择要链接的文件。 步骤三：在“属性”面板的“目标