6.1.1 框架的创建(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

第6章 框架与APDiv 教学任务： 学会框架的创建和属性设置。 能够用框架规划网页 ，掌握框架的基本操作。 掌握AP Div的创建与属性设置 。 能够用AP Div编排网页。 教学重点与难点： 用框架规划网页。 用AP Div编排网页。 框架与AP Div是网页制作时用来给网页布局的两个不同的Dreamweaver工具，使用框架规划网页可以统一网页风格，加快网页的下载效率，增加网站内容的可读性。使用AP Div编排网页灵活性强，提供弹性的画面设计功能，在其中可以放入任何的网页元素，且可以任意的移动位置与相互重叠。 6.1 框架的使用 框架主要由两大部分组成：框架集与框架。框架是指浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余框架页中所显示内容无关的页面，只是针对自身文档。框架集是由若干框架组成的，通过设置这些框架的布局和属性（包括框架的数目、大小和位置以及在每个框架中初始显示的页面的文档路径）让框架集在外观上形成一个整体的页面。框架集文件的源代码本身不包括要在浏览器中显示的如何内容（Noframes部分除外），简单地说，框架集文件只是在浏览器中显示由这若干框架组成的一个网页所显示的整体内容，如图片、文字、Flash动画和视频等。 使用框架可以让网页的风格统一，加快浏览速度。在浏览页面时，不需要将页面中含框架的窗口都重新加载，对于导航或不动的窗口在浏览网站时只需加载一次，这样就大大加快了浏览的速度。在网页中使用框架具有以下两个优点： 访问者的浏览器不需要为每个页面重新加载与导航相关的图形，这样毫无疑问使网页的下载速度加快了。 每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。 例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。 6.1.1 框架的创建 学习使用框架首先要从创建框架开始，根据Dreamweaver CS4自带的框架布局可以创建多种框架。使用创建框架的功能为网页设计框架，可以方便实现网页的整体布局。下面来介绍如何创建如图所示的框架页，这是比较简单而且最为常用的网页布局结构。 上述框架页创建框架的方法如下： 在Dreamweaver CS4中创建框架有4中方法： 方法一：在菜单栏中选择【文件】→【新建】命令，弹出【新建文档】对话框，在对话框中选择“示例中的页”→“框架页”→“垂直拆分”命令，单击【创建】按钮，可创建框架，如图所示。 方法二：在菜单栏中选择【查看】→【可视化助理】→【框架边框】命令，在网页中按【Alt】键后，用鼠标拖动框架边框，也可创建框架。 方法三：在菜单栏中选择【插入】→【HTML】→【框架】→【次级菜单中框架类别】命令，在文档中创建框架。 方法四：切换【插入】面板的模式为【布局】，单击【框架】图标按钮 右侧的三角形展开式按钮 ，在下拉列表中选择相应的框架类别，创建框架。 在弹出的【框架标签辅助功能属性】对话框中设置每个框架的标题，如下图所示。 单击【确定】按钮，在文档中创建了左右形式的框架。 提示：在命名框架的标题时尽量用位置和相应的英文来命名，这样便于对整个框架集的控制理解。 6.1.2设置框架集属性 创建完框架以后，需要为生成的框架集设置属性。框架和框架集的属性都可以在【属性】面板进行设置。 设置框架集属性。具体操作步骤如下： （1）按快捷键Shift+F2或在菜单栏中选择【窗口】→【框架】命令，调出【框架】面板，如图所示。 （2）在【框架】面板中单击最外一层边框，在【属性】面板中设置框架集的属性，如图所示。 在【属性】面板中各项参数详细设置如下： 边框：设置框架集是否显示边框，选项包括“是”、“否”、“默认值”，默认显示边框。 边框宽度：如果选择显示边框，在此可以设置边框的宽度。 边框颜色：如果选择显示边框，在此可以设置边框的颜色。 列：单击【属性】面板右侧框架集的缩图，可以设置框架集的比例，一般设置一列框架的值为固定的像素或百分比，另一列的值为“1”，单位选择“相对”，这样可以保证让框架集未固定设置宽度的一列随浏览器而自动适应宽度。 $$