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

《网页设计与制作案例教程-电子教案第13单元.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案第13单元.ppt（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、7.47.4使用框架布局网页使用框架布局网页 本章主要学本章主要学习习如何使用框架如何使用框架对对网网页页中的中的文本、文本、图图像等像等对对象象进进行合理的布局。行合理的布局。l 课程引导课程引导 （1 1）掌握在网）掌握在网页页中中创创建框架的操作方法。建框架的操作方法。（2 2）掌握）掌握为为框架命名并框架命名并导导入框架源文件入框架源文件的操作方法。的操作方法。（3 3）掌握如何保存框架集文件和各个框）掌握如何保存框架集文件和各个框架操作文件。架操作文件。l 知识技能目标知识技能目标 （4 4）掌握）掌握设设置框架集属性和框架属性的置框架集属性和框架属性的操作方法。操作方法。（5 5）

2、掌握）掌握编辑编辑框架内容的操作方法。框架内容的操作方法。（6 6）了解）了解设设置超置超级链级链接的操作方法。接的操作方法。l网页浏览效果展示网页浏览效果展示 框架网框架网页页07.html07.html的的浏览浏览效果如效果如图图所示。所示。图图7-48框架网框架网页页07.html的的浏览浏览效果效果l 本章操作任务本章操作任务 （1 1）在站点）在站点“长长沙世界之窗沙世界之窗”下下创创建子文件建子文件夹夹“0707框架网框架网页页”，在，在“0707框架网框架网页页”文件文件夹夹中中创创建框架集文件建框架集文件07.html07.html和三个网和三个网页页文档文档title.htm

3、ltitle.html、navi.htmlnavi.html、main.htmlmain.html。（2 2）设设置框架集和框架的属性，置框架集和框架的属性，调调整各框整各框架区域的大小。架区域的大小。（3 3）在站点中文件）在站点中文件夹夹“0707框架网框架网页页”下新建下新建一个子文件一个子文件夹夹“linklink”，在，在该该文件文件夹夹中新建几中新建几个用于个用于链链接的网接的网页页，然后，然后设设置超置超级链级链接。接。7.4.17.4.1框架的概述框架的概述 如果想将一个如果想将一个页页面拓展面拓展为为多个多个页页面，可面，可以在以在页页面中面中创创建一个框架。建一个框架。1

4、1框架的概念框架的概念 框架可以把框架可以把浏览浏览器窗口划分器窗口划分为为若干个区若干个区域，每个区域可以分域，每个区域可以分别显别显示不同的网示不同的网页页。使。使用框架可以非常方便地完成用框架可以非常方便地完成导导航工作，一般航工作，一般情况下，用情况下，用户户需要不停地在文档内容和需要不停地在文档内容和导导航航内容之内容之间进间进行切行切换换。如果利用框架。如果利用框架结结构，把构，把导导航内容固定在航内容固定在页页面的面的顶顶部或者左部或者左边边或者右或者右边边，用，用户户可以直接通可以直接通过导过导航条切航条切换换到想要到想要浏浏览览的的页页面，而且各个框架之面，而且各个框架之间间

5、不存在相互干不存在相互干扰问题扰问题。框架主要包括两个部分：一个是框架集，框架主要包括两个部分：一个是框架集，另一个就是框架。框架集的另一个就是框架。框架集的HTMLHTML文件描述的文件描述的是框架的是框架的结结构信息，框架集定构信息，框架集定义义了框架数、了框架数、框架的尺寸、框架的尺寸、载载入到框架的网入到框架的网页页等，而框架等，而框架是指在网是指在网页页中定中定义义的一个的一个显显示区域。示区域。2 2框架的特点框架的特点1 1新建网页新建网页7.4.27.4.2框架的创建与设置框架的创建与设置 （1 1）在站点）在站点“长长沙世界之窗沙世界之窗”下下创创建子文建子文件件夹夹“070

6、7框架网框架网页页”，在，在“0707框架网框架网页页”文件文件夹夹中中创创建一个网建一个网页页文档文档07.html07.html，保存，保存该该网网页页。（2 2）创创建三个网建三个网页页文件：文件：title.htmltitle.html、navi.htmlnavi.html、main.htmlmain.html。（1 1）显显示框架示框架边边框框 在在DreamweaverDreamweaver 8 8主窗口中，主窗口中，单击单击菜菜单单【查查看看】【可可视视化助理化助理】【框架框架边边框框】，使框架使框架边边框在文档窗口中可框在文档窗口中可见见。2 2显示框架边框和框架面板显示框架边

7、框和框架面板（2 2）显显示框架面板示框架面板 在在DreamweaverDreamweaver 8 8主窗口中，主窗口中，单击单击菜菜单单【窗口窗口】【框架框架】，显显示框架面板。示框架面板。（1 1）显显示框架的示框架的边边框框线线。（2 2）在）在“插入插入”工具工具栏栏上，上，单击单击按按钮钮，在，在下拉菜下拉菜单单中中单击单击菜菜单项单项【布局布局】，切，切换换到到“布局布局”插入工具插入工具栏栏。3 3创建框架创建框架 （3 3）单击单击“布局布局”插入工具插入工具栏栏中的中的【框架框架】按按钮钮，弹弹出下拉菜出下拉菜单单，单击该单击该下拉菜下拉菜单单中中的菜的菜单项单项【顶顶部和

8、嵌套的左部和嵌套的左侧侧框架框架】，弹弹出出 “框架框架标签辅标签辅助功能属性助功能属性”对话对话框，在框，在该对话该对话框中框中为为每一个框架指定一个每一个框架指定一个标题标题，然后，然后单击单击【确定确定】按按钮钮，编辑编辑窗口被划分成三个区域，窗口被划分成三个区域，即三个框架。即三个框架。（1 1）选择选择框架集框架集 方法之一：方法之一：打开框架面板，然后在框架打开框架面板，然后在框架面板中面板中单击单击框架的外框架的外层边层边框即可框即可选选中框架集。中框架集。方法之二：方法之二：在包含框架的文档窗口，将在包含框架的文档窗口，将鼠鼠标标指指针针指向框架最外的指向框架最外的边边框框线线

9、，指，指针变针变成成双箭双箭头头形状形状时时，单击单击鼠鼠标标左左键键即可即可选选中框架中框架集。集。4 4选择框架集和框架选择框架集和框架（2 2）选择选择框架框架 方法之一：方法之一：打开框架面板，然后在框架打开框架面板，然后在框架面板中面板中单击单击要要选择选择的框架即可的框架即可选选中中单单个框架。个框架。方法之二：方法之二：按住按住“AltAlt”键键，在框架内部，在框架内部单单击击某个框架，即可某个框架，即可选选中中单单个框架。个框架。（1 1）显显示框架示框架边边框框（2 2）显显示框架面板示框架面板（3 3）分割框架）分割框架（4 4）调调整框架的大小整框架的大小（5 5）删删

10、除框架除框架5 5分割框架和调整框架的大小分割框架和调整框架的大小 预览预览或者关或者关闭闭包含有框架的网包含有框架的网页页文档文档时时，必必须须先先对对框架集文件和框架文件框架集文件和框架文件进进行保存。行保存。创创建框架建框架时时，默，默认认的框架集文件名称是的框架集文件名称是UntitleFrameset-1UntitleFrameset-1、UntitleFrameset-2UntitleFrameset-2、，默，默认认的框架文件名称是的框架文件名称是UntitleFrame-1UntitleFrame-1、UntitleFrame-1UntitleFrame-1、。显显然，然，这样

11、这样的命名是不合适，必的命名是不合适，必须须重新重名。重新重名。6 6保存框架集和框架保存框架集和框架p 选选中中整整个个框框架架：在在框框架架面面板板上上单单击击外外边边框框选选中整个框架。中整个框架。p 在在Dreamweaver 8主主窗窗口口中中，单单击击菜菜单单【文文件件】【保保存存框框架架页页】或或者者【框框架架集集另另存存为为】或或者者【保保存存全全部部】，在在弹弹出出的的“另另存存为为”对对话话框框中中，选选择择合合适适的的保保存存位位置置，输输入入合合适适的的文文件件名名，然然后后单单击击【确确定定】按按钮钮，即即可可保保存框架集文件。存框架集文件。（1 1）保存框架集）保存

12、框架集（2 2）保存框架）保存框架 选选中整个框架，中整个框架，单击单击菜菜单单【文件文件】【保存全部保存全部】，先保存框架集文件，然后依次，先保存框架集文件，然后依次保存所有的框架文件。保存所有的框架文件。如果只如果只单单独保存某一个框架，只需先独保存某一个框架，只需先选选中某个需要保存的框架，然后中某个需要保存的框架，然后单击单击菜菜单单【文文件件】【保存全部保存全部】，在，在弹弹出的出的“另存另存为为”对对话话框中，框中，选择选择合适的保存位置，合适的保存位置，输输入合适的入合适的文件名，然后文件名，然后单击单击【确定确定】按按钮钮，即可保存，即可保存所所选择选择的框架。的框架。对对于包

13、括于包括3 3个框架的网个框架的网页页，保存，保存时时共有共有4 4个文件，一个是框架集文件，另外三个是框个文件，一个是框架集文件，另外三个是框架文件。架文件。（1 1）设设置框架集属性置框架集属性（2 2）设设置框架属性置框架属性7 7设置框架集和框架的属性设置框架集和框架的属性 （1 1）选选中上方的框架，中上方的框架，则则在框架属性面在框架属性面板中的板中的“源文件源文件”文本框中文本框中显显示的是框架文件示的是框架文件的源文件地址。的源文件地址。（2 2）单击单击“源文件源文件”文本框右文本框右边边打开按打开按钮钮，在在弹弹出的出的“选择选择HTMLHTML文件文件”对话对话框中框中选

14、择选择已制已制作好的网作好的网页页文件。文件。（3 3）用同）用同样样的方法在另外两个框架中的方法在另外两个框架中导导入已制作好的网入已制作好的网页页文件。文件。8 8导入框架源文件导入框架源文件 根据需要通根据需要通过过拖拖动动相相邻邻框架之框架之间间的的边边框框线线调调整各个框架区域的大小，使整各个框架区域的大小，使页页面整体效果面整体效果协调协调、美、美观观。9 9调整各框架区域的大小调整各框架区域的大小 （1 1）在当前站点中文件）在当前站点中文件夹夹“0707框架网框架网页页”下新建一个子文件下新建一个子文件夹夹“linklink”，用于存放，用于存放链链接接网网页页。（2 2）为导

15、为导航航栏栏中的中的“旋旋转转木木马马”创创建一个建一个对应对应的网的网页页“07_1.html07_1.html”，该该网网页页中插入一幅中插入一幅图图像，并将其保存在像，并将其保存在linklink子文件子文件夹夹下。下。1010设置超级链接设置超级链接（3 3）切）切换换到到“07.html07.html”网网页页的的编辑编辑窗口，在窗口，在左左侧侧的的导导航航栏栏中中选选中文字中文字“旋旋转转木木马马”，在属，在属性面板的性面板的“链链接接”栏栏右右侧单击侧单击【浏览浏览文件文件】按按钮钮，在，在“选择选择文件文件”对话对话框中框中选择刚选择刚才才创创建的建的网网页页文档文档 “07_

16、1.html07_1.html”。然后。然后单击单击属性面板属性面板“目目标标”栏栏右右侧侧的下拉列表，从中的下拉列表，从中选择选择“mainFramemainFrame”打开方式，即在主框架中打开打开方式，即在主框架中打开链链接网接网页页。1111重新保存框架集和所有框重新保存框架集和所有框架，并浏览网页效果。架，并浏览网页效果。课堂实践课堂实践 （1 1）打开）打开“课课堂堂实实践践”站点文件站点文件夹夹“0707框架框架网网页页”中的网中的网页页文档文档“07.html07.html”，该该网网页页采用采用了了“顶顶部框架部框架”结结构。构。1 1操作要求操作要求 （2 2）顶顶部框架的

17、源文件部框架的源文件为为“top07.htmltop07.html”，该该网网页页中插入了一中插入了一张张2 2行行1 1列的表格，第一行列的表格，第一行输输入一行文字，第二行中插入一入一行文字，第二行中插入一张张1 1行行1010列列的嵌套表格，的嵌套表格，该该表格每个表格每个单单元格中元格中输输入文字入文字作作为为超超级链级链接。接。（3 3）底部框架的源文件）底部框架的源文件为为“main07.htmlmain07.html”，该该网网页页文档原先已制作好，文档原先已制作好，只需只需设设置框架的源文件就可以。置框架的源文件就可以。课课堂堂实实践践的的框框架架网网页页07.html07.h

18、tml浏浏览览效效果果如如图图7-697-69所示。所示。2 2效果展示效果展示图图7-69课课堂堂实实践的框架网践的框架网页页的的浏览浏览效果效果 （1 1）将框架上半部分的下）将框架上半部分的下边边框框设设置置为为0 0，将框架下半部分的上将框架下半部分的上边边框框设设置置为为0 0。（2 2）各个框架的源文件网）各个框架的源文件网页页必必须设须设置居置居中中对齐对齐，以保，以保证证整个框架在整个框架在浏览时浏览时是居中是居中对对齐齐。3 3制作要点提示制作要点提示 课外拓展实践课外拓展实践 在在“湖湖铁职铁职院学院网站院学院网站”站点文件站点文件夹夹“0707框框架网架网页页”中中创创建网建网页页文档文档“07.html07.html”，该该网网页页采用了采用了“顶顶部和嵌套左部和嵌套左侧侧框架框架”结结构。构。本章小结本章小结 运用框架技运用框架技术术来来进进行网行网页页的布局和的布局和编辑编辑，可以可以调调用已有的用已有的页页面，丰富新的面，丰富新的页页面。面。