用Dreamweaver快速搭建框架型网站页面

　　一、 框架介绍

　　框架页面是由一组普通的Web页面组成的页面集合，通常在一个框架页面集中，将一些导航性的内容放在一个页面中，而将另一些需要变化的内容放在另一个页面中。使用框架页面的主要原因我想大概是为了使导航更加清晰，使得网站的结构更加简单明了。我们看一下下面的这个网站例子，如图一所示。

（图一、框架结构页面实例）

　　这个页面是由上中下三部分组成的一个框架集，最上面的是此站点的栏目导航，点击不同的栏目，相应的栏目内容会出现在中间的框架子页面中。最下面是此站点的一些相关信息页面导航，点击每个栏目后，信息也会出现在中间的主框架页面中。这样的框架组合可以保证整个站点的栏目始终都出现在浏览者的视线中，使浏览者的注意力更多的集中在框架集的中间部分，既栏目内容。

　　二、 如何创建框架页面

　　下面我开始介绍快速搭建框建结构页面的主要步骤，需要指出的是通往目的地的路千条万条，我只介绍我最常走的路：）在Dreamweaver4中的Object面版中新增了Frames面板，我们可以利用此工具方便快捷的创造我们的框架页面。

　　我们知道框架结构的页面都是由多个单独得页面组成，因此在制作框架页面之前最好先将组成框架的各个单独得页面建好。首先看一下我们最终得页面，如图二所示：

（图二、最终的实例页面）

　　我们这个实例中将需要三个单独得页面，最顶端的top.htm页面，下方左边的导航页面Left.htm，下方右边的内容页面Main.htm。下面分步介绍创建的具体步骤：

　　1、在Dreamweaver的站点窗口分别创建三个空的页面，分别命名为。Top.htm、Left.htm、Main.htm。

　　2、打开Main.htm页面。将Object面板切换到Frames面板，如图三所示；

（图三、Frames工具面板）

　　执行菜单Window—Frames打开框架结构面板，如图四所示；

（图四、Frames结构面板）

　　执行菜单View—Visual Aids—Frame Borders使得框架结构的边框可见，如图五所示。

（图五、Frames边框显示）

　　3、在Frames工具面板中选择图六所示框架集，

（图六、创建框架集）

　　在当前的Main页面的顶端合作边分别插入一个相邻的页面，组成我们需要的框架集。如图七所示；

（图七、）

　　4、指定组成框架集得页面，打开属性面板，分别设定顶端和左边框架页面的实际文件链接地址，其他参数如图八所示；

（图八、属性面板详细参数）

　　1） Src：设置框架文件的链接地址。

　　2） FrameName：设置框架文件的名称，此设置非常重要在后面的连接中将用到。

　　3） Scroll：设定是否允许滚动条出现，顶端最好设定为No，左端最好设定为Auto。

　　4） No Resize：可以指定是否允许改变框架集各页面的窗口大小。

　　分别指定顶端页面链接文件的地址为Top.htm，左端页面链接文件的地址为Left.htm。

　　5、改变框架集页面大小。在框架面板中选定上下框架集边框，设定顶端框架页面的高度，如图九所示；

（图九、）

　　接下来用鼠标选定下方的框架集，再在属性面板中设定左边框架的宽度，如图十所示；

（图十、）

　　6、基本的框架页面组成就设定完了，执行菜单命令File—Save Frameset As保存框架集页面为Frames.htm。下面我们需要在各个页面之间搭起沟通的桥梁—加入链接。

　　三、在框架页面之间实现互相链接。

　　我们知道框架页面的主要用途就是用于导航，浏览者点击一个链接时，相关的内容页会在另一个框架中显示出来，这其实就是为链接指定了一个目标框架窗口。通过是用前面我们定义的框架的名称属性，我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个到指定框架的链接，可以按照如下步骤：

　　1） 选择链接文字或图片，如我们选择最顶端的About Me文字。

　　2） 在链接地址中（Link），输入相应的地址About.htm。在Target下拉框选择需要的窗口名称，如图十一；

（图十一、目标窗口名称）

　　这里显示的是当前页面所包含的窗口以及Dreamweaver预设的四个窗口名称，

_blank：此选项将使链接在新窗口打开。
_parent：此选项将使链接在当前窗口的上一级窗口打开。
_self：此选项将使链接在本身所在的窗口打开。
_top：此选项将使链接在整个框架集的最外端窗口打开。
mainFrame：我们前面为右边窗口设定的名称，选择此项文档将在此窗口中打开。
leftFrame：我们前面为左边窗口设定的名称。
topFrame：我们前面为顶端窗口设定的名称。

　　3） 在本例中我们为上面的导航栏目设定的目标框架窗口都为mainFrame，当点击About栏目时，相应的栏目内容将在右下方的mainFrame窗口打开。

　　四、 同时更新多个页面。

　　有是我们需要在点击一个栏目时同时更新另外的两个或多个框架页面内容，这可以通过以下步骤使用Dreamweaver的行为来实现。

　　1、选择链接的文字或图片。

　　2、打开行为面板（Behaviors），点击加号添加Go to URL行为，如图十二；

（图十二、添加行为）

　　3、在Go to URL对话框中显示了当前已有的所有框架窗口，我们分别选定一个窗口名称，可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*”号，表示此框架窗口已设定了URL。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有