网页设计教程 教学课件 作者 裴献第8章 框架网页.ppt

《网页设计教程 教学课件 作者 裴献第8章 框架网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章框架网页框架网页是一种特殊的HTML网页，它可将浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。在网页中使用框架技术不仅方便了用户浏览，而且节省了页面空间，也可以使整个网站页面保持统一的风格。主要内容8.1认识框架网页8.2创建框架网页8.3保存框架和框架集文件8.4框架内网页的链接8.1认识框架网页框架网页就是运用了框架技术的网页，如图所示的腾讯论坛。框架技术需要两种类型的元素来实现。一种是单个框架（Frame），它是浏览器窗口中的一个区域，可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档；另一种是框架集（Frameset），它是一个HTML文件

2、，定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。如果要在浏览器中查看一组框架，我们可以输入框架集文件的URL，浏览器随后打开这些框架中的对应文档。通常将一个站点的框架集文件命名为index.html，以便当访问者未指定文件名时默认显示该名称。类似图所示的腾讯论坛，如果一个站点在浏览器中显示为包含三个框架的单个页面，则它实际上至少由四个单独的HTML文档组成：框架集文件以及三个网页文档，这三个文档包含在这些框架内初始显示的内容。当在Dreamweaver中设计使用框架集的页面时，必须保存全部这四个文件，以便该页面可以在浏览

3、器中正常工作。8.2创建框架网页8.2.1创建框架集1．使用预定义的框架集预定义的框架集只能在“文档”窗口的“设计”视图中插入。使用预定义的框架集操作步骤如下：（1）插入点放置在文档中。（2）执行下列操作之一：在插入栏的“布局”类别中，单击“框架”按钮的下拉箭头，如图所示，然后选择一种预定义的框架集。单击菜单“插入记录”→“HTML”→“框架”，在子菜单中选择预定义的框架集。8.2.2编辑框架集在编辑框架集前，应先选择菜单“查看”→“可视化助理”→“框架边框”，使框架边框在文档窗口的“设计”视图中显示出来。1.拆分框架将一个框架拆分成几个更小的框架，有如下几种方式：（1）要

4、拆分插入点所在的框架，从菜单“修改”→“框架集”子菜单选择拆分项，如图所示。（2）要以垂直或水平方式拆分一个框架或一组框架，请将框架边框从“设计”视图的边缘拖入“设计”视图的中间。（3）要使用不在“设计”视图边缘的框架边框拆分一个框架，请在按住Alt键的同时拖动框架边框。（4）要将一个框架拆分成四个框架，请将框架边框从“设计”视图一角拖入框架的中间。2.删除框架若要删除一个框架，可将框架的边框拖离页面或拖到父框架的边框上。需要注意的是：不能通过拖动边框完全删除一个框架集。要删除一个框架集，请关闭显示它的“文档”窗口。如果该框架集文件已保存，则删除该文件。8.2.3选择框架和

5、框架集创建好框架集和框架之后，我们可以对框架集和框架进行一系列的操作，例如保存、指定框架的打开文档、设置框架集和框架的属性等。要进行这些操作，第一步就是学会选择框架和框架集。1.在“框架”面板中选择框架和框架集2.在文档窗口中选择框架和框架集8.3保存框架和框架集文件框架集文件以及要在框架中显示的所有文档必须先保存，然后才可以在浏览器中预览该页面。我们可以分别保存框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。1．保存框架集文件2．保存在框架中显示的文档3．同时保存框架集文件和框架中的所有文档8.4框架内网页的链接8.4.1制作框架内的网页完成框架

6、和框架集的保存后，我们就可以将光标插入到子框架中开始制作网页了。制作框架内的网页实际上就是指定框架的初始内容，即在浏览器中预览框架集时所呈现的首页面。指定方法有两种：一种是将新内容插入到框架的空白文档中，另一种是在框架中打开现有的文档。实例演示8.4.2设置框架和框架集属性在页面中创建框架后，有时候需要对框架的属性进行相关的设置，如框架的名称和框架边框等。选择框架和框架集后，即可通过属性检查器查看和设置属性。需要注意是的，要更改框架的背景颜色，请设置该框架中文档的背景颜色。8.4.3在框架内创建链接要在一个框架中使用链接以打开另一个框架中的文档，必须设置“链接”和“目标”。

7、对于不同的框架结构，属性检查器中“目标”可选值不完全相同，该项的可选值与框架结构、框架名称自动关联，即框架结构和框架名称的改变会使得该项的可选值自动变化。如图所示的“目标”下拉列表可选值的具体含义如下：_blank:在新的窗口中打开链接文档，保留当前窗口。_parent:在链接的父框架内显示链接文档。_self:在当前框架打开链接文档，替换当前框架中的内容。_top:在当前文档的最外边的框架集内打开链接文档，替换所有框架。mainFrame:在主框架显示的网页窗口中打开目标网页，替换原有网页。leftFrame:在