《网页制作教程（第二版）》-齐建玲-电子教案 CH5 网页框架的处理

《《网页制作教程（第二版）》-齐建玲-电子教案 CH5 网页框架的处理》由会员分享，可在线阅读，更多相关《《网页制作教程（第二版）》-齐建玲-电子教案 CH5 网页框架的处理（35页珍藏版）》请在金锄头文库上搜索。

1、通过本章学习，应该掌握以下内容： 认识框架网页 创建框架网页的方法 编辑框架网页的方法 设置框架属性的方法,第5章 利用框架技术制作网页,5.1.1 创建框架网页,框架网页是种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页。 在框架网页中，用来分隔网页的窗格称为框架。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。,1认识框架网页,5.1利用FrontPage 2003处理框架,1）只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一

2、遍。 2）固定网页中的某些内容。 3）并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。,（1）框架网页的特点,（2）框架网页的种类,根据框架分布的不同和各框架作用的不同，框架网页被分为多种类型。常用到的框架结构有：左侧框架、右侧框架、顶部框架、底部框架、上方和下方框架以及各种嵌套框架结构。,在创建框架之前要先查看FrontPage 2003是否启用了框架功能，如果没有启用此功能，那么将无法在FrontPage 2003中创建框架页面。要查看是否启用了框架功能，可以执行以下的操作。 选择“工具”|“网页选项”命令，打开“网页选项”。 单击“创作”标签，打开“创作”选项卡。 启用“框

3、架”复选框，单击“确定”按钮。,2创建框架网页,检查完浏览器是否支持框架后，就可以在网页中创建框架网页了。步骤如下： 选择“文件”|“新建”命令，打开“新建”窗格。 单击“其他网页模板”超级链接，打开“网页模板”对话框，如图5-2所示。 单击“框架网页”选项卡，显示十种网页模板，选择任一种形式，在对话框右边会出现该模板形式的说明，以及模板预览。这里选择需要的框架网页结构，单击“确定”按钮，出现初始框架网页，图5-3所示。 单击每个框架中的“新建网页”按钮，各编辑区变成编辑状态，可以依次编辑各个网页。,图5-2 “网页模板”对话框,返回,返回,图5-3 初始框架网页,1. 在框架网页中添加和格式

4、化文本,5.1. 2 编辑框架网页,在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同。,通常调整框架的大小的方法有两种，即通过拖动框架的边框或指定想要的确切设置来调整框架的大小。 （1）拖动框架的边框调整框架大小 将光标放在要调整的框架边框上，当光标变为双向箭头的形状时，按住鼠标左键并拖动，即可框架的大小。,2. 调整框架的大小,（2）精确设置框架大小 单击框架，将光标置于框架内，点击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框。 在“框架大小”选项组中设置框架大小为固定像素数后，再指定框架的宽度和行高，单击“确定”按钮。 注意：编辑框架网页时如果调

5、整某框架的大小，则相邻框架的大小也会相应调整以填充空间。,3. 拆分框架 拆分框架可以设置任意结构的网页。在网页中可以使用两种方法拆分框架，一种是拖动框架的边框来拆分框架；另一种是将框架平均拆分成两个分开的行或列。 （1）拖动边框拆分框架 将光标放在要拆分的框架边框上，按住“Ctrl”健，同时按住鼠标左键拖动框架边框，拖出一段距离后放开鼠标左键和“Ctrl”键，出现一个新的框架。,（2）将框架平均分成两行或两列 首先将光标放在要拆分的框架边框内，然后选择“框架”|“拆分框架”命令弹出“拆分框架”对话框。选择“拆分成行”或“拆分成列”，单击“确定”按钮。,4. 删除框架 删除框架是拆分框架的逆过

6、程。 操作方法如下： 将光标放在要删除的框架中，选择“框架”|“删除框架”命令。 从框架网页中删除框架时，该框架中显示的网页也会被删除，但是框架网页中其它的内容并没有被删除。被删除框架中的任何网页都不会出现在该框架集中，但是它们仍然还在Web站点文件夹中。删除了一个框架后，其余框架会加宽以填充被删除框架留下的空间。,5. 为框架网页设置背景颜色和背景图片 将光标放在要设置背景颜色的框架中。 单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，打开“网页属性”对话框。 单击“格式”标签，打开“格式”选项卡。 如果要设置背景颜色，单击“颜色”|“背景”右侧的按钮，从弹出的颜色面板中选择背景颜色；

7、如果要设置背景图片，启用“背景图片”复选框，单击“浏览”按钮，选择背景图片文件，单击“打开”按钮，回到“网页属性”对话框。 单击“确定”按钮。,5.1.3 设置框架网页属性,设置框架的属性包括设置边框的隐藏或显示、设置框架的边距、间距以及设置框架中滚动条的显示和隐藏。,1. 显示和隐藏框架边框,可以根据所需的网页外观来选择显示或隐藏框架网页的框架周围的边框，这样页面显得很清晰。,2. 显示和隐藏框架滚动条,根据具体情况可以显示和隐藏某个框架的滚动条，如果框架网页要显示的内容较多，就应该显示框架的滚动条。,保存框架网页的方法如下： 将光标放在框架网页中，点击“保存”按钮，弹出 “另存为”对话框；

8、在“文件名”文本框中输入保存的网页的名称，单击“保存”按钮。一个框架网页保存完毕，这时计算机自动调到其他网页，继续保存这些网页；最后提示保存整个框架集，整个框架网页保存完毕。,5.1.4 保存框架网页,在Dreamweaver 8中创建框架的操作步骤如下： （1）在Dreamweaver 8中新建一个网页。 （2）将插入面板切换到“布局”类，对象面板变成“布局”插入面板，单击该面板上的“框架”按钮，在弹出的下拉菜单中选择“左侧和嵌套的顶部框架”选项，弹出“框架标签辅助功能属性”对话框，如图5-19所示。在该对话框中可以为每个框架指定一个标题，单击“确定”按钮，即可在页面中插入一个框架集。,5.

9、2 其他处理网页框架的方法,5.2.1 利用Dreamweaver 8处理框架,1. 建立框架,图5-19 “框架标签辅助功能属性”对话框,返回,2编辑框架,框架创建好以后，就可以对框架进行编辑了。每一个框架里都是一个文档，可以直接添加内容，也可以在框架内打开已经存在的文档,演示编辑框架网页,3. 保存框架网页,每一个框架都包含一个文档，因此一个框架集会包含多个文档。在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。,演示保存框架网页,4. 框架属性及框架组属性设置,（1）设置框架属性,首先选择“窗口”|“框架”命令，打开“框架”面板，如图5-25所示；在Frames面板

10、中选中框架，此时属性面板所显示的即为框架的属性，如图5-26所示。然后，按要求对框架属性进行设置。,返回,图5-25 “Frames”面板,图5-26 框架属性面板,首先单击框架的边框，选中框架集，此时属性面板中将自动切换显示框架集的属性，如图5-27所示。,（2）框架组属性,图5-27 框架集属性面板,5.2.2 利用HTML创建框架网页,利用HTML创建框架网页时首先要指定框架结构。即必须有一个网页用于指定整个浏览器窗口如何划分，也就是所谓的框架集网页。在框架集网页中不包含任何可显示的内容，而只是包含如何组织各个框架的信息和框架中的初始页面信息。,1利用HTML创建网页,2指定框架的结构,

11、在框架集网页中，除了基本的HTML、HEAD等标记符以外，主要包括框架集标记符FRAMESET（必须有结束标记符）和框架标记符FRAME（没有结束标记符）。 使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架；根据rows属性或cols属性的取值，可以确定框架结构中包含多少框架，相应也就必须设置对应个数的FRAME标记符。,rows属性和cols属性的取值包括三种类型，一是直接指定像素数；二是指定百分数（即相对于浏览器窗口大小的百分数）；三是使用n*（其中n是1的整数）指定相对大小。指定属性值时，数值之间用逗号分开并且不能有空格，根据值的个数和设置可

12、以确定框架数目和位置。 当属性值为n时，表示框架的大小为由前两种方法（即像素数或百分数）指定框架大小后浏览器窗口的剩余部分。如果取值包括多个n*，那么n*表示框架之间的比例关系。,如果网页设计者需要创建一些复杂的框架集，即同时包含横向和纵向的框架，此时可以使用框架嵌套。框架嵌套时只要在要使用FRAME标记时再使用FRAMESET标记一个框架集即可。,3框架的嵌套,框架初始化是指为各个框架指定初始显示的页面，此时应使用FRAME标记的src属性，将该属性的值指定为要在框架中显示的页面即可。指定页面时可以使用相对路径，也可以使用绝对路径，,4框架的初始化,（1）框架边框的设置 border属性可以

13、用于设置边框的宽度，其值为像素数。 使用FRAME标记符的frameborder属性可以控制是否显示框架边框，该属性的取值为1或0。如果取值为1，表示生成3D边框（此为默认设置）；如果取值为0，如frameborder=“0“，则不显示边框。只有将所有相邻框架的边框都设置为0，才能隐藏边框。,5边框效果,（2）框架滚动条的设置 使用FRAME标记符的scrolling属性可以控制是否在框架内加入滚动条，其值可以取为yes、no、auto。yes表示强制加垂直滚动条和水平滚动条；no表示框架内不加滚动条；auto表示需要时加滚动条（默认设置）。一般情况下采用默认设置即可。,（3）设置边框的不可移

14、动属性 一般而言，浏览者可以使用鼠标移动框架的边框，以便查看内容。但很多时候为了保持页面的整体效果，需要将各框架的位置和大小固定，此时应使用FRAME标记符的noresize属性，该属性不需要任何取值，即：,（4）设置框架空白 FRAME标记符的framespacing属性可以控制框架边框与数据之间的距离，这个属性的取值都是像素数。如上例中“framespacing=“0“”表示框架边框与数据之间的距离为零。 FRAME标记符的marginwidth属性可以控制框架内容和框架左右边框之间的距离，而marginheight属性则可以控制框架内容和框架上下边框之间的距离。这两个属性的取值都是像素数

15、。,所谓目标框架，就是指超链接的目标文件要在哪个框架中显示。 控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性，格式为： 超链接内容 target属性的值可以是已定义的框架名（必须是框架集文件中为FRAME标记符指定的name属性值），也可以是以下特殊框架 ：_top 、_self 、_blank 、_parent 。,6指定超链接的目标框架,本章小结 本章详细介绍了框架网页的处理方法。重点内容包括创建框架网页、编辑框架网页和框架网页属性设置等。使用框架可以指定超链接的目标，将所有的超链接集中在一个框架中打开，这在制作网页时非常方便。通过本章的学习，读者应熟练创建并编辑框架网页。,