网页设计与制作之——框架结构.doc

1、框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。我们画一张示意图来进行讨论。 这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。下面我们就来从头开始制作一个框架。1、点“文件”菜单新建，弹出“新建文档”对话框如下图：或在插入栏布局选框架：左框架如下图：Dreamweaver MX 2004生成一个空白的框架页面，如下图：

2、2、选择窗口菜单“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）虚线笼罩在右边就是保存框架中右边网页。（如下图）虚线笼罩在左边就是保存框架中左边的网页：（如下图） 三个页面保存完毕。4、下面我们要实现按左边

3、的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图）6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。更多Dreamweaver 教程请继续访问建站学的Dreamweaver教程专区。实验七 框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。【实验要求】： 1. 掌握应用框架设计网页布局的方法；2. 掌握创建、编辑框架网页及设置框架属性的方法；3. 掌握链

4、接框架网页的方法。【基本操作】创建框架结构：在插入面板中找到布局选项，在其中选择下图所示的图标，并选择相应的框架结构 选择框架1） 首先从“窗口”菜单中打开“框架”面板2） 然后在“框架”面板中选择某一个框架，如下图所示添加网页内容 选择某一框架后，点击“属性”“源文件”以设定框架的网页 【实验内容】：创建一个左侧框架页，并在相应的框架中添加FrameA和FrameB两个网页，构成如下图所示的网页 要求：1） 设定LeftFrame的宽为400像素2） 设定两个框架均出现滚动条 II创建一个如下图所示的三栏框架页，并在相应的框架中添加FrameA、FrameB和FrameC三个网页，构成如下图

5、所示的网页。 1）三栏分别命名为LeftFrame、MidFrame、RightFrame2）三栏的宽度为 200像素、300像素、504像素 操作步骤： 1）创建一个左侧框架网页，选定整个框架之后（选定整个框架参见P110），点击切换到拆分视图，将Frameset标记符中的Cols属性修改为：200，300，*（请注意切换到英文状态下输入）2）分别在“框架”面板中选择相应的框架，插入相应的网页III 框架网页中的超级链接要求：1）创建左侧框架网页 2）在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白” 3）左侧框架背景为灰色 4

6、）框架集需要显示边框，宽度为3象素 利用已有网页制作框架网页要求：按照样张所示，利用index文件夹中提供的四个网页，组成如图所示的框架网页【参考习题】1、 创建一个顶部框架，TopFrame中显示新浪的首页，MainFrame显示163的首页。两个框架需要显示滚动条，显示框架边框。效果如下图2、 利用素材中的163、sina的图片制作如下的框架网页。框架本身就是一个网页文件，而所谓的导航（目录)和正文 也都是另外独立的网页文件也就是说，一个框架一般至少需要3个网页文件组成。 你用什么软件编写的？注意退出时的保存提示。 = 比如一个简单的目录框架网页名为INDEX.HTM，一般都包含left.

7、htm（左边导航目录)和MAIL.HTM（右边主体内容）部分 INDEX.HTM网页 关键代码应为 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。一个框架结构有两部分网页文件构成：框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关

8、的网页文件。框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。一、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。2、鼠标拖动创建框架（1）、新建普通网页，命名后将

9、其打开。（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。二、保存框架每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。选择菜单栏文件保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。三、 编辑框架式网页虽然框架式网页把屏幕分割成几个窗口，

10、每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。1、 改变框架大小用鼠标拖拽框架边框可随意改变框架大小。2、 删除框架用鼠标把框架边框拖拽到父框架的边框上，可删除框架。3、设置框架属性设置框架属性时，必须先选中框架。选择框架方法如下：选择菜单栏窗口框架，打开框架面板，单击某个框架，即可选中该框架。在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓2. 设置框架属性选中框架，在属性面板上可以设置框架属性：框架名称、源文件、

11、空白边距、滚动条、重置大小和边框属性等。需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。四、在框架中使用超级链接在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。“目标”下拉菜单中的选项：* _blank 放在新窗口中。* _parent 放到父框架集或包含该链接的框架窗口中。* _self 放在相同窗口中（默认窗口无须指定）。* _top 放到整个

12、浏览器窗口并删除所有框架。在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：* mainFrame 放到名为mainFrame的框架中。* leftFrame 放到名为leftFrame的框架中。* topFrame放到名为topFrame的框架中。我做了一个HTML文件，是Frame结构的，左边是超链接，但是链接的是一个“网页文件”，我想点击该链接后，“网页文件”打开的“网页”出现在右边，该怎么写？注意：超链接的是一个“网页文件”，并非“超链接地址”。（可以用Javas

13、cript）能不能详细一点啊？我的左边页面写的是：aaaaabbbbbb如果用JS怎么写？ 麻烦看清楚啊！我的a链接的不是一个超链接，实际上是一个文件，怎么还回答超链接，超链接的target你们不用说我都会。真是无语了！垂直分栏水平分栏如何使用标签：Your browser does not handle frames!frame标签 标签定义了每个框架中放入什么文件。 下面这个例子中，有一个两列的分栏。第一个被设置成窗口宽度的25，第二个被设置成窗口宽度的75。页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。混合框架：使用了noresize=noresize的框架，这个例子说明了noresize属性。这个框架是不可改变大小的，把鼠标移动到框架边界上，你会发现无法调整大小。