《Dreamweaver课件：第9章框架和框架集.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver课件：第9章框架和框架集.ppt（30页珍藏版）》请在三一文库上搜索。
1、第9章 建立框架网页,内容提要,框架网页的基本原理 创建框架和框架集 框架文件的结构和保存 框架的属性和操作 具体的框架实例,学习目标,了解框架及框架集 熟悉框架及框架集的创建 掌握框架及框架集的基本操作 掌握框架及框架集的属性设置 学会使用框架进行简单的页面布局 使用链接控制框架内容,9.1 理解框架网页的基本原理,9.1 理解框架网页的基本原理,所谓“框架”，就是将浏览器窗口划分为若干个区域。 框架网页并不是一个真正意义上的网页，它主要记录在框架网页中所包含的框架数量以及拆分方式等信息，每一个单独的框架将由具有实际内容的网页填充。 在上述框架网页内共有三个框架，因此需要三个相对应的网页，因
2、此，框架网页加上三个独立的网页，共有四个网页。 框架常用于站点导航系统。网页1和网页2中上方的标题和左侧导航按钮是相同的。标题和导航按钮分别对应在两个独立的网页中。右下方的内容也分别对应于独立的网页，利用框架的链接属性，当访问者可以单击菜单项要浏览其他内容时，导航菜单和标题则几乎不发生任何变化。由此可见，框架网页不但是页面布局的解决方案，也是避免重复劳动的一种方法。,9.1 理解框架网页的基本原理,网页1,网页2,9.2 新建框架网页,9.2 新建框架网页,在Dreamweaver 中可以通过两种方式插入框架集。一种是自己直接拆分，另外一种是插入预先定义的框架集。 Dreamweaver 预先
3、定义的框架集存放在“插入”工具栏“布局”选项中的“框架”按钮中，用户可以随意选择自己需要的框架集类型。,9.2 新建框架网页,建立框架的目的就是将窗口分成大小不同的子窗口,在不同的窗口中 显示不同的文档内容.,9.2 新建框架网页,新建框架网页 操作步骤：,（1）建立站点及网页 （2）插入预先定义的框架集 （3）自己直接拆分框架集,拆分上框架效果图,9.2 新建框架网页,9.3 增加、调整和删除框架,9.3 增加、调整和删除框架,增加、调整和删除框架 操作步骤：,9.3 增加、调整和删除框架,（1）准备工作 （2）增加框架 （3）删除框架 （4）调整框架,提示:用户还可以划分已有框架，在当前框
4、架集文件中创建新的框架集。在其他框架集中的框架集被称为“嵌入式框架集”。要创建嵌入式框架集，需要先将光标停放在已有框架内。按住 Alt 键单击一下，然后在文档窗口中拖动框架边框（不要松开Alt键），将框架纵向或横向划分。,效果图,9.4 保存框架和框架集中的文件,9.4.1 按对应关系保存框架集和框架集中的文件,保存框架集和框架集中的文件 操作步骤：,9.4 保存框架和框架集中的文件,（1）保存框架和框架集 （2）保存单个框架页面,效果图,一般在保存框架时,先保存框架集,再保存框架,9.4.2 打开和关闭框架中的文件,打开和关闭框架中的文件与打开和关闭网页文件相类似。但要注意的是利用“文件”|
5、“打开”命令，如果选取的是框架集文件，则可同时打开该框架集和其中的框架页面。如果选取的是单个框架页面，则只能打开该页面。,9.4 保存框架和框架集中的文件,课堂案例1-运动休闲网,案例学习目标: 使用”新建”命令建立框架集. 使用”页面属性”改变页面边距. 使用”插入”面板”常用”选项卡中的按钮制作完整的框架网页. 案例知识要点: 使用上方固定框架制作的网页的结构图效果. 使用属性面板改变框架的大小. 使用”表格”和”图像”按钮插入表格和图像制作完整的框架网页效果.,9.5 使用框架面板,9.5 使用框架面板,框架和框架集都是独立的HTML文档。 要修改框架或框架集，必须先选取要修改的框架或框
6、架集。选择的方法包括在文档窗口中直接选择或使用框架面板进行选择。 要在文档窗口中直接选择框架，可以按住Alt键在框架内单击。 要在文档窗口中直接选择框架集，可以在框架的边框上单击。 在“框架”面板中，框架集有明显的三维边框，而且框架有灰色线条并显示框架名。,9.5 使用框架面板,9.5 使用框架面板,9.5 使用框架面板,查看框架,显示“框架”面板,效果图,9.6 修改框架属性,9.6 修改框架属性,设置框架的属性主要通过其属性面板进行。 按住 Alt 键单击框架，可查看框架属性。,9.6 修改框架属性,“框架名称”：决定用来作为超级链接目标和脚本引用的当前框架名。框架名可以是一个单词，也允许
7、下划线，但是不允许用短横（-）、句点（.）和空格等，也不要使用中文。 “源文件”：决定框架的源文档，可输入文件名或单击文件夹图标浏览并选择文件。还有一种方法可以在框架中打开文件：先将光标停放在框架中，然后选择“文件”| “在框架中打开”。 “滚动”：决定在没有足够空间显示当前框架中的内容时是否使用滚动条。该下拉列表有四个选项，大多数浏览器默认值为“自动”。 “不能调整大小”：使当前框架不能重调大小，防止用户拖动框架边框。 “边框”：控制当前框架的边框。其选项为“是”、“否”和“默认”。本选择可以覆盖为框架集定义的边框设置。 “边框颜色”：设置所有和当前框架相邻的边框的颜色。本设置可以覆盖框架集
8、的边框颜色 “边界宽度”：设置左右边距的宽度（单位为象素）。左右边距是指框架边框和内容之间的空间。 “边界高度”：设置上下边距的高度（单位为象素）。上下边距是指框架边框和内容之间的空间。,9.6 修改框架属性,提示：在默认情况下，Dreamweaver 将设置默认的框架边距宽度和高度值。这样可能会使网页内容和边框之间存在距离。因此，要消除该边距，可以将“边界宽度”和“边界高度”两个值均设置为0。这样，再到浏览器中预览时，框架和内容之间就没有距离了。,9.6 修改框架属性,9.6 修改框架属性,修改框架属性 操作步骤：,9.6 修改框架属性,（1）建立站点并建立新页面 （2）建立框架 （3）载入
9、框架页面 （4）设置框架属性,提示：修改框架属性可以先通过“框架”面板选取相应框架，然后在“属性”面板中设置相关属性。,9.7 设置框架集的属性,9.7 设置框架集的属性,要查看框架集属性，单击框架边框。 要查看所有的框架集属性，可单击“属性”面板右下角的扩展箭头。,“边框”：控制当前框架集内框架的边框。有三个选项： 选择“是”可以三维和灰度显示边框 选择“否”可以显示扁平和灰度边框 选择“默认”可以由浏览器确定如何显示边框。 “边框宽度”：指定当前框架集中边框的宽度。 “边框颜色”：设置当前框架集中所有边框的颜色。本设置可以被单个框架指定的边框颜色所覆盖。 “值”：指定所选择的行或列的大小。
10、 “单位”：指定所选择的行或列是以象素为单位的固定大小，还是显示为浏览器窗口的百分比，抑或扩展或缩小以填充窗口中的剩余空间。 “行列选定范围”：识别选定行或列的选择。单击左边的标签可选择行，单击上面的标签可选择列。,框架集“属性”面板,课堂案例2-家具天地网,案例学习目标: 使用”修改”菜单设置页面边距. 使用” 属性”面板设置框架集的属性. 案例知识要点: 使用”页面属性”命令设置页面边距. 使用属性面板设置框架的大小.,9.8 通过超级链接控制框架显示的内容,课堂案例3-旅游信息服务,案例学习目标: 使用”属性”面板为图片添加链接,使网页更加完美. 案例知识要点: 使用”链接”选项设置链接
11、效果. 使用”目标”选项设置框架.,9.8 框架中的链接,给每一个框架定义不同标题 创建框架中的链接 利用”链接”和”目标”选项创建. _top _parent,定义 NOFRAMES 内容 操作步骤：,9.8 通过超级链接控制框架显示的内容,效果图,单击“修改”|“框架集”|“编辑无框架内容”。 Dreamweaver 将清除文档窗口，正文区域上方出现“无框架内容”标志，而状态栏上也将显示 标签。 提示：在文档窗口中创建无框架内容。由于低版本浏览器能正常显示的元素不多，所以创建无框架内容时建议只使用文本、基本表格和图像。,编辑无框架内容, 标签,9.8 通过超级链接控制框架显示的内容,实例（8）：定义 NOFRAMES 内容,在文档窗口中输入中文字符“对不起,您使用的浏览器不支持框架，所以无法正确显示。 再次选择“修改”|“框架页”|“编辑无框架内容”返回框架组文档的普通视图。 提示：使用上述方法可以方便的定义 NOFRAMES 内容，给低版本的浏览器用户提供提示。,编辑无框架内容,9.9 浮动框架-实现单元格到框架的转换, 属性 align Height Width Name Scroll Src Frameborder 背景透明:allowtransparency=“true”,