第6章 框架课件）-高二《网页设计与制作》同步教学（人民邮电版）

本章简介： 框架的作用是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面。框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式。本章主要讲解了创建设置框架和框架集的方法，通过这些内容的学习，可以合理地来组织页面中的框架，使浏览者通过框架可以很方便地在不同的页面之间跳转及操作。 第6章 框架 课堂学习目标 掌握创建框架集的方法 掌握为框架添加内容的方法 掌握设置框架和框架集属性的方法 6.1 创建框架和框架集 建立框架集 为框架添加内容 保存框架 框架的选择 修改框架的大小 拆分框架 删除框架 课堂案例—牛奶饮料网页 6.1.1 建立框架集 在Dreamweaver CS6中，可以利用可视化工具方便地创建框架集。用户可以通过菜单命令实现该操作。 1．通过“插入”命令建立框架集 2．通过拖曳自定义框架 6.1.2 为框架添加内容 因为每一个框架都是一个HTML文档，所以可以在创建框架后，直接编辑某个框架中的内容，也可在框架中打开已有的HTML文档，具体操作步骤如下。 （1）在文档窗口中，将光标放置在某一框架内。 （2）选择“文件 > 在框架中打开”命令，打开一个已有文档。 6.1.3 保存框架 保存框架时，分两步进行，先保存框架集，再保存框架。初学者在保存文档时很容易糊涂，明明认为保存的是框架，但实际上保存成了框架集；明明认为保存的是某个框架，但实际上保存成了框架集或其他框架。因此，在保存框架前，用户需要先选择“窗口 > 属性”命令和“窗口 > 框架”命令，启用“属性”面板和“框架”控制面板。然后，在“框架”控制面板中选择一个框架，在“属性”面板的“源文件”选项中查看此框架的文件名。用户查看框架的名称后，在保存文件时就可以根据“保存”对话框中的文件名信息知道保存的是框架集还是某框架了。 6.1.4 框架的选择 在对框架或框架集进行操作之前，必须先选择框架或框架集。 1．选择框架 选择框架有以下几种方法。 在文档窗口中，按Alt+Shift组合键的同时，用鼠标左键单击欲选择的框架。 先选择“窗口 > 框架”命令，弹出“框架”面板。然后，在面板中用鼠标左键单击欲选择的框架。此时，文档窗口中框架的边框会出现虚线轮廓。 2．选择框架集 选择框架集有以下几种方法。 在“框架”控制面板中单击框架集的边框。 在文档窗口中用鼠标左键单击框架的边框。 6.1.5 修改框架的大小 建立框架的目的就是将窗口分成大小不同的子窗口，在不同的窗口中显示不同的文档内容。调整子窗口的大小有以下几种方法。 （1）在“设计”视图中，将鼠标指针放到框架边框上，当鼠标指针呈双向箭头时，拖曳鼠标改变框架的大小。 （2）选择框架集，在“属性”面板中“行”或“列”选项的文本框中输入具体的数值，然后在“单位”选项的下拉列表中选择单位。 6.1.6 拆分框架 通过拆分框架，可以增加框架集中框架的数量，但实际上是在不断地增加框架集，即框架集嵌套。拆分框架有以下几种方法。 （1）先将光标置于要拆分的框架窗口中，然后选择“修改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。 （2）选定要拆分的框架集，按Alt+Shift组合键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标指针拆分框架。 6.1.7 删除框架 通过拆分框架，可以增加框架集中框架的数量，但实际上是在不断地增加框架集，即框架集嵌套。拆分框架有以下几种方法。 （1）先将光标置于要拆分的框架窗口中，然后选择“修改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。 （2）选定要拆分的框架集，按Alt+Shift组合键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标指针拆分框架。 6.1.8 课堂案例—牛奶饮料网页 使用“对齐上缘”命令，制作的网页的结构图效果；使用“属性”面板，改变框架的大小；使用“图像”按钮，插入图像。 效果图 6.2 设置框架和框架集的属性 设置框架属性 设置框架集属性 6.2.1 设置框架属性 选中要查看属性的框架，选择“窗口 > 属性”命令，弹出“属性”面板。 “属性”面板 6.2.2 设置框架集属性 选择要查看属性的框架集，然后选择“窗口 > 属性”命令。 “属性”面板 课堂案例—建筑规划网页 使用“左对齐”命令，插入框架进行布局；使用“鼠标经过图像”按钮，插入鼠标经过图像效果；使用“属性”面板，设置链接效果。 效果图 课后习题—阳光外语小学网页 使用“对齐上缘”命令，制作网页的结构图效果；使用“属性”面板，改变框架的大小；使用“图像”按钮，插入图像制作完整的框架网页效果。 效果图 $$