《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第7章 框架》由会员分享，可在线阅读，更多相关《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第7章 框架（73页珍藏版）》请在金锄头文库上搜索。
1、第7章 框 架,框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。图7-1所示的是一个使用了框架的网页，可以看到，左侧是各个讨论区的名称，单击任意一个讨论区名称，在网页的右侧就会显示相应讨论区的内容。左右两边是独立显示的，例如拉动左侧的滚动条，不会影响右侧的显示效果，反之亦然。与框架相关的概念是框架集，把几个框架组合在一起就成为了框架集。,图7-1 使用框架的网页,7.1 创建框架和框架集,在Dreamweaver8中，可以非常方便地通过可视化的方法创建框架和框架集。 首先选择菜单“查看可视化助理框架边框”命令，这时文档窗口的边缘会显示出一个突起的边框，如图7-2
2、所示。,用鼠标拖曳边框，就可以把窗口一分为二，4条边框都可以拖曳。拖曳上下边框可以把窗口分为上下两个部分，如图7-3所示，拖曳左右边框可以把窗口分为左右两个部分。如果从窗口的角上开始拖曳鼠标，窗口会被分成4个部分。拖曳鼠标可以移动刚刚生成的分割线。,图7-2 显示框架边框,图7-3 将窗口分割为两个框架,当窗口被分割为几个框架以后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面赋给一个框架。 此时打开HTML面板，可以看到相应的HTML代码如例7-1所示。,【例7-1】 最基本的框架页面示例 , 无标题文档 ,（a）没有嵌套的框架集,（b）嵌套的框架集,图7-4 框架集嵌
3、套示例,图7-5 框架面板,7.2 编 辑 框 架,7.2.1 删除框架 当加入了一条边线后，发现加错了，如何去掉这条线呢？一种方法是修改HTML代码，把相关的语句删除，还有一种方法是用鼠标把要删除的边线拖曳到父框架的边框上，这条边线就被删除了。,7.2.2 选择框架集,在编辑框架之前还有一个选择操作对象的问题。如果用鼠标单击框架的边框，可以选中框架集，这时它的属性面板如图7-6所示。,图7-6 框架集的属性面板,7.2.3 选择框架以及框架中的内容,如果在框架面板中选择任意一个框架，则在框架面板中被选中的框架有黑色的边，如图7-7所示，这时就可以设置这个框架的属性了。框架的属性面板如图7-8
4、所示。,图7-7 框架面板,图7-8 框架的属性面板,7.3 实践与练习：使用预定义的框架集,本例通过制作一个个人主页，具体讲解框架的创建和保存方法，另外要掌握如何在框架之间建立超级链接。本例最终效果如图7-9所示。,图7-9 预览效果,1创建框架并进行保存,图7-10 设计网页,图7-11 分割并存储图像,图7-12 选择“布局”模式,图7-13 选择框架集,图7-14 为框架设置标题,图7-15 完成顶部框架的创建,图7-16 选择框架,图7-17 保存框架集,图7-18 选中顶部框架,图7-19 选中下方框架,2绘制表格并添加内容,图7-20 启用“布局表格”按钮,图7-21 绘制布局表
5、格,图7-22 绘制表格,图7-23 插入图像,图7-24 绘制布局表格,图7-25 绘制单元格,图7-26 在表格中插入图像,图7-27 插入表格,图7-28 完成内容和图像的添加,图7-29 选择框架,图7-30 设置滚动效果,图7-31 预览页面,3制作子页面并添加链接,图7-32 编辑子页面,图7-33 选择链接路径,图7-34 绘制第2个子页面,图7-35 绘制热区,图7-36 选择目标地址,图7-37 选中链接文字,图7-38 设置目标位置,图7-39 预览效果,7.4 实践与练习：设计框架集,本练习的重点是掌握框架的使用方法以及如何在框架之间建立链接。本例最终效果如图7-40所示
6、。,图7-40 预览效果,1创建框架集,图7-41 设计页面,图7-42 选择框架样式,图7-43 为框架命名,图7-44 创建新框架,图7-45 拆分框架,图7-46 框架样式,图7-47 为框架命名,图7-48 修改框架的宽度,图7-49 分别保存框架,图7-50 选中整个框架集,2.插入图像和内容并设置链接,图7-51 在每个框架中添加内容,图7-52 添加正文,图7-53 子页面“right-2.htm”,图7-54 子页面“tongzhi.htm”,图7-55 输入链接路径,图7-56 添加链接和选择目标,图7-57 继续添加链接,图7-58 预览效果,小 结,本章介绍了利用框架进行网页布局和定位的方法。框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。此外需要理解的是如何指定链接的目标窗口，当需要在某一个框架窗口中单击一个超级链接，而在另一框架窗口中显示目标页面时，就要为目标框架设置名称，并在链接的“”标签中通过“target”属性指定目标框架窗口。,
