分享
 
 
 

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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

一、 框架介绍

框架页面是由一组普通的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。

(图十三、设定多个目标框架文件地址)

4、完成后点确定即可,我们点此链接,会同时更新多个窗口的内容。

五、由于目前框架结构已得到了大多数浏览器的支持,因此它正变得越来越普遍。但相对来说,框架结构要比普通页面难于控制和制作,很多细节问题需要您反复的调整和实践,这里无法一一详细介绍,希望我的介绍能帮助您开始实践框架结构的页面。记住,任何的付出都会有所收获的。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有