第十三讲框架的使用和设置

最新推荐文章于 2023-10-13 23:06:32 发布

tangjianhao

最新推荐文章于 2023-10-13 23:06:32 发布

阅读量4.8k

点赞数

分类专栏：网页设计文章标签：框架浏览器 html url 工具 ie

本文链接：https://blog.csdn.net/tangjianhao/article/details/312240

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、怎么使网站中的网页保持统一风格
　　我们浏览网页时，常常会发现，不少网站的首页和第一层网页的结构基本差不多。如下图所示的“经气疗法”网站的主页分成三个部分。最上面为标题栏，左边为目录栏，右下的最大部分则为显示具体内容的主窗口。单击目录栏的目录项，可在主窗口中浏览不同的内容，网页的标题栏和目录栏不发生变化。

　　我们可以先用表格规划方法做一个上述格式的网页，再把它“另存为”一个新的网页。需要几个就重复“另存为”几次。再对网页中的主窗口内容进行修改，就可得到格式相同而内容不一样的一组网页。这些网页的目录部分的超链接也可适当不一样，指向本页内容的目录项是不需要超链接的。
　　要使网站中的网页保持统一风格的另一方法是采用框架结构，它将整个页面分割为两个或两个以上区域（称为“框架”），每一个区域可以显示不同的网页。像上图主页可以分为“标题”、“目录”和“主窗口”三个框架，每一个框架中可以放一个网页。而且每一个框架中的网页都可以改变而不影响其它框架中的网页。因此在浏览框架结构网页时更新速度比较快。
　　使网页保持统一风格的第三种方法时采用共享边框显示网站的“导航图”（即网站目录）。这种方法比较简单，但网页形式也比较单一，没有前二种方法丰富美观。
二、框架网页的建立
　　严格地说“框架”是指控制框架网页结构的整体，而框架中每一个区域称为一个框架窗口，但是在实际叙述中，通常也将一个框架窗口简单地说成是一个“框架”。
　　1、建立一个框架网页
　　下面我们做一个前面这样有标题和目录的框架结构的网页，并将它作为一个网站的主页。
　　在FrontPage窗口中单击“文件”菜单，在其下拉菜单中选择“新建”→网页”，打开“新建”对话框，选取“框架网页”选项卡，结果如下图所示：

　　在窗口的左侧是FrontPage提供的10种框架，单击相应的框架，我们就可以在右侧的预览窗口中看到相应的样式。选择“横幅和目录”，单击“确定”按钮，出现如项图所示的框架窗口。

　　从上图可以看到整个窗口被分为三个部分（即三个框架），每一个框架可以显示不同的网页。但现在这三个框架中都没有网页，等待我们输入相应的内容。在每个框架上有两个按钮：“设置初始网页”按钮与“新建网页”按钮。
　　若需将原有网页放置到框架中，则单击“设置初始网页”按钮，然后在“编辑超链接”对话框上设定与原有网页文件的超链接。
　　若需新建一个网页文件，并放置在框架中，则单击“新建网页”按钮，新建一个普通网页，然后在保存时，将它保存为一个独立的网页文件。
　　在上图的标题（横幅）框架内，我们单击“新建网页”按钮，出现一个空白页面：

　　在新网页中输入标题栏的内容：

　　同样再对目录框架新建一个目录网页。主窗口框架的初始网页“版主的话”原来已有一个现成的网页文件“bzdh.htm”，所以单击主框架中的“设置初始网页”按钮，出现下面的“创建超链接”对话框：

　　在对话框的文件列表中选择（单击）“bzdh.htm”，此文件名就会显示在URL栏中，单击“确定”按钮，完成整个框架结构网页的设计：

　　2、框架的保存
　　新建的的保存与单个网页的保存有较大区别，前例中的框架网页实际上有四个网页文件，即3个框架每个框架一个网页文件，再加上一个总文件。具体情况如下图所示：

　　其中“bzdh.htm”已经存在，还需要保存三个网页文件。单击常用工具栏的“保存”按钮，对框架文件进行存盘，得到如下图所示的对话框：

　　在“另存为”对话框的右侧的预览窗口中，主页上端深色显示部分表明当前要保存的网页所在框架是主页上端的横幅栏。输入文件名“banner.htm”，标题保持“经气疗法”不变。单击“保存”按钮，对话框的右侧预览窗口中的深色显示部分变为主页左边，表明要求保存目录框架的网页。输入文件名“list.htm”，再单击“保存”按钮，得到如下图所示的对话框：

　　现在是对整个框架网页进行存盘，我们将它存为首页文件。输入文件名“index.htm” ，通过单击“网页标题”右端的“更改”按钮将标题改为“经气疗法”。单击“确定”按钮，保存完毕。
　　原有框架网页编辑修改后，所有修改过的网页（包括框架网页、框架窗口中的网页）均进行保存。
　　3、框架中的超链接
　　当网页中设置了框架以后，增加了许多新的功能，超链接也多了许多设置。在框架网页中，当您单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架（称为目标框架）中打开。
　　一般说来，在您利用Frontpage 的框架网页模板创建一个框架网页时，框架间之间的超链接关系已为您设置就绪。例如：在“横幅和目录”模板内，目录框架里的超链接会使所链接的网页显示在主框架内，但有些情况还需要自己来设置目标框架。在“创建超链接”对话框中可选项“目标框架”栏右边有一个“更改目录框架”按钮，可以单击它打开“目标框架”对话框，并在其中选择目标框架。
　　【注意】在设置超链接前，应该先创建和保存好框架网页及一组供超链接的目标网页。
　　【例】在前例的“经气疗法”框架网页中，我们希望实现这样的效果：单击目录窗口中的“理论”，网页“jchll.htm”（已有）被打开且显示在主框架窗口中。标题页“banner.htm”和目录页“list.htm”不发生改变。这样无论打开哪个网页，直接在目录页“list.htm”中单击相应超链接即可。下面我们来实现这一功能：
　　1）选中“理论”，单击工具栏上的“创建超链接”按钮，打开“创建超链接”对话框：

　　在“创建超链接”对话框中，选中网页“jchll.htm”，单击“目标框架”右边的按钮，如下图所示：

　　在“目标框架”对话框中，你可以随意设定目的页面将出现在哪个框架中。你可以直接在“当前框架网页框”中选择一个框架作为目的框架。也可以选择“公共目标区框”中的选项来确定目标页面的出现形式。
我们单击“当前框架网页框”中的主框架（右下框架），然后单击“确定”按钮。再在“创建超链接”对话框中，单击“确定”按钮，即完成设置。就可完成超链接设置。
三、框架的修改
　　通过框架创建向导，我们可以创建简单的框架，但在实际应用中，我们往往需要对框架进行修饰，使之更美观，更实用，也更富有个性化特征。
　　1 改变框架的大小
　　改变框架的大小是件非常容易的事，和改变表格列宽（行高）一样，只要将鼠标指针移至框架的分界处，当鼠标指针变成双箭头时按下左键拖至适宜的位置即可。
　　2、框架的增加与删除
　　当我们建立的框架不能满足需要时，可以将一个框架分割为两个框架，或将多余的框架删除。
　　1）拆分框架
　　和拆分表格单元格相似，鼠标选中（单击）要分割的框架。单击“框架”菜单，在其下拉菜单中选择“拆分框架”命令，出现如左下图所示的“拆分框架”对话框。
　　选择框架的分割方式是行分割还是列分割，单击“确定”按钮后，框架的下半部分被分为两部分如右下图所示。新分割出来的框架还没有网页，可新建网页或选择一个已有的网页。

　　将鼠标移至框架边框上，当鼠标变成双向箭头后，按住Ctrl键后再按住鼠标左键推动也可拆分框架。
　　2）删除框架
　　删除框架时，单击鼠标选中框架，单击 “框架”菜单，在下拉菜单中选择“删除框架”命令即可。如下图所示，将刚分割出的框架删除。

　　【注意】
　　1、删除一个框架窗口后，原有的屏幕空间由相邻的框架窗口占用。
　　2、删除框架后，原显示在该框架窗口中显示的网页文件并不会被删除。
　　3、框架网页中至少应该有一个框架窗口存在。若框架网页仅含有一框架，您就不能删除这最后的框架。当访问者到您的站点查看时，在保留下的框架中显示的网页将占满整个浏览器视窗。
　　3、框架属性的设置
　　框架网页的属性，包括框架网页文件本身的属性、网页中每一个框架的属性以及框架窗口中网页的属性（与普通网页相同）。这里主要介绍框架的属性。
　　设置框架属性和表格一样：鼠标移到某个框架，单击其右键，在显示的快捷菜单中选择“框架属性”命令，就可以打开“框架属性”对话框（下图所示的是前例中的主框架属性），在其中完成设置。

　　“框架属性”对话框中各设置项说明：
　　1）“名称”：框架窗口的名称，与网页的标题和名字不同，不会显示在屏幕-上。只在超链接时作为目标框架名（URL）。
　　注意：利用模板创建的框架网页，每个框架窗口均有一个名称，其中，必有一个框架窗口名为main。即“默认框架窗口。
　　2）“初始网页”：即网页刚打开时窗口中显示的网页文件的URL。
　　3）“框架大小”：改变框架窗口的高和宽，度量单位有三种：百分比、像素和相对。
　　4）“边距”：以像素为单位设定框架窗口内页面元素距离左边框（宽度）和上边框（高度）的距离。
　　5）“选项”，有两项：
　　（1）“可在浏览器中调整大小”
　　这是一个非常有趣的选项，大家知道在IE浏览器中，通常我们只能对网页进行浏览，而不能按自己的喜好进行更改。选中这个选项后，浏览者在浏览主页时可以随意更改框架的大小。
　　（2）“显示滚动条”：设定在浏览器中是否显示滚动条。有三种选择：“如果需要”、“从不需要”和“始终”。
　　6）“框架网页”按钮，单击它，即可打开整个框架网页的“网页属性”对话框的“框架”对话卡（见下图）。

　　在这个对话卡中，我们可以实现对整个框架属性的设置，这种设置对页面所有框架都有效。
　　在上图中共有两个选项，其中“框架间距”中的值为框架的间距，我们可以理解为框架间框架线的宽度。当将“显示边框”前的“√”去掉时，框架的边框被隐藏，就仿佛没有应用框架一样。下图显示的是边框线被隐藏的样子。

四、关于框架网页的几个问题
　　1、框架的使用场合及注意问题
　　框架本身要消耗屏幕资源，从而减少用于显示网页内容的面积，因此，应用范围较窄。
　　框架网页通常用于首页、目录、文章列表等网页上，能够包含内置导航并显示一致的用户界面。
　　除非特别需要，不要在一个网页上采用太多的框架。
　　2、框架网页有关的视图
　　大家可能已经注意到，在FrontPage中框架网页窗口比普通网页窗口多了两个专用视图。即“无框架”和“框架网页HTML”。
　　1） “无框架”视图
　　“框架”是网页设计的一种特殊的技术，但并不是所有的浏览器都支持这项技术。为了给使用低版本浏览器的用户一些提示性信息。设置了“无框架”视图，用于编辑提示性信息。
　　当新建一个框架网页时，FrontPage 2000设置默认的提示信息：“此网页使用了框架，但您的浏览器不支持框架。”
　　2）“框架网页HTML”视图
　　在该视图中看到的HTML代码是框架网页本身的代码，它给出了整个框架网页有关的信息。
　　3、框架网页的打开
　　打开框架网页文件的方法与普通网页相同。打开总的框架网页文件时，网页中的每一个框架的网页文件一起打开，但打开一个框架的网页文件时，则这个网页文件占整个FrontPage窗口，不显示框架
五、共享边框和导航栏
　　FrontPage提供了强大的导航功能，我们可以通过设置为各网页建立导航栏。所谓导航栏就是在网站中所有网页的目录结构。浏览者可以从任意一个网页通过导航栏打开任意一个网页，为浏览者浏览网页提供方便。
　　1、设置共享边框
　　共享边框就是在所有的网页同一位置都画出一个区域，在这个区域里都按照同一个准则显示内容。导航栏放在共享边框中就不必每个网页都设置导航栏了。
　　打开站点，单击“格式”菜单，在下拉菜单中选择“共享边框”，得到如下图所示的“共享边框”对诂框。