Dreamweaver课件：第9章 框架与框架集.pptVIP

第9章 建立框架网页 内容提要 框架网页的基本原理 创建框架和框架集 框架文件的结构和保存 框架的属性和操作 具体的框架实例 学习目标 了解框架及框架集 熟悉框架及框架集的创建 掌握框架及框架集的基本操作 掌握框架及框架集的属性设置 学会使用框架进行简单的页面布局 使用链接控制框架内容 9.1 理解框架网页的基本原理 9.1 理解框架网页的基本原理 所谓“框架”，就是将浏览器窗口划分为若干个区域。 框架网页并不是一个真正意义上的网页，它主要记录在框架网页中所包含的框架数量以及拆分方式等信息，每一个单独的框架将由具有实际内容的网页填充。 在上述框架网页内共有三个框架，因此需要三个相对应的网页，因此，框架网页加上三个独立的网页，共有四个网页。 框架常用于站点导航系统。网页1和网页2中上方的标题和左侧导航按钮是相同的。标题和导航按钮分别对应在两个独立的网页中。右下方的内容也分别对应于独立的网页，利用框架的链接属性，当访问者可以单击菜单项要浏览其他内容时，导航菜单和标题则几乎不发生任何变化。由此可见，框架网页不但是页面布局的解决方案，也是避免重复劳动的一种方法。 9.2 新建框架网页 9.2 新建框架网页 在Dreamweaver 中可以通过两种方式插入框架集。一种是自己直接拆分，另外一种是插入预先定义的框架集。 Dreamweaver 预先定义的框架集存放在“插入”工具栏“布局”选项中的“框架”按钮中，用户可以随意选择自己需要的框架集类型。 9.2 新建框架网页 新建框架网页 操作步骤： 9.3 增加、调整和删除框架 9.3 增加、调整和删除框架 增加、调整和删除框架 操作步骤： 9.4 保存框架和框架集中的文件 9.4.1 按对应关系保存框架集和框架集中的文件 保存框架集和框架集中的文件 操作步骤： 9.4.2 打开和关闭框架中的文件 打开和关闭框架中的文件与打开和关闭网页文件相类似。但要注意的是利用“文件”|“打开”命令，如果选取的是框架集文件，则可同时打开该框架集和其中的框架页面。如果选取的是单个框架页面，则只能打开该页面。 课堂案例1-运动休闲网 案例学习目标: 使用”新建”命令建立框架集. 使用”页面属性”改变页面边距. 使用”插入”面板”常用”选项卡中的按钮制作完整的框架网页. 案例知识要点: 使用上方固定框架制作的网页的结构图效果. 使用属性面板改变框架的大小. 使用”表格”和”图像”按钮插入表格和图像制作完整的框架网页效果. 9.5 使用框架面板 9.5 使用框架面板 框架和框架集都是独立的HTML文档。 要修改框架或框架集，必须先选取要修改的框架或框架集。选择的方法包括在文档窗口中直接选择或使用框架面板进行选择。 要在文档窗口中直接选择框架，可以按住Alt键在框架内单击。 要在文档窗口中直接选择框架集，可以在框架的边框上单击。 在“框架”面板中，框架集有明显的三维边框，而且框架有灰色线条并显示框架名。 9.5 使用框架面板 9.6 修改框架属性 9.6 修改框架属性 设置框架的属性主要通过其属性面板进行。 按住 Alt 键单击框架，可查看框架属性。 9.6 修改框架属性 提示：在默认情况下，Dreamweaver 将设置默认的框架边距宽度和高度值。这样可能会使网页内容和边框之间存在距离。因此，要消除该边距，可以将“边界宽度”和“边界高度”两个值均设置为0。这样，再到浏览器中预览时，框架和内容之间就没有距离了。 9.6 修改框架属性 修改框架属性 操作步骤： 9.7 设置框架集的属性 9.7 设置框架集的属性 要查看框架集属性，单击框架边框。 要查看所有的框架集属性，可单击“属性”面板右下角的扩展箭头。 课堂案例2-家具天地网 案例学习目标: 使用”修改”菜单设置页面边距. 使用” 属性”面板设置框架集的属性. 案例知识要点: 使用”页面属性”命令设置页面边距. 使用属性面板设置框架的大小. 9.8 通过超级链接控制框架显示的内容 课堂案例3-旅游信息服务 案例学习目标: 使用”属性”面板为图片添加链接,使网页更加完美. 案例知识要点: 使用”链接”选项设置链接效果. 使用”目标”选项设置框架. 9.8 框架中的链接 给每一个框架定义不同标题 创建框架中的链接 利用”链接”和”目标”选项创建. _top _parent 9.8 通过超级链接控制框架显示的内容 定义 NOFRAMES 内容 操作步骤： 9.8 通过超级链接控制框架显示的内容 实例（8）：定义 NOFRAMES 内容 9.9 浮动框架-实现单元格到框架的转换 iframe/iframe 属性 align Height Width Name Scroll Src Framebor