第06章 框架.ppt

《第06章 框架.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页制作基础教程（DreamweaverCS3）第6章框架本章重点：创建框架网页框架网页的选择设置框架和框架集的属性编辑框架第6章框架6.1应用框架制作电子书6.2框架的基本操作6.1应用框架制作电子书6.1.1案例综述本例将制作一个HTML在线教程的页面，页面分三个区域，在顶部放置标题栏，左侧框架放置导航栏（即目录），单击链接，在右侧框架中打开链接内容一个框架横放在顶部：Web站点的徽标和标题一个较窄的框架位于左侧：导航条一个大框架占据页面的其余部分：主要内容6.1应用框架制作电子书6.1.2案例分析理解框架集、框架的概念。创建框架集制作框架、链接页面创建超链接保存框架集6.1应用框架制作

2、电子书框架：是指浏览器窗口中的一个区域。框架集：定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示页面的URL。3个框架由4个单独内容的HTML组成：框架集文件以及3个网页文档6.1应用框架制作电子书6.1.3实现步骤创建框架集。制作框架页创建导航栏超链接保存框架集6.2框架的基本操作6.2.1创建框架和框架集插入预定义的框架集自行创建创建框架集的方法：6.2框架的基本操作6.2.1创建框架和框架集选择预定义的框架集(1).创建包含当前文档的框架集打开一个文档插入栏

3、布局

4、框架框架集图标的蓝色区域表示当前文档6.2框架的基本操作6.2.1创建框架和框架集选择预

5、定义的框架集(2).创建新的空预定义框架集文件

6、新建“新建文档”对话框

7、框架集选择一个所需框架集6.2框架的基本操作6.2.1创建框架和框架集设计自定义的框架集(1).创建框架集新建一个空白HTML文档修改

8、框架集

9、拆分左(右、上、下)框架在光标停留在某个框架中，可继续拆分注：利用“查看

10、可视化助理

11、框架边框”使边框可见6.2框架的基本操作6.2.1创建框架和框架集设计自定义的框架集(2).删除框架集选择要删除框架的边框将边框拖到上一级框架的边框上(3).调整框架大小拖动边框6.2框架的基本操作6.2.2选择框架和框架集选择框架在“文档”窗口中：按Alt+单击框架内部在“框架”面板中：单击某个

12、框架区域选择框架集在“文档”窗口中：单击内部框架边框在“框架”面板中：单击某一内部框架边框6.2框架的基本操作6.2.3框架和框架集属性设置设置框架的属性框架名称：是链接的Target属性或脚本在引用该框架时所用的名称。源文件：指定在框架中显示的源文件滚动：指定在框架中是否显示滚动条。不能调整大小：让访问者无法通过拖动框架边框在浏览器中调整框架大小6.2框架的基本操作6.2.3框架和框架集属性设置设置框架的属性边框：在浏览器中查看框架时显示或隐藏当前框架的边框。边框颜色：为所有框架的边框设置边框颜色。边距宽度：以像素为单位设置左边距和右边距的宽度边距高度：以像素为单位设置上边距和下边距的高度6

13、.2框架的基本操作6.2.3框架和框架集属性设置设置框架集的属性边框：确定在浏览器中查看文档时在框架周围是否应显示边框。边框宽度：指定框架集中所有边框的宽度边框颜色：设置边框的颜色行列选定范围：单位有“像素”、“百分比”、“相对”6.2框架的基本操作6.2.4保存框架和框架集文档1．保存框架集文档操作步骤：选择框架集采取下面的方法之一：选择【文件】

14、【保存框架】命令，保存框架集.选择【文件】

15、【框架集另存为】命令，将框架集另存为新文件。6.2框架的基本操作6.2.4保存框架和框架集文档2．保存框架文档操作步骤：（1）光标放在目标框架内。（2）采取下面的方法之一：选择【文件】

16、【保存框架】命令，

17、保存框架.选择【文件】

18、【框架另存为】命令，将框架另存为新文件。如果选择【文件】｜【保存全部】命令，将保存与当前框架关联的所有文档。6.2框架的基本操作6.2.4保存框架和框架集文档3．保存框架集所有文档操作步骤：如果选择【文件】｜【保存全部】命令，将保存与当前框架关联的所有文档。6.2.5框架中的链接在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。设置目标框架的基本操作方法如下：在“设计”视图中，选择文本或对象。在属性检查器的“链接”字段中，选择要链接到的文件在属性检查器的“目标”弹出式菜单中，选择链接的文档应在其中显示的框架。注意：链接到站点外的某一页面时，正确的做法是在属

19、性检查器的“目标”下拉列表中选择“top”或“blank”两个选项。6.2框架的基本操作6.2.6框架兼容性框架兼容性功能主要用于处理不能显示框架的浏览器。操作方法如下：选择“修改”

20、框架集

21、编辑无框架内容。DreamweaverCS3将清除“设计”视图中的内容，并且在“设计”视图顶部显示“无框架内容”字样在“文档”窗口中，像处理普通文档一样输入或插入内容。如输入文字“你目前使用的浏览器不支持框架