框架页面.pptVIP

网页设计与制作案例教程 第8章 框架页面 知识点： 创建框架和框架集 保存框架集文件和框架文件 设置框架集和框架属性 编辑框架内容 设置超级链接 第8章 框架页面 《网页设计与制作案例教程》 重点和难点： 创建框架和框架集 保存框架集文件和框架文件 设置超级链接 要求学生了解框架的组成，掌握创建框架和框架集的方法，掌握保存框架，设置框架的属性，在框架中创建超级链接。 教学要求： 8.1 框架概述 8.2 “微笑北京”框架主页的制作 8.2.1 创建“微笑北京”框架集 8.2.2 保存框架 8.2.3 选择框架 8.2.4 框架和框架集属性 8.2.5 创建顶部框架文件 8.2.6 创建中间框架文件 8.2.7 创建底部框架文件 8.3 框架链接 8.4 实训：设计与创建“神奇的丽江、神秘的丽江”网站 8.5 小结 8.6 习题 第8章 框架页面 《网页设计与制作案例教程》 第8章 框架页面 《网页设计与制作案例教程》 8.1 框架概述 框架概念 框架：英文是frame，是指组成框架结构的每一个区域。 框架集是框架的集合，是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。 2. 框架集显示 第8章 框架页面 《网页设计与制作案例教程》 8.2 “微笑北京”框架主页的制作 网站案例效果图8.1 图8.1网页“微笑北京”效果图 第8章 框架页面 《网页设计与制作案例教程》 8.2.1创建“微笑北京”框架集 通过预定义的框架集，用户可以很容易地选择所要创建的框架集类型。创建预定义的框架集有两种方法：一是通过单击面板【插入】【布局】|【框架】按钮，可以创建框架集并在某一个新的框架中显示当前文档。二是通过执行菜单【文件】|【新建】命令，弹出【新建文档】对话框，创建新的空框架集。 图8.2 框架集页面 第8章 框架页面 《网页设计与制作案例教程》 8.2.2保存框架 对于8.2.1节创建的框架来说，应该是一个框架集文件和三个框架文档构成，所以在保存网页时，一共需要保存四次。 图8.3 保存框架集 提示：在使用Dreamweaver中的可视工具创建框架集时，框架中显示的每个新文档将获得一个默认文件名。如框架集文件被命名为“UntitledFrameset-1”，而框架中第一个文档被命名为“UntitledFrame-1”。 第8章 框架页面 《网页设计与制作案例教程》 8.2.3选择框架 1.在文档窗口中进行选择框架和框架集 在“文档”窗口的“设计”视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。 2.在“框架”面板中选择框架和框架集 图8.4框架面板 第8章 框架页面 《网页设计与制作案例教程》 8.2.4 框架和框架集属性 框架和框架集都有自己的属性面板。框架属性设定了框架名称、源文件、边距、滚动、重新调整大小和边框等；框架集属性控制框架的尺寸，还可以控制框架之间边框的颜色和宽度。 1.框架属性 2.框架集属性 图8.5 框架集的属性面板 提示：在指定框架的行或列的时候，要至少一个宽度和高度指定为相对大小，这样在浏览网页时才不会出错。 第8章 框架页面 《网页设计与制作案例教程》 8.2.5 创建顶部框架文件 顶部框架文件index_top.htm最终效果如图8.6所示，该文件主要由横幅和导航栏目组成。 图8.6 index_top.htm效果 第8章 框架页面 《网页设计与制作案例教程》 8.2.6 创建中间框架文件 中间框架文件index_main.htm最终效果如图8.7所示。 图8.7中间框架文件index_main.htm 第8章 框架页面 《网页设计与制作案例教程》 8.2.7 创建底部框架文件 底部框架文件中包含的版权信息，同样是使用表格进行布局，底部框架文件index_bottom.htm最终效果如图8.8所示。 图8.8底部框架 第8章 框架页面 《网页设计与制作案例教程》 8.3 框架链接 在一个框架中使用链接以打开另一个框架中的文档或变换框架中的文档，在进行链接时，必须指定“目标”。 _blank：在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self：在当前框架中打开链接，同时替换该框架中的内容。 _top：在当前浏览器窗口中打开链接的文档，同时替换所有框架。 topFrame（顶端框架）：链接的内容在顶端框架显示。 mainFrame（主框架）：链接的内容在主框架的区域显示，也就是右侧框架。 buttomFrame（底