使用框架布局制作网页

 

1.  掌握框架的概念、组成及属性的定义。

2.  掌握使用框架布局网页的方法

3.  掌握使用浮动框架布局网页的方法。

 

 

如果一个网页的导航菜单、LOGO等内容是固定的,而页面中的另一部分信息可以上下或左右移动,这就是一个框架型网页的特点。框架结构的网页可以在一个窗口中划分出多个区域,这些区域中可分别打开各自的网页。常用于网页数据的编辑处理工作。通常情况下,动态网站的后台管理页面就是使用框架结构的。

 



※任务分析

几乎所有网站都会有至少一个后台管理系统来对网站进行维护和更新。图9-1所示是假设的“每味美味”网站的后管理系统。使用该系统可以对网站信息进行增、删、改等编辑操作。

9-1  用框架布局的网页

该系统使用框架布局来设计制作网页。页面中有三个网页组成,这三个网页被安放在三个框架中,而这三个框架又被集中到一个框架集中。

左侧框架中显示的是后台系统中的主菜单,单击其中的菜单项,就会在右侧较大的框架(即主编辑区)中显示相关内容,供管理员编辑处理。

※相关知识

一.框架的概念及应用

框架就是把一个浏览器窗口分成若干个子窗口,每个子窗口中显示不同的网页文件,这种子窗口称为框架(Frame)。每个框架都是浏览器窗口中的一个独立区域,在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。多个框架同时显示在一个浏览窗口中,就组成了框架集(Frameset)

二.框架的创建与删除

创建框架网页可以有以下方法:

1.使用“文件”菜单创建

单击“文件”菜单→“新建”,打开“新建文档”对话框,选择“示例中的页”→“框架集”,再选择一个框架结构。如图9-2所示。再单击“创建”按钮。

新创建的框架网页中会弹出“框架标签辅助功能属性”对话框,如图9-3所示。要求为每个框架指定一个可供识别的标签(即框架的名称)。可以使用默认的标签,也可以自行定义一组便于记忆的标签。

 

         9-2  “新建文档”对话框                9-3  “框架标签辅助功能属性”对话框

2.使用“布局”工具栏创建

首先创建并打开一个空白网页文件,将光标定位到网页左上角然后单击“布局”工具中的“框架”按钮,在下拉菜单中选择要创建的框架类型,如图9-4所示。

9-4  在“框架”下拉菜单选择框架类型

选择一种类型后,会弹出“框架标签辅助功能属性”对话框,为框架集中的每个框架指定相应的标签后单击“确定”按钮,编辑窗口中显示该框架布局页面。如图9-5所示。

要生成更复杂的框架样式,可以在已生成的框架集中单击某个框架,使用“布局”面板上的“框架”按钮,选择需要的类型,即可在光标处插入新框架,实现框架的嵌套。

要删除框架,用鼠标选中,变成双向箭头时,拖到网页编辑窗口边缘以外即可,如图9-6中圆圈部分所示。

 

9-5  新建的“框架”网页                     9-6  删除框架集中的框架

三.框架的激活及属性设置

如果要修改框架的属性,需要先激活该框架,然后再通过“属性”面板设置新的属性值。激活框架的方法主要有:

1.按住Alt键的同时,用鼠标单击某框架的内部,可激活此框架。

2.在“框架”面板上单击所要选择的框架,以激活。

“框架”面板的打开可通过单击“窗口”菜单→“框架”可来实现。“框架”面板如图9-7所示。

框架被激活后就可以在下方的“属性”面板进行相关属性的设置,如图9-8所示。

 

9-7  “框架”面板                    9-8  通过“属性”面板设置框架的属性

框架的属性主要有:框架的名称、是否显示边框、边框的宽度、边框的颜色、滚动条的显示方式、是否能在浏览器窗口中调整大小以及在此框架中显示的网页文件。

框架行高(列宽)的值可以是具体的“像素”值,也可以是占整个框架的百分比。还有一种是“相对”值,即根据其他框架所占的行高(列宽),自动调整当前框架的行高(列宽)。

四.框架集的属性设置

给框架集设置属性前应先选中它。选中框架集的方法主要有:

1.点击框架集的外边缘,如图9-9圆圈部分所示。

2.在框架面板中点击相应的框架。

3.在激活框架的情况下,单击“标签选择器”中相应的<frameset>标签。

选中框架集后,“属性”面板中显示框架集的属性值。如图9-10所示。

 

9-9  单击框架集外边缘                  9-10  通过“属性”面板设置框架集的属性

框架集的属性主要有:是否显示边框、边框宽度、边框颜色以及各框架的行高、列宽值。

※任务实施

在使用框架布局网页前,一般是先将各框架中需要显示的网页制作好,再通过“属性”面板的“源文件”框设置各框架相应的网页文件。本教材“项目素材”文件夹中已经前先制作了部分网页文件。实施任务前先将这些文件复制到站点文件中的相应位置。

1.Windows环境下,使用“我的电脑”,将本教材“项目素材”文件夹中“project09/task01中的oa文件夹复制到站点文件夹mwmw中;将“project09/task01/SpryAssets”中的两个文件复制到mwmw中的SpryAssets文件夹中。

2.运行Dreamweaver CS3,打开站点example

一.新建框架网页

1.在“文件”面板中展开站点文件夹,右击其中的子文件夹oa,在快捷菜单中选择“新建文件”,输入网页文件名为“editor.html”。

2.单击“布局”工具栏中的“框架”按钮,在下拉菜单中选择“顶部和嵌套的左侧框架”,弹出“框架标签辅助功能属性”对话框,使用系统默认值,单击“确定”按钮。

此时网页中建立了三个框架,顶部框架为“topFrame”、左侧框架为“leftFrame”、右侧框架为“mainFrame”。

3.单击“窗口”菜单→“框架”,打开“框架”面板。

4.在“框架”面板中点击框架集上方的外边缘,激活框架集,在属性面板中设置“行”值为“80像素”。

5.在“框架”面板中点击下方框架集(即leftFramemainFrame所在的框架集)的边缘,激活框架集,在属性面板中设置“列”值为“200像素”。

6.按下Alt键的同时,用鼠标单击leftFrame框架的内部,激活它。在“属性”面板中设置其“滚动”为“自动”。

7.同样的方法设置mainFrame框架的“滚动”属性为“自动”。

二.为框架链接网页

1.按下Alt键的同时,用鼠标单击topFrame框架的内部,激活它。在“属性”面板中设置其“源文件”为“editor_top.html”。

2.同样的方法设置leftFrame框架的“源文件”属性为“leftmenu.html”、mainFrame框架的“源文件”属性为“welcome.html”。结果如图9-11所示。

9-11  链接网页后的框架布局

3.为菜单设置超链接。选中leftFrame框架中的第一项菜单“添加文章”,在属性面板中设置其超链接为“addfile.html”,目标为“mainframe”。如图9-12所示。

4.同样的方法为leftFrame框架中的第二项菜单“修改文章”设置其超链接为“filelist.html”,目标为“mainframe”。其他超链接的设置方式与此相同。本任务仅是一个示例,不具实用性,故不再一一赘述。





※任务分析

本任务在网页中添加浮动框架,并在浮动框架中嵌入当地天气预报内容,如图9-13左下方所示的效果。

9-13  页面左下方带有浮动框架的布局

※相关知识

一.浮动框架的概念

浮动框架也称内联框架,标记为<iframe>,它能够比框架更灵活地实现框架的功能,在使用表格或是DIV布局的页面中,如果要小面积地使用框架来当作图像或是网页对象的容器,就可以使用浮动框架。即浮动框架可以灵活地插入到网页的任何位置。

二.浮动框架的创建及属性设置

Dreamweaver CS3中,单击“布局”工具栏中的“IFRAME”按钮来插入浮动框架,在代码编辑视图中,会自动生成一对<iframe></iframe>标记,在设计视图中则会出现一个灰色的正方形,如图9-14所示。属性设置要在代码中去进行。

9-14  页面插入浮动框架

<iframe>标记的常属性有:

name浮动框架的名称

width浮动框架的宽度(可用像素或是百分比)

height浮动框架的高度(可用像素或是百分比)

frameborder浮动框架的边框

scrolling浮动框架的滚动条(“auto”为自动,“yes”为显示,“no”为不显示)

src浮动框架中显示文件地址

※任务实施

1.打开当前站点文件夹下为oa子文件夹中的leftmenu.html网页文件

2.在菜单的下方插入一个空的DIV层。设置其背景为“白色(#FFFFFF)”,方框大小为“180像素”,左右边界为“自动”。

3.在DIV中通过“布局”工具栏中的“IFRAME”按钮插入一个浮动框架。

4.切换到拆分视图,在代码中输入如下内容:

文本框: <iframe id="tianqi8_wetherinfo" name="tianqi8_wetherinfo" src="http://tianqi.baidushi.com/ code/freeweather15.htm?id=&fcolor=&imgurl=tb/tbm/tb1&bimg=&bcolor=&fsize=" frameBorder=1 width=180 height=105 align=center marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>

5.保存并通过editor.html网页来浏览。





1.参照任务1的界面布局和实际功能,利用框架结构为“茗香绿长”公司网站建立后台管理系统的操作界面,以manager.html保存。

2.利用浮动框架在“茗香绿长”公司主页(home.html)中的适当位置插入天气预报内容。具体的天气代码可通过“百度”搜索,关键词为“天气预报”,找到相关的免费代码来制作。图9-15所示的效果与代码仅供参考(代码来自“新浪天气预报”的免费代码,但有所改动)。

9-15  在网页首部插入免费天气预报代码后的效果




一.填空题

1.将一个浏览器窗口划分为____________个子窗口,每个子窗口显示不同的页面文件,每个页面占据的区域就叫________________

2.将多个框架同时显示在一个浏览器窗口中,就组成了________________

3.要修改框架的属性,需要先_________该框架,然后再通过________面板设置其属性值。

4.框架的标记是_________框架集的标记是___________

5.浮动框架的标记是______________,常用的属性有____________________________________________等。

二.选择

1.在框架网页中添加超链接时,“目标”选项选择以下哪个选项时,可以在新窗口打开超链接页面(    )

A_blank            B_parent          C_self            D_top

2.下面关于创建一个框架的说法中正确的是(    )

A)新建一个HTML文档,直接插人系统预设的框架,就可以建立框架了。

B)打开文件菜单,选择“保存全部”命令,系统会默认自动保存。

C)如果要保存框架时,在编辑区的所保存框架周围会看到一圈虚线。

D)只能使用“布局”栏中的十三种框架类型来创建框架。

3.设置分框架属性时,要使内容无论如何都不出现滚动条是怎么设置属性的(    )

A)设置分框架属性时,设置滚动条的下拉参数为默认。

B)设置分框架属性时,设置滚动条的下拉参数为是。

C)设置分框架属性时,设置滚动条的下拉参数为否。

D)设置分框架属性时,设置滚动条的下拉参数为自动。

4.下列属于设置浮动框架边框属性的是(    )

Aname              Bwidth            Cheight           Dsrc

5.若要显示浮动框架的滚动条,则下列设置其属性正确的是(    )

Ascolling=yes      Bscolling=no      Csrc=yes          Dsrc=no

三.简答

1.创建框架有几种方法?

2.激活框架的方法有几种?