《Dreamweaver 8中文版网页制作 教学课件 ppt 作者 王君学 于波 第7章 使用框架》由会员分享，可在线阅读，更多相关《Dreamweaver 8中文版网页制作 教学课件 ppt 作者 王君学 于波 第7章 使用框架（27页珍藏版）》请在金锄头文库上搜索。
1、本章将介绍创建和设置框架的基本知识。,第7章 使用框架,教学目标,掌握创建、编辑和保存框架的方法。 掌握设置框架和框架集属性的方法。 掌握创建嵌入式框架的方法。,7.1 创建框架,认识框架和框架集 创建和保存框架网页 在框架中打开网页,本节主要内容：,7.1.1 认识框架和框架集,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。,框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。也就是说，框架集文件将向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。,7.
2、1.1 认识框架和框架集,如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上至少由4个单独的HTML文档组成：一个框架集文件以及显示在框架中的3个文档，这3个文档包含这些框架内初始显示的内容。 当在Dreamweaver中设计使用框架集的页面时，必须保存全部这4个文件，以便该页面可以在浏览器中正常工作。,7.1.1 认识框架和框架集,使用框架具有以下优点： （1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 （2）每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。 使用框架具有以下缺点： （1）可能难以实现不同框架中各元素的精
3、确图形对齐。 （2）对导航进行测试可能很耗时间。 （3）各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签。,7.1.2 创建和保存框架网页,一、创建框架网页,选择【文件】/【新建】命令，打开【新建文档】对话框，在【常规】选项卡中选择需要的选项，如【框架集】/【上方固定，左侧嵌套】。 在当前网页中，单击【插入】/【布局】工具栏框架按钮组中的相应按钮 在当前网页中，选择【插入】/【HTML】/【框架】中的相应命令。 在起始页中，选择【从范例创建】/【框架集】命令。,7.1.2 创建和保存框架网页,7.1.2 创建和保存框架网页,选择【文件】/【保存全部】命令将依次保
4、存框架集内的所有文件，包括框架集文件和框架文件。 选择【文件】/【保存框架】命令，将对当前框架中的文档进行保存。 选择【文件】/【框架另存为】命令，将对当前框架中的文档换名保存。 在【框架】面板或【设计】视图窗口中选择框架集，然后选择【文件】/【框架集另存为】命令将对框架集文件换名保存。,二、保存框架网页,7.1.3 在框架中打开网页,将光标置于框架内，选择【文件】/【在框架中打开】命令，打开文档即可。,7.2 设置框架,设置框架和框架集属性 设置框架中的超级链接,本节主要内容：,7.2.1 设置框架和框架集属性,一、选择框架集 在【框架】面板中用鼠标单击相应的框架集的边框选择该框架集。 按住
5、Alt键不放，在编辑窗口中用鼠标单击相应的框架集边框也可选择该框架集。,7.2.1 设置框架和框架集属性,二、设置框架集属性（行）,7.2.1 设置框架和框架集属性,二、设置框架集属性（列）,7.2.1 设置框架和框架集属性,一、选择框架 在【框架】面板中用鼠标单击相应的框架。 按住Alt键不放，在编辑窗口的框架内单击鼠标左健也可选择该框架。,7.2.1 设置框架和框架集属性,二、设置框架属性,7.2.2 设置框架中的超级链接,在没有框架的文档中，按照指向的对象窗口不同，链接目标可以分为“_blank”、“_parent”、“_self”、“_top”等4种形式。而在使用框架的文档中，又增加了
6、与框架有关的目标，可以在一个框架内使用链接改变另一个框架的内容。 要在一个框架中使用链接打开另一个框架中的内容，必须设置链接目标。在有框架的网页中，可以在【属性】面板的【目标】下拉列表中直接选择框架名称。如果是单独打开文档窗口编辑链接时，如“left.html”，框架名称将不显示在【目标】下拉列表中，此时可以将目标框架的名称直接输入到【目标】文本框中即可。,7.3 编辑框架,编辑无框架内容 拆分和删除框架 使用浮动框架,本节主要内容：,7.3.1 编辑无框架内容,有些浏览器不支持框架技术，Dreamweaver提供了解决这种问题的方法，即编辑“无框架内容”，以使不支持框架的浏览器也可以显示无框
7、架内容。 选择【修改】/【框架集】/【编辑无框架内容】命令，进入【无框架内容】窗口，在其中输入提示文本。设置完毕后，再次选择【修改】/【框架集】/【编辑无框架内容】命令退出该窗口。,7.3.2 拆分和删除框架,一、使用菜单命令拆分框架 选择菜单【修改】/【框架页】下的【拆分左框架】、【拆分右框架】、【拆分上框架】或【拆分下框架】命令可以拆分框架。也可以在【插入】/【布局】面板中单击框架按钮组中相应的按钮来拆分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。,7.3.2 拆分和删除框架,二、自定义框架集 选择【查看】/【可视化助理】/【框架边框】命令，显示出当前网页的边框，然后将鼠标光标
8、置于框架最外层边框线上，当鼠标光标变为 +时，单击并拖动鼠标到合适的位置即可创建新的框架。,7.3.2 拆分和删除框架,如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为 时，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，将框架分隔为4个框架。,7.3.2 拆分和删除框架,如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。,7.3.2 拆分和删除框架,如要创建新的框架，可以先按住Alt键，然后拖动鼠标光标，可以对框架进行垂直和水平的分隔。,7.3.2 拆分和删除框架,三、删除框架 如果要删除框架集内多余的框架，可以将其边框拖动到父框架边框上或直接拖离页面。,7.3.3 使用浮动框架,浮动框架iframe是一种特殊的框架形式，使用iframe可以将一个文档嵌入到另一个文档中显示，且不拘泥网页的布局限制。 选择【插入】/【标签】命令，打开【标签选择器】对话框，然后展开【HTML标签】分类，在右侧列表中找到“iframe”。单击【插入】按钮打开【标签编辑器iframe】对话框进行设置。,
