Dreamweaver-Flash-Fireworks网页制作培训教程第12课ppt课件.ppt

《Dreamweaver-Flash-Fireworks网页制作培训教程第12课ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12课用框架进行布局本课要点具体要求本课导读上机练习本课要点使用框架浮动框架具体要求掌握框架文档的创建方法掌握框架与框架集属性的设置方法掌握浮动框架的创建方法掌握浮动框架属性的设置方法本课导读框架是一种比较特殊的布局方式，它可以将浏览器窗口划分为多个独立的区域，每个区域显示不同的HTML文档，在需要固定网页中的某部分时比较适用。12.1使用框架使用框架，可以在单击超链接后，将链接页的内容显示在当前页面的某个框架中，而不需要重新开启窗口，这样可以省去重复布局。12.1使用框架12.1.1知识讲解12.1.2典型案例——制作风景名胜网页12.1.1知识讲解本节将学习框架的创建、编辑以及框

2、架与框架组属性的设置。12.1.1知识讲解1.认识框架与框架集2.创建框架3.编辑框架4.设置框架属性5.设置框架集属性1.认识框架与框架集框架是一个独立的HTML文档。框架集是由多个框架组合而成的，一个框架网页中包含多个框架的布局、链接和属性信息。用框架构成的网页，在保存时必须保存“框架个数+1”个文档（含一个框架集结构文档）。2.创建框架Dreamweaver中给出了框架的预定格式，一般采用预定格式即可创建框架页。创建框架的具体操作如下：（1）选择【文件】→【新建】命令，打开【新建文档】对话框。2.创建框架（2）在【常规】选项卡的【类别】列表框中选择【框架集】选项，然后在【框架集】

3、列表框中选择要创建的框架样式。（3）单击按钮，新建一个框架文档。也可将当前文档转换为框架文档，其方法为：在插入栏中的【布局】选项卡中单击【框架】按钮，在弹出的下拉菜单中选择需要的框架样式。3.编辑框架在创建的框架中，可以进行选取框架、调整框架大小、拆分框架和合并框架等操作，下面分别进行讲解。选取框架的方法：按住【Alt】键，在要选择的框架内单击鼠标即可选取该框架；也可在【框架】面板中单击框架来选取它。被选取的框架显示为虚线框。3.编辑框架选取框架集的方法：要选择框架集，在框架边框上单击即可；也可以在选取一个框架的基础上按住【Alt】键，再按键盘上的方向键来选取同级、不同级的框架。3.编

4、辑框架调节框架大小的方法：拖动框架边线即可调节框架的大小，也可通过框架集【属性】面板中的【行列选定范围】项来调节。3.编辑框架拆分框架的方法：选取一个框架后，再按住【Alt】键并拖动框架边线或文档窗口四周的边框，即可将框架拆分为多个框架。如果将框架边线拖到另一框架边线或窗口边界处，则可删除框架；如果其中有内容，则会提示是否保存要删除的框架中的内容。4.设置框架属性格属性选取框架后，其【属性】面板如下图所示。5.设置框架集属性选取框架集后，其【属性】面板如下图所示。12.1.2典型案例——制作风景名胜网页案例目标本案例将制作风景名胜网页，主要练习框架的创建、编辑和链接等，完成后的效果如下

5、图所示。12.1.2典型案例——制作风景名胜网页操作思路：（1）新建上方固定、左侧嵌套的框架集。（2）分别将框架和框架集保存。（3）分别给topFrame和leftFrame添加内容，并在外部制作nei1.html，nei2.html，xizang.html和xihu.html文件，最后指定链接和目标。操作步骤请老师参照软件讲解12.1.2典型案例——制作风景名胜网页案例小结本案例通过制作自助旅游网页，主要练习了框架的创建、框架大小的设置、框架内容的添加及链接和目标的设置等。在mainFrame框架中没有放置任何内容，只是将链接文件的目标位置指向了该框架，目的是使链接的nei1.htm

6、l，nei2.html，xizang.html和xihu.html文件在该框架中显示。其中，nei1.html，nei2.html，xizang.html和xihu.html文件可单独创建。为了观察效果，可选中mainFrame框架，在【属性】面板的【源文件】文本框中指定要显示的文件的路径。12.2浮动框架浮动框架有别于框架文档，它内嵌于普通的HTML文档中。12.2浮动框架12.2.1知识讲解12.2.2典型案例——对产品网页进行布局12.2.1知识讲解本节将介绍浮动框架的原理、建立浮动框架的步骤、浮动框架的属性设置和浮动框架文档的链接指定等知识。12.2.1知识讲解1.浮动框架的原

7、理2.建立浮动框架的方法3.设置浮动框架的属性4.链接浮动框架文档1.浮动框架的原理浮动框架是通过在HTML代码窗口中插入标签来嵌入框架的，它通过在”，或者选