动态网页设计与制作实用教程（第二版）程伟渊电子教案 第11章.pptVIP

第11章 设计页面布局 本章学习导读 在编辑网页前应该首先对网页进行整体布局设置。合理 的布局使网页看起来美观大方，并且便于网页元素的插入与 编辑。本章主要讲述在 Dreamweaver 8中利用表格、布局 视图、框架和层等可视化设计工具进行页面布局的过程。通 过本章学习，读者应该掌握以下内容： 使用表格对页面进行布局 在布局模式中对页面进行布局 使用框架对页面进行布局 使用层对页面进行布局 第11章 设计页面布局 11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图 形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。 11.1.1 创建表格 1．插入表格 可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤如下： （1）在文档窗口的设计视图中，将插入点放在需要表格的位置。 （2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/表格”菜 单。 （3）按需要设置表格参数，完成表格的创建。 第11章 设计页面布局 2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单元格中添加文 本和图像等元素。 3．导入表格式数据 可以将在另一个应用程序（例如Microsoft Excel）中 创建的表格式数据导入到 Dreamweaver 8中并设置为表格 的格式 第11章 设计页面布局 11.1.2 表格的编辑 1．选择表格元素 可以一次选择整个表、行、列或在表格中选择一个连续的单元格块， 还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。 第11章 设计页面布局 2．设置表格和单元格的格式 可以通过设置表格及表格单元格的属性或将预先设置的 设计应用于表格来更改表格的外观。若要设置表格中文本的 格式，可以对所选的文本应用格式设置或使用样式。 3．调整表格的大小 通过拖动选择控制点可以调整整个表格或单个行和列的 大小，当调整整个表格的大小时，表格中的所有单元格按比 例更改大小。 4．更改列宽和行高 通过使用属性检查器或拖动列或行的边框，可以更改列 宽或行高。还可以使用代码视图直接在HTML代码中更改单 元格的宽度和高度。 第11章 设计页面布局 5．元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片 元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。 第11章 设计页面布局 5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。 6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。 第11章 设计页面布局 7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何 表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格 可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。 第11章 设计页面布局 11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以 根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。 第11章 设计页面布局 11.2 在布局模式中对页面进行布局 11.2.1 布局模式简介