第5章 表格和层的使用

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