单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,表格和层的使用,本章主要内容,学会使用表格和层,熟悉表格和层之间的转换,掌握设置表格和层的属性,了解“插入,DIV,标签”布局网页,表 格 的 作 用,1.,概述,表格由一行或多行组成，每行又由一个或多个单元格组成虽然,HTML,代码中,通常不明确指定列，但,Dreamweaver,允许操作列、行和单元格2.,作用,表格能准确地定位每一个页面对象的位置，一个好的,Web,设计者能通过它可,排版出一幅幅精美的,web,页面一般网页设计者的流程是首先用图像处理软,件（,PS,或,Fireworks),设计好一个整幅页面图像，然后将整幅图切割成许许多,多对象，最后，在,Dreamweaver,里用表格或层将切割的许许多多对象排版成,与整幅图像相吻合的一个页面，因些表格在页面布局起着举足轻重的作用创 建 表 格,1.,概述,在,Dreamweaver 8,中，创建表格有两种方式：,在“标准”模式下创建,在“布局”模式下创建,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,默认情况下，,Internet Explorer,浏览器滚动条的宽度为,17,像素，,其两边的活动窗口边框宽为,1,像素，,Windows,为了增加效果，会再有,1,像素的,阴影因些，,IE,浏览器所占用显示器屏幕宽度是,21,像素。
依据这个数值，设,计者可按显示器的分辨率来设置表格宽度2.,百分比设计,不管浏览者采用哪种分辨率，当与我们设计的表格宽度不吻合，都会影响,页面的美观，特别是低分辨率下浏览高分辨率设计的网页针对这种情况，,可以采取表格宽度百分比方式来设计操作与管理层,1.,概述,在布局网页时，除了表格之外还有层，层的技术在网页制作上能大大简化网,页的排版和布局层可以方便地帮助网页元素进行精确的定位，并保证在显,示器的不同分辨率下不变形，最大限度地保留了作者的设计构思与排版定位层里放置的网页元素可是各种页面元素甚至是层，即实现层的嵌套层可以相互重叠，可以改变重叠的次序；层也可以嵌套，被嵌套的子层将,继承父层的属性特征，如隐藏性、位置移动等2.,创建一个新新层,(1).,层标记,层的,HTML,标记有,、,、,、,.,前面的,和,是被,W3C,组织公认的两个层标记，微软的,IE,和网影的,Netscape,Navigator,浏览器都能识别后面的,和,两个标记只能被网景的,Netscape Navigator,识别在,Dreamweaver,中，其默认标记是,操作与管理层,(2).,创建层,方法如下：,在“插入”工具栏里的“布局”状态下，单击“绘制层”按钮，光标变成十字形状,即可在当前“文档”窗口里绘制,插入,/,布局对象,/,层,3.,选择层,方法如下：,用鼠标单击层的边框线,将光标定位到层内，若层内没有对象内容，按快捷键,Ctrl+A,即可选中当前,层，若层内有对象内容，第。