怎样制作框架网页?
本人建议用dreamweaver做,下面是操作步骤:下面我们从实例操作中逐步了解框架的建立方法吧。
打开编辑版面,先在上行工具栏中选择“框架”标签,下面出现很多结构图标,如下图所示:
从图标的形状上就很容易看出结构形式,从左起,第1、2两个是左右结构,3、4两个是上下结构,其余的都是不同形式的3栏结构。 一般较常见的有第1种和第3种两栏式,通常在左边或上边窄栏中放置目录,在下边或右边大栏中放要打开的文件,浏览者操作时单击目录中的某一项,大框中就打开相应的文件显示出来。多重目录结构的也常采用3栏方式,如上图中右边第2的形式,如一套教材中分几大章,每章分很多小节,每小节一个页面文件,...全部
本人建议用dreamweaver做,下面是操作步骤:下面我们从实例操作中逐步了解框架的建立方法吧。
打开编辑版面,先在上行工具栏中选择“框架”标签,下面出现很多结构图标,如下图所示:
从图标的形状上就很容易看出结构形式,从左起,第1、2两个是左右结构,3、4两个是上下结构,其余的都是不同形式的3栏结构。
一般较常见的有第1种和第3种两栏式,通常在左边或上边窄栏中放置目录,在下边或右边大栏中放要打开的文件,浏览者操作时单击目录中的某一项,大框中就打开相应的文件显示出来。多重目录结构的也常采用3栏方式,如上图中右边第2的形式,如一套教材中分几大章,每章分很多小节,每小节一个页面文件,我们可以在上栏中放置章目录,单击某一章时,左边栏中显示该章中所有小节名,在左边单击某一小节名时,在右下面大框中打开该小节的网页文件显示出来。
当然上面图标中只是一些常见的标准格式,其实在创作中你还可以在任何一个框中再分框架,使用多少个栏用户可以随心所欲的。
现在我们试建立如上述的三栏框架结构文件。
点击框架图标中右边第二个三栏式图标,就可看到中间编辑区被分成了三个区域。
同时下面属性面板上行标签中显示“UntitledFrameset-1”,这是新建立的框架组文件。点击上部框时,下面标签会显示“UntitledFrame-2”,这是上框架页面文件,点击左面框时,标签会显示“UntitledFrame-3”,这是左框架的页面文件,点击右框时标签会显示“Untitled-1”,这大框是放我们的主要页面的。
这样,如果我们要保存起来,就要存储成四个文件,当然,这四个文件我们在保存时要给它们改一下文件名字。
在上部框中单击,选中“UntitledFrame-2”框架,打开菜单“文件——保存框架”,在弹出的对话框中选择好你所要保存的目录,在文件名框中输入“top”,于是就保存了一个“top。
htm”文件,选中左边的框,再打开菜单“文件——保存框架”,还选同一个目录保存成“left1。htm”文件,把下部右边大框选中,保存成“main1。htm”文件。现在我们存储好了三个框架文件,还有一个“框架组”文件没有保存吧,打开菜单“文件——保存全部”,就可以看到弹出的对话框中就自动出现了“UntitledFrameset-1”文件名,因为这是我们打开网站要首先调出的文件,把名字改为“index。
htm”存储好了。
下面我们再对各框架进一步设置。
把鼠标放在上下界线上单击,打开下面的“属性”面板,可看到如下图所示:
在“边框”项中原来显示“默认”,拉开右边小三角形,可看到还有“否、是”可选项,有些框架中不要边界可选择“否”,现在为了看出明显效果,我们选“是”吧,那么选择“是”就要给边框设置一个颜色,单击右边“边框颜色”就可在弹出的颜色面板中选择。
第二行是边框宽度,可输入一个所需要的值。底行显示的是框架的高度,如果不合适可以改变这里的数值。也可用鼠标拖动边框横线上下移动改变高度,改变时底行的数值会同步改变。
在下边两框中间的竖线单击,下面的属性面板大体相同,不同的只是最下行的数值是左框的宽度。
在这里也给边框设置一种颜色吧。现在我们存储了四个文件,当然这四个文件也可以单独编辑修改,也可以放在一起编辑修改。
下面我们试在同一个版面中编辑。选中上框架,输入文字“学框架网页教程”。
建立一个一行表格,分别在各列中输入“第1章、第2章……”。在选择左框架,输入“第1节、第2节……”,因左框架是竖向的,当然是用换行方法输入了。选择右框架,输入第一页文字内容。设置好界面如下图所示:
设置好后,再执行一次“保存全部”命令,四个文件同时就存储好了。
现在你可分别打开“top。htm”“left1。htm”“main1。htm”文件看一下,每个文件只有一个框架中的内容,只有打开“index。htm”文件时,三个框架文件中的内容才同时显示。
通过对这几个文件的分别观察,你知道什么是框架文件了吧。
框架设置
很明显建立以上文件并不是我们用框架的初衷,如果单纯为了这样安排页面,用前面我们学的表格定位完全可以完成。建立框架的目的是为了更方便地调用多个页面文件。
上面例子中设置的“第1章、第2章……第1节、第2节……”都要调出相应页面文件,所以还有一个关键步骤是建立“链接”。
难文字建立链接已经很熟悉了吧,可现在不一样了,我们目的是在上框架中点击第几章标签,要在左框架中打开第几章的目录,在左框架中点击第几节标签,要在右框架中打开第几节的页面,为此需要,还得先给这几个窗口设定好名字,以方便脚本的识别运行。
当然你不定义时,系统已经给它们命名了,它们分别叫做“topFrame、leftFrame、mainFrame”。
选择菜单命令“窗口——其它——框架”,弹出“高级布局”框如下图所示:
从图中可以看出三个框中都有名字了。
如果嫌它这名字太麻烦,还可给再改一下。
点击“高级布局”框中上部的“topFrame”,打开下部“属性”面板,可看到该杠架属性如下图所示:
左边“框架名称”栏里你可以重新输入新名字,干脆省事,把后半部去掉只留下“top”吧。
“源文件”项中就不要改变了,这是我们刚存储好的文件。“滚动”项中是选择要不要滚动条,顶部菜单一般是不需要的,就选择“否”。
再看右边,“不能调整大小”的选择框中是有“勾”的,就是说这个框架的高度已经定好不让再动了,如果你点击一下,选中的“勾”没有了,这样浏览者还可以拉动该框改变高度呢。
再点击“高级布局”框中左部的“leftFrame”,打开“属性”面板,名字改为“left”,把滚动改为“自动”。这样如果某一章分节较多,在页面中显示不完时就自动出现滚动条了。如果想给浏览者一个更灵活的页面,可将“不能调整大小”的选择框中的“勾”去掉。
同样再把右框架改名为“main”,滚动改为“自动”。
名字改好后,我们再给章节菜单设置“链接”。
在上行选中“第1章”三字,打开下面属性面板,在“链接”栏中输入要打开的文件名。
现在我们建立的文件是“left1。thm”,输入后如下图所示:
那么这个“left1。thm”页面要在哪里打开呢,看“链接”栏右边的“目标”框,点击小三角形,里面的选项除以前我们作链接时见到过的“_blank、_parent、_self、_top”以外,还有三个框架名称和可选项,这就是让选择在哪个框中打开文件,现在当然要选择“left”了。
再选中“第2章”三字,打开下面属性面板,在“链接”栏中输入“left2。thm”。当然,现在还没有“left2。thm”这个文件,那就等我们设置好以后再去建立吧。目标仍然选择“left”。
依次选择“第2章、第4章……”,链接输入“left3。thm、left4。thm……”。
再在左框选中“第1节”三字,打开下面属性面板,在“链接”栏中输入“main1。thm”,目标选择“main”。
同样选择“第2节、第3节……”,链接输入“main2。thm、main3。thm……”。
输入完后,再一次“保存全部”,然后退出程序,再继续建立没有建立的页面文件吧。
左边框架文件都是小节目录,应是大同小异,可以先把“left1。
htm”文件复制几个,分别命名为“left2。htm、left3。htm……”然后一个一个打开,把“链接”文件改一下就行了。譬如第一章中五个小节,分别对应“main1。thm~main5。thm”,则。
“left2。htm”的第一小节就链接“main6。thm”等,其实“main”框架中文件名字就更自由了,因为这是被动目录,这里的文件只是被交换显示。最后的任务就是建立“main”框架文件了,这里的文件页面没什么特殊,就是一个一个的普通页文件,这里就不再叙述了。
如果“main”页面文件很多,也可放到一个目录里,当然还把“left”的链接加上路径。原来自动建立时,这些文件都在同一个目录,所以链接中只有文件名字,没有路径。
修改用手工操作也很方便的。
打开“left1。thm”文件,选择菜单“查看——源文件”可以看到第1节的链接代码<a href="main1。htm" target="main">第1节</a>
如果你把“main1。
htm”放到一个叫做“main”的目录里,把文件名前加上目录名就行了。收起