现在位置:中国IDC吧>网页设计>Dreamweaver教程> 文章内容

Dreamweaver4神童教程之八

收藏发布 来源:互联网 作者:中国IDC吧 更新日期:2008-09-30 点击:


Dreamweaver4神童教程——框架
摘自赛迪网(小雷)

  我们已经学过了表格的网页定位技术,现在来学习另外一种定位技术——框架(Frame)。

一.框架概述:
  
  框架技术自从推出以来就成了大家争论不休的话题。一方面,它可以将浏览器显示空间分割成几个部分,每个部分可以独立显示不同的网页,同时对于整个网页设计的整体性的保持也是有利的;但它的缺陷又同样明显,对于不支持框架结构的浏览器,页面信息不能显示。不过,现在大部分朋友使用的都是微软探索者( Internet Explorer )浏览器 4.0 或更高版本,它们都支持框架结构,因此用框架制作的网页愈来愈多,最典型的例子,莫过于各个大型网站的论坛,如图一:


图一

二.建立框架:

  Window/Frames 命令可以打开框架面板,本面板在整个框架创建中起着决定性的作用。如图二:


图二

  另外一个非常重要的面板是框架集成面板,本面板可以通过 Window/Objects/Frames 打开。如图三:


图三

  框架集成面板用比较直观的样式显示了基本的框架构成,只需点选合适的图标就能建立相应的框架页面。如我们要建立左右两个窗口的框架,则需点击框架集成面板上用红色勾出的图标。如图四:


图四

  如果要获得复杂的框架结构(即框架的嵌套),则需配合框架面板的使用。其操作方法是:在框架面板上点选某一个框架,然后按住 ALT 键,再拖动编辑区域相应框架的边框就行了;或者在框架面板上选中某一个框架的前提下,点选框架集成面板上指定的框架类型。如图五:


图五

如果要删除大框架中的一个小框架,只需用鼠标拖动该小框架的边框到父框架的边框上就行了。

三.框架设定:

框架设定包括框架集(Frameset)与框架(Frame)的设定,框架是框架集中的一部分,所有的框架"集"成一个框架集。

1.框架集设定:

通过框架集成面板建立的,还没取消选择状态的,就是框架集。(框架集的选择,通过点击框架面板上最外面的边框取得;要选择某一个框架,只需点选框架面板上相应的地方就行了。)框架集的属性面板如图六:


图六

Rows 与 Cols 是框架集的基本信息,代表着行与列的关系。
Borders :是否显示边框, No 不显示,Yes 则显示边框。
Border Width 与 Border Color :分别代表边框的宽度与边框的颜色。
Column:每个框架的尺寸。请注意图六面板中右边还有一个缩略图,它的作用正是通过选择它并在 Column 的 Value 中输入数值来确定该框架的比例大小的。

2.框架设定:

框架的设定面板跟框架集设定面板有很大的差异,大家可以从图七中看到这一点:


图七

Frame Name:框架名称,很重要的一个环节,如果你想让某个网页在选定的框架中打开(典型的例子就是,点击左边的链接,链接的网页然后在右边窗口打开,而不是在有点击动作的左边打开),就必须首先为欲作为打开窗口的框架起一个名字,然后在左边的链接后面指定 Target ,并选择刚才你为框架所取的名字。

Src:链接网页文件的位置。前面我们说到,框架的作用在于将多个网页页面分成几个部分独离显示,而这个"多个页面"的位置指定就由 Src 内容指定。同时,也说明一个问题,一个完整的框架页面,除了本身框架页面外,还包括框架中每个单独的页面。单独页面共同组成框架页面,框架页面只是为多个单独页面提供了一个共存的"架子"。因此,在进行框架页面保存时,如果其他单独页面尚未保存,则会弹出多个页面保存窗口,将每个框架中所用到的页面都保存下来后,这个框架页面才能真正保存下来,也才能真正正常显示。
提示:许多网友曾经问过,为何每个框架中的页面都单独保存了,当前"架子"页面也已经保存了,为何点击这个"架子"页面却不能显示任何页面信息。其实,刚才我们也谈到了,除了分页面,还有一个框架集页面需要保存。是不是有些糊涂了,好,教你一个最简单的办法,凡是遇上用框架制作的页面,要进行保存时,只需点按 File/Save All Frames 就行了,而不是仅仅保存一个页面就行了的哟。

Scroll:是否显示滚动条,Yes 表示显示滚动条,Auto 则是自动显示,也就是当该框架内的内容超过当前屏幕上下或左右边界时,滚动条才会显示,否则不显示。

No Resize:是否允许在浏览时改变框架大小。

Borders 与 Border Color:是否显示边框与边框颜色。

Margin Width:边界宽度,即框架中内容与左右边框的距离。

Margin Height:边界高度,即框架中内容与上下边框的距离。

四.框架示例:

同样以"互动学校"的页面为标准,我们来看一下如何用框架来制作。(具体情况请见 Resource.zip 文件中的互动学校.htm 文件)

1.先根据原版面,我们将页面内容划分为四个区,如图八:


图八

2.相对于四个区,我们制作一个框架页面,分为上下两个框架。如图九:


图九

3.在下面框架中,嵌套一个框架集,它由三个框架页面构成。(如何进行框架的嵌套?前面我们已经谈到,或者在按住 ALT 键的前提下用鼠标拖动边框,或者应用框架集成面板上的形式)。如图十:


图十

4.现在给每个框架设置参数。这里得非常小心,一个不慎就会导致最终页面的混乱。这里有几个问题得注意,所有框架都不要激活 Border 与 Scroll 选项(其实也可以添加 Scroll 卷栏条,但为了追求跟原网页一模一样,这里我们不用 Scroll 选项);每个框架的横宽比例要跟原文件相近;由于原文件中所有链接都是通过打开一个新窗口进行显示的,所以这里不需要给每个框架集命名,采用其默认名就行了,并且链接后面的 target 一律用 _blank 选项(以便弹出新窗口,详情见前面章节)。

上一页12 下一页
收藏此页到网摘/书签:
所有评论

评论列表

用户名: 新注册) 密码: 匿名评论