第06章框架.ppt

网页制作基础教程 （Dreamweaver CS3）,第6章 框 架,本章重点： 创建框架网页 框架网页的选择 设置框架和框架集的属性 编辑框架,第6章 框 架,6.1 应用框架制作电子书 6.2 框架的基本操作,6.1 应用框架制作电子书,6.1.1 案例综述 本例将制作一个HTML在线教程的页面，页面分三个区域，在顶部放置标题栏，左侧框架放置导航栏（即目录），单击链接，在右侧框架中打开链接内容,一个框架横放在顶部：Web站点的徽标和标题 一个较窄的框架位于左侧：导航条 一个大框架占据页面的其余部分：主要内容,6.1 应用框架制作电子书,6.1.2 案例分析 理解框架集、框架的概念。 创建框架集 制作框架、链接页面 创建超链接 保存框架集,6.1 应用框架制作电子书,框架：是指浏览器窗口中的一个区域。 框架集：定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示页面的URL。,由4个单独内容的HTML组成： 框架集文件以及3个网页文档,6.1 应用框架制作电子书,6.1.3 实现步骤 创建框架集 。 制作框架页 创建导航栏超链接 保存框架集,6.2 框架的基本操作,6.2.1 创建框架和框架集,插入预定义的框架集,自行创建,创建框架集的方法：,6.2 框架的基本操作,6.2.1 创建框架和框架集 选择预定义的框架集 (1).创建包含当前文档的框架集 打开一个文档 插入栏|布局|框架 框架集图标的蓝色区域表示当前文档,6.2 框架的基本操作,6.2.1 创建框架和框架集 选择预定义的框架集 (2).创建新的空预定义框架集 文件|新建 “新建文档”对话框|框架集 选择一个所需框架集,6.2 框架的基本操作,6.2.1 创建框架和框架集 设计自定义的框架集 (1).创建框架集 新建一个空白HTML文档 修改|框架集|拆分左(右、上、下)框架 在光标停留在某个框架中，可继续拆分 注：利用“查看|可视化助理|框架边框”使边框可见,6.2 框架的基本操作,6.2.1 创建框架和框架集 设计自定义的框架集 (2).删除框架集 选择要删除框架的边框 将边框拖到上一级框架的边框上 (3).调整框架大小 拖动边框,6.2 框架的基本操作,6.2.2 选择框架和框架集 选择框架 在“文档”窗口中：按Alt+单击框架内部 在“框架”面板中：单击某个框架区域 选择框架集 在“文档”窗口中：单击内部框架边框 在“框架”面板中：单击某一内部框架边框,6.2 框架的基本操作,6.2.3 框架和框架集属性设置 设置框架的属性 框架名称：是链接的Target属性或脚本在引用该框架时所用的名称。 源文件：指定在框架中显示的源文件 滚动：指定在框架中是否显示滚动条。 不能调整大小：让访问者无法通过拖动框架边框在浏览器中调整框架大小,6.2 框架的基本操作,6.2.3 框架和框架集属性设置 设置框架的属性 边框：在浏览器中查看框架时显示或隐藏当前框架的边框。 边框颜色：为所有框架的边框设置边框颜色。 边距宽度：以像素为单位设置左边距和右边距的宽度 边距高度：以像素为单位设置上边距和下边距的高度,6.2 框架的基本操作,6.2.3 框架和框架集属性设置 设置框架集的属性 边框：确定在浏览器中查看文档时在框架周围是否应显示边框。 边框宽度：指定框架集中所有边框的宽度 边框颜色：设置边框的颜色 行列选定范围：单位有“像素”、“百分比”、“相对”,6.2 框架的基本操作,6.2.4 保存框架和框架集文档 1保存框架集文档 操作步骤： 选择框架集 采取下面的方法之一： 选择【文件】|【保存框架】命令，保存框架集. 选择【文件】|【框架集另存为】命令，将框架集另存为新文件。,6.2 框架的基本操作,6.2.4 保存框架和框架集文档 2保存框架文档 操作步骤： （1）光标放在目标框架内 。 （2） 采取下面的方法之一： 选择【文件】|【保存框架】命令，保存框架. 选择【文件】|【框架另存为】命令，将框架另存为新文件。 如果选择【文件】【保存全部】命令，将保存与当前框架关联的所有文档。,6.2 框架的基本操作,6.2.4 保存框架和框架集文档 3保存框架集所有文档 操作步骤： 如果选择【文件】【保存全部】命令，将保存与当前框架关联的所有文档。,6.2.5 框架中的链接 在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。 设置目标框架的基本操作方法如下： 在“设计”视图中，选择文本或对象。 在属性检查器的“链接”字段中，选择要链接到的文件 在属性检查器的“目标”弹出式菜单中，选择链接的文档应在其中显示的框架。 注意： 链接到站点外的某一页面时，正确的做法是在属性检查器的“目标”下拉列表中选择“top”或“blank”两个选项。,6.2 框架的基本操作,6.2.6 框架兼容性 框架兼容性功能主要用于处理不能显示框架的浏览器。 操作方法如下： 选择“修改”|框架集|编辑无框架内容。 Dreamweaver CS3将清除“设计”视图中的内容，并且在“设计”视图顶部显示“无框架内容”字样 在“文档”窗口中，像处理普通文档一样输入或插入内容。如输入文字“你目前使用的浏览器不支持框架显示，请升级更高的版本”。 再次选择选择“修改”|框架集|编辑无框架内容命令，以返回到框架集文档的普通视图。,6.2 框架的基本操作,