Dreamweaver-CS6-第6章使用框架ppt课件

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