网页设计与制作_2_利用框架技术课件.ppt

《网页设计与制作_2_利用框架技术课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、利用框架技术进行网页制作信息技术学院郑义问题引入没有使用框架技术的网页的通病为什么要使用框架框架的基本概念框架集和框架在浏览同学们完成的第二次网页作品时，当我们单击页面上的某个超级链接时，就会打开一个新的浏览器窗口，而原来的浏览器窗口不是被关闭了，就是被新的浏览器窗口给遮挡住了。迷航现象的产生是由于网页设计者的考虑不周造成的。问题引入网页中不必每次都改变的内容在一个网页中，我们并不需要所有的内容都在点击链接的时候改变。比如导航条、站点标志、版权信息等，都是不需要经常改变的。因此我们没有必要在每一个网页中都插入这些元素，

2、这不但能减轻设计制作网页的工作量，而且可以减少用户浏览时由浏览器检测这些元素是否已经被装载过的时间。提出问题怎样才能在同一个浏览器窗口中显示多个网页呢？一种好的方法是：采用框架结构框架（Frameset）框架是设计网页时非常有用的工具，它可以把浏览器窗口划分为若干个区域，每个区域分别显示不同的网页，从而使用户能够一次浏览更多的内容。框架实际上由两部分组成，即框架集（Frameset）与框架（Frame）。框架集：组织（或包容）框架的一个页面。没有具体的页面内容，不会在游览器中显示。用于定义文档中框架的结构、数量、尺寸及

3、装入框架的页面文件。框架：框架集中的一个网页文档。不仅可在框架集中显示，还可单独在浏览器中显示，实际上就是一个普通的网页文件。框架集与框架的关系：框架集被称为父框架，框架则被称为子框架。在框架中可创建新的网页文档，也可调用已编好的网页文档。认识框架和框架集框架的基本概念框架是浏览器窗口的一个区域，在这个区域中可以显示一个单独的文档而不影响另一个区域中显示的内容。在一个页面上可以分出多个区域设置多个框架，把这些框架看成一个整体，就称为框架集。框架集定义了窗口的布局结构。使用框架结构的好处版面布局美观通过目录、索引来引导阅

4、读内容的导航用于导航时链接内容显示，不破坏版面的结构，不破坏目录或导航条的作用，使浏览者一直清楚自己处在什么位置。加快网页的下载速度。创建一个框架集创建框架结构编辑框架保存框架和框架集修饰框架超级链接框架属性可以根据自己的爱好以及网站的要求选择不同的框架集。由于每个框架都包含一个网页，因此，网页窗口虽然被分成了三个框架，但却用到了四个网页，即三个框架文件和一个包含框架数、框架的大小、载入框架等信息的框架集网页。四个网页文件的名字分别如下，可以更改。框架集Frameset上面的框架TopFrame左边的框架LeftFra

5、me右边的框架MainFrame在保存框架集网页时，需要保存N+1个文件实现步骤（1）在页面中创建框架集和框架，并对页面布局进行适当的调整。（2）输入框架页面的内容。（3）保存框架集文件和框架文件。（4）确认链接目标的框架设置，使所有的链接内容都出现在正确的区域内。（5）通过设置框架和框架集属性，来改变框架页的外观等。选择框架或框架集1.选取框架方法一：欲选取某个框架集，只需在框架面版相应的框架单击即可。方法二：在文档窗口中，按住ALT键，在欲选的框架里点击，便选取了相应的框架。选择框架或框架集2.选取框架集方法一：在

6、框架面版中，单击立体边框。方法二：在文档窗口中将鼠标移动到框架与框架集只见的分隔线上，单击鼠标左键即可选中相应的框架集。自主创建和删除框架1.拖曳法（1）将光标置于框架的边框上。（2）当出现拖曳图标时，将框架边框拖曳到适当的位置，框架结构就创建出来。拖曳框架边框拖曳框架四角自主创建和删除框架2.拆分法：（1）在文档编辑窗口下，将光标置于要拆分成框架结构的网页或者框架中。（2）选择“修改”→“框架集”，在下一级菜单中选择一种拆分形式。（3）拆分完成后将光标置于框架边框上调整好到相应的位置。自主创建和删除框架删除框架的操作

7、步骤如下：（1）将光标放置于要删除的框架的边上。（2）将框架边框向边界线方向拖出即可删除框架结构。创建嵌套框架放置在一个框架之内的框架称为嵌套框架．一个框架文件可以包含多个嵌套框架，大多数使用框架的网页都会用到嵌套框架。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套框架。要创建嵌套框架，可将光标放置在某个边框中，然后选择“插入”→“HTML”→“框架”子菜单中的选项，或者选择“修改”→“框架集”字菜单中的选项，就可以创建嵌套框架编辑框架和框架集文件编辑框架集内容有两种方法：（1）利用前面学到的知识，

8、直接在相应的框架中输入内容。（2）将框架中的网页文件事先编辑好，再在框架中导入。保存框架和框架集1.保存框架（1）选中框架：单击要保存的框架内部，选中。（2）保存框架：选择“文件”→“保存框架”，在弹出的对话框中选择存放位置，命名后，单击“保存”按钮。如果所有框架已保存，以后再做修改，则只需选择“文件”→“保存所有框架”即可。2.