1、利用框架技术进行网页制作,信息技术学院 郑义,问题引入,没有使用框架技术的网页的通病为什么要使用框架框架的基本概念框架集和框架,在浏览同学们完成的第二次网页作品时，当我们单击页面上的某个超级链接时，就会打开一个新的浏览器窗口，而原来的浏览器窗口不是被关闭了，就是被新的浏览器窗口给遮挡住了。迷航现象的产生是由于网页设计者的考虑不周造成的。,问题引入,网页中不必每次都改变的内容,在一个网页中，我们并不需要所有的内容都在点击链接的时候改变。比如导航条、站点标志、版权信息等，都是不需要经常改变的。因此我们没有必要在每一个网页中都插入这些元素，这不但能减轻设计制作网页的工作量，而且可以减少用户浏览时由浏
2、览器检测这些元素是否已经被装载过的时间。,提出问题,怎样才能在同一个浏览器窗口中显示多个网页呢？一种好的方法是：采用框架结构,框架（Frameset）,框架是设计网页时非常有用的工具，它可以把浏览器窗口划分为若干个区域，每个区域分别显示不同的网页，从而使用户能够一次浏览更多的内容。,框架实际上由两部分组成，即框架集（Frameset）与框架（Frame）。 框架集：组织（或包容）框架的一个页面。没有具体的页面内容，不会在游览器中显示。用于定义文档中框架的结构、数量、尺寸及装入框架的页面文件。框架：框架集中的一个网页文档。不仅可在框架集中显示，还可单独在浏览器中显示，实际上就是一个普通的网页文件
3、。框架集与框架的关系：框架集被称为父框架，框架则被称为子框架。在框架中可创建新的网页文档，也可调用已编好的网页文档。,认识框架和框架集,框架的基本概念,框架是浏览器窗口的一个区域 ，在这个区域中可以显示一个单独的文档而不影响另一个区域中显示的内容。 在一个页面上可以分出多个区域设置多个框架，把这些框架看成一个整体，就称为框架集。框架集定义了窗口的布局结构。,使用框架结构的好处,版面布局美观 通过目录、索引来引导阅读内容的导航 用于导航时链接内容显示，不破坏版面的结构，不破坏目录或导航条的作用，使浏览者一直清楚自己处在什么位置。 加快网页的下载速度。,创建一个框架集,创建框架结构 编辑框架 保存
4、框架和框架集 修饰框架 超级链接 框架属性,可以根据自己的爱好以及网站的要求选择不同的框架集。,由于每个框架都包含一个网页 ，因此，网页窗口虽然被分成了三个框架，但却用到了四个网页，即三个框架文件和一个包含框架数、框架的大小、载入框架等信息的框架集网页。 四个网页文件的名字分别如下，可以更改。 框架集 Frameset 上面的框架 TopFrame 左边的框架 LeftFrame 右边的框架 MainFrame,在保存框架集网页时，需要保存N+1个文件,实现步骤,（1）在页面中创建框架集和框架，并对页面布局进行适当的调整。 （2）输入框架页面的内容。 （3）保存框架集文件和框架文件。 （4）确
5、认链接目标的框架设置，使所有的链接内容都出现在正确的区域内。 （5）通过设置框架和框架集属性，来改变框架页的外观等。,选择框架或框架集,1.选取框架 方法一：欲选取某个框架集，只需在框架面版相应的框架单击即可。方法二：在文档窗口中，按住ALT键，在欲选的框架里点击，便选取了相应的框架。,选择框架或框架集,2.选取框架集 方法一：在框架面版中，单击立体边框。 方法二：在文档窗口中将鼠标移动到框架与框架集只见的分隔线上，单击鼠标左键即可选中相应的框架集。,自主创建和删除框架,1. 拖曳法 （1）将光标置于框架的边框上。 （2）当出现拖曳图标时，将框架边框拖曳到适当的位置，框架结构就创建出来。,拖曳
6、框架边框,拖曳框架四角,自主创建和删除框架,2. 拆分法： （1）在文档编辑窗口下，将光标置于要拆分成框架结构的网页或者框架中。 （2）选择“修改”“框架集”，在下一级菜单中选择一种拆分形式。 （3）拆分完成后将光标置于框架边框上调整好到相应的位置。,自主创建和删除框架,删除框架的操作步骤如下：（1）将光标放置于要删除的框架的边上。 （2）将框架边框向边界线方向拖出即可删除框架结构。,创建嵌套框架,放置在一个框架之内的框架称为嵌套框架一个框架文件可以包含多个嵌套框架，大多数使用框架的网页都会用到嵌套框架。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套框架。要创建嵌套框架，可
7、将光标放置在某个边框中，然后选择“插入”“HTML” “框架”子菜单中的选项，或者选择“修改”“框架集”字菜单中的选项，就可以创建嵌套框架,编辑框架和框架集文件,编辑框架集内容有两种方法： （1）利用前面学到的知识，直接在相应的框架中输入内容。 （2）将框架中的网页文件事先编辑好，再在框架中导入。,保存框架和框架集,1. 保存框架 （1）选中框架：单击要保存的框架内部，选中。 （2）保存框架：选择“文件”“保存框架”，在弹出的对话框中选择存放位置，命名后，单击“保存”按钮。如果所有框架已保存，以后再做修改，则只需选择“文件”“保存所有框架”即可。 2. 保存框架集 （1）选中框架集：单击要保存
8、的框架集边线，选中。 （2）保存框架集：选择“文件”“框架集另存为”，选择存放位置，命名后，单击“保存”按钮。,创建框架页的链接,1、选中框架。 2、在框架属性面板上的“框架名称”一项给框架命名。 可以根据框架在整个框架网页中的位置命名，比如在上方的命名为“topFrame”，左面的导航命名为“leftFrame”，放置主要内容的命名为“mainFrame”。选中要链接的文字或者图片，在属性面板上的“链接”一项添加链接，然后打开“目标”下拉菜单,_blank：在新的窗口中打开链接。 _parent：在当前框架的父框架结构中打开链接。 _self：在框架自己内部打开链接。 _top：在浏览器窗口
9、中打开链接，取消所有的框架结构。mainFrame：在mainFrame框架中打开网页。 leftFrame：在leftFrame框架中打开网页。 topFrame：在topFrame框架中打开网页。,框架属性设置,设置框架的属性 框架名称：为框架取一个名称，便于脚本语言调用或链接目标的确定。 源文件：调入该框架的网页文件。 边框：是否显示边框，有三个值（是显示；否不显示；默认与其他框架一样），此设置在本框架集中均有效。,滚动：是否出现滚动条，有四个值（是显示；否不显示；自动随内容多少而决定；默认与其他框架一样）。 不能调整大小：选中后，在浏览器中将不能改变框架的大小，否则可改变。 边框颜色：
10、设置边框的颜色，默认为灰白色，在本框架集中均有效。 边界宽度：设置内容与左右边界的距离。 边界高度：设置内容与上下边界的距离。,框架属性设置,框架集的属性设置,边框：设置是否显示边框，对整个框架集有效。有三个值（是显示；否不显示；默认与其他框架一样）。 边框颜色：设置边框的颜色。 边框宽度：设置边框线的宽度，默认为6像素，若不想要边框，则设为0。 行或列：设置框架的高度或宽度。 单位：设置距离的单位。,框架尺寸的调整,在设计窗口中，可拖动鼠标直接改变框架的尺寸，也可利用属性面板改变。 1.选中要改变框架尺寸的框架集：单击边框线，出现框架集属性面板。 2.在面板的右边图示中，单击边界选中某框架，然后在“行”或“列”中输入具体的值。 3.在“单位”下拉框中，选择单位，有（像素、百分比、相对）。,
