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

《网页设计与制作案例教程-电子教案第13单元》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、7.4　使用框架布局网页本章主要学习如何使用框架对网页中的文本、图像等对象进行合理的布局。课程引导（1）掌握在网页中创建框架的操作方法。（2）掌握为框架命名并导入框架源文件的操作方法。（3）掌握如何保存框架集文件和各个框架操作文件。知识技能目标（4）掌握设置框架集属性和框架属性的操作方法。（5）掌握编辑框架内容的操作方法。（6）了解设置超级链接的操作方法。网页浏览效果展示框架网页07.html的浏览效果如图所示。图7-48框架网页07.html的浏览效果本章操作任务（1）在站点“长沙世界之窗”下创建子文件夹“07框架网页”，在“07框架网页”文件夹中创建框架集文件07.html和三个

2、网页文档title.html、navi.html、main.html。（2）设置框架集和框架的属性，调整各框架区域的大小。（3）在站点中文件夹“07框架网页”下新建一个子文件夹“link”，在该文件夹中新建几个用于链接的网页，然后设置超级链接。7.4.1　框架的概述如果想将一个页面拓展为多个页面，可以在页面中创建一个框架。1．框架的概念框架可以把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便地完成导航工作，一般情况下，用户需要不停地在文档内容和导航内容之间进行切换。如果利用框架结构，把导航内容固定在页面的顶部或者左边或者右边，用户可以直接通过导航条切

3、换到想要浏览的页面，而且各个框架之间不存在相互干扰问题。框架主要包括两个部分：一个是框架集，另一个就是框架。框架集的HTML文件描述的是框架的结构信息，框架集定义了框架数、框架的尺寸、载入到框架的网页等，而框架是指在网页中定义的一个显示区域。2．框架的特点1．新建网页7.4.2　框架的创建与设置（1）在站点“长沙世界之窗”下创建子文件夹“07框架网页”，在“07框架网页”文件夹中创建一个网页文档07.html，保存该网页。（2）创建三个网页文件：title.html、navi.html、main.html。（1）显示框架边框在Dreamweaver8主窗口中，单击菜单【查看】→【可视

4、化助理】→【框架边框】，使框架边框在文档窗口中可见。2．显示框架边框和框架面板（2）显示框架面板在Dreamweaver8主窗口中，单击菜单【窗口】→【框架】，显示框架面板。（1）显示框架的边框线。（2）在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏。3．创建框架（3）单击“布局”插入工具栏中的【框架】按钮，弹出下拉菜单，单击该下拉菜单中的菜单项【顶部和嵌套的左侧框架】，弹出“框架标签辅助功能属性”对话框，在该对话框中为每一个框架指定一个标题，然后单击【确定】按钮，编辑窗口被划分成三个区域，即三个框架。（1）选择框架集方法之一：打开框架面板，然

5、后在框架面板中单击框架的外层边框即可选中框架集。方法之二：在包含框架的文档窗口，将鼠标指针指向框架最外的边框线，指针变成双箭头形状时，单击鼠标左键即可选中框架集。4．选择框架集和框架（2）选择框架方法之一：打开框架面板，然后在框架面板中单击要选择的框架即可选中单个框架。方法之二：按住“Alt”键，在框架内部单击某个框架，即可选中单个框架。（1）显示框架边框（2）显示框架面板（3）分割框架（4）调整框架的大小（5）删除框架5．分割框架和调整框架的大小预览或者关闭包含有框架的网页文档时，必须先对框架集文件和框架文件进行保存。创建框架时，默认的框架集文件名称是UntitleFrameset

6、-1、UntitleFrameset-2、……，默认的框架文件名称是UntitleFrame-1、UntitleFrame-1、……。显然，这样的命名是不合适，必须重新重名。6．保存框架集和框架选中整个框架：在框架面板上单击外边框选中整个框架。在Dreamweaver8主窗口中，单击菜单【文件】→【保存框架页】或者【框架集另存为】或者【保存全部】，在弹出的“另存为”对话框中，选择合适的保存位置，输入合适的文件名，然后单击【确定】按钮，即可保存框架集文件。（1）保存框架集（2）保存框架选中整个框架，单击菜单【文件】→【保存全部】，先保存框架集文件，然后依次保存所有的框架文件。如果只单独

7、保存某一个框架，只需先选中某个需要保存的框架，然后单击菜单【文件】→【保存全部】，在弹出的“另存为”对话框中，选择合适的保存位置，输入合适的文件名，然后单击【确定】按钮，即可保存所选择的框架。对于包括3个框架的网页，保存时共有4个文件，一个是框架集文件，另外三个是框架文件。（1）设置框架集属性（2）设置框架属性7．设置框架集和框架的属性（1）选中上方的框架，则在框架属性面板中的“源文件”文本框中显示的是框架文件的源文件地址。（2）单击“源文件”文本框右边打