Dreamweaver课件：第9章框架和框架集.ppt

《Dreamweaver课件：第9章框架和框架集.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第9章建立框架网页内容提要框架网页的基本原理创建框架和框架集框架文件的结构和保存框架的属性和操作具体的框架实例学习目标了解框架及框架集熟悉框架及框架集的创建掌握框架及框架集的基本操作掌握框架及框架集的属性设置学会使用框架进行简单的页面布局使用链接控制框架内容9.1理解框架网页的基本原理9.1理解框架网页的基本原理所谓“框架”，就是将浏览器窗口划分为若干个区域。框架网页并不是一个真正意义上的网页，它主要记录在框架网页中所包含的框架数量以及拆分方式等信息，每一个单独的框架将由具有实际内容的网页填充。在上述框架网页内共有三个框架

2、，因此需要三个相对应的网页，因此，框架网页加上三个独立的网页，共有四个网页。框架常用于站点导航系统。网页1和网页2中上方的标题和左侧导航按钮是相同的。标题和导航按钮分别对应在两个独立的网页中。右下方的内容也分别对应于独立的网页，利用框架的链接属性，当访问者可以单击菜单项要浏览其他内容时，导航菜单和标题则几乎不发生任何变化。由此可见，框架网页不但是页面布局的解决方案，也是避免重复劳动的一种方法。9.1理解框架网页的基本原理网页1网页29.2新建框架网页9.2新建框架网页在Dreamweaver中可以通过两种方式插入框架集。一

3、种是自己直接拆分，另外一种是插入预先定义的框架集。Dreamweaver预先定义的框架集存放在“插入”工具栏“布局”选项中的“框架”按钮中，用户可以随意选择自己需要的框架集类型。9.2新建框架网页建立框架的目的就是将窗口分成大小不同的子窗口,在不同的窗口中显示不同的文档内容.9.2新建框架网页新建框架网页操作步骤：（1）建立站点及网页（2）插入预先定义的框架集（3）自己直接拆分框架集拆分上框架效果图9.2新建框架网页9.3增加、调整和删除框架9.3增加、调整和删除框架增加、调整和删除框架操作步骤：9.3增加、调整和删除框架

4、（1）准备工作（2）增加框架（3）删除框架（4）调整框架提示:用户还可以划分已有框架，在当前框架集文件中创建新的框架集。在其他框架集中的框架集被称为“嵌入式框架集”。要创建嵌入式框架集，需要先将光标停放在已有框架内。按住Alt键单击一下，然后在文档窗口中拖动框架边框（不要松开Alt键），将框架纵向或横向划分。效果图9.4保存框架和框架集中的文件9.4.1按对应关系保存框架集和框架集中的文件保存框架集和框架集中的文件操作步骤：9.4保存框架和框架集中的文件（1）保存框架和框架集（2）保存单个框架页面效果图一般在保存框架时,先

5、保存框架集,再保存框架9.4.2打开和关闭框架中的文件打开和关闭框架中的文件与打开和关闭网页文件相类似。但要注意的是利用“文件”

6、“打开”命令，如果选取的是框架集文件，则可同时打开该框架集和其中的框架页面。如果选取的是单个框架页面，则只能打开该页面。9.4保存框架和框架集中的文件课堂案例1-运动休闲网案例学习目标:使用”新建”命令建立框架集.使用”页面属性”改变页面边距.使用”插入”面板”常用”选项卡中的按钮制作完整的框架网页.案例知识要点:使用上方固定框架制作的网页的结构图效果.使用属性面板改变框架的大小.使用”表格”和

7、”图像”按钮插入表格和图像制作完整的框架网页效果.9.5使用框架面板9.5使用框架面板框架和框架集都是独立的HTML文档。要修改框架或框架集，必须先选取要修改的框架或框架集。选择的方法包括在文档窗口中直接选择或使用框架面板进行选择。要在文档窗口中直接选择框架，可以按住Alt键在框架内单击。要在文档窗口中直接选择框架集，可以在框架的边框上单击。在“框架”面板中，框架集有明显的三维边框，而且框架有灰色线条并显示框架名。9.5使用框架面板9.5使用框架面板9.5使用框架面板查看框架显示“框架”面板效果图9.6修改框架属性9.6修

8、改框架属性设置框架的属性主要通过其属性面板进行。按住Alt键单击框架，可查看框架属性。9.6修改框架属性“框架名称”：决定用来作为超级链接目标和脚本引用的当前框架名。框架名可以是一个单词，也允许下划线，但是不允许用短横（-）、句点（.）和空格等，也不要使用中文。“源文件”：决定框架的源文档，可输入文件名或单击文件夹图标浏览并选择文件。还有一种方法可以在框架中打开文件：先将光标停放在框架中，然后选择“文件”

9、“在框架中打开”。“滚动”：决定在没有足够空间显示当前框架中的内容时是否使用滚动条。该下拉列表有四个选项，大多数浏览器

10、默认值为“自动”。“不能调整大小”：使当前框架不能重调大小，防止用户拖动框架边框。“边框”：控制当前框架的边框。其选项为“是”、“否”和“默认”。本选择可以覆盖为框架集定义的边框设置。“边框颜色”：设置所有和当前框架相邻的边框的颜色。本设置可以覆盖框架集的边框颜色“边界宽度”：设置左右边距的宽度（单位为