网页设计与制作课件第2章

第2章表格、层和框架的应用知识要点表格合理嵌套、合并、拆分

层的定位和排版

框架页面的规划

技能目标熟练掌握表格的建立、修改、嵌套

熟练掌握层的图文混排

熟练掌握本地虚拟熟练掌握框架组、框架属性的设置和框架中链接的目标显示窗口的建立

本章任务熟练使用表格实现网页的排版和布局，并且掌握表格的相关属性

使用层实现网页的排版，了解层和行为的关系

使用框架进行对网页进行排版和规划，了解框架的含义

关闭2.1表格的应用

2.1.1创建、编辑表格

2.1.2表格的修改嵌套

2.1.3用表格制作网页

2.2层的应用

2.2.1层的创建与设置

2.2.2制作下拉菜单

2.3框架的应用

2.3.1创建保存框架

2.3.2编辑框架

本章内容2.1.1创建、编辑表格2.1.1．

创建、编辑表格使用【插入】菜单或“插入”栏的“表格”按钮，创建一个1行2列的表格，最终效果如下图所示。返回下一页目标案例最终效果预览打开源文件步骤1：运行Dreamweaver8，执行【文件】→【新建】菜单命令。在“新建文档”选择“基本页”，单击“创建”按钮，新建一个空白网页。

步骤2：在“插入”栏中单击按钮或执行【插入】→【表格】菜单命令。系统弹出“表格”对话框，在对话框中设置表格为1行2列，宽为700像素、边框为1像素。单击“确定”按钮生成表格。步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为#FF0000。

插入表格小提示：（1）拖拽“常用”插入栏中的表格图标到需要的位置，可以创建表格。（2）按【Ctrl+Alt+T】快捷组合键，也可以创建表格。操作步骤返回上一页下一页知识点评返回步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景颜色为#00CC00。步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网页文件，预览网页按【F12】键。操作步骤上一页下一页知识点评返回（1）在系统弹出“表格”对话框中，若设置边框粗细为0，浏览页面时将不会显示表格的边框。（2）在“表格”对话框中，表格宽度单位有“像素”和“百分比”两种。当设置为“像素”后，浏览网页时表格不会因为浏览器大小的变化而变化；当设置为“百分比”后，浏览网页时表格会因为浏览器大小的变化而变化。（3）在给单元格填充背景颜色时，背景颜色值可以使用十六进制数或颜色的英文单词。上一页2.1.2表格的修改嵌套

2.1.2．表格的修改嵌套

在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修改，实例最终效果如下图所示。返回下一页目标案例最终效果预览打开源文件步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为450，高为270的表格，表格的其他各项均设置为0。

步骤2：把鼠标移到第二个单元格中，再嵌入一个2行3列，宽为335像素，高为270像素的表格。步骤3：首先选中嵌入表格的第二行单元格，然后在展开的“属性”面板中单击合并单元格按钮或右击执行【表格】→【合并单元格】快捷菜单命令，将第二行单元格合并。如果要拆分单元格，则可以用“合并单元格”按钮右边的按钮。步骤4：单击第一个表格左边的单元格，在“插入”面板“常用”选项卡中单击按钮，然后选择images文件夹中的“1.gif”，单击“确定”按钮。如图2‑10所示在单元格中插入一张图像。步骤5：用步骤4的方法，在右边上下单元格内也分别插入images文件夹中的“4.gif、5.gif、6.gif、7.gif”图像。一个符合要求的页面在表格的帮助下做好了，执行【文件】→【保存】菜单命令，按【F12】键预览最终效果。操作步骤返回上一页下一页知识点评（1）对表格的行高和列宽进行调整时，除了可以在“属性”面板上设置外，还可以利用鼠标进行调整。（2）“属性”面板不仅可以调整表格的宽和高，同时也可以修改表格的行数、列数、填充、对齐、背景颜色和背景图像等各项的值。（3）在对表格嵌套时，要把鼠标放到想要嵌套的单元格中。通过上面的操作，大家对表格应该有了一个初步的认识。还有一点，对表格操作和对单元格操作的时候，出现的属性面板是不同的。下面来看看这些属性面板的区别。要出现表格的属性面板必须先选中表格，方法上面已经提过了。如下图所示。返回上一页下一页

下面是有关表格属性的各参数含义说明。

『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉列表文本框中为表格命名。

『行』和『列』用于设置表格的行数和列数。

『宽』和『高』用于设置表格的宽度和高度。

『填充』用于设定单元格中内容与边框之间的距离，默认值为2。

『间距』用于设定单元格之间的距离，默认值为2。

『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对齐”“居中对齐”和“右对齐”。

『边框』用于设定表格边框的宽度。知识点评返回上一页下一页『背景颜色』用于设置表格的背景颜色。『边框颜色』用于设置整个表格的格边颜色。『背景图像』用于设置表格的背景图像。『类』用语设定表格的CSS样式表。和按钮：用于清除行高和列宽。和按钮：根据当前值，把列宽转换为像素值或百分比。和按钮：根据当前值，把行高转换为像素值或百分比。选中了单元格之后属性面板就发生变化了。选择行或者列都属于选中单元格。如下图所示。知识点评返回上一页下一页单元格“属性”面板中各参数含义如下。『水平』用于设置单元格中对象的对齐方式。包含4个选项：“默认”“左对齐”“居中对齐”和“右对齐”。『垂直』用于设置单元格中对象的对齐方式。包含5个选项：“默认”“顶端”“居中”“底部”和“基线”。『宽』和『高』用于设置单元格的宽度和高度。『不换行』表示单元格的宽度将随文字长度的增加而不断增加。『标题』用于将当前单元格设置为标题行。『背景』用于设置图像文件，并可以设置图像的超级链接。对表格操作的几种常用方式。『嵌套』将一个新的表插入到原始表的单元格里。『合并』将选中的连续单元格合并成为1个单元格。『分割』将一个单元格分割成若干单元格。知识点评返回上一页下一页『水平对齐方式』包括“左对齐”“居中对齐”和“右对齐”3种。『垂直对齐方式』包括“顶对齐”“居中对齐”“底对齐”和“基线对齐”4种。表格还可以增加、删除行或列。在一个单元格中单击鼠标右键，在快捷菜单中执行【表格】→【插入行或列】命令，系统会弹出如下图所示的对话框，在对话框里填入数据即可。

最后要说的是选中表格中各种元素的方法。『选中一行』把光标移到该行的最左方单元格的左侧，光标会变成箭头状。单击就可以选中一行。

『选中一列』把光标移到该列的最上方单元格的上面，光标会变成箭头状，然后单击可以选中一列。知识点评返回上一页下一页『选中整张表格』把光标移到表格的左上角、右边框或下边框线上。单击即可选中整个表格。选中的表格会在周围出现一个黑框。

『选中单元格』单元格可以同时选中多个。（1）选择连续的单元格：光标先选中第一个单元格，按【Shift】键不放，再选取最后一个单元格。（2）选不连续的单元格：按住【Ctrl】键，选取所需要的单元格即可。上一页返回知识点评

对网页进行操作时，多使用“插入”栏和“属性”面板，那样可以提高制作网站的效率。2.1.3用表格制作网页

返回使用表格制作页面，如下图所示。目标案例最终效果预览下一页打开源文件操作步骤步骤1：运行Dreamweaver8，建立站点。步骤2：新建主页（index.html），在“常用”插入栏中单击按钮或执行【插入】→【表格】菜单命令。系统弹出“表格”对话框，在对话框中输入4行2列。单击“确定”按钮插入表格，适当调整表格行高。步骤3：选中表格的第1行，在“属性”面板中单击按钮，合并单元格。步骤4：将鼠标移到第一行单元格中，在“属性”面板中，单击“背景”文本框右边的按钮，弹出“选择文件”对话框，在该对话框中选择背景图像，单击“确定”按钮。步骤5：在第一行内嵌套1个1行9列，宽为760像素，高为35像素的表格，利用“属性”面板调整各列列宽，并在每个单元格中输入相关内容。步骤6：在第二行嵌套一个5行2列的表，并调整表格的行高和列宽。返回上一页下一页操作步骤步骤7：将嵌入表的第1行合并，插入images文件夹中的“left-top.jpg”图像；第2、3、4、5行的第一单元格插入images文件夹中的“left-biao.jpg”图像，其他单元格输入相关文字内容。步骤8：分别将“images”文件夹中的图像“right-t1.jpg”“left-t1.jpg”“right-t2.jpg”和“Bottom.jpg”插入到表格。步骤9：保存网页index.html文件，按【F12】浏览网页。如图2‑15所示

。返回上一页下一页

通过上面对网页制作的讲解，大家对表格的应用应有了更深的认识。在制作网页时，除了要掌握表格的基本操作外，还要掌握网页中文字、图像和颜色的协调。表格在网页的布局应用中有标准视图与布局视图两种，初学者一般在标准视图下进行网页排版和制作。

布局视图适合不规则表格，例如需要不断重复合并单元格和拆分单元格的页面。该视图下不仅可以任意绘制表格，还可以任意拖动单元格，更改单元格位置。上一页返回

（1）在制作网页时，最外层表格的宽度要用“像素”来定制。那样网页文档不会随着浏览器分辨率的改变而改变。（2）表格的嵌套最多不要超过3层，否则会加重浏览器和服务器的负担，使网页打开时间很慢。知识点评2.2.1层的创建与设置

返回创建一个层，并在层中插入一张图像。关键是掌握插入层的方法和过程，根据图像调整层的大小。最终效果如下图所示。目标案例最终效果预览下一页打开源文件操作步骤步骤1：启动Dreamweaver8，建立虚拟站点，新建一个名为index.html的网页。步骤2：将光标插入到页面中，执行【插入】→【布局对象】→【层】菜单命令，在网页中插入一个层。插入层还有两种方法：一是将“插入”面板上的按钮拽到文档窗口，松开鼠标后就在文档窗口中插入了一个层；二是单击“插入”面板上的按钮，将鼠标移至文档窗口中，这时光标变为十字型，这时按住鼠标左键并拖拽，就会画出一个自定义大小的层。

单击“布局”插入栏中的按钮，按住【Ctrl】键，单击鼠标左键并拖拽，可以绘制多个层。返回上一页下一页操作步骤步骤3：将光标移到新插入的层内，选择【插入】→【图像】命令，弹出“选择图像源文件”对话框。步骤4：在“选择图像源文件”对话框中选择图像文件“merrychristmas.jpg”，单击“确定”按钮，插入图像。步骤5：单击层的边缘线选中层，将层拖动到适当的位置。步骤6：保存并按【F12】预览最终效果。返回上一页下一页知识点评1．层的属性确定层处于选定状态时，在窗口下方就会显示层的“属性”面板，如下图所示。『层编号』用于给层命名。『左』、『上』在文本框中输入数值，改变层相对于浏览器左上角的位置。『宽』、『高』在文本框中输入数值，改变层的大小。『Z轴』设置层的显示次序，数值越大，越在前面显示。『可见性』指层的可见性，包括“default”（默认）、“inherit”（继承父层的该属性）、“visible”（可见）和“hidden”（隐藏）４个选项。『背景图像』设置层的背景图像。返回上一页下一页知识点评『背景颜色』设置层的背景颜色。『类』设置层的CSS样式。『溢出』（当“标签”设置为DIV或PAN时才出现）用来设置层内容超过层大小时的显示方式，包括如下４个选项。Visible：按照内容的尺寸向右、向下扩大层，以显示层的全部内容。Hidden：只显示层尺寸内的内容。Scroll：不改变大小，增加滚动条。用户可以通过滚动来浏览整个层。Auto：自动选择，只在层不够大时才出现滚动条。『剪辑』用来指定层的哪部分是可见的，输入数值是距离层的４个边界的距离。

2．层面板执行菜单栏中的【窗口】→【层】命令或直接按【F2】键打开“层”面板，如图2‑32所示。

返回上一页下一页知识点评修改可见属性。禁止层重叠。修改层的Ｚ轴顺序。将一个层嵌套另一个层。3．层的移动要想精确定位层，就需要移动层，层是可以重叠的。只要不勾选“层”面板中的“防止重叠”选项，层就可以不受限制地被移动。下面介绍移动层的两种方法。（1）选定层后，鼠标靠近缩放手柄时，出现十字箭头，按住鼠标左键拖动鼠标，层将跟着鼠标的移动而移动。（2）选定层后，按键盘上的4个方向键来移动层，每按一次方向键，将使层向相应的方向移动一个像素的距离；按住【Shift】键，然后再按方向键，每按一次将使层移动10个像素的距离。返回上一页下一页

在“层”面板中可以实现以下功能。知识点评返回4．层的对齐使用层的对齐功能，可以使两个或两个以上的层按照某一边界对齐，具体的实现方法是执行菜单栏中【修改】→【排列顺序】命令，在子菜单中会有4种对齐方式，包括：

【左对齐】以最后选定层的左边线为标准，对齐排列层。

【右对齐】以最后选定层的右边线为标准，对齐排列层。

【对齐上缘】以最后选定层的顶边为标准，对齐排列层。

【对齐下缘】以最后选定层的底边为标准，对齐排列层。上一页2.2.2制作下拉菜单

下拉菜单是网页上最常见的效果之一，一个新颖的下拉菜单会为网页增色不少。它不仅使网页的布局简洁有序，而且节省了网页版面空间。下面利用层来制作下拉菜单，效果如下图所示。

返回下一页下拉菜单目标案例最终效果预览打开源文件操作步骤步骤1：打开网页文档，执行【插入】→【布局对象】→【层】菜单命令，插入层Layer1。在“属性”面板中，将“左”、“上”、“宽”、“高”分别设置为41px、307px、249px、20px，“Z轴”设置为1。步骤2：将光标置于层Layer1中，执行【插入】→【表格】菜单命令，插入一个1行1列的表格，在单元格中输入相应的文字。步骤3：单击图像“公司简介”，然后执行【窗口】→【行为】菜单命令，打开“行为”面板，在“行为”面板中单击按钮，在弹出的下拉菜单中执行【显示】→【隐藏层】命令。步骤4：单击“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，在该对话框中选中Layer1,然后单击“显示”按钮。步骤5：返回到“行为”面板中，在“事件”下拉列表框中选择onMouseOver选项。

返回上一页下一页操作步骤步骤6：选中层Layer1，在“属性”面板的“可见性”下拉列表框中选择hidden选项，隐藏Layer1。步骤7：执行【插入】→【布局对象】→【层】菜单命令，插入层Layer2。在“属性”面板中，将“左”、“上”、“宽”、“高”分别设置为41px、307px、249px、20px，“Z轴”设置为1，插入一个1行1列的表格，然后在Layer2中输入文字。步骤8：单击图像“新闻动态”，然后执行【窗口】→【行为】菜单命令，打开“行为面板”，在“行为”面板中单击按钮，在弹出的下拉菜单中执行【显示】→【隐藏层】命令，弹出“显示-隐藏层”对话框。步骤9：在该对话框中选中Layer1，单击“隐藏”按钮，再选中Layer2，单击“显示”按钮，然后单击“确定”按钮，返回“行为”面板，并在“事件”下拉列表框中选择onMouseOver选项。返回上一页下一页操作步骤步骤10：执行【窗口】→【层】菜单命令，打开“层”面板，在层Layer2前单击，出现图标，隐藏层layer2。步骤11：选中图像“公司简介”，在行为面板中右击“显示-隐藏层”，在弹出的快捷菜单中选择【编辑行为】命令。步骤12：在弹出的“显示-隐藏层”对话框中，选中层Layer2，然后单击“隐藏”按钮，设置当鼠标移动到该图像时，隐藏层layer2。步骤13：用步骤1到步骤12的方法可以继续插入其他层，在浏览器中预览。返回上一页下一页步骤1：单击【窗口】→【层】命令，打开“层”面板，如图所示。步骤2：单击“层”面板中的按钮，在“层”面板的左边显示图标时，表示层为可见。步骤3：单击“层”面板中的按钮，在“层”面板的左边显示图标时，表示层为隐藏。这里的可见和“层”属性面板中“可见性”下拉列表中的visible选项是对应的，隐藏和hidden选项是对应的。1．改变层的可见性。

层中可以包含所有的网页元素。显示或隐藏层的属性称为可见性，该属性经常被用在制作动画的过程中，因此掌握它的设置方法是非常重要的。层的可见性可以在“层”面板中设置。下面讲述在“层”面板中设置层的可见性的方法，具体操作步骤如下。知识点评返回上一页下一页在层面板中设置层隐藏2．嵌套层 嵌套层是指一个层创建于另一个层中，嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以继承其父层的可见性。若要绘制嵌套层，请执行以下操作。步骤1：执行【插入】→【布局对象】→【层】菜单命令，在页面中插入一个层

。步骤2：将光标置于层内，执行【插入】→【布局对象】→【层】菜单命令，即可在当前光标位置处插入一个嵌套层

。上一页返回

在不同的浏览器中，嵌套层的外观可能会有所不同。当创建嵌套层时，请在设计过程中频繁地检查它们在不同浏览器中的外观。嵌套层之间还存在着继承关系。继承的作用就是可以使子层的可见性永远和父层保持一致以及保持子层与父层的相对位置不变，这在以后要学习的动态网页中有很大作用，有很多绚丽的动态效果是通过Javascript控制层的可见性及位置变化来实现的。知识点评

将创建一个框架，并向框架中添加内容，然后保存。最终效果如下图所示。目标案例最终效果预览2.3.1创建保存框架

返回下一页打开源文件操作步骤步骤1：执行菜单栏中的【文件】→【新建】命令，弹出“新建文档”对话框，然后单击“常规”选项卡，在左侧的“类别”列表中选择“框架集”类别选项，在“框架集”列表中选择“上方固定，左侧嵌套”的框架集选项

。步骤2：单击“创建”按钮，即可创建一个空白的网页框架

。步骤3：将光标放到顶框架中，执行【修改】→【页面属性】菜单命令，系统弹出“页面属性”对话框，将“左边距”“右边距”“上边距”和“下边距”设置为0像素

。步骤4：单击“确定”按钮，在顶端框架中插入一个1行3列的表格，然后在第一个单元格中插入图像“page_1.gif”，在第二个单元格内插入图像“page_2.gif”，在第三个单元格内插入图像“page_3.gif”，选中整个表格设置背景图像为“page_bg1.gif”，拖动文档窗口的边框，使图像刚好能够全部显示

。返回上一页下一页步骤5：将光标置于左框架内，设置好页面属性后执行菜单栏中的【文件】→【在框架中打开】命令，弹出“选择HTML文件”对话框

。步骤6:单击“确定”按钮，打开文档，然后拖动框架边线,使内容刚好能够全部显示

。步骤7：将光标放在右侧框架内，按照步骤5中相同的步骤，打开文档“main.html”

。步骤8：执行菜单栏中的【文件】→【保存全部】命令，整个框架边框的内侧出现一个阴影框，并弹出“另存为”对话框

。步骤9：因为阴影框出现在整个框架集边框的内侧，所以该对话框中需要输入的是框架集的文件名，输入文件名“index.html”后单击“保存”按钮。

操作步骤

每个框架的内部都是一个文档，可以直接往里面添加内容，也可以在框架内打开已经存在的文档。下面两步直接在左框架和右框架内分别导入已经建立好的left.htm和main.htm。返回上一页下一页操作步骤步骤10：接着弹出第二个“另存为”对话框,询问顶框架的文件名，同时顶框架的边框内侧出现阴影框,单击“保存”按钮,将顶框架保存为“top.html”。步骤11：由于其他的框架页中所打开的都是已经建好的文档，因此系统不提示另外命名，而是直接将原文档保存。按【F12】键预览最终效果

。返回上一页下一页（1）每一个框架都包含一个文档，因此一个框架组会包含多个文件。在保存文件的时候，不能只简单的保存一个文档，而要将整个网页文档都保存下来。（2）还可以用以下方法插入框架。上一页返回

执行【插入】→【HTML】→【框架】菜单命令，在【框架】子菜单中选择需要的框架类型。将插入栏中的“常用”面板切换到“布局”面板，在“布局”面板中单击按钮，在弹出的下拉菜单中选择需要的框架类型。知识点评接上例选择框架和框架集，并对其属性进行设置修改。效果如下图所示。2.3.2编辑框架

返回下一页目标案例最终效果预览打开源文件操作步骤步骤1：按住【Alt】键单击左框架将其选中，在“属性”面板中将显示该框架的属性参数，同时所选的框架的边框内侧会出现虚线

。步骤2：选择框架也可执行【窗口】→【框架】菜单命令，打开“框架”面板，在面板中单击要选择的框架，同时所选的框架的边框内侧会出现虚线

。步骤3：在“属性”面板中设置左框架的各属性参数，在“边框”和“滚动”下拉列表框中选择“否”选项，框架的边框将被隐藏，选中“不能调整大小”复选框

。步骤4：选中顶框架，用步骤2的方法，将顶框架“属性”面板中的“边框”和“滚动”下拉列表框都设置为“否”选项，并选中“不能调整大小”复选框

。步骤5：右框架内的内容较多，是内容的主要显示区域，信息时多时少。将右框架“属性”面板中的“滚动”下拉列表框设置为“自动”选