网页设计与制作案例教程-电子教案设计第单元.ppt

* * 7.4　使用框架布局网页 本章主要学习如何使用框架对网页中的文本、图像等对象进行合理的布局。 课程引导 （1）掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件的操作方法。 （3）掌握如何保存框架集文件和各个框架操作文件。 知识技能目标 （4）掌握设置框架集属性和框架属性的操作方法。 （5）掌握编辑框架内容的操作方法。 （6）了解设置超级链接的操作方法。 网页浏览效果展示 框架网页07.html的浏览效果如图所示。 图7-48　　框架网页07.html的浏览效果 本章操作任务 （1）在站点“长沙世界之窗”下创建子文件夹“07框架网页”，在“07框架网页”文件夹中创建框架集文件07.html和三个网页文档title.html、navi.html、main.html。 （2）设置框架集和框架的属性，调整各框架区域的大小。 （3）在站点中文件夹“07框架网页”下新建一个子文件夹“link”，在该文件夹中新建几个用于链接的网页，然后设置超级链接。 7.4.1　框架的概述 如果想将一个页面拓展为多个页面，可以在页面中创建一个框架。 1．框架的概念 框架可以把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便地完成导航工作，一般情况下，用户需要不停地在文档内容和导航内容之间进行切换。如果利用框架结构，把导航内容固定在页面的顶部或者左边或者右边，用户可以直接通过导航条切换到想要浏览的页面，而且各个框架之间不存在相互干扰问题。 框架主要包括两个部分：一个是框架集，另一个就是框架。框架集的HTML文件描述的是框架的结构信息，框架集定义了框架数、框架的尺寸、载入到框架的网页等，而框架是指在网页中定义的一个显示区域。 2．框架的特点 1．新建网页 7.4.2　框架的创建与设置 （1）在站点“长沙世界之窗”下创建子文件夹“07框架网页”，在“07框架网页”文件夹中创建一个网页文档07.html，保存该网页。 （2）创建三个网页文件：title.html、navi.html、main.html。 （1）显示框架边框 在Dreamweaver 8主窗口中，单击菜单【查看】→【可视化助理】→【框架边框】，使框架边框在文档窗口中可见。 2．显示框架边框和框架面板 （2）显示框架面板 在Dreamweaver 8主窗口中，单击菜单【窗口】→【框架】，显示框架面板。 （1）显示框架的边框线。 （2）在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏。 3．创建框架 （3）单击“布局”插入工具栏中的【框架】按钮，弹出下拉菜单，单击该下拉菜单中的菜单项【顶部和嵌套的左侧框架】，弹出 “框架标签辅助功能属性”对话框，在该对话框中为每一个框架指定一个标题，然后单击【确定】按钮，编辑窗口被划分成三个区域，即三个框架。 （1）选择框架集 方法之一：打开框架面板，然后在框架面板中单击框架的外层边框即可选中框架集。 方法之二：在包含框架的文档窗口，将鼠标指针指向框架最外的边框线，指针变成双箭头形状时，单击鼠标左键即可选中框架集。 4．选择框架集和框架 （2）选择框架 方法之一：打开框架面板，然后在框架面板中单击要选择的框架即可选中单个框架。 方法之二：按住“Alt”键，在框架内部单击某个框架，即可选中单个框架。 （1）显示框架边框 （2）显示框架面板 （3）分割框架 （4）调整框架的大小 （5）删除框架 5．分割框架和调整框架的大小 预览或者关闭包含有框架的网页文档时，必须先对框架集文件和框架文件进行保存。创建框架时，默认的框架集文件名称是UntitleFrameset-1、UntitleFrameset-2、……，默认的框架文件名称是UntitleFrame-1、UntitleFrame-1、……。显然，这样的命名是不合适，必须重新重名。 6．保存框架集和框架 选中整个框架：在框架面板上单击外边框选中整个框架。 在Dreamweaver 8主窗口中，单击菜单【文件】→【保存框架页】或者【框架集另存为】或者【保存全部】，在弹出的“另存为”对话框中，选择合适的保存位置，输入合适的文件名，然后单击【确定】按钮，即可保存框架集文件。 （1）保存框架集 （2）保存框架 选中整个框架，单击菜单【文件】→【保存全部】，先保存框架集文件，然后依次保存所有的框架文件。 如果只单独保存某一个框架，只需先选中某个需要保存的框架，然后单击菜单【文件】→【保存全部】，在弹出的“另存为”对话框中，选择合适的保存位置，输入合适的文件名，