网页制作基础教程 第2版 教学课件 作者 邓振杰 第8章.ppt

《网页制作基础教程 第2版 教学课件 作者 邓振杰 第8章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第8章制作框架网页本章学习目标8.1认识框架网页8.2创建框架8.3编辑框架8.4设置框架和框架集属性8.5链接框架的内容8.6利用HTML创建网页框架本章学习目标●认识框架技术和框架网页。●创建框架网页的方法。●编辑框架网页的方法。●设置框架网页的属性。●创建框架页的链接。第8章　制作框架网页8.1认识框架网页框架（Frames）技术由框架集（Frameset）和框架（Frame）两部分组成。框架网页是一种特殊的HTML网页，它可以将浏览器窗口分成不同的区域，称为框架区域，每个区域都可以保存并显示一个不同的网页。在如图8-1所示的“天使部落”中，“理想篇

2、”网页就是利用框架网页设计的，在该网页中包含有4个子框架网页。图8-1“框架”网页示例8.2创建框架8.2.1插入预设的框架集首先启动DreamweaverCS3打开一个空白网页文档，然后执行下列操作之一可以创建新的框架集。●执行主菜单中的“插入记录”→“HTML”→“框架”命令，从弹出的子菜单中选择任意一个选项。●执行主菜单中的“修改”→“框架集”命令，从弹出的子菜单中选择任意一个选项。●执行主菜单中的“查看”→“可视化助理”→“框架边框”命令，得到一个只有边框的框架网页。●执行主菜单中的“窗口”→“插入”命令，调出“插入”面板，将插入面板切换到“布局”

3、类，对象面板变成“布局”插入面板，单击该面板上的“框架”按钮，如图8-2所示，在弹出的下拉菜单中选择任意一个选项，弹出“框架标签辅助功能属性”对话框，如图8-3所示。图8-2利用“插入”面板插入框架集图8-3“框架标签辅助功能属性”对话框8.2.2设计和插入框架集下面是设计和插入框架集的方法和步骤。（1）在“布局”插入面板上单击一种框架式样图标（共有13种），在弹出的“框架标签辅助功能属性”对话框中为每个框架指定一个标题，单击“确定”按钮，在页面中插入一个框架集，如图所示。（2）通过鼠标直接拖曳内部边框，可以调整框架页面的大小。（3）利用鼠标拖曳水平和垂直

4、外边框，可以分割框架页面。按住Alt键后拖曳内部边框，可以拆分内部框架页面，如图所示。8.3编辑框架8.3.1选定框架和框架集1．利用框架控制面板选定框架和框架集（1）执行主菜单中的“窗口”→“框架”命令（或按“Shift＋F2”键），打开“框架”控制面板，如图所示。（2）在“框架”控制面板中出现的就是当前页面中的框架结构。如图所示。2．在文档视窗中选定框架和框架集如果要选定一个框架，则需要在按住Alt键的同时单击框架内的任意位置。如果要选定整个框架集，只需单击任何一个框架边框即可。3．切换所选定框架和框架集要在选定的框架之间进行切换，可以执行如下的操作之

5、一。●若在相邻的框架之间进行切换，可按住Alt键的同时按下键盘上的右移箭头→或左移箭头←。●若要切换到父框架集，可按住Alt键的同时按下键盘上的上移箭头↑。●若要切换到子框架，可按住Alt键的同时按下键盘上的下移箭头↓。8.3.2删除框架将鼠标置于不需要框架的边框上，然后将其边框拖曳至父框架之外，即可将该框架删除。如果利用HTML代码设计，则可以直接在网页文档的HTML代码中删除框架集，即……。8.3.3在框架中打开网页文档在框架中打开网页文档的操作方法。（1）在需要插入网页文档的框架内用鼠标单击。（2）执行主菜单

6、中的“文件”→“在框架中打开…”命令（或按组合键“Ctrl＋Shift＋O”），打开“选择HTML文件”对话框，如图8-9所示。（3）在“选择HTML文件”对话框中选择所需的网页文档，单击“确认”按钮，网页文档就会出现在指定的框架中。（4）用同样的方法，可以在其他框架中打开已经设计好的不同网页文档，然后分别对各个框架进行保存图8-9“选择HTML文件”对话框8.3.4保存框架和框架集1．保存框架可以通过查看文档窗口中的框架选定线来判别当前正在保存的网页文档，所选区域就是“另存为”对话框中当前要保存的框架，被选定的框架集或框架的网页文件名也会显现在标题栏中，

7、如图所示。2．保存框架集在“框架”控制面板或网页文档窗口中选择要保存的框架集，然后执行下列一项操作。要保存框架集网页文件，执行主菜单中的“文件”→“保存框架页”命令。要将框架集保存为一个新的文件时，执行主菜单中的“文件”→“框架集另存为”命令。8.4设置框架和框架集属性框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。框架集属性确定框架的大小和框架之间的边框宽度和颜色等。在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。8.4.1框架的属性1．启动框架属性面板（1）执行主菜单中的“窗口”→“框架”命

8、令，打开“框架”控制面板。（2）按住Alt键的同时，用鼠标单击一个