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

框架是 框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就 感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架， 为了更好的理解什么是框架。我们画一张示意图来进行讨论。 　　这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中 我们用 index.htm 命名。框架中左边命名为 A，指向的是一个网页 A.htm。右边命名为 B， 指向的是一个网页 B.htm。 　　1、点“文件”菜单新建，弹出“新建文档”对话框如下图： 　　或在插入栏布局选＂框架：左框架＂如下图： 　　下面我们就来从头开始制作一个框架。 　　2 　　2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统 对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通 过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确 控制指向的页面。 　　Dreamweaver MX 2004 生成一个空白的框架页面，如下图： 　　 　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图） 虚线笼罩在右边就是保存框架中右边网页。（如下图） 3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一 个框架结构文件。我们按照惯例都命名为 index.htm。 虚线 虚线笼罩在左边就是保存框架中左边的网页：（如下图） 三个页面保存完毕。 　　 　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上 超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为 mainFrame。(如下图） 　　6、设置完毕，保存全部，按 F12 预览网页。链接指向的页面出现在右边框架中。 　　7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。 更多 Dreamweaver 教程请继续访问建站学的 Dreamweaver 教程专区。 实验七 框架结构 【实验目的】： 通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。 【实验要求】： 掌握应用框架设计网页布局的方法； 掌握创建、编辑框架网页及设置框架属性的方法； 掌握链接框架网页的方法。 【基本操作】 创建框架结构： 在插入面板中找到布局选项，在其中选择下图所示的图标，并选择相应的框 架结构 选择框架 首先从“窗口”菜单中打开“框架”面板 然后在“框架”面板中选择某一个框架，如下图所示 添加网页内容 选择某一框架后，点击“属性”－“源文件”以设定框架的网页 【实验内容】： Ⅰ创建一个左侧框架页，并在相应的框架中添加 FrameA 和 FrameB 两个网页，构 成如下图所示的网页 要求： 设定 LeftFrame 的宽为 400 像素 设定两个框架均出现滚动条 II 创建一个如下图所示的三栏框架页，并在相应的框架中添加 FrameA、FrameB 和 FrameC 三个网页，构成如下图所示的网页。 1）三栏分别命名为 LeftFrame、MidFrame、RightFrame 2）三栏的宽度为 200 像素、300 像素、504 像素 操作步骤： 1）创建一个左侧框架网页，选定整个框架之后（选定整个框架参见 P110），点击切换 到拆分视图，将 Frameset 标记符中的 Cols 属性修改为：200，300，*（请注意切换到英文 状态下输入） frameset rows=* cols=200,300,* 2）分别在“框架”面板中选择相应的框架，插入相应的网页 III 框架网页中的超级链接 要求：1）创建左侧框架网页 在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在 MainFrame 显示。默认显示“2004 年经典对白” 左侧框架背景为灰色 框架集需要显示边框，宽度为 3 象素 Ⅳ 利用已有网页制作框架网页 要求：按照样张所示，利用 index 文件夹中提供的四个网页，组成如图所示的框架网 页 【参考习题】 1、 创建一个顶部框架，TopFrame 中显示新浪的首页，MainFrame 显示 163 的首页。 两个框架需要显示滚动条，显示框架边框。效果如下图 2、 利用素材中的 163、sina 的图片制作如下的框架网页。 框架本身就是一个网页文件，而所谓的导航（目录)和正文 也都是另外独立的网页文件——也就是说，一 个框架一般至少需要 3 个网页文件组成。 你用什么软件编写的？注意退出时的保存提示。 == 比如一个简单的目录框架网页名为 INDEX.HTM，一般都包含 left.htm（左边导航目录)和 MAIL.HTM（右 边主体内容）部分 INDEX.