《框架的使用》PPT课件

《《框架的使用》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。1.2．应用框架框架用的最多的场合就是导航，一组框架用来显示导航栏，另一组框架用来显示具体内容，如图所示，这是一个左右结构的框架页面，左侧显示的是导航栏，右侧是主框架，用来显示左侧每个栏目的具体信息。请注意，框架不是文件。用户很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示任意一个文档。1.3．创建框架集常用的创建框架集的方法，如下：从插入工具栏创建，在【布局】插入栏单击图标右侧的倒三角，打开下拉样式表，单击选

3、择需要的框架样式即可。用菜单创建，在窗口中执行【插入】/【HTML】/【框架】命令，然后选择某一个框架集即可。用命令创建，在窗口中执行【文件】/【新建】/【框架集】命令也可以创建框架集。1.4．调整框架集使用预定义插入的框架集并不一定完全符合用户的需要，用户可以根据自己的需要，进一步设计自己的框架集，将鼠标光标置于需要变动的顶部框架内，执行【修改】/【框架页】/【拆分左框架】命令，如右图所示。1.5．命名框架对于框架集中每个框架的命名，用户自己可以设置新的名称，也可以采用默认的框架命名，如左边框架就叫leftFrame、顶部框架就叫topFrame、中间的主要内容框架叫m

4、ainFrame、右边的叫rightFrame、底部的叫bottomFrame。在绝大多数的情况下，我们都用系统默认的命名方法，形象好记。1.6．删除框架框架集中的框架是不可以直接删除的，要想删除框架怎么办呢？其实很简单，只需要将要删除框架的边框拖出编辑区即可，将鼠标光标移到需要删除框架的边框上，待光标变成双箭头，按住鼠标左键不放抓图，拖出编辑区即可，如下图所示。2、设置框架属性1.选择框架和框架集2.设置框架属性3.设置框架集属性2.1．选择框架和框架集利用框架面板，可以很方便的选种框架和框架集。框架面板上直接单击选中“topFrame”框架，则编辑区中被选中的框架边框

5、呈虚线状态，如左图所示，在框架面板中单击框架集的边框，可以选中整个框架集，此时编辑区的框架集边框呈虚线状态，如右图所示。2.2．设置框架属性选种框架以后，利用属性面板设置框架属性。框架【属性】面板上的各项含义：【框架名称】文本框：用于设置框架的名称。【源文件】文本框：用于指定在框架中显示的网页文件。【滚动】选项框：指定框架中是否显示滚动条。【不能调整大小】复选框：设置浏览时是否能够改变框架的大小。【边框颜色】文本框：为框架的边框设置颜色。【边界宽度】、【边界高度】文本框：用于设定框架的内容与左右、上下边框之间的距离，以像素为单位。2.3．设置框架集属性框架集【属性】面板上

6、的部分项含义：【框架集】：用于显示当前框架集的结构，显示所选框架集是几行几列。【边框宽度】文本框：设置框架集中所有边框的宽度，单位为像素。【边框颜色】文本框：设置框架边框的颜色，默认为灰色。【值】文本框：设置选定行的高度或者选定列的宽度。【单位】：用于设置行或列尺寸的度量单位。3、设计框架页面1．用框架设计页面2．设置无框架内容3.1．用框架设计页面用框架设计页面的基本步骤：创建框架页面->保存框架页面->设置每个框架的源文件->保存预览3.2．设置无框架内容有些浏览器不支持框架技术，就不能正确浏览框架式网页。Dreamweaver8中允许创建无框架内容，以备用户因浏览器

7、问题不能正常浏览网页时显示提示信息。具体操作：执行【修改】/【框架页】/【编辑无框架内容】命令，切换到无框架页面，在无框架内容编辑窗口输入文本“很抱歉，您的浏览器不支持框架技术，无法正常显示！”等内容，再次执行【修改】/【框架页】/【编辑无框架内容】命令，回到正常的编辑窗口。讲课结束下课休息