网页制作与开发教程张强高建华温谦第7章框架.pptVIP

第7章框 架 框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。图7-1所示的是一个使用了框架的网页，可以看到，左侧是各个讨论区的名称，单击任意一个讨论区名称，在网页的右侧就会显示相应讨论区的内容。左右两边是独立显示的，例如拉动左侧的滚动条，不会影响右侧的显示效果，反之亦然。与框架相关的概念是框架集，把几个框架组合在一起就成为了框架集。 7.1 创建框架和框架集 在Dreamweaver8中，可以非常方便地通过可视化的方法创建框架和框架集。 首先选择菜单“查看→可视化助理→框架边框”命令，这时文档窗口的边缘会显示出一个突起的边框，如图7-2所示。 用鼠标拖曳边框，就可以把窗口一分为二，4条边框都可以拖曳。拖曳上下边框可以把窗口分为上下两个部分，如图7-3所示，拖曳左右边框可以把窗口分为左右两个部分。如果从窗口的角上开始拖曳鼠标，窗口会被分成4个部分。拖曳鼠标可以移动刚刚生成的分割线。 当窗口被分割为几个框架以后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面赋给一个框架。 此时打开HTML面板，可以看到相应的HTML代码如例7-1所示。 【例7-1】 最基本的框架页面示例 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/frameset.dtd html head meta http-equiv=Content-Type content=text/html; charset=gb2312 title无标题文档/title /head frameset rows=64,97 cols=* frame src=file:→E|/dwr/MyFirstSite/UntitledFrame-1 frame src=file:→E|/dwr/MyFirstSite/page5.htm /frameset noframes body /body /noframes /html 7.2 编 辑 框 架 7.2.1 删除框架 当加入了一条边线后，发现加错了，如何去掉这条线呢？一种方法是修改HTML代码，把相关的语句删除，还有一种方法是用鼠标把要删除的边线拖曳到父框架的边框上，这条边线就被删除了。 7.2.2 选择框架集 在编辑框架之前还有一个选择操作对象的问题。如果用鼠标单击框架的边框，可以选中框架集，这时它的属性面板如图7-6所示。 7.2.3 选择框架以及框架中的内容 如果在框架面板中选择任意一个框架，则在框架面板中被选中的框架有黑色的边，如图7-7所示，这时就可以设置这个框架的属性了。框架的属性面板如图7-8所示。 7.3 实践与练习：使用预定义的框架集 本例通过制作一个个人主页，具体讲解框架的创建和保存方法，另外要掌握如何在框架之间建立超级链接。本例最终效果如图7-9所示。 1．创建框架并进行保存 2．绘制表格并添加内容 3．制作子页面并添加链接 7.4 实践与练习：设计框架集 本练习的重点是掌握框架的使用方法以及如何在框架之间建立链接。本例最终效果如图7-40所示。 1．创建框架集 2.插入图像和内容并设置链接 小 结 本章介绍了利用框架进行网页布局和定位的方法。框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。此外需要理解的是如何指定链接的目标窗口，当需要在某一个框架窗口中单击一个超级链接，而在另一框架窗口中显示目标页面时，就要为目标框架设置名称，并在链接的“a”标签中通过“target”属性指定目标框架窗口。 图7-50 选中整个框架集 图7-51 在每个框架中添加内容 图7-52 添加正文 图7-53 子页面“right-2.htm” 图7-54 子页面“tongzhi.htm” 图7-55 输入链接路径 图7-56 添加链接和选择目标 图7-57 继续添加链接 图7-58 预览效果 ?图7-19 选中下方框架 图7-20 启用“布局表格”按钮 图7-21 绘制布局表格 图7-22 绘制表格 图7-23 插入图像 图7-24 绘制布局表格 图7-25 绘制单元格 ?图7-26 在表格中插入图像