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

框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。我们画一张示意图来进行讨论。 　　这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。 　　下面我们就来从头开始制作一个框架。 　　1、点“文件”菜单新建，弹出“新建文档”对话框如下图： 　　或在插入栏布局选＂框架：左框架＂如下图： 　　Dreamweaver MX 2004生成一个空白的框架页面，如下图： 　　2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。 3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。 　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图） 虚线笼罩在右边就是保存框架中右边网页。（如下图） 虚线笼罩在左边就是保存框架中左边的网页：（如下图） ??? 三个页面保存完毕。 　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图） 　　6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。　　7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。 更多Dreamweaver 教程请继续访问建站学的Dreamweaver教程专区。? 实验：实验： 1frameset rows=* cols=200,300,* 2）分别在“框架”面板中选择相应的框架，插入相应的网页 III 框架网页中的超级链接 要求：1）创建左侧框架网页 2）在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白” 3）左侧框架背景为灰色 4）框架集需要显示边框，宽度为3象素 Ⅳ 利用已有网页制作框架网页 要求：按照样张所示，利用index文件夹中提供的四个网页，组成如图所示的框架网页 【参考习题】 创建一个顶部框架，TopFrame中显示新浪的首页，MainFrame显示163的首页。两个框架需要显示滚动条，显示框架边框。效果如下图 利用素材中的163、sina的图片制作如下的框架网页。 框架本身就是一个网页文件，而所谓的导航（目录)和正文 也都是另外独立的网页文件——也就是说，一个框架一般至少需要3个网页文件组成。 你用什么软件编写的？注意退出时的保存提示。 == 比如一个简单的目录框架网页名为INDEX.HTM，一般都包含left.htm（左边导航目录)和MAIL.HTM（右边主体内容）部分 INDEX.HTM网页 关键代码应为 frameset cols=150,* frame name=contents target=main src=left.htm frame name=main src=main.htm noframes body  框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 一个框架结构有两部分网页文件构成： 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。 一、创建框架 在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。 1、使用预制框架集 (1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。 （2）、使用鼠标直接从框架的左侧边缘河上边缘向中