dreamweaver8网页设计第九章使用框架布局网.ppt

第9章使用框架布局网页 框架网页的创建框架和框架集的基本操作 9 1框架网页的创建 9 1 1关于框架和框架集 在框架网页中 浏览器窗口被划分成了若干区域 每个区域称为一个框架 每个框架可显示不同的文档内容 彼此之间互不干扰 框架网页最明显的特征就是当一个框架的内容固定不动时 另一个框架中的内容仍可以通过滚动条进行上下翻动 9 1 2了解框架网页构造 下图所示网页至少由三个单独的网页文档组成 两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档 在Dreamweaver中设计使用框架的网页时 必须全部保存这三个文件 框架网页才能在浏览器中正常显示 9 1 3创建框架集 1 使用 新建文档 对话框创建 使用 新建文档 对话框创建框架集的方法同创建普通页面的方法相似 2 使用 布局 插入栏创建 使用 布局 插入栏创建框架集就像插入表格一样简单 3 手动创建 使用前面两种方法创建的都是Dreamweaver中预定义的框架集 当这些框架集无法满足用户需求时 可以在此基础上手动分割创建框架 9 2框架和框架集的基本操作 9 2 1选择框架和框架集 1 在文档编辑窗口中选择 在文档编辑窗口中选择框架的方法为 按住 Alt 键的同时在要选择的框架内单击 被选中的框架边框变为虚线 如要选择框架集 则单击该框架集上的任意边框即可 选中的框架集所有边框都呈虚线显示 2 在 框架 面板中选择 选择 窗口 框架 菜单 可打开 框架 面板 该面板中显示了窗口中框架的结构 不同的框架区域显示了框架的名称 选择框架 在 框架 面板中单击需要选择的框架即可将其选中 被选择的框架在 框架 面板中以粗黑框显示 选择框架集 在 框架 面板中单击框架集的边框即可选择框架集 9 2 2设置框架和框架集属性 1 设置框架属性 选择框架后 属性 面板如下图所示 2 设置框架集属性 选择框架集后 属性 面板如下图所示 9 2 3保存框架和框架集 1 保存框架 保存框架网页文档的操作非常简单 2 保存框架集 保存框架集和保存框架的方法非常相似 3 全部保存 使用 全部保存 命令可以同时保存框架网页中的所有框架集文档和框架网页文档 通常在新建框架网页后采用这种方法保存文档 综合实例 使用框架布局网页 柠檬网 在学习了框架的相关知识后 本例通过制作一个使用框架技术制作的播客网站来学习其在实际网页制作中的应用 该网页由上下框架组成 当单击上方框架导航栏中的链接时 将在下方框架中显示链接的网页文档 具体操作见视频9 1 1和9 1 2