使用表格布局网页

17
3.4.3 Spry选项卡式面板构 件
• 选项卡式面板构件是一组面板，用来将内容存储 到紧凑空间中。访问者可以通过单击要访问的面板上 的选项卡，来隐藏或者显示在选项卡式面板中的内容。 当访问者单击不同的选项卡时，构件的面板会相应地 打开。
18
3.4.4 Spry折叠构件
• Spry折叠构件是可折叠的面板， 可以将大量内容存储在一个紧凑的空间中。访问者 可以通过单击该面板上的选项卡来隐藏或者显示在 折叠构件中的内容。折叠面板分为两种：一种是多 个面板的折叠式面板构件，一种是只有一个面板的 可折叠面板构件。
14
3.4 Spry框架
• Spry框架是一个可以用来构建更加丰富的 Web页的JavaScript和CSS库。使用该框架，可以显 示XML数据，并创建用来显示动态数据的交互式页面元 素，而无需刷新整个页面。以前创建Spry框架是通过 代码完成的，这需要有一定的JavaScript基础知识的 用户使用。而Dreamweaver CS3在设计视图中新增 了创建Spry框架的构件，使复杂的Spry框架建立变成 了简单的可视化操作。
参数 表格Id 行 /列 宽 填充 间距 对齐 边框 类 背景颜色 边框颜色 背景图像 含义 设置表格的名称，也就是表格的Id。 在文本框中分别输入表格中行和列的数目 在文本框中输入表格宽度，以像素为单位或按占浏览器窗口宽度的百 分比进行计算。 在文本框中输入单元格内容和单元格边框之间的像素数。 在文本框中输入相邻单元格之间的像素数。 用于确定表格相对于同一段落中其他元素（例如文本或图像）的显示 位置。包括左对齐、右对齐和居中对齐。当对齐方式为【默认】时， 其他内容不显示在表格的旁边。 用于指定表格边框的宽度（以像素为单位）。 可以将CSS规则应用于对象。 设置表格的背景颜色。 设置表格边框的颜色。 为表格添加背景图像。
4
3.1.2 在表格中插入网页元素
• 为了使网页中的元素能够有序地、按照要求 显示在IE窗口中，在插入文本或者图像之前，插入表 格是最好的解决方法。在表格中插入文本或者图像的 方法与直接在网页中插入方法是基本相同的，只是在 插入之前，将光标放置在表格中即可。
5
3.1.3 设置表格属性
• 即使在网页中插入一个最简单的表格，也具 有表格的几个重要的元素，那就是表格整体、行、 列和单元格。所以插入表格后，【属性】面板中 显示的是该表格的基本属性。
15
3.4.1 Spry框架概念
• Spry框架支持一组用标准HTML、CSS和 JavaScript编写的可重用构件。Spry构件是一个页 面元素，通过启用用户交互来提供更丰富的用户体 验。每一个Spry构件均由以下几个部分组成： • 构件结构 用来定义构件结构组成的HTML代码块。 • 构件行为 用来控制构件如何响应用户启动事件的 JavaScript。 • 构件样式 用来指定构件外观的CSS。
19
3.5 课堂练习：一像素表格
• 一像素表格的制作方法多种多样，可以将1×1像 素的图像以背景图片的形式插入到表格中，也可以直 接在Dreamweaver中利用表格的属性制作一像素表 格。同样，一像素表格可以是一像素细线效果，也可 以是一像素边框效果，为了更好的显示效果，这里以 一像素边框为例。
22
16
3.4.2 Spry菜单栏构件
• 菜单栏构件是一组可导航的菜单按 钮，当访问者将鼠标指向其中的某个按钮上时，将 显示相应的子菜单。使用菜单栏可以在紧凑的空间 中显示大量可导航信息，并使访问者无需深入浏览 即可了解网站中提供的内容。
选项 菜单栏名称 禁用样式 菜单栏目 文本 链接 目标 标题 作用 默认菜单栏名称为MenuBar1，该名称不能以汉字命名，可以使用字母或者数 字。 单击该按钮，菜单栏变成项目列表，并且按钮名称更改为【启用样式】。 在【属性】面板中包括主菜单栏目、一级菜单栏目与二级菜单栏目 在该选项文本框中设置栏目名称。 该选项可以为菜单栏目添加链接文件，默认情况下为空链接。单击【浏览】 按钮 可以选择链接文件。 该选项指定要在何处打开所链接的页面。 该选项为菜单栏目提示文本
第3章 使用表格布局网页
将文本与图像插入页面后，就形成了 最简单的网页。在生成的网页中，发现其中的文本 或者图像会随着IE窗口的放大或者缩小发生变化， 这使得网页处于不稳定状态。要想改变这种情况， 最简单的方法就是使用表格。表格不仅能够控制网 页在IE窗口中的位置，还可以控制网页元素在网页 中的显示位置，这样无论IE窗口如何变化，其中的 网页都会保持默认的状态。
3
3.1.1 创建各种表格
• 表格在网页中是用来定位与排版的，而有时一 个表格无法满足所有的要求，这时就需要运用到嵌 套表格。嵌套表格，顾名思义就是在表格中插入表 格。这样一来，由总表格负责整体的排版，由嵌套 的表格负责各个子栏目的排版，并插入到总表格的 相应位置中。各司其职，互不冲突。
选项 行数 列数 表格宽度 边框粗细 单元格边距 单元格间距 无 左侧 顶部 两者 标题 对齐标题 摘要 作用 用于确定表格的行数。 用于确定表格的列数。 以像素或者百分比为单位确定表格的宽度。 以像素为单位指定表格边框的宽度。 指定单元格边框和单元格内容之间的像素数，如果不希望显示边框时，设置 为0像素。 指定相邻的单元格之间的像素数。 对表不启用列或行标题，默认情况下此项被选中。 将表的第一列作为标题列，便于为每一行输入一个标题。 将表的第一行作为标题行，便于为每一列输入一个标题。 在表中输入列标题和行标题。 指定在表格外显示的标题。 指定表格标题相对于表格的显示位置，采用默认方式。 用于说明表格。
12
3.3.1 创建布局表格与单元格
• 要想在页面中创建布局表格与单元格，确切地说 应该是绘制表格和单元格，首先要进入【布局】模式。 方法是执行【查看】|【表格模式】|【布局模式】命 令（快捷键Alt＋F6），由【标准】模式切换到【布 局】模式。
13
3.3.2 布局表格与单元格属性
• 绘制布局表格与布局单元格后，既可以随意设 置其属性，也可以在【属性】面板中精确地设置其 各个选项。
选项 宽 高 背景颜色 填充 间距 清除行高 使单元格宽度一致 删除所有间隔图像 删除嵌套 类 作用 有【固定】和【自动伸展】两个选项：当选中【固定】 单选按钮时，可以直接在右侧的文本框中输入表格的宽 度值。当选中【自动伸展】单选按钮时，则表格的宽度 可以根据插入的内容自动进行调整。 在其后的文本框中输入表格的高度。 用于设置表格的背景颜色。 用于设置单元格内容和边框的距离。 用于设置表格内单元格之间的距离。 按钮 ：对行高进行清除 按钮 ：表格内的单元格宽度自动随着单元格的内容宽 度变化。 按钮 ：清除表格中的所有间隔图像。 按钮 ：清除嵌套表格，只有当存在嵌套表格时，该选 项才显示。 可以将CSS规则应用于对象
6
3.2 编辑表格
• 当创建的表格不符合要求时，可以通过对表格 中的单元格进行拆分与合并，或者增加与删除表格 的行或者列来完成所需的要求。在表格中还可以进 行复制、剪切、粘贴等操作，因为它可以保留原单 元格的格式。
7
3.2.1 选中表格元素
• 在设置表格属性时发现，将 光标放置在表格中，【属性】面板中显示的是单元 格属性，而是表格属性，这说明选中的是单元格， 而不是表格。创建一个表格，既包含其本身，还包 含单元格、行与列元素，而这些元素的选择方法各 不相同。
8
3.2.2 调整表格大小
当选中整个表格后，在表格右下角区域显示3个 控制点，分别通过这3个控制点能够将表格横向、纵 向或者整体放大。
9
3.2.3 合并及拆分表格ຫໍສະໝຸດ Baidu素
•
当创建的表格不符合要求时，可以通过删 除或者增加表格的行与列，以及合并或者拆分单元 格来实现。
10
3.2.4 复制及粘贴单元格
• 表格中的单元格就像文本、图片能够被复 制与粘贴一样，单元格也可以复制与粘贴，并且可 以在保留单元格格式化的情况下，复制并且粘贴多 个单元格。表格中的单元格既可以覆盖现有的单元 格，也可以生成新的表格。
11
3.3 布局表格
• 在使用表格布局网页时发现，表格与单元格 是有规律的创建。要想使用表格拼图，必须经过 精密地计算，以及拆分或者合并单元格来实现。 为了简化利用表格布局页面，Dreamweaver提供 了一种【布局】模式。在这种模式下使用布局工 具，设计者可以轻松地在页面中画出布局表格以 及单元格，然后对其进行修改、移动等。
20
3.6 课堂练习：圆角相框
• 当浏览网页时，经常会看到带有相框的图片。具 有相框的图片，使其在网页突出显示。下面介绍一种 制作圆角相框的方法，它是通过在表格中插入图像和 背景图像制作而成的。
21
3.7 课堂练习：可隐藏的说明 书
• 可隐藏的说明书中同时准备了图片和相关的说明 文字，但是后者放置在Spry可折叠面板构件中，这样 在预览时，既可以同时查看图片与说明文字，还可以 将说明文字隐藏只查看图片。
1
本章知识要点：
• 创建表格 • 创建嵌套表格 • 创建布局表格 • 创建Spry框架
2
3.1 表格建立
• 日常生活中，最常见的表格是用来显示数据 的，比如Excel中的表格。在Dreamweaver中，表 格除了可以显示数据外，最主要的功能是定位与排版。 这样才能够将前面介绍过的文本与图像定位在网页中 的任何想要显示的区域中。所以说，网页设计就是从 创建表格开始的，先学习表格的创建可以为后来的网 页设计奠定基础。