《网页设计》完整课件 网页设计7(精品·公开课件).ppt

第七讲 框架的应用 问题：如果你经常在Internet上浏览冲浪，相信对下面的网页形式并不会感到陌生：当我们浏览一个网页时，发现网页的某部分区域（如网页的标题或者导航栏）的内容不变化，而其它区域不断地更新内容。 例如下图所示为易网的体坛纵横的一个网页，该网页的左边是网站的名称及导航控制（不变部分），右边是对应左边的导航控制（变化部分）。 这种特殊的功能是怎样实现的呢？ 回答：是使用网页中的框架技术！ 下面开始进入新的内容----框架的学习。 主要内容： 一、框架的基本概念 二、建立框架 三、举例说明 四、本节小结 五、作业 框架的基本概念 什么是框架？----框架就是浏览器窗口中规定的某一特定区域，它能够显示指定的HTML文档（独立的网页文档）。 框架的功能：将浏览器的窗口分成若干个部分，每部分可以分别显示不同的HTML文档（独立的网页文档） 。 框架集：一个浏览器窗口可以包含多个框架，这些框架组合在一起成为框架集。 注意：框架集是一个HTML文件，用来定义一系列框架的属性及他们的大小、位置等布局方式。而框架不是文件，框架是框架集中定义的区域，它可以显示文档。 使用框架的优点： 1、可以使网页的界面变得更加漂亮； 2、使网页的结构更加清晰。 使用框架的缺点： 1、不是所有的浏览器都支持框架（IE3.0），浏览时，不支持框架的浏览器把所有的网页中的内容在浏览器窗口中重叠显示，使页面变得一塌糊涂。 2、框架实际上是把几个HTML文件在同一个页面内显示。因此，在下载网页时，框架结构的网页会比普通网页要多下载几个 文件，速度当然要慢很多，另外，一个网页分成几个部分，每个部分可用的空间变得十分小了。 在实际中：很多网站的网页设计使用框架的方式进行页面布局，以达到清晰、明了的方式将浏览器窗口进行合理的划分，使浏览者随时找到并浏览自己感兴趣的内容。尽管框架存在一定的缺点，但是框架还是较受欢迎的一种网页结构，对于网页设计者来说，感兴趣的是在网页中如何创建框架。下面学习创建框架。 建立框架 Dreamweaver MX为了方便用户创建各种各样的框架集，把各种结构的框架的集快捷按钮都收集在插入栏中的【 框架】面板中，我们可以通过使用这些结构来建立各种各样的框架。 所以， 用户在创建框架时，可以先打开插入栏中的【 框架】面板进行操作。 一、建立框架 1、建立框架 建立框架的操作步骤： 1）、打开一个新的文档窗口。 2）、打开插入栏中的【 框架】面板。 3）、单击框架面板中的 按钮，在文档中创建了左右结构的框架集。 如下图所示： 在上图的文档窗口中显示的虚线框就是新插入的框架，如果看不到色虚线框，只要选择主菜单的【查看】/ 【可视化处理】/ 【框架边框】命令，就可以看到虚线框了。 2、添加内容 框架创建好以后，就可以往里添加内容了。每一个框架里都是一个独立的文档，可以直接添加内容，也可以在框架内打开已经存在的文档。 添加内容的操作方法： 1）、将光标移到左边的框架内，然后输入内容，每个框架内的内容的添加和设计单个网页的方法完全一样。 2）、将光标移到右边的框架内，然后选择主菜单中的【文件】/【在框架中打开】命令，在框架中打开一个新的文档。 3、保存框架 每一个框架都包含一个文档，因此一个框架集会包含多个文档，在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。 保存框架具体的操作步骤： 1）、选择主菜单中的【文件】/【保存全部】命令，整个框架边框的内侧出现阴影，在弹出的对话框中输入框架集的文件名（保存框架集文件）。一般取名为index.htm。 2）、接着出现第二个保存对话框，此时，右框架边框内侧出现阴影，保存右框架内容，输入文件名（保存右框架内文件）。 3）、接着出现第三个保存对话框，此时，左框架边框内侧出现阴影，保存左框架内容，输入文件名（保存左框架内文件）。 整个框架组就保存完毕。 提示：在含有框架的网页中，保存时，一般网页中有多少个框架（n个），要保存的文件是(n+1)个，特别是新建的网页，并且是在各个框架中直接输入内容，记得有这么多个文件需要保存，别漏了。 如果是框架中已存在的文档（比如是在框架中打开的文档）可以不用起名保存。 二、选取框架 我们都知道要想对文档中的元素进行编辑和修改，必须首先选定该元素，因此要想编辑修改框架，也要先选定框架。 1、选定一个框架 选定一个框架一般有两种方法： （1）、按下Alt键，然后在欲选定的框架内单击鼠标，将该框架选定，此时被选定的框架边框内侧出现虚线，属性面板中显示出该框架的属性参数。 （2）、选择主菜单中的“窗口→其它→框架” 命令 ，打开【框架