中文版网页制作基础：第8讲 框架的使用

Dreamweaver8

中文版网页制作基础

第八讲框架的使用1、认识框架

2、设置框架属性3、设计框架页面

1、认识框架1．什么是框架、框架集2．应用框架3．创建框架集4．调整框架集5．命名框架6．删除框架1.1.什么是框架框架是浏览器窗口中的一个区域，独立显示一个HTML文档内容，这部分内容既可以与浏览器的其他区域内容毫无关系，也可以与其他区域内容合成一个整体。框架集是一个HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes

部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。1.2．应用框架框架用的最多的场合就是导航，一组框架用来显示导航栏，另一组框架用来显示具体内容，如图所示，这是一个左右结构的框架页面，左侧显示的是导航栏，右侧是主框架，用来显示左侧每个栏目的具体信息。请注意，框架不是文件。用户很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示任意一个文档。1.3．创建框架集常用的创建框架集的方法，如下：从插入工具栏创建，在【布局】插入栏单击图标右侧的倒三角，打开下拉样式表，单击选择需要的框架样式即可。用菜单创建，在窗口中执行【插入】/【HTML】/【框架】命令，然后选择某一个框架集即可。用命令创建，在窗口中执行【文件】/【新建】/【框架集】命令也可以创建框架集。1.4．调整框架集使用预定义插入的框架集并不一定完全符合用户的需要，用户可以根据自己的需要，进一步设计自己的框架集，将鼠标光标置于需要变动的顶部框架内，执行【修改】/【框架页】/【拆分左框架】命令，如右图所示。1.5．命名框架

对于框架集中每个框架的命名，用户自己可以设置新的名称，也可以采用默认的框架命名，如左边框架就叫leftFrame、顶部框架就叫topFrame、中间的主要内容框架叫mainFrame、右边的叫rightFrame、底部的叫bottomFrame。在绝大多数的情况下，我们都用系统默认的命名方法，形象好记。1.6．删除框架框架集中的框架是不可以直接删除的，要想删除框架怎么办呢？其实很简单，只需要将要删除框架的边框拖出编辑区即可，将鼠标光标移到需要删除框架的边框上，待光标变成双箭头

，按住鼠标左键不放抓图，拖出编辑区即可，如下图所示。2、

设置框架属性1.选择框架和框架集2.设置框架属性3.设置框架集属性2.1．选择框架和框架集利用框架面板，可以很方便的选种框架和框架集。框架面板上直接单击选中“topFrame”框架，则编辑区中被选中的框架边框呈虚线状态，如左图所示，在框架面板中单击框架集的边框，可以选中整个框架集，此时编辑区的框架集边框呈虚线状态，如右图所示。2.2．设置框架属性2.3．设置框架集属性框架集【属性】面板上的部分项含义：【框架集】：用于显示当前框架集的结构，显示所选框架集是几行几列。【边框宽度】文本框：设置框架集中所有边框的宽度，单位为像素。【边框颜色】文本框：设置框架边框的颜色，默认为灰色。【值】文本框：设置选定行的高度或者选定列的宽度。【单位】：用于设置行或列尺寸的度量单位。3、设计框架页面1．用框架设计页面2．设置无框架内容3.1．用框架设计页面用框架设计页面的基本步骤：创建框架页面->保存框架页面->设置每个框架的源文件->保存预览3.2．设置无框架内容有些浏览器不支持框架技术，就不能正确浏览框架式网页。Dreamweaver8中允许创建无框架内容，以备用户因浏览器问题不能正常浏览网页时显示提示信息。具体操作：执行【修改】/【框架页】/【编辑无框架内容】命令，切换到无框架页