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

第12课 用框架进行布局 本课要点 具体要求 本课导读 上机练习 本课要点 使用框架 浮动框架 具体要求 掌握框架文档的创建方法 掌握框架与框架集属性的设置方法 掌握浮动框架的创建方法 掌握浮动框架属性的设置方法 本课导读 框架是一种比较特殊的布局方式，它可以将浏览器窗口划分为多个独立的区域，每个 区域显示不同的HTML文档，在需要固定网页中的某部分时比较适用。 12.1 使用框架 使用框架，可以在单击超链接后，将链接页的内容显示在当前页面的某个框架中，而不需要重新开启窗口，这样可以省去重复布局。 12.1 使用框架 12.1.1 知识讲解 12.1.2 典型案例——制作风景名胜网页 12.1.1 知识讲解 本节将学习框架的创建、编辑以及框架与框架组属性的设置。 12.1.1 知识讲解 1. 认识框架与框架集 2. 创建框架 3. 编辑框架 4. 设置框架属性 5. 设置框架集属性 1. 认识框架与框架集 框架是一个独立的HTML文档。框架集是由多个框架组合而成的，一个框架网页中包含多个框架的布局、链接和属性信息。用框架构成的网页，在保存时必须保存“框架个数+1”个文档（含一个框架集结构文档）。 2. 创建框架 Dreamweaver中给出了框架的预定格式，一般采用预定格式即可创建框架页。创建框架的具体操作如下： （1）选择【文件】→【新建】命令，打开【新建文档】对话框。 2. 创建框架 （2）在【常规】选项卡的【类别】列表框中选择【框架集】选项，然后在【框架集】列表框中选择要创建的框架样式。 （3）单击 按钮，新建一个框架文档。 也可将当前文档转换为框架文档，其方法为：在插入栏中的【布局】选项卡中单击【框架】按钮 ，在弹出的下拉菜单中选择需要的框架样式。 3. 编辑框架 在创建的框架中，可以进行选取框架、调整框架大小、拆分框架和合并框架等操作，下面分别进行讲解。 选取框架的方法：按住【Alt】键，在要选择的框架内单击鼠标即可选取该框架；也可在【框架】面板中单击框架来选取它。被选取的框架显示为虚线框。 3. 编辑框架 选取框架集的方法：要选择框架集，在框架边框上单击即可；也可以在选取一个框架的基础上按住【Alt】键，再按键盘上的方向键来选取同级、不同级的框架。 3. 编辑框架 调节框架大小的方法：拖动框架边线即可调节框架的大小，也可通过框架集【属性】面板中的【行列选定范围】项来调节。 3. 编辑框架 拆分框架的方法：选取一个框架后，再按住【Alt】键并拖动框架边线或文档窗口四周的边框，即可将框架拆分为多个框架。如果将框架边线拖到另一框架边线或窗口边界处，则可删除框架；如果其中有内容，则会提示是否保存要删除的框架中的内容。 4. 设置框架属性格属性 选取框架后，其【属性】面板如下图所示。 5. 设置框架集属性 选取框架集后，其【属性】面板如下图所示。 12.1.2 典型案例——制作风景名胜网页 案例目标 本案例将制作风景名胜网页，主要练习框架的创建、编辑和链接等，完成后的效果如下图所示。 12.1.2 典型案例——制作风景名胜网页 操作思路： （1）新建上方固定、左侧嵌套的框架集。 （2）分别将框架和框架集保存。 （3）分别给topFrame和leftFrame添加内容，并在外部制作nei1.html，nei2.html，xizang.html和xihu.html文件，最后指定链接和目标。 操作步骤请老师参照软件讲解 12.1.2 典型案例——制作风景名胜网页 案例小结 本案例通过制作自助旅游网页，主要练习了框架的创建、框架大小的设置、框架内容的添加及链接和目标的设置等。 在mainFrame框架中没有放置任何内容，只是将链接文件的目标位置指向了该框架，目的是使链接的nei1.html，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. 浮动