第5章 框架.ppt

1、第5章 框架,利用框架提高空间利用率 1、框架的概念 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 综上所述，框架是为了在浏览器内显示多个网页文档而分割的主页模块。,2、如何选择主页布局的构成方式（框架/表格） 利用框架设计页面布局时，便于确定当前的所处位置，也便于转到其他菜

2、单。但是使用若干个框架时，在画面中显示的时间将相对延长。因此，操作者应避免在页面中使用过多的框架。另外，当访问者使用搜索引擎时，只能对相应框架中的内容进行检索。应此，当设计者向众多访问者的站点（如门户网站）时，应利用表格设计主页布局。,3、理解框架和框架集 一个框架结构有两部分网页文件构成： 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。,创建并保存框架 1、创

3、建框架 在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。 执行“修改-框架页”，将换面分割为3个框架之后，或在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。,2、保存框架 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。 选择菜单栏文件保存全部，如框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为0

4、9.html。 这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。,3、在文档窗口中添加框架 用鼠标单击边框之后，在指定位置拖动鼠标，就可以轻松地创建新的框架。但是，如果想在文档窗口中直接添加框架，必须在画面中至少有一个框架的前提下进行操作。 用鼠标直接拖动上侧边框，将生成行框架。 按“Ctrl+Alt+Shift”键拖动右侧边框，将生成列框架。 如果想精确地指定框架区域，就在框架集属性面板中直接输入设置值。,相关框架属性 框架属性面板和框架集属性面板 框架属性的设置是在框架属性面板和框架集属性面板中进行的。很多人会混淆框架属性面板和框架

5、集属性面板。在框架属性面板中，可以设置个别框架的属性，而在框架集属性面板中，可以设置整体框架结构的相关属性。 1）、框架属性面板 要想打开框架属性面板，在文档窗口中选择相应框架，也可以在按住“Alt+Shilt”键单击框架区域。 2）、框架集属性面板 要想在窗口中显示框架集属性面板，就用鼠标单击卡佳的边界线。,框架链接 在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。,“目标”下拉菜单中的选项： _blank 放

6、在新窗口中。 _parent 放到父框架集或包含该链接的框架窗口中。 _self 放在相同窗口中（默认窗口无须指定）。 _top 放到整个浏览器窗口并删除所有框架。 在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项： mainFrame 放到名为mainFrame的框架中。 leftFrame 放到名为leftFrame的框架中。 topFrame放到名为topFrame的框架中。,注：框架是不可以合并的 当在其他网页中建立链接到当前网页文档时，不能链接到各个框架文档，而

7、是应该链接到包含所有框架的框架集文档。 在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。,一次性打开两个框架 在框架文档内选择菜单时，在特定框架区域显示网页文档的处理方法是最常用的类型。下面制作，选择菜单时显示由两个以上框架构成的框架集文档的效果。下面要制作的实例是，在由上下两个框架构成的框架文档中。单击上方框架中的菜单时，在下方框架区域显示由左右两个框架构成的框架文档的效果。 1、打开“open frameset.html”文件。 2、新建文档，创建一个左右框架文档，在各个框架区域内，分别打开页面属性，指定不同的背景色，保存框架页为frameset.html，将左侧和

8、右侧的框架分别保存为sub left.html和sub right.html。 3、回到“open frameset.html”文件，单击第1个菜单（menu1），链接到frameset.html，将目标指定为（mainframe）。,利用lframe，在网页文档中导入外部文档 有一些网页，虽然没有采用框架结构，却可以表现框架的效果。这是利用lframe功能制作的效果，将网页文档中的一部分指定为lframe之后，具可以在表格中打开其他网页文档或站点。,1、利用lframe，表现框架效果 lframe是指，在网页文档中间，以框架形式显示其他网页文档、主页、记事本和公告板的功能。换一句话，lfra

9、me是在无框架状态下，表现了框架功能。Netscape（网景）浏览器并不支持lframe，只有IE浏览器支持lframe。因为大部分访问者都使用IE浏览器访问网页，所以设计者可以选择性地使用lframe功能。另外lframe功能，操作者可以在指定的位置以指定的大小显示其他网页或站点。如下图所示，要想制作lframe，必须先准备好要在lframe内显示的网页文档和要插入lframe的网页文档。,2、理解lframe标记 创建lframe的标记位于标记和标记之间。下面将介绍lframe的详细属性。以下源代码是在本节的实例中使用的源代码。在学习此源代码的基本结构和详细选项之后，就可以开始操作了。 src：指定要在lframe中显示的网页文档名（路径）或站点地址 width/height：指定lframe的宽度和长度。默认单位是像素，也可以使用百分比单位 scrolling：决定是否（yes/no）生成滚动条 frameborder：决定是否（yes/no）显示框架边框 name：指定lframe的名称。当建立链接到其他外部网页文档时，可以将lframe的名称指定为目标显示位置,3、在lframe中