Dreamweaver学习HTML+DIV+CSS教学PPT第10章-网页框架Frame

1、第10章 网页框架Frame在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。10.1创建框架架一个完整整的框架架页面应应该包括括两个部部分：框框架和框框架集。前面介介绍了框框架集的的作用，它用来来定义框框架的各各种属性性。在网网页中框框架集是是不可见

2、见的，显显示出来来的只是是各个框框架。框框架集本本身是一一个网页页再加上上框架的的目标页页面，所所以一个个完整的的框架集集包含有有多个页页面。10.1.1自定义框框架在创建自自定义框框架之前前，首先先确定是是否打开开框架可可视元素素。如果果没有，需要按按照以下下步骤进进行操作作：单击击【查看】|【可视化助助理】|【框架边框框】命令，使使其处于于选中状状态。此此时，页页面中可可以显示示框架边边框。创创建自定定义框架架的具体体步骤如如下： 自定义左左右框架架效果自定义上上下框架架效果10.1.2预定义框框架在DreamweaverCS3中，系统统预定义义了13种框架类类型。通通过插入入栏中【布局】

3、标签的框框架按钮钮，可以以为页面面设置框框架，具具体步骤骤如下： 框架子菜菜单【框架标签签辅助功功能属性性】对话框10.1.2预定义框框架单击【确确定】按按钮，完完成创建建预定义义框架，效果如如图左所所示。按按照以上上步骤，可以创创建其他他类型框框架，如如左侧和和嵌套的的顶部框框架，效效果如图图右所示示。 顶部和嵌嵌套的左左侧框架架效果左左侧和嵌嵌套的顶顶部框架架效果10.1.3自定义嵌嵌套框架架前面介绍绍了框架架的创建建方法，使用系系统预定定义的方方法可以以快速创创建出复复杂的框框架。但但是预定定义框架架有时并并不能完完全满足足需要，此时需需要创建建自定义义框架。框架像像表格一一样可以以多重

4、嵌嵌套，具具体步骤骤如下： 下框架嵌嵌套框架架效果多重嵌套套框架效效果10.2框架源码码前一小节节介绍如如何创建建框架集集和框架架，接下下来查看看构成框框架的源源码会有有怎样的的变化。本小节节将介绍绍框架源源码，以以10.1.3小节的实实例进行行讲解，打开实实例框架架集.从源码中中可以看看出，网网页中有有两个陌陌生的标标签和和。其其中标标签用于于设置框框架集，标签签用于设设置框架架。这些些标签都都是成对对出现，如果不不结束标标签可能能会造成成页面混混乱。标签包包含rows和和cols两个个属性，这两个个属性分分别用于于设置水水平拆分分和垂直直拆分框框架，还还用于设设置框架架的尺寸寸。10.2框

5、架源码码标签有有多个属属性，其其使用语语法如表表 。（续表）10.3调整框架架前面了解解了如何何创建框框架。新新创建的的框架需需要进行行一些调调整才能能符合设设计的要要求，如如框架结结构、尺尺寸大小小和数量量等。在在实际应应用中，还需要要对框架架集及其其属性进进行修改改。本节节将介绍绍如何调调整框架架以适合合需要。10.3.1选择框架架修改对象象属性时时首先选选中对象象。对框框架集或或框架进进行修改改时，首首先选中中框架对对象。选选中框架架集时，其所有有框架边边框显示示出虚线线，表示示该框架架处于选选中状态态。同样样当框架架选中时时，也会会显示虚虚线，表表示选中中，效果果如图10.9所示。【框

6、架】面板嵌嵌套框架架效果10.3.1选择框架架选中一个个框架后后，可以以结合Alt键键和方向向键进行行框架选选择的切切换。选中第一一层框架架集效果果选选中最右右下方框框架效果果10.3.2保存框架架设计好框框架页面面后，要要保存框框架。因因为框架架页面包包含了多多个网页页，所以以保存时时与普通通页面不不一样。在DreamweaverCS3中可以保保存一个个框架集集，也可可以单独独保存一一个框架架，还可可以保存存所有的的框架集集及框架架。最快快捷的方方式是保保存框架架集。保保存框架架集的具具体步骤骤如下：单击框架架边框选选中框架架集。单击【文件】|【框架集另另存为】命令，弹弹出【另存为】对话框。

7、输入路路径及名名称，单单击【确定】按钮。如果框架架集已经经保存过过，单击击【文件】|【保存框架架集】命令。10.3.3设置框架架集插入框架架集后，需要对对框架集集进行一一些设置置，如边边框架有有无、大大小和颜颜色等。在DreamweaverCS3中，可通通过框架架集的【属性】面板进行行设置。框架集集的【属性】面板如图图所示。 边框集属属性设置置效果预览效果果10.3.4设置框架架设置框架架集后，同样也也需要设设置框架架的属性性。例如如，设置置框架的的名称、尺寸大大小、边边框和滚滚动条等等属性。接着上一一小节中中的实例例设置框框架属性性，具体体步骤如如下：框架滚动动条效果果框框架架属性设设置效果

8、果10.3.5命名框架架集页面面在DreamweaverCS3中，不能能通过【属性】面板进行行命名，而是通通过设计计视图工工具栏和和页面属属性来进进行设置置。设计计视图工工具栏设设置的具具体步骤骤如下：设计视图图工具栏栏框架集标标题效果果10.3.6修改框架架尺寸前面介绍绍通过【属性】面板可以以修改框框架的尺尺寸，还还可通过过拖动鼠鼠标进行行框架的的大小修修改，具具体步骤骤如下：调整框架架尺寸10.3.7使用无框框架内容容当浏览器器不支持持框架元元素时，可以设设置提示示信息，告诉浏浏览者浏浏览的页页面不能能正常显显示。此此时通过过编辑无无框架内内容来提提示浏览览者，具具体步骤骤如下：编辑无框框

9、架内容容10.4设置框架架链接在框架中中可以使使用链接接来控制制框架内内容，把把链接的的目标定定位在指指定的框框架。例例如，电电子书类类网页的的左框架架用于放放置目录录等导航航信息，右框架架用于放放置主体体内容。此时需需要把右右框架设设置为主主框架（main_frame），当单单击目录录导航时时，链接接内容即即可显示示在主框框架内，具体步步骤如下下：10.4设置框架架链接按F12键预览览网页，效果如如图左所所示。选选择【目目录三】选项，右边出出现“目目录三的的内容”，如图图右所示示。 框架链接接效果改变框架架链接效效果10.5使用浮动动框架iframe浮动框架架比普通通框架要要灵活，它可以以像层一一样在网网页中放放置。浮浮动框架架结合脚脚本程序序可制作作出页面面的局部部更新。在此将将介绍浮浮动框架架的基本本用法10.5使用浮动动框架iframe在DreamweaverCS3中不能能在【属属性】面面板中设设置iframe，只只能手动动进行修修改源码码。将前前面的源源码复制制到网页页的标签之之间，预预览效果果如图所所示。iframe效果10.6专家总结结本章介绍绍了框架架的基本本概念。读者可可以学习习如何创创建框架架、设置置框架大大小和框框架命名名等基本本操作。在使用用框架的的过程中中，注意意要理解解框架的的基本概概念和结结构，以以及框架架的嵌套套关系。通