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

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。

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

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

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

时间: 2024-10-02 03:09:18

用Dreamweaver快速搭建框架型网站页面的相关文章

使用阿里云开放搜索服务快速搭建资源搜索网站

大家好,我又来了,答应云栖论坛一周一篇文章, 由于工作太忙已中断1个多月实在抱歉,这一次写点轻松有趣的东西-快速的做个资源搜索站 依稀记得十来年前,带宽还只有2M的时候,受各个论坛启发,做了可以搜索嘿嘿嘿资源的搜索站 一晃这么多年过去,嘿嘿嘿的东西依然喜欢,但世间却变化万千 资源种类已不仅仅是X片,高清电影.纪录片.无损音乐.美剧.大型软件等等,似乎更加吸引 资源呈现方式也百花齐放,从最早的BT文件.电驴地址,到现在的磁链地址.各种云盘等等 而传统的P2P下载方式也变得格格不入,因为硬盘容量已经

Dreamweaver如何用框架建立网站

有时看到一些论坛,左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的,比如拖动左边的滚动条不会影响右侧的显示效果.其实这是在页面中利用了框架技术,因此可以把浏览器的显示空间分割为几个部分,每个部分都独立显示网页内容.而且把几个框架结合在一起构成框架集,能够让页面具有更为丰富的效果. 效果说明 先建立两个页面,分别为" myphoto.htm "." mydiary.htm ".前一个是相册页面,后一个是日记页面

Foundation框架 – 快速创建跨平台的网站页面原型

整个一周都在揪心的猫事中度过.从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光.有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子.一切都会好起来. 独白终了,进入正题.最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些用于移动应用开发的前端框架工具:今天这篇的立足点偏向设计开发流程的上游,它将向我们展示怎样使用Foundation框架快速创建跨平台的.可以在多种设备上进行测试的响应式页面原型.下面开始正文部分. 开门

SEO:框架型网页的优化技巧

seo|技巧|网页|优化 从一开始,框架型网站对于即使是专业的搜索引擎优化也成了一个挑战.是否该用框架技术去设计一个新网页,也已成了大家争论不休的话题.在这篇文章中,我们为你提供了一些基本的优化技术,同时你也能够了解到:如何让一个使用框架的网页为主要搜索引擎正确索引及如何对其进行优化. 首先,让我们来看看使用框架设计的网站具有哪些好处.它的优越性体现在整个网页设计的整体性的保持及更新上.这也是为什么有相当多网站设计者都倾向于使用框架技术来进行网站的设计.尤其对于那些大型网站(至少500页以上的内

快速搭建原型的工具WDL:微博交互设计

文章描述:揭秘WDL-微博交互规范的成长历程. 引言 微博的设计师们都知道有一种能够帮助快速搭建原型的内部工具,我们亲切的称之为"WDL",是微博设计规范库英文名称 " Weibo Design Library" 的头字母缩写.至2011年2月28日WDL正式发布内部版本.开放浏览之际,我们的设计师,还有产品经理们一直在使用着它,并且积极的关注和支持着WDL的每一次组件更新和版本升级. 我们对WDL的官方定义是: "WDL是微博设计规范库,用于微博交互行为

框架型网页的优化技巧

从一开始,框架型网站对于即使是专业的搜索引擎优化也成了一个挑战.是否该用框架技术去设计一个新网页,也已成了大家争论不休的话题.在这篇文章中,我们为你提供了一些基本的优化技术,同时你也能够了解到:如何让一个使用框架的网页为主要搜索引擎正确索引及如何对其进行优化. 首先,让我们来看看使用框架设计的网站具有哪些好处.它的优越性体现在整个网页设计的整体性的保持及更新上.这也是为什么有相当多网站设计者都倾向于使用框架技术来进行网站的设计.尤其对于那些大型网站(至少500页以上的内容)而言,框架结构的使用可

营销型网站本质剖析

营销型网站建设的火爆要从http://www.aliyun.com/zixun/aggregation/37464.html">营销型网站的本质去分析!营销型网站是又叫盈利型网站,自动成交型网站,在网站建设的基础上引入自动成交的全新包装概念! 一:营销型网站建设应以网络营销为导向 营销为主.技术为辅 传统网站不营销,除了技术落后之外,更重要的是思想.理念落后.网站要想起到网络营销的作用,关键因素是是否站在营销的高度设计. 网站运营推广:http://www.iisp.com/design/

营销型网站的宽度一定要受1000像素限制吗?

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 做网站的朋友们都知道,1000像素是一个槛,很多新人在设计之初就被做技术小伙伴灌输一个概念:营销型网站页面的宽度要在1000-1004像素之间!随后我们自然而然地在1000像素的城堡里玩耍,不再去触碰外面的世界.诚然,1000像素确实是一个理想的宽度,它既照顾到了页面内容的宽敞,又保障了各种屏幕用户的阅读体验,因此,我们不得不遵循它的恰当合理

快速搭建WordPress网站教程

本文是快速搭建WordPress网站教程.WordPress 是一款常用的搭建个人博客网站的软件.使用 WordPress 可以搭建功能强大的网络信息发布平台,但更多的是应用于个性化的博客.针对博客的应用,WordPress 能让您省却对后台技术的担心,集中精力做好网站的内容. ##适用对象 本文档介绍如何使用云市场的镜像快速搭建 WordPress 博客平台.适用于刚开始使用阿里云进行建站的个人用户. ##基本流程 1. 购买 WordPress 镜像. 2. 绑定域名. ###购买 Word