1、第6章使用框架本章简介:框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式。浏览者通过框架可以很方便地在不同的页面之间跳转及操作,BBS论坛页面以及网站中邮箱的操作页面等都是通过框架来实现的。课堂学习目标u 掌握框架的创建和框架的保存方法u 掌握框架的拆分和删除的使用方法u 掌握框架的属性设置方法u 掌握框架超链接的创建方法6.1框架与框架集u 课堂案例牛奶饮品网页u 建立框架集u 为框架添加内容u 保存框架u 框架的选择u 修改框架的大小u 拆分框架u 删除框架6.1.1课堂案例牛奶饮品网页使用“对齐上缘”命令,制作网页的布局效果;使用“图像”按钮,插入图像制作完整的框架网页效果。效
2、果图6.1.2建立框架集在Dreamweaver CS6中,可以利用可视化工具方便地创建框架集。用户可以通过菜单命令,实现该操作。1通过“插入”命令建立框架集 2通过拖曳自定义框架6.1.3为框架添加内容因为每一个框架都是一个HTML文档,所以可以在创建框架后,直接编辑某个框架中的内容,也可在框架中打开已有的HTML文档,具体操作步骤如下。(1)在文档窗口中,将光标放置在某一框架内。(2)选择“文件 在框架中打开”命令,打开一个已有文档。6.1.4保存框架保存框架时,分两步进行,先保存框架集,再保存框架。1保存框架集和全部框架2保存框架集文件3保存框架文件6.1.5框架的选择在对框架或框架集进
3、行操作之前,必须先选择框架或框架集。1选择框架2选择框架集6.1.6修改框架的大小建立框架的目的就是将窗口分成大小不同的子窗口,在不同的窗口中显示不同的文档内容。调整子窗口的大小有以下几种方法。(1)在“设计”视图中,将鼠标指针放到框架边框上,当鼠标指针呈双向箭头时,拖曳鼠标改变框架的大小。(2)选择框架集,在“属性”面板中“行”或“列”选项的文本框中输入具体的数值,然后在“单位”选项的下拉列表中选择单位。6.1.7拆分框架通过拆分框架,可以增加框架集中框架的数量,但实际上是在不断地增加框架集,即框架集嵌套。拆分框架有以下几种方法。(1)先将光标置于要拆分的框架窗口中,然后选择“修改 框架集”
4、命令,弹出其子菜单,其中有4种拆分方式。(2)选定要拆分的框架集,按Alt+Shift组合键的同时,将鼠标指针放到框架的边框上,当鼠标指针呈双向箭头时,拖曳鼠标指针拆分框架。6.1.8删除框架 将鼠标指针放在要删除的边框上,当鼠标指针变为双向箭头时,拖曳鼠标指针到框架相对应的外边框上即可进行删除。6.2框架的属性设置u 课堂案例建筑规划网页u 框架属性u 框架集的属性u 框架中的链接u 改变框架的背景颜色6.2.1课堂案例建筑规划网页使用“左对齐”命令,制作网页的结构图效果;使用“图像”按钮,插入图像;使用“鼠标经过图像”按钮,制作左侧导航条效果。效果图6.2.2框架属性 选中要查看属性的框架
5、,选择“窗口 属性”命令,启用“属性”面板。框架“属性”面板6.2.3框架集的属性选择要查看属性的框架集,然后选择“窗口 属性”命令,启用“属性”面板。框架集“属性”面板6.2.4框架中的链接设定框架的目的是将窗口分成固定的几部分,在网页窗口的固定位置显示固定的内容。如在窗口的顶部显示站点LOGO、导航栏等。通过导航栏的不同链接,在窗口的其他固定位置显示不同的网页内容,这时需要使用框架中的链接。1给每一个框架定义标题2创建框架中的链接6.2.5改变框架的背景颜色通过“页面属性”对话框设置背景颜色的具体操作步骤如下。(1)将插入点放置在框架中。(2)选择“修改 页面属性”命令,弹出“页面属性”对话框,单击“背景颜色”按钮 ,在弹出式颜色选择器中选择一种颜色,单击“确定”按钮完成设置6.3课堂练习阳光外语小学网页使用“对齐上缘”命令,制作网页的结构图效果;使用“属性”面板,改变框架的大小;使用“图像”按钮,插入图像制作完整的框架网页效果。效果图6.4课后习题阳光外语小学网页2使用“上方及左侧嵌套”命令,制作网页的结构图效果;使用“矩形热点”工具,设置链接效果;使用“目标”选项,指定页面的显示区域。效果图