网页布局.docx

网页布局.docx

《网页布局.docx》由会员分享，可在线阅读，更多相关《网页布局.docx（11页珍藏版）》请在冰豆网上搜索。

网页布局

第六章网页布局

[目的要求]

1．掌握表格的基本操作

2．熟练并掌握利用表格布局页面的方法

3．掌握利用框架布局页面的方法

[课时安排]

本章总教学课时为4节，其中理论课时2节，上机课时2节。

[教学手段]

使用计算机多媒体设备进行教学，使用计算机设备进行实践训练。

6.1表格基本操作

6.1.1插入表格

如要在网页中插入表格，需执行以下操作：

1.在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。

如果文档不包含任何内容，则只能将插入点设置在文档的开头。

2.单击【插入记录】|【表格】命令，或单击“插入”栏中的【常用】|【表格】，弹出“插入表格”对话框。

6.1.2选取表格和单元格

1．选择整个表格

2．选择单个或多个行或列

3．选择单个单元格

4．选择一行或矩形的单元格块

5．选择不相邻的单元格

6.1.3设置表格和单元格的属性

1．设置表格的属性

2．设置单元格的属性

6.1.4表格的编辑

1．拆分和合并单元格

2．添加、删除行和列

3．调整表格、列和行的大小

（1）调整表格大小

（2）在不改变表格宽度的情况下更改列宽

（3）在不改变其它列大小的情况下更改列宽

（4）清除表格中所有设置的宽度和高度

（5）启用或禁用表格和列的宽度和菜单

6.1.4表格的嵌套

1．单击现有表格中的一个单元格。

2．选择【插入】|【表格】，设置“表格”选项，然后单击【确定】。

6.1.5扩展表格模式

1．切换到扩展表格模式

2．切换出扩展表格模式

6.2利用表格对页面进行布局

6.2.1关于布局模式

创建页布局的一种常用的方法是使用HTML表格对元素进行定位。

最初创建表格是为了显示表格式数据，而不是用于对网页进行布局；为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。

在“布局”模式中，可以在添加内容前使用布局单元格和表格来对页面进行布局。

可以在一个布局表格中使用多个布局单元格对页进行布局，这是进行网页布局最常用的方法，您也可以使用多个单独的布局表格进行更复杂的布局。

还可以通过将一个新的布局表格放置在现有的布局表格中进行布局表格嵌套。

6.2.2从标准模式切换到布局模式

在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式。

如果在“布局”模式中创建布局表格，则在向表格中添加内容或对表格进行编辑之前最好切换回“标准”模式。

1．切换到布局模式

2．切换出布局模式

6.2.3绘制布局表格和布局单元格

1．创建布局单元格

2．绘制布局表格

6.2.4将内容添加到布局单元格中

1．将文本添加到布局单元格

2．将图像添加到布局单元格

6.2.5设置布局单元格和表格的格式

1．设置布局单元格的格式

2．设置布局表格属性

6.3用APDiv布局网页

6.3.1关于AP元素及AP元素面板

1．关于AP元素

AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。

所有AP元素都将在“AP元素”面板中显示。

AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。

可以使用AP元素来设计页面的布局。

可以将AP元素放置到其它AP元素的前后，隐藏某些AP元素而显示其它AP元素，或者在屏幕上移动AP元素。

2．AP元素面板

“AP元素”面板用来管理文档中的AP元素。

如图6-34所示。

使用“AP元素”面板可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多个AP元素。

图6-34“AP元素”面板

Dreamweaver使用div标签创建AP元素。

当使用“绘制APDiv”工具绘制AP元素时，Dreamweaver在文档中插入一个div标签，并为该div指定一个ID值，默认情况下第一个div指定apDiv1，第二个div分配apDiv2，依此类推。

然后，可以使用“AP元素”面板或属性检查器将APDiv重新命名。

6.3.2APDiv的创建

1．创建APDiv

2．创建嵌套APDiv

嵌套APDiv就是在一个APDiv中创建另一APDiv。

嵌套通常用于将APDiv组合在一起。

嵌套APDiv随其父APDiv一起移动，并且可以设置为继承其父级的可见性。

创建嵌套APDiv的方法如下：

（1）绘制嵌套的APDiv

（2）插入嵌套的APDiv

（3）使用AP元素面板将现有AP元素嵌套在另一个AP元素中

6.3.3APDiv的编辑

1．选择AP元素

（1）在AP元素面板中选择AP元素

（2）在文档窗口中选择AP元素

（3）选择多个AP元素

2．移动AP元素

3．修改可见性

（1）单击【窗口】|【AP元素】，打开“AP元素”面板。

（2）在AP元素的眼形图标列内单击可以更改其可见性。

（3）如果要一次改变所有AP元素的可见性，可以单击眼睛列上端的眼睛图标。

4．修改堆叠顺序

5．插入对象

6.3.4AP元素属性设置

当选择一个AP元素时，属性检查器将显示AP元素的属性。

●CSS-P元素：

为选定的AP元素指定一个ID。

每个AP元素都必须有各自的唯一ID，此ID用于在“AP元素”面板和JavaScript代码中标识AP元素。

●左和上：

指定AP元素的左上角相对于页面左上角的位置。

如果嵌套，则指定AP元素的左上角相对于父AP元素左上角的位置。

默认单位为“像素”。

●宽和高：

指定AP元素的宽度和高度。

默认单位为“像素”。

●Z轴：

确定AP元素的Z轴或堆叠顺序。

在浏览器中，编号较大的AP元素出现在编号较小的AP元素的前面。

值可以为正，也可以为负。

●可见性：

指定AP元素最初是否是可见的。

包括以下几个选项：

“默认”：

不指定可见性属性。

默认为“继承”。

“继承”：

将使用AP元素的父级的可见性属性。

“可见”：

将显示AP元素的内容，而与父级的值无关。

“隐藏”：

将隐藏AP元素的内容，而与父级的值无关。

●背景图像：

指定AP元素的背景图像。

●背景颜色：

指定AP元素的背景颜色。

●类：

指定用于设置AP元素的样式的CSS类。

●溢出：

控制当AP元素的内容超过AP元素的指定大小时如何在浏览器中显示AP元素。

“可见”：

AP元素会通过延伸来容纳额外的内容。

“隐藏”：

指定在浏览器中不显示额外的内容。

“滚动”：

指定浏览器应在AP元素上添加滚动条，而不管是否需要滚动条。

“自动”：

当AP元素的内容超过其边界时才显示滚动条。

●剪辑：

定义AP元素的可见区域。

指定左、上、右和下坐标以在AP元素的坐标空间中定义一个矩形，单位为“像素”。

AP元素将经过“裁剪”以使得只有指定的矩形区域才是可见的。

6.3.5将AP元素与表格相互转换

1．将AP元素转换为表格

2．将表格转换为APDiv

6.4利用框架布局网页

6.4.1插入框架集

在熟悉框架集的操作之前，首先要掌握插入框架集地方法。

方法1：

在DreamwaverCS3中，选择【文件】|【新建】命令，弹出“新建文档”对话框，在“常规”选项卡内选择“框架集”选项，在右侧的“框架集”列表框内选择其中的一种。

单击“创建”按钮，便可以新建一个框架页。

方法2：

新建一个基本页，选择“插入”面板中的“布局”选项，单击

之后的箭头，在弹出的菜单中可以看到预定义的框架集，选择其中一种，便可创建一个框架集网页。

6.4.2框架集操作

1．拆分框架

2．删除框架

拖动框架的边框可以调整框架的尺寸，如果拖动框架边框到父框架的边框上，可删除框架。

3．调整框架大小

4．选择框架或框架集

5．保存框架

6.4.3框架集设置

当选中框架集时，有关框架集的属性就会出现在“属性”面板中，如图6-50所示，可以通过设置“属性”面板，完成对框架集的设置。

图6-50框架集“属性”面板

●边框宽度：

用来设置整个框架集的边框宽度，以“像素”为单位。

●边框颜色：

用来设置整个框架集的边框颜色。

●边框：

用来设置框架是否有边框，其下拉列表中包括“是”、“否”、“默认”3个选项。

●行和列：

若拆分的形式是上下型，则显示“行”项的值，若拆分的形式是左右型，则显示“列”项的值。

6.4.4框架设置

1．网页设置

网页设置的主要操作就是向框架中插入网页，当网页的整体布局设计完成后，就可以在框架中插入网页了，这些被插入的网页可以是空白的，也可以是事先准备好的网页文件，实际上当创建一个框架集文件时，就已经创建了所对应框架的空白网页文件。

插入网页，先要选中某框架，可以利用“框架”面板选择某框架，方法是直接用鼠标单击要选取的框架，被选中框架的四周以黑色线条显示，如图6-51所示。

向各个框架中插入网页的具体步骤如下：

（1）在“框架”面板中将命名为topFrame的框架选中，在“属性”面板中的“源文件”选项，选择要插入的网页文件，如图6-52所示。

（2）使用同样的方法向命名为leftFrame、mainFrame的框架中分别插入相应的文件。

图6-51“框架”面板

图6-52选择源文件

2．目标框架设置

使用框架的一个重要目的就是在不同的框架中显示不同的页面，下面就介绍通过链接为框架指定显示的页面。

具体步骤如下：

（1）选择一个对象，为该对象创建超链接。

（2）选择链接的页面后，单击“属性”面板中的“目标”下拉列表框，如图6-53所示。

图6-53“目标”下拉列表框

其中的前4项是由DreamwaverCS3给出的，后面的选项则是当前页面所包含的框架名，选择不同的框架名可以使链接的页面在不同的框架中打开。

6.5框架应用实例

制作一个使用框架排版的网页，页面一共由三部分组成：

上方的网站标志区、左边的导航区及右边的内容区。

在浏览网页时，单击左边区域的某个文件链接，则对应的链接内容就显示在右边区域。

自始至终，上方的网站标志和左边的导航仍然保留在屏幕上，实例效果如图6-54所示。

图6-54框架应用实例效果图

准备工作：

确定应用“上方及左侧嵌套”结构；准备链接的子页面。

制作步骤：

（1）启动DreamwaverCS3，选择【文件】|【新建】命令，打开如图6-55所示的“新建文档”对话框。

选择【示例中的页】|【框架集】|【上方固定，左侧嵌套】，然后点击【创建】按钮。

（2）选择【窗口】|【框架】命令或按【Shift+F2】组合键，打开“框架”面板，如图6-57所示的框架面板。

在文档中出现三个区域的框架集，顶部框架的名称为“topFrame”，左侧框架的名称为“leftFrame”，主框架的名称为“mainframe”。

（3）选择并设置框架集

（４）保存框架文件

选择【文件】|【保存全部】命令，保存框架和框架集。

（５）制作上方框架页面

（6）制作左边框架页面

（7）制作主框架页面

（8）制作导航文字和主框架之间的链接

（9）保存并预览页面

6.6嵌入式框架及其应用

6.6.1嵌入式框架基本操作

如果在网页布局中使用嵌入式框架，首先要确定插入嵌入式框架的位置，然后执行如下的操作方法即可完成：

在DreamwaverCS3中，点击【插入记录】|【标签】，依次展开【标记语言标签】|【HTML标签】|【页元素】，点击【常规】，选中右侧的【iframe】，如图6-65所示。

点击【插入】，弹出“标签编辑器”对话框，如图6-66所示。

图6-65标签选择器

图6-66标签选择器-iframe

●源：

插入嵌入框架内显示源文件的路径及文件。

●名称：

嵌入式框架的名称。

●宽度：

嵌入式框架的宽度。

●高度：

嵌入式框架的高度。

●边距宽度：

嵌入内容与框架之间的左右距离。

●边距高度：

嵌入内容与框架之间的上下距离。

●对齐：

包含“顶端”、“底部”、“居中”、“左对齐”、“右对齐”。

●滚动：

当内容超出框架时是否需要滚动条。

默认为“自动”。

●显示边框：

显示嵌入式框架边框。

默认为“显示边框”。

6.6.2嵌入式框架应用实例

下面我们就以一个实例来展示嵌入式框架在网页布局中的应用。

1．选择【文件】|【新建】，选择【空白页】，单击【创建】按钮，即可看到新建空白页面。

2．按Alt+F6组合键，切换到布局模式。

3．单击

按钮，在页面编辑区从左上方向右下方拖动至适当位置松开。

4．在下方的“属性面板”，设置表格的属性，宽为“776”，高为“600”，边框为“1”，边框颜色为“#FF9933”，对齐方式为“居中对齐”。

5．利用同样的方法，在刚才绘制的布局表格内嵌套一个宽为“776”，高度为“200”的表格，对齐方式为“顶端对齐”，并插入已准备好的背景图片“15.jpg”。

单击“布局”模式下的“标准”按钮，切换到标准模式。

单击

按钮，在插入的背景图片上绘制层（APDiv），设置层的属性，层为可见，并向层内添加文字“网页设计与制作教程”，设置层内文字大小为“36px”，字体为“宋体”，颜色为“#FF9933”。

6．按Alt+F6组合键，切换到布局模式，将其余部分利用布局表格绘制出如图6-70所示。

7．将插入点停在左边单元格内，设置单元格背景颜色为“#3399FF”；并插入一个9行1列的表格，表格宽为“200px”，调整高度，设置表格背景色为“#FFFFFF”，设置每一个单元格背景颜色为“#3399FF”，并在每一个单元格内填充相应文字；同样方法，设置最下面一行的背景颜色为“#3399FF”，输入文字。

8．将插入点放在右侧白色编辑区要插入嵌入式框架的位置。

9．执行【插入记录】|【标签】，依次展开【标记语言标签】|【HTML标签】|【页元素】，点击【常规】，选中右侧的【iframe】，如图6-65所示。

点击【插入】，弹出“标签编辑器”对话框，如图6-66所示。

10．输入源文件的路径和名称（62.html）。

框架名称为“main”（本例），宽度为“562”（本例），高度为“440”（本例），对齐方式为“顶端”，单击【确定】按钮。

可以在“代码”视图下看到如下代码：

11．按F12预览，可以看到如图6-63所示的效果图。

12．设置导航条中“网页设计与制作”与已制作好的内容页面链接。

13．在“属性”面板的“目标”文本框中输入嵌入式框架名称，对于本例来说，即“main”。

14．按照12、13的方法，可以完成其它导航内容的链接，并显示在嵌入式框架内。

本章小结

本章首先介绍了表格、层和框架的基本知识和基础操作，并详细讲解了对表格、层和框架进行设置的方法；通过实例讲解了表格、层、框架以及嵌入式框架布局页面的方法。

相信大家通过框架和表格的应用，一定能设计制作出结构合理、用户使用方便的网页。

思考与练习

一．简答题

1．在网页设计中，表格的作用是什么？

2．描述框架和框架集的区别？

3．简述框架保存的方法。

二．操作题

1．使用层制作一个图像相互叠放效果的页面。

2．利用表格布局制作个人网站，要求网页中有丰富的内容和超链接。

3．利用框架技术制作学校各部门简介的框架网页。

4．利用表格和嵌入式框架布局页面，制作网站主页。