1、表格和层的使用,本章主要内容,学会使用表格和层 熟悉表格和层之间的转换 掌握设置表格和层的属性 了解“插入DIV标签”布局网页,表 格 的 作 用,1.概述 表格由一行或多行组成，每行又由一个或多个单元格组成。虽然HTML代码中 通常不明确指定列，但Dreamweaver允许操作列、行和单元格。 2.作用 表格能准确地定位每一个页面对象的位置，一个好的Web设计者能通过它可 排版出一幅幅精美的web页面。一般网页设计者的流程是首先用图像处理软 件（PS或Fireworks)设计好一个整幅页面图像，然后将整幅图切割成许许多 多对象，最后，在Dreamweaver里用表格或层将切割的许许多多对象排
2、版成 与整幅图像相吻合的一个页面，因些表格在页面布局起着举足轻重的作用。,创 建 表 格,1.概述在Dreamweaver 8中，创建表格有两种方式：在“标准”模式下创建在“布局”模式下创建 2.在“标准”模式下创建表格 (1).创建方法如下： 插入/表格 在“插入”菜单中的“常用”选项里点表格图标 在“插入”菜单中的“布局”选项里，首先选中“标准”图标，然后点击表格图标 (2).参数设置： 单元格边距：单元格内容与单元格之间的间隔像素数值 单元格间距：每个单元格之间的间距,创 建 表 格,页眉：有四种模式：“无”、“左”、“顶部”、“两者”，这些表示标题在表格左 侧第1列、上侧第1行的每个单
3、元格中居中显示 标题：输入表格的标题 对齐标题：表示标题相对于表格的显示位置，有以下选项：“默认”、“顶部” “底部”、“左”、“右” 摘要：输入对表格的说明与注释，但该选项不会在页面中显示，只有在代 码视图中可以看到,创 建 表 格,3.在“布局”模式下创建表格 (1).创建方法如下： 在“插入”菜单中的“布局”选项里，选中“布局”图标 单击“布局表格”图标，光标变为十字形状，在文档窗口按住鼠标左键不 放，用户可以通过拖曳即可创建想要大小的表格，该种方式仅创建一个表 格，若要创建单元格，还须借助“绘制布局单元格”工具 单击“绘制布局单元格”图标，光标变为十字形状，在文档窗口按住鼠标左 键不放
4、，用户通过拖曳鼠标即可创建想要的单元格。该种方式不仅创建了一 个表格，而且还创建了一个单元格。,创 建 表 格,(2)“布局表格”与“绘制布局单元格”的区别 布局表格：是在页面的空白区域或其他布局表格内给制表格，也可以在自己 的单元格内部绘制表格 绘制布局单元格：在页面的空白区域或布局表格内绘制表格单元格，但它不 能在自己的单元格内部绘制表格 4. “标准”模式与“布局”模式创建表格的区别 “标准”模式不能用鼠标绘制表格，但其属性面板的设置功能齐全 “布局”模式下可以灵活拖曳鼠标绘制表格，但其属性面板的设置功能相对简单,设 置 表 格,1.概述由于创建表格有两种方法，因此设置表格属性也有两种模
5、式：在“标准”模式 下设置表格属性和在“布局”模式下设置表格属性。 2.在“标准”模式下设计表格属性在“标准”模式下创建表格后，用鼠标选中该表格，即可在其所对应属性面板 里进行表格属性的设置。 (1).设置可视化助理可视化助理是帮助设计者在设计表格时对表格外观整体把控。打开方法： 查看/可视化助理/表格宽度 查看/可视化助理/表格边框,设 置 表 格,(3).设置表格属性 表格ID：表格身份标识，通常是变量名 对齐：确定表格相对于同一段落中其他元素（如文本或图像）的显示位置。左对齐：沿其他元素的左侧对齐表格（同一段落中的文本在表格的右侧换行）右对齐：沿其他元素的右侧对齐表格（文本在表格的左侧换
6、行）居中对齐：将表格居中（文本显示在表格的上方和/或下方）缺省：浏览器应该使用其默认对齐方式 清除列宽（ ）和清除行高（ ）：从表格中删除所有明确指定的行高或列宽 将表格宽度转换成像素（ ）和将表格高度转换成像素（ ）：将表格中每列的宽度或高度设置为以像素为单位的当前宽度，同时还将整个表格设置为以像素为单位的当前宽度。,设 置 表 格,将表格宽度转换成百分比（ ）或将表格高度转换成百分比（ ）：将表格 中每列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度，同 时，还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度。注：若没有明确指定单元格间距和单元格边距的值，大多数浏
7、览器都按单 元格边距设置为1，单元格间距设置为2来显示表格。若要确保浏览器不显示 表格中的边距和间距，可将“单元格边距”和“单元格间距”设置为0。,设 置 表 格,(4).设置单元格、行和列属性 默认情况单元格左对齐，标题单元格为居中对齐 合并单元格：可将所选的单元格、行或列合并为一个单元格。只有选 中两 个或两上以上连续单元格时，才可以使用该按钮 拆分单元格：可以将一个单元格分成两个或更多单元格。注意一次只能拆 分一个单元格，若选择的单元格多于一个，则此按钮将禁用。 不换行：可以防止换行，从而使给定单元格的所有文本都在一行上。若启 用了“不换行”，则键入数据或将数据粘贴到单元格时单元格会加宽
8、来容纳所有 数据。通常，单元格在水平方向扩展以容纳单元格中最长的单词或最宽的图 像，然后根据需要在垂直方向进行扩展以容纳其他内容。 标题：可以将所选的单元格设置为表格标题单元格。默认情况下，表格标 题单元格的内容为粗体并且居中。,设 置 表 格,(5).调整表格、列和行的大小 .调整表格大小当选中表格或表格中有插入点时，Dreamweaver将在该表格的顶部或底部显 示表格宽度和表格标题菜单，可以通过以下三种方式调整表格大小： 若要在水平方向调整表格的大小，可拖动右边的选择柄 若要在垂直方向调整表格的大小，可拖动底部的选择柄 若要在两个方向调整表格的大小，可拖动右下角的选择柄 调整列和行的大小
9、可以在属性面板中或通过拖动列或行的边框来更改列宽或行高，也可在“代 码”“视图中直接在HTML代码中来更改单元格的宽度和高度。当用鼠标直接拖 动列时，更改的是仅是列宽度，其整个表格的宽度保持不变。 注：拖动鼠标调整一列的宽度，实际上两都在变化，若要更改某个列的宽度 并保持其他列的大小不变，可以先按住shift键，然后拖动列的边框,设 置 表 格,3.在“布局”模式下设计表格属性 (1).布局表格属性设置 固定：将表格设置为固定宽度 自动伸展：使表格最右边的列自动伸展，在布局完成之前让某个列自动伸 展可能会对表格布局产生无法预料的效果。为了防止列变的出乎意料的宽或 窄，在让某个列自动伸展之前，请
10、先创建完整的布局，并在列自动伸展时使 用间隔图像 高：指定表格的高度 清除行高：删除布局表格中所有单元格的显式高度设置。即使某些单元格 是空的，Dreamweaver也会在用户绘制单元格时指定显式单元格高度，以显 示用户的布局。因此，应该先将内容放置到布局单元格后再单击该按钮，否 则，空单元格将在垂直方方向收缩,设 置 表 格,使单元格高度一致：若布局中有固定宽度的单元格，则该选项使HTML代码 中的单元格宽度与它们在屏幕上的外观宽度匹配 删除所有间隔图像：删除布局表格中的间隔图像，该图像的作用是用来绘 制间距的透明图像。删除间隔图像可能导致表格中的某些列变得非常窄。通 常情况下，应该在适当的
11、位置保留间隔图像，除非每个列都包含其他内容可 以将该列保持在所需的宽度 删除嵌套：删除嵌套在另一个布局表格中的布局表格，而不丢失它的任何 内容,设 置 表 格,(2).单元格属性设置 选中单元格的方法： 单击该单元格的边缘 按住Ctrl键的同时单击该单元格中的任何位置 单元格属性参数设置如下： 固定：将单元格设置为固定宽度 自动伸展：使单元格自动伸展，可以为列指定一个特定的宽度或让它延伸 以填充浏览器窗口尽量大的部分，也可以使用间隔图像为列指定一个最小宽 度 高度：单元格的高度 背景颜色：布局单元格的背景颜色 不换行：禁止文字换行。当选择了此项后，布局单元格按需要加宽以适应 文本，而不是在新的
12、一行上继续该文本,添加表格内容,1.添加文本添加外部文本： 编辑/粘贴（ctrl+v） 编辑/选择性粘贴（ctrl+shift+v）快捷键的使用： Tab：移动到下一个单元格 Shift+Tab：移动到前一个单元格 注：若在表格最后一个单元格中使用Tab键表格将自动添加一行 2.插入图像 在“插入”菜单栏中单击“插入图像”按钮 插入/图像（Ctrl+Alt+I）,添加表格内容,3.导入表格数据 导入表格数据方法：插入/导入/表格数据 参数设置如下： 数据文件：要导入的文件名称 定界符：正在导入的文件中所使用的分隔符 表格宽度：指将创建的表格的宽度 匹配内容：使每个更足够宽并适应该列中的最长的文
13、本字符串 设置：以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分 比指定表格宽度 格式化首行：确定应用于表格首行的格式设置。从四个格式设置选项中进 行选择：无格式、粗体、斜体或加粗斜体,添加表格内容,4.导出表格数据 导出表格数据的方法：文件/导出/表格 具体参数设置如下： 定界符：指定应该使用哪个分隔符在导出的文件中隔开各项 换行符：由于不同的操作系统具有不同的指示文本结尾的方式，所以选项 是指将导出的文件在哪个操作系统中打开，如：Windows、Macintosh、UNIX,表格排序,排序方法：命令/排序表格 具体参数设置如下： 排序按：选择排序依据的列 顺序：在其下拉列表中有“
14、按字母排序”和“按数字排序”两个选项，是确定是 按字母排序还是按数字排序以及是升序（A到Z，小数字到大数字）还是降序 对列进行排序。 再按：选择作为第二排序依据的列 选项：有四个复选项：排序包含第1行、排序标题行、排序脚注行、完成排 序后所有行颜色保持不变,布局网页结构,1. 宽度设置Windows默认情况下，Internet Explorer浏览器滚动条的宽度为17像素， 其两边的活动窗口边框宽为1像素，Windows为了增加效果，会再有1像素的 阴影。因些，IE浏览器所占用显示器屏幕宽度是21像素。依据这个数值，设 计者可按显示器的分辨率来设置表格宽度。 2.百分比设计不管浏览者采用哪种分
15、辨率，当与我们设计的表格宽度不吻合，都会影响 页面的美观，特别是低分辨率下浏览高分辨率设计的网页。针对这种情况， 可以采取表格宽度百分比方式来设计。,操作与管理层,1.概述在布局网页时，除了表格之外还有层，层的技术在网页制作上能大大简化网 页的排版和布局。层可以方便地帮助网页元素进行精确的定位，并保证在显 示器的不同分辨率下不变形，最大限度地保留了作者的设计构思与排版定位。 层里放置的网页元素可是各种页面元素甚至是层，即实现层的嵌套。层可以相互重叠，可以改变重叠的次序；层也可以嵌套，被嵌套的子层将 继承父层的属性特征，如隐藏性、位置移动等。 2.创建一个新新层 (1).层标记 层的HTML标记
16、有、.前面的和 是被W3C组织公认的两个层标记，微软的IE和网影的Netscape Navigator浏览器都能识别。后面的和两个标记只能被网景的 Netscape Navigator识别。在Dreamweaver中，其默认标记是,操作与管理层,(2).创建层方法如下：在“插入”工具栏里的“布局”状态下，单击“绘制层”按钮，光标变成十字形状, 即可在当前“文档”窗口里绘制 插入/布局对象/层 3.选择层 方法如下： 用鼠标单击层的边框线 将光标定位到层内，若层内没有对象内容，按快捷键Ctrl+A即可选中当前 层，若层内有对象内容，第一次按快捷键Ctrl+A选中当前层内的所有对象内容 ，第二次按
17、快捷键Ctrl+A即可选中当前层 执行菜单命令“窗口/层”（F2)打开层面板，在该面板中单击选中层 注：若要选中多个层，按shift键单击即可。,操作与管理层,4.设置层属性 层属性参数设置如下： 层ID：用用指定一个名称，以便在“层”面板和JavaScript代码中标识层。层 ID只能使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等 特殊字符，并且每个层都必须有它自己惟一的ID。 左和上（左侧和顶部）：指定层的左上角相对于页面（若为嵌套，则为父 层）左上角的位置 宽和高：指定层的宽度和高度 Z轴：确定层的Z轴（即堆叠顺序）。在浏览器中，编号较大的层出现在编 号较小的层的前面。值可
18、以为正，也可以为负。当更改层的堆叠顺序时，使 用“层”面板要比输入特定的Z轴值更为简单。,操作与管理层,可见性：指定该层最初是否是可见的。 其下拉菜单中的选项功能如下： 默认（default）：不指定可见性属性 继承(inherit)：使用该层父级的可见性属性 可见（visible）：显示这些层的内容，而不管父级的值是什么 隐藏（hidden）：隐藏这些层的内容，而不管父级的值是什么 背景图像：指定层的背景图像 背景颜色：指定层的背景颜色。若将此选项留为空白，则可以指定透明的 背景 溢出：控制当前层的内容超过层的指定大小时如何在浏览器中显示层 可见性（visible）：指示在层中显示额外的内容
19、，实际上，该层会通过延 伸来容纳额外的内容,操作与管理层,隐藏(hidden)：指定不在浏览器中显示额外的内容 滚动(scroll)：指定浏览器应层上添加滚动条，而不管是否需要滚动条 自动(auto)：使浏览器仅在当前层的内容超过其边界时才显示层的滚动条 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐 标空间定义一个矩形（从层的左上角开始计算）。层经过“剪辑”后，只有指 定的矩形区域才是可见的 5.调整层的大小 (1).概述 层的大小的调整方法有两种：一种是直接拖动层上的控制符，另一种是在属 性面板中输入层大小的数值。前者适用于对层的大小控制不严格的情况，通 常做网页都采用这
20、种方法；后者适用于精确定制，可以准确地确定层的高度 与宽度。,操作与管理层,(2).直接拖动鼠标调整层的大小 方法如下：移动鼠标指针到层的控制符（即层的边框上出现的八个黑色小方框）上面， 当指针变成双向双向箭头时就可以拖动层的边框，改变层的大小 (3).利用属性面板精确定制层的大小方法如下：在属性面板的“宽”文本框中输入宽度值，在“高”文本框中输入高度值 6.嵌套层 (1).概述嵌套层是一个包含在另一个层中的层。嵌套层通常用于将层组织在一起。嵌 套层随父层一起移动，并且可以设置为继承其父级的可见性。嵌套层与层重 叠是有要质区别,操作与管理层,(2).建立一个嵌套层 方法如下： 在“插入”栏的“
21、布局”类别中单击“绘制层”按钮 再次单击“绘制层”并按住Alt键，在Layer1层中任意位置拖动鼠标，创建 一个层并命名为Layer2。若有需要，还可以继续创建层，层的嵌套不限定数 量 注：按快捷键F2调出层面板，从中可以看出层的嵌套结构,操作与管理层,(3).重叠层与嵌套层的区别层的重叠是指并列等级层之间的关系，两者是各自独立的，两者的属性 互不影响，甚至可以通过选中层面板上方的“防止重叠”功能防止层与层之间 的重叠；层的嵌套是属于上下级、长与幼的关系，子层的属性受制于父层， 某些属性还随着父层的变化而变化，如位置的移动，但父层的属性是不受子 层变化影响的。若想建立一个完全处于父层之外的子层
22、，先要在父层之中， 建好了子层，然后拖动子层到父层外面，但若父层设置了溢出选项为隐藏 （hidden）的话，子层将不可见。,操作与管理层,7.插入div标签进行布局 (1).概述采用div不仅可以使页面加载速度更快、保持整站视觉一致，而且，更重要的 是一个整站一旦采用div标签布局，下次改版时会大提高工作效率和成本开销 。但是，采用div标签布局页面，必须借助CSS样式表才能发挥得淋漓尽致。 单纯div标签无法布局复杂的网页结构。 (2).插入 div标签 方法如下： 插入/布局对象/div标签 在“插入”工具栏的“布局”下选择“插入标签”按钮，出现“插入div标签”对话框,操作与管理层,该对
23、话框中各选项功能介绍如下： 插入：在弹出式菜单中选择一个插入点，以指示要显示div标签的位置 类：是指若附加了样式表，则该样式表中定义的类将出现在列表中 ID：是指若附加了样式表，则该样式表中定义的ID将出现在列表中 新建CSS规则：单击会打开“新建CSS规则”对话框，并创建新的样式 注：div标签以一个框的形式出现在文档中，并带有占位符文本，并指针移到 边框的边缘上时，Dreamweaver会高亮显示该框。,层与表格的转换,1.概述层的应用大多数采用绝对定位，因为相对定位不容易控制。但若要设置网 页随显示器的分辨率而作相应的位移，需要设计程序，网页制作设计人员往 往因此要花费大量的时间。网页
24、中表格的相对定位相当容易，若要把层转换成表格，相对定位就不成 问题了。 2.层与表格的转换 方法如下：执行“修改/转换/层到表格”，打开“转换层为表格”对话框。,层与表格的转换,该对话框中选项功能介绍如下： 最精确：为每个层创建一个单元格，并附加保留层之间的空间所必需的任 何单元格。 最小：合并空白单元格：若层定位在指定数目的像素内，则层的边缘应对 齐，若选择此项，结果表格将包含较少的空行和空列，但可能与用户的布局 有所出入。 使用透明GIF：用透明的GIF填充表格的最后一行。这将确保该表格在所有 浏览器中以相同的列宽显示。当启用此选项后，不能通过拖动表来编辑结果 表。当禁用此选项后，结果表将不包含透明GIF，但在不同的浏览器中可能 会具有不同的列宽。 置于页面中央：将结果表放置在页面的中央。若禁用此项，面将在页面左 边缘开始。 注：层和表格的转换是一个可逆的过程。,
