第二部分、布局篇

蓝色经典—梦觉

二、框架篇。

介绍完表格我们再来看看另一种主要的布局方式，这就是框架结构Frame。也许很多朋友已经注意到我们站点页面通常具有一个统一的外观，一些基本的导航菜单和网站Logo、Banner并不会在每个页面发生变动，页面中变化的只是一些具体的内容。针对这种情况，我们可以使用框架结构来将不变的导航放入一个页面，而将变化的内容放入各自的页面，再将这两部分组合起来即构成了框架结构外观。

（一） 创建框架结构。既然我们已经知道框架结构是由一些单独的页面组成，在创建框架结构页面前，最好先将组成词框架结构的各个单独页面做好，你也可以在Site（站点管理器）窗口中先生成需要的各个空白页面，例如顶部的导航页面Top.html，下部左侧的Left.htm和下部右面的Main.htm，这在前面的站点部分我们已经介绍过。在Dreamweaver4的Object面板中新增了Frames面板，我们可以利用此工具方便快捷的创造我们的框架页面集。

打开我们的Main.htm页面，点击框架面板的 图标，可在当前页面的左边和上边增加相应的框架集页面。此时需要打开Windows—Frames，在此框架窗口可以统览整个框架集的组成情况。首先我们需要制定框架集的各个组成页面，用鼠标点击其中的一个组成部分，例如mainFrame，在属性面板中的Src部分指定此页面是调用的我们的Main.htm页面，顶部的topFrame是调用的Top.htm页面，左侧的leftFrame是调用的Left.htm页面。此时属性面板中显示的各个页面的路径是类似file:///F|/ExampleSite/main.htm形式，这时需要用鼠标在Frame面板中选定最外端的边框，然后执行File—Save Frameset将此框架页面命名保存。

（二） 设定框架属性。保持框架面板的最外端边框被选定，打开框架属性面板，在这里设定框架的基本属性，如图：
、
用鼠标在右侧选定框架中的一个组成部分，然后在左侧设定此部分在整个框架击中所占的高度Row为80pix，此部分不使用边框Borders-No。接下来将其余两部分的框架参数设定完成，记得首先需要在框架面板中选定对应的框架边框才可以。设定完框架击的属性后，在Frames面板点击其中一个框架页面，再来看看属性面板：

我们主要需要设定Scroll：滚动条是否出现；No Resize：框架尺寸是否可以在浏览时调整；Margin Width/Margin Height：框架边与内容之间所预留的间隔大小；FrameName：设定框架页的名称，这将在以后的文件之间互相链接时用到；Borders：设定当前框架是否出现边框。

（三） 设定框架集页面之间的互链。框架页面的主要用途就是用于导航，浏览者点击一个链接时，相关的内容页会在另一个框架中显示出来，这其实就是为链接指定了一个目标框架窗口。通过前面我们定义的框架的名称属性，我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个到指定框架的链接，可以按照如下步骤：
1、选择链接文字或图片，如我们在顶端框架页中输入About Me文字。
2、选定这个文字内容，打开属性面板，在链接地址中（Link），输入相应的地址About.htm。在Target下拉框选择需要的窗口名称，如图

这里显示的是当前页面所包含的窗口以及Dreamweaver预设的四个窗口名称，
_blank：此选项将使链接在新窗口打开。
_parent：此选项将使链接在当前窗口的上一级窗口打开。
_self：此选项将使链接在本身所在的窗口打开。
_top：此选项将使链接在整个框架集的最外端窗口打开。
mainFrame：我们前面为右边窗口设定的名称，选择此项文档将在此窗口中打开。
leftFrame：我们前面为左边窗口设定的名称。
topFrame：我们前面为顶端窗口设定的名称。
3、在浏览器中浏览时，当点击About栏目后，相应的栏目内容将在右下方的mainFrame窗口打开。

总目录 | 第一页 | 第二页 | 第三页