APDiv、框架与网页布局.ppt

第4章 APDiv 框架与网页布局 4 1 案例17 秦始皇兵马俑 兵器介绍 网页相关知识1 设置APDiv的默认属性单击 编辑 首选参数 命令 弹出 首选参数 对话框 再选择该对话框内 分类 列表框中的 AP元素 选项 如图4 1 3所示 其中各个选项的作用如下 1 显示 下拉列表框 设置默认状态下APDiv的可视度 可以选择 default 浏览器默认状态 inherit 继承母体可视度 visible 可视 和 hidden 隐藏 2 宽 和 高 文本框 设置默认状态下插入APDiv的宽度和高度 单位为像素 3 背景颜色 按钮与文本框 设置默认状态下插入APDiv的背景颜色 默认值为透明 单击按钮可以调出颜色面板 利用它来选中颜色 也可以在文本框内输入颜色的代码 4 背景图像 文本框与 浏览 按钮 用来设置默认状态下插入APDiv的背景图像 单击 浏览 按钮 可以弹出 选择图像源 对话框 从中可以设定APDiv的背景图像 5 嵌套 复选框 选中它后 可以在将APDiv拖动到其他APDiv时实现嵌套 6 Netscape4兼容性 复选框 选中它后 Dreamweaver会向HTML文件的标记中加入JavaScript函数 用来解决在Netscape4 0浏览器中添加嵌入CSSAPDiv时可自动调整APDiv的尺寸 避免异常问题产生 2 APDiv的基本操作 1 创建APDiv可以有以下三种方法 单击 插入 布局 栏内的 描绘APDiv 按钮 在页面内拖动出一个矩形 即可创建一个APDiv 如图4 1 4所示 这时鼠标指针变为十字状态 将 绘制APDiv 按钮拖动到网页页面中 也可在页面光标处插入一个默认属性的APDiv 将光标移到要插入APDiv的位置 单击 插入记录 布局对象 APDiv 命令 也可以在网页内光标处创建一个APDiv 图4 1 4 创建一个APDiv 2 选中APDiv 在改变APDiv的属性前应先选中APDiv 选中的APDiv会在APDiv矩形的左上角产生一个双矩形状控制柄图标 同时在APDiv矩形的四周产生八个黑色的方形控制柄 选中一个APDiv的效果如图4 1 5所示 选中APDiv的方法有多种 操作方法如下 单击APDiv的边框线 即可选中该APDiv 单击APDiv的内部 会在APDiv矩形的左上角产生一个双矩形状控制柄图标 单击该控制柄图标 即可选中与它相应的APDiv 按住 Shift 键 分别单击要选择的各个APDiv的内部或边框线 即可选中多个APDiv 如果选中的是多个APDiv 则只有一个APDiv的方形控制柄是黑色实心的 其他选中的APDiv的方形控制柄是空心的 如图4 1 6所示 图4 1 5 选中一个APDiv 图4 1 6 选中多个APDiv 3 调整一个APDiv大小 改变一个APDiv大小的方法有三种 首先要选中该对象 鼠标拖动调整的方法 将鼠标移到APDiv的方形控制柄处 当鼠标指针变为双箭头状时拖动鼠标 即可 调整APDiv的大小 按键调整的方法 按住 Ctrl 键 同时按 或 键 可使APDiv水平增加或减少一个像素 每按 或 键一次 可使APDiv垂直增加或减少一个像素 按住 Ctrl Shift 组合键的同时 按光 标移动键 可每次增加或减少五个像素 利用APDiv 属性 栏设置 在其 属性 栏内的 宽 和 高 文本框内分别输入修改的数值 单位 是像素 即可调整APDiv的宽度和高度 4 调整多个APDiv大小的方法也有两种 命令方法 单击 修改 排列顺序 设成宽度相同 命令 见图4 1 7 即可使选中的APDiv 与最后选中的APDiv 它的方形控制柄是黑色实心的 的宽度相同 利用APDiv 属性 栏进行设置的方法 选中多个APDiv后 其 属性 栏变为多APDiv 属性 栏 在 宽 和 高 文本框内分别输入修改的数值 单位是像素 即可调整选中的多个APDiv的宽度和高度 单 位是像素 5 设置多个APDiv的排列顺序和对齐可采用以下方法 命令的方法 选中多个APDiv 单击 修改 排列顺序 命令 可弹出它的下一级菜单 如图4 1 7 所示 单击其中的一个命令 即可获得相应的对齐效果 例如 选中多个APDiv 单击 修改 排列顺序 对齐下缘 命令 即可将各APDiv以最后选中的APDiv 控制柄是实心 的下边线为基准进行对齐 如图4 1 8所示 图4 1 7 排列顺序 的下一级菜单 图4 1 8 对齐下缘后的多个APDiv 按键调整的方法 按住 Ctrl 键 同时按光标移动键 即可将选中的多个APDiv对齐 按 键可右对齐 按 键可左对齐 按 键可下对齐 按 键可上对齐 利用APDiv 属性 栏设置 选中多个APDiv后 在多APDiv 属性 栏内的 左 或 上 文本框内输入修改的数值 即可使多个APDiv的左边线或上边线以修改的数值对齐 6 调整APDiv的位置可以采用如下方法 鼠标拖动调整的方法 将鼠标指针移到APDiv的边框上 当鼠标指针变为形状时拖动 即可移动APDiv 按键调整的方法 每按一次 或 键 可使APDiv向右或向左移动一个像素 每按一次 或 键 可使APDiv向下或向上移动一个像素 如果按住 Shift 键的同时 按光标移动键 也可调整APDiv的位置 每次移动五个像素 利用APDiv 属性 栏进行设置的方法 选中要调整大小的APDiv 在其单个APDiv 属性 栏内的 左 文本框中输入修改的数值 单位是像素 即可调整APDiv的水平位置 在 上 文本框内输入修改的数值 单位是像素 可调整APDiv的垂直位置 3 APDiv 属性 栏APDiv 属性 栏有两种 一种是单APDiv 属性 栏 这是在选中一个APDiv时出现的 另一个是多APDiv 属性 栏 这是在选中多个APDiv时出现的 单APDiv 属性 栏如图4 1 9所示 多APDiv 属性 栏如图4 1 10所示 从图中可以看出 多APDiv 属性 栏内除了基本的属性设置选项外 还增加了关于文本属性的设置选项 其中各选项的作用如下 图4 1 9 单APDiv 属性 栏 图4 1 10 多APDiv 属性 栏 1 CSS P元素 下拉列表框 用来输入APDiv的名称 它会在 AP素材 面板中显示出来 该名称可以在脚本中使用 例如通过脚本实现APDiv的显示或隐藏等 2 左 L 文本框用来确定APDiv在页面中的位置 单位为像素 其内的数据是APDiv左边线与页面左边缘的间距 对于嵌套中的子APDiv 左 L 文本框内的数据是相对于父APDiv的左边的位置 3 上 T 文本框内的数据是APDiv顶边线与页面顶边缘的间距 对于嵌套中的子APDiv 是相对于父APDiv的左边或顶端的位置 4 宽 和 高 文本框 用来确定APDiv的大小 单位为像素 5 Z轴 文本框 用来确定APDiv的Z轴顺序 用来设置嵌套APDiv的重叠层次 值越大 越靠上方 6 可见性 和 显示 下拉列表框 用来确定APDiv的可视性 它有 default 默认 由浏览器决定 大多数会继承它的父APDiv的可见性 inherit 与其父APDiv的可视性相同 visible 显示APDiv 图4 1 11 和其内对象 与其父APDiv无关 和 hidden 隐藏APDiv和其内对象 与其父APDiv无关 四个选项 7 背景图像 文本框与 按钮 用来确定APDiv的背景图案 8 背景颜色 按钮与文本框 用来确定APDiv的背景颜色 9 标签 下拉列表框 用来选择APDiv的样式 其内有DIV和SPAN两个选项 这是HTML的两个标签 10 溢出 下拉列表框 它决定了当APDiv中的内容超出APDiv的边界时的处理方法 它有 visible 可见 即根据图像大小自动调整APDiv的大小 使内容全部显示 为系统默认 hidden 当图像超出APDiv的范围后 超出的部分不显示 Scroll 当图像超出APDiv的范围后 加滚动条 和 Auto 根据APDiv中的内容能否超出APDiv的范围 决定是否加滚动条 四个选项 选择前三个不同选项后 在浏览器中的显示效果如图4 1 11所示 注意 在网页页面设计视图窗口内显示的都与图4 1 11 a 一样 a b c 在 溢出 下拉列表框中分别选择 Visible Hidden 和 Scroll 后的不同效果 11 剪辑 选项组 用来确定APDiv的可见区域 即确定APDiv中的对象与APDiv边线的间距 左 上 右 和 下 四个文本框分别用来输入APDiv中的对象与APDiv的左边线 顶部边线 右边线和底部 边线的间距 单位为像素 4 2 案例18 不同亮度的图像 网页 相关知识 1 AP元素 面板和改变APDiv的重叠顺序 在 AP元素 面板中 用户可以对APDiv的可视性 嵌套关系 显示顺序和相互覆盖性等属性进行设置 单击 窗口 APDiv 命令 即可调出 APDiv 面板 即APDiv监视器 如图4 2 6 b 所示 1 显示APDiv的信息 在图4 2 4所示的 AP元素 面板中有五个APDiv 名称 列 是各个APDiv 的名称 Z 列内的数据显示各APDiv的顺序 Z值越高 显示越靠上 Z值可以是负数 表示在网页下边 即 隐藏起来 网页的 Z轴 数值为0 2 选定APDiv 单击 AP元素 面板中APDiv的名称 即可选中网页中相应的APDiv 按住 Shift 键 同 时依次单击 AP元素 面板中各个APDiv的名称 即可选中网页中相应的多个APDiv 3 更改APDiv的名称 双击 名称 列中APDiv的名称 使此行名称处出现白色的矩形 如图4 2 8 所示 即可输入APDiv的新名字 4 设定是否允许APDiv重叠 如果不选中 AP元素 面板中的 防止重叠 复选框 则表示允许APDiv之间有重叠关系 如果选中 防止重叠 复选框 则表示不允许APDiv之间有重叠关系 5 改变APDiv之间的嵌套关系 在APDiv中插入另一个APDiv叫做APDiv的嵌套 在APDiv的嵌套中 子APDiv的属性决定于其父APDiv的属性 在选定父APDiv后 子APDiv也会被选定 在移动或复制父APDiv时 子APDiv也会随之被移动或复制 按住 Ctrl 键 同时拖动 AP元素 面板中源APDiv的名称 apDiv4 到另一个APDiv名称之上 例如 apDiv5 可称为目标APDiv 当目标APDiv名字 例如 apDiv5 四周出现矩形框时释放鼠标左键 即可将源APDiv成为目标APDiv的子APDiv 再按住 Ctrl 键 将 apDiv3 APDiv拖动到 apDiv4 APDiv之上 然后释放鼠标左键 apDiv3 APDiv即可成为 apDiv4 APDiv的子APDiv APDiv 面板如图4 2 9所示 图4 2 8 更改APDiv的名称 按钮 使 由图4 2 9可以看出 apDiv3 APDiv是 apDiv4 APDiv的子APDiv apDiv4 APDiv是 apDiv5 APDiv的子APDiv 父APDiv名称的左边有一个图标 单击该图标 可以使父APDiv收缩 图标变为图标 再单击图标 可使父APDiv的子APDiv展开 图标变为图标 如果向左下方拖动子APDiv的名称 可以取消它与父APDiv的嵌套关系 6 改变APDiv的显示顺序 单击要更改显示顺序的APDiv的Z值 例如 apDiv3 使它周围出现矩形框 如图4 2 10所示 输入新的Z值 此外 在APDiv的 属性 栏内的 Z轴 文本框内也可以改变Z值 7 设置APDiv的可视性 单击 AP元素 面板内的 按钮列出现许多人眼图像 如图4 2 11 所示 AP元素 面板内的 按钮列显示的 图像 睁开的人眼图像 表示此行的APDiv可视 即可见的 图4 2 9 APDiv之间的嵌套 图4 2 10 修改Z值 图4 2 11 单击 按钮后效果 l l l l 单击 图像 可使 图像消失 再单击原 图像处 会出现 图像 表示此行的APDiv是不可视的 如果再单击 图像 可使它变为 图像 表示此行的APDiv又变为可视的 将 apDiv3 APDiv变为不可视 后的 AP元素 面板如图4 2 12所示 2 APDiv与表格互相转换 1 将APDiv转换为表格 单击 修改 转换 将APDiv转换为表格 命令 弹出 将APDiv转换为表格 对话框 如图4 2 13所示 其内各选项的作用如下 最精确 单选按钮 表示使用最高的精度转换 转换后的单元格位置基本不变 空白处会产生空的单元格 最小 合并空白单元格 单选按钮 选中它后 会合并空白单元格 文本框 选中 最小 合并空白单元格 单选按钮后 该文本框会变为有效 其内可输入数值 单位为像素 当APDiv与APDiv的间距小于此值时 APDiv转换为表格后会自动对齐 而不是以空白单元格去补充 从而避免产生过多的表格和单元格 使用透明GIFs 复选框 选中该复选框后 APDiv转换后的表格空白单元格用透明的GIF图像填充 以保证在任何浏览器中都能正常显示 l l l l l 置于页面中央 复选框 选中该复选框后 转换后的表格在页面居中显示 不选中此复选框时 转换后的表格居页面左上角显示 防止重叠 复选框 选中该复选框后 可防止APDiv重叠 显示AP元素面板 复选框 选中该复选框后 可显示 AP元素 面板 显示网格 复选框 选中该复选框后 可显示网格 靠齐到网格 复选框 选中它后 可使网格吸附 捕捉 功能有效 2 将表格转换为APDiv 由于APDiv的功能比表格的功能要强得多 所以将表格转换为APDiv以后 可以使网页更丰富多彩 将表格转换成APDiv的方法如下 图4 2 12 将 apDiv3 APDiv不可视 单击 修改 转换 将表格转换为APDiv 命令 弹出 将表格转换为APDiv 对话框 如图4 2 14所示 该对话框内各复选框的作用与 转换APDiv为表格 对话框内 布局工具 选项组中各选项的含义一样 图4 2 13 转换APDiv为表格 对话框 图4 2 14 将表格转换为APDiv 对话框 4 3 案例19 中国名胜图像浏览2 网页相关知识1 创建框架和 框架 面板 1 创建框架的常用方法 在网页中创建框架的常用方法可以有以下三种 单击 文件 新建 命令 弹出 新建文档 对话框 如图4 3 7所示 在该对话框中可以创建有 框架的网页 单击 插入 布局 栏内 框架 快捷菜单中的一个命令 如图4 3 14所示 即可在页面内设置出相 应的框架 单击 修改 框架集 命令或单击 插入记录 HTML 框架 命令 也可以创建框架 2 增减框架个数 在创建框架后 要增加或删除框架的个数 首先应单击框架内部 再单击 查看 可 视化助理 框架边框 命令选项 然后可采用如下方法进行 增加新框架 将鼠标指针移到框架的四周边缘处 当鼠标指针为 n 或 o 形状时 向鼠标指针箭头 指示的方向向内拖动 即可在水平或垂直方向增加一个框架 在框架区域内增加新框架 单击某一个框架区域内部 使光标在此区域内出现 然后按照上述方法在框 架区域内增加新框架 调整框架的大小 用鼠标拖动框架线 即可调整框架的大小 删除框架 拖动框架线 一直拖动到另一条框架线或边框处 即可删除框架 3 框架 面板 单击 窗口 框架 命令 调出 框架 面板 框架 面板也叫框架观察器 如图 4 3 15所示 如果光标在框架内 则框架观察器中对应框架内的文字变为黑色 如图4 3 16所示 框架 面板的作用是显示出框架网页的框架结构 也叫分栏结构 单击某一个分栏框架 选中的框架边框呈黑色 即可选中该分栏框架 同时 属性 栏变为该分栏框架 属性 栏 如果单击框架的外框线 可以选中整个框架 即框架集 如图4 3 17所示 同时 属性 栏变为框架集 属性 栏 图4 3 15 框架 快捷菜单 图4 3 16 框架 面板 图4 3 17 选中整个框架集 2 在框架内插入HTML文件 1 单击网页分栏框架的某一个分栏框架窗口内部 使光标在该分栏框架窗口内出现 在选中的分栏框架窗 口内输入文字和导入对象 然后将该分栏框架中的内容保存为网页文件 2 按住 Alt 键 单击一个框架分栏的内部 使光标出现在该分栏框架窗口内 或者单击 框架 面板 中的分栏框架内部 选中相应的分栏框架 然后 单击其 属性 栏中 源文件 文本框后的按钮 弹出 选 择HTML文件 对话框 从中选择文件夹 要加载的文件 在 相对于 下拉列表框中选择 站点根目录 选项后 URL 文本框中会给出选中文件相对于站点文件夹的相对路径和文件名称 选择 文档 选项后 URL 文本框中会给出选中文件的名称 然后 单击 确定 按钮 即可完成在分栏框架内插入HTML文件的案例 3 也可以单击 文件 在框架中打开 命令 弹出 选择HTML文件 对话框 利用它可将外部的HTML文件加载到选定的分栏框架窗口内 3 保存框架文件在文件菜单内有许多命令用来保存框架集和框架分栏内的网页 而且具有智能化 用户可以针对需要保存的内容显示可以使用的相应的命令 1 如果网页中的框架集是新建的或是进行过修改的 则单击 文件 保存全部 命令 弹出 另存为 对话框 同时整个框架 即框架集 会被虚线框住 然后输入文件名 再单击 保存 按钮 完成整个框架集网页文件的存储 此时再次调出 另存为 对话框 同时某一个框架会被虚线框住 输入文件名 再单击 保存 按钮 完成该框架内网页文件的存储 以后依次将框架分栏内的内容保存为HTML网页文件 保存的是哪个分栏 l l 中的网页文件 则该分栏就会被虚线框住 2 如果网页中的框架集是新建的或修改后的 则单击 文件 框架集另存为 命令 或单击 文件 保存框架页 命令 可弹出 另存为 对话框 从中输入文件名 再单击 保存 按钮 完成框架集文件的保存 3 单击一个框架分栏内部 使光标出现在该框架窗口内 单击 文件 保存框架 命令 弹出 另存为 对话框 输入网页的名字 单击 保存 按钮 即可将该框架分栏中的网页保存 4 修改框架文件后 单击 文件 关闭 命令 会弹出一个提示框 提示是否存储各个HTML文件 连续单击 是 按钮可依次保存各框架 先保存光标所在的框架 最后保存整个框架集 4 框架集和分栏框架的 属性 栏 1 框架集的 属性 栏 单击框架的外边框后 可使 属性 栏变为框架集 属性 栏 改变框架集属性需要通过框架集 属性 栏来完成 如图4 3 14所示 边框 下拉列表框 用来确定是否要边框 选择 是 选项保留边框 选 否 选项是不保留边框 选 默认 选项是采用默认状态 通常要保留边框 边框颜色 下拉按钮 用来确定边框的颜色 单击可在后面的文本框中直接输入颜色数据 按钮 可调出颜色面板 从中可选择边框的颜色 也 l l l l l l l 边框宽度 文本框 用来输入边框的宽度数值 其单位是像素 如果在该文本框内输入0 则没有边框 如果单击 查看 框架边框 命令 则网页页面编辑窗口内会显示辅助的边框线 不会在浏览器中显 示出来 值 文本框 用来确定网页左边分栏的宽度或上边分栏的高度 单位 下拉列表框 用来选择 值 文本框内数据的单位 单位有 像素 等 2 分栏框架的 属性 栏 按住 Alt 键 单击分栏框架的内部后 可使 属性 栏变为分栏框架 属 性 栏 分栏框架属性的改变需要通过分栏框架 属性 栏来完成 分栏框架的框架 属性 栏中各选项的作用 如下 框架名称 文本框 用来输入分栏的名字 源文件 文本框 用来设置该分栏内HTML文件的路径和文件的名字 滚动 下拉列表框 用来选择分栏是否在框架的右边和下边添加滚动条 选择 是 选项 表示添加滚 动条 选择 否 选项 表示不添加滚动条 选择 自动 选项 表示根据框架分栏内是否能够完全显示 出其网页的内容来自动选择是否在框架的右边和下边添加滚动条 选择 默认 选项 表示采用默认状态 不能调整大小 复选框 如果选中该复选框 则不能用鼠标拖动框架的边框线 调整分栏大小 如果有 选中该复选框 则可以用鼠标拖动框架的边框线 调整分栏大小 l l 边框 下拉列表框 用来确定是否要边框 当此处的设置与框架集 属性 栏的设置不一致时 以此处 设置为准 边框颜色 下拉按钮 用来确定边框的颜色 4 4 案例20 中国旅游万里行 网页 相关知识 1 描图 1 将描图与其他对象对齐 载入描图 在网页内插入一个对象 单击选中网页内的对象 例如 图像或文 字等 单击 查看 跟踪图像 对齐所选范围 命令 即可将描图的左上角与选中对象的左上角对齐 2 显示 隐藏描图 在网页中调入描图后 单击 查看 跟踪图像 显示 命令 可以在显示描 图和隐藏描图之间切换 3 调整描图的位置 单击 查看 跟踪图像 调整位置 命令 弹出 调整跟踪图像位置 对话 框 如图4 4 10所示 利用它可以改变描图的位置 在该对话框的 X 和 Y 文本框内分别输入坐标值 单 位为像素 即可将描图的左上角以指定的坐标值定位 单击 确定 按钮完成重定位 另外 在打开 调整跟踪图像位置 对话框的情况下 也可以通过按键盘中的方向键来移动描图 每按一次 键即可移动一个像素 按住 Shift 键的同时 按键盘中的方向键也可以移动描图 每按一次键即可移动五个 像素 4 重设描图位置 单击 查看 跟踪图像 重设位置 命令 可将描图的位置恢复到调整前的位置 图4 4 10 调整跟踪图像位置 对话框2 插入 布局 栏简介和网页布局的调整DreamweaverCS3的 插入 布局 栏如图4 4 7所示 插入 布局 栏从左到右的主要按钮有 插入 Div标签 按钮 绘制APDiv 按钮 Spry菜单栏 按钮 Spry选项卡式面板 按钮 Spry折叠 式 按钮 Spry可折叠面板 按钮 表格 按钮 右边的两个按钮是 绘制布局表格 工具按钮和 绘 制布局单元格 工具按钮 单击 查看 表格模式 布局模式 命令 进入网页布局模式状态 此时 绘制布局表格 工具按钮和 绘制布局单元格 工具按钮有效 利用 绘制布局表格 工具按钮可以绘制 布局表格 如图4 4 11所示 利用 绘制布局单元格 工具按钮 可在布局表格内绘制出网页布局单元格 如图4 4 12所示 如果没有绘制布局表格就绘制布局单元格 则会自动产生一个布局表格 注意 不可以在布局单元格内绘制 布局表格和布局单元格 1 选中布局表格 单击布局表格内部或它的标签布局表格 即可选中布局表格 选中的布局表格的四周会 出现三个控制柄和布局表格宽度标注 如图4 4 11所示 2 调整布局表格的大小 用鼠标拖动布局表格的标签 可改变布局表格的位置 用鼠标拖动布局表格的绿 色控制柄 可改变布局表格的大小 注意 不能将布局表格调整到比其中的单元格还小 也不能将布局表格移到 其他布局表格之上 图4 4 11 绘制的布局表格 图4 4 12 绘制的布局单元格 3 选中布局单元格 将鼠标指针移到布局单元格的蓝色线条处 布局单元格的线条会变为红色 此时单击布局单元格的线条 即可选中布局单元格 选中的布局单元格四周会有八个控制柄 如图4 4 12所示 4 调整单元格的大小与位置 选中单元格后 用鼠标拖动单元格线条 可改变单元格的位置 用鼠标拖动单元格的控制柄 可改变单元格的大小 注意 不能将单元格移出所在的布局表格 也不能将单元格移到其他单元格之上 3 布局表格和布局单元格的 属性 栏 1 布局表格的 属性 栏 单击选中布局表格后 调出布局表格的 属性 栏 它与表格的 属性 栏不一样 如图4 4 13所示 布局表格 属性 栏内各选项的作用如下 l l l l l l l l 宽 选项组 它有两个单选按钮 分别是 固定 和 自动伸展 选择 固定 单选按钮后 还需要在其文本框内输入布局表格的宽度数值 单位为像素 可以保证布局表格的固定宽度 选择 自动伸展 单选按钮后 布局表格的宽度可以自动伸展为整个窗口的宽度 高 文本框 用来设置布局表格的高度数值 单位为像素 背景颜色 按钮与文本框 用来设置布局表格的背景颜色 图4 4 13 网页布局表格 属性 栏 填充 文本框 用来设置布局表格内布局单元格中插入对象距边线的距离数值 单位为像素 该值为0时 如图4 4 14所示 该值为10时 如图4 4 15所示 间距 文本框 用来设置布局表格内各布局单元格的间距数值 单位为像素 该值为0时 如图4 4 14所示 该值为10 填充值为10时 如图4 4 15所示 清除行高 按钮 单击该按钮 可清除行高 使单元格宽度一致 按钮 单击该按钮 可使单元格宽度一致 删除所有间隔图像 按钮 该按钮在添加间隔图像后才会有效 单击该按钮 可删除所有的间隔图像 l l 图4 4 14 填充 和 间距 值均为0 图4 4 15 填充 和 间距 值均为10 删除嵌套 按钮 单击该按钮 可删除嵌套在布局表格内的选中的布局表格 2 布局单元格的 属性 栏 选中布局单元格 调出布局单元格的 属性 栏 如 图4 4 16 所示 布局单元格 属性 栏内前面没有提到的选项的作用如下 水平 下拉列表框 用来确定布局单元格内对象在水平方向的对齐方式 它有四个选项 分别为 默认 一般为左对齐 左对齐 居中对齐 和 右对齐 图4 4 16 布局单元格的 属性 栏 l l 垂直 下拉列表框 用来确定布局单元格内对象在垂直方向的对齐方式 它有五个选项 分别为 默认 一般为居中 顶端 中间 底部 和 基线 不换行 复选框 选中该复选框后 可取消外框线 4 布局表格和布局单元格菜单单击选中布局表格 再单击总宽度标注右边的箭头 可调出布局表格菜单 如图4 4 17所示 单击单元格宽度标注右边的箭头 可调出单元格菜单 如图4 4 18所示 图4 4 17 布局表格菜单 图4 4 18 单元格菜单 1 清除所有高度 可以将布局表格内的单元格的高 即单元格顶部与布局表格顶端的间距 清除 如果布局表格内没有单元格 则自动建立充满布局表格的单元格 2 使所有宽度一致 使所有布局单元格的宽度一样 3 移除所有分隔符图像 删除所有的间隔图像 4 删除嵌套 删除选中的布局表格中的间隔图像 5 列设置为自动伸展 使选中的布局单元格的列自动适应布局表格的宽度 6 添加间隔图像 在选中的布局单元格内添加间隔图像 间隔图像是透明图 它可以用来控制自动伸展 表的间隔 间隔图像会适应页面上已经设置的表格和单元格的宽度 5 自动伸展和间隔图像 1 自动伸展 布局视图给网页设计者提供了表的两种宽度 即指定宽度和自动伸展 每个表的宽度都会显 示在表顶部的页眉显示区中 指定宽度是一个明确的数字 例如160像素 设置指定宽度会影响同一列的其他 单元格或表 自动伸展是根据窗口的大小调整宽度 如果使用自动伸展 不论浏览器的窗口设置为多大 设计的 版面都会充满整个浏览器的窗口 在一个版面中只有一列可以自动伸展 设置自动伸展宽度 单击需要设置自动伸展的表顶部的下拉按钮 再单击布局表格下拉菜单中的 列设 置为自动伸展 命令 另外 也可以选择要操作的列 再选中 属性 栏中的 自动伸展 单选按钮 当某一列被设置为自动伸展后 DreamweaverCS3会插入间隔图到指定宽度的列以控制版面 设置指定宽度 并不是所有的列都适合于自动伸展宽度 有时需要精确指定列的宽度 可单击选中 属 性 栏中的 固定 单选按钮 再在其文本框中输入宽度数值 如果输入的数值小于对象的宽度 Dreamweaver 会自动设置宽度到正确的大小 2 间隔图像 如果选择在自动伸展表里不插入间隔图像的话 并且如果列里没有内容 列就会被改变大小 甚至完全消失 用户可以在每一列中插入或删除间隔图像 也可以在创建自动伸展列的同时让DreamweaverCS3 自动增加间隔图像 插入间隔图像后 列会有些微小的移动 并且在列的顶部会出现两条横线 创建间隔图像的 方法如下 单击单元格菜单 见图4 4 18 中的 添加间隔图像 命令 会弹出 选择占位图像 应叫 选择间 隔图像 对话框 如图4 4 19所示 图4 4 19 选择间隔图像 对话框 另外 单击单元格菜单中的 列设置为自动伸展 命令 可以弹出 选择占位图像 对话框 增加了一个 对 于自动伸展表格不要使用间隔图像 单选按钮 如果选中了 创建占位图像文件 单选按钮 再单击 确定 按钮 就会弹出 保存间隔图像文件为 对话框 在该对话框中 用户可以在 文件名 文本框中输入间隔图像的名称 再单击 保存 按钮 将间隔图 像保存到本地的站点中 如果选中了 使用现存的占位图像文件 单选按钮 再单击 确定 按钮 就会弹出 选择间隔图像文 件 对话框 在这个对话框里可以选择已存在的图片作为间隔图像 如果单击布局表格菜单中的 列设置为自动伸展 命令 则弹出的 选择间隔图像 对话框中会增加一 个 对于自动伸展表格不要使用间隔图像 单选按钮 选中该单选按钮 再单击 确定 按钮 会显示一个提示 信息框 如果已经在要设置自动伸展的表格内填入了内容 可以单击 确定 按钮 完成设置自动伸展的工作