第6章 框架——(网页设计与制作共11章).ppt

第6章 框架 6.1学习任务：框架和框架集 6.2 学习任务：编辑框架 6.3 学习任务：设置框架和框架集属性 6.4 学习任务：框架标签 6.5 案例1 利用框架设计网页 6.6 案例2 创建浮动框架网页 6.7 实训——利用框架设计“立杨花园”网 6.1学习任务：框架和框架集 6.1.1 认识框架和框架集 6.1.2 创建和保存框架集 6.1.1 认识框架和框架集 框架是框架集的组成元素，它可以简单地理解为是对浏览器窗口进行划分后的子窗口，每一个子窗口是一个框架，可以在框架中插入图片、输入文本或者在框架中打开一个独立的网页文档内容。如果在各个框架中分别打开一个已经做好的网页文档，那么这个页面就是由几个网页组合而成的框架网页。框架常用于导航。 图6-1显示出框架与框架集之间的关系。图中的框架集包含了3个框架。实际上，该页面包含的是4个独立的HTML页面：一个框架集文件和3个框架内容文件。 当一个页面被划分成几个框架时，系统会自动建立一个框架集文档，用来保存网页中所有框架的数量、大小、位置及每个框架内显示的网页名等信息。当用户打开框架集文档时，计算机就会根据其中的框架数量、大小、位置等信息将浏览器窗口划分成几个子窗口，每个窗口显示一个独立的网页文档内容。 框架结构常用在具有多个分类导航或多项复杂功能的Web页面上，如BBS论坛页面及网站中的邮箱的操作页面等。创建基于框架的网页一般包括以下步骤： 1）在网页中创建框架集和框架。 2）保存框架集文件与框架文件。每个框架与框架集都是独立的网页，应单独保存。 3）设置框架和框架集的属性，包括命名框架与框架集、设置是否显示框架等。 4）确认链接的目标框架设置，使所有链接内容显示在正确的区域内。 6.1.2 创建和保存框架集 1．创建框架和框架集 在创建框架和框架集前，选择“查看→可视化助理→框架边框”命令，使框架边框在“文档”窗口的“设计”视图中可见。 在Dreamweaver中有两种创建框架的方式：一种是自己设计；另一种是从Dreamweaver提供的框架类型中选取。具体方法：确定插入框架的位置，执行下列操作之一插入框架： 在“插入”面板的“布局”标签中打开“框架”下拉列表，从是选择一种框架。 选择“插入→HTML→框架”选项，在“框架”的下级菜单中，单击选择一种框架。 也可以在新建网页文件时创建框架。具体方法：选择“文件→新建”命令，弹出“新建文档”对话框，在最左侧选择“示例中的页”选项，在“示例文件夹”列表中选择“框架页”选项，在右边的“示例页”列表框中选择“上方固定，下方固定”选项，如图6-2所示。 单击【创建】按钮，弹出“框架标签辅助功能属性”对话框，如图6-3所示，在此可为每一个框架指定一个标题，单击【确定】按钮即可创建一个框架集。单击“窗口→框架”菜单命令，打开“框架”面板，显示出创建的框架集，如图6-4所示。 2．保存框架和框架集 保存框架结构的网页，需要将整个框架集与它的各个框架文件一起保存。具体方法：选择“文件→保存全部”命令，整个框架边框会出现一个阴影框，并弹出“另存为”对话框，如图6-5所示。Dreamweaver将依次提示需要保存的内容，首先保存的是框架集文件，一般以index.html作为框架集文件名，然后是其他框架文件。 本例以保存图6-4所示的框架结构为例，执行保存操作后生成的框架和框架集文件如图6-6所示。 ?提示：也可以单独保存框架集文件。具体方法：在“框架”面板或“文档”窗口选中框架集后，选择“文件→保存框架页”命令，或者选择“文件→框架集另存为”命令。 6.2 学习任务：编辑框架 ? 学习任务要求：理解并掌握选择框架、拆分框架、修改框架大小、删除框架的方法。 1．选择框架或框架集 框架和框架集都是单个HTML文档，选择框架或框架集的具体方法：选择“窗口→框架”命令，或者按下〈Shift+F2〉组合键，打开“框架”面板，每个框架用默认的框架名来识别。用鼠标单击需要选择的框架，即可将框架选中，此时，在“设计”视图中，选中的框架边框会出现点线轮廓，如图6-7所示。在“框架”面板中单击环绕框架的边框，或者在 “文档”窗口中，单击框架的外边框，均可选中框架集。 2．拆分框架 插入框架之后，可利用拆分框架的方法调整框架的结构。具体方法： 选中框架后，按住〈Alt〉键拖动框架边框，可将框架纵向或横向划分。 在需要拆分的框架内单击，选择“修改→框架集”菜单项，在如图6-8所示的级联式菜单中选择需要的一项，完成框架的拆分。 3．删除框架 如果删除不需要的框架，可将鼠标指针放在要删除框架的边框上，当鼠标指针变为双向箭头时，按下鼠标左键并拖曳边框到编辑窗口之外即可删除框架。 4．修改框架的大小 在框架“属性”面板中可以修改框架的大小。具体方