《框架页和框架集优秀PPT.ppt》由会员分享，可在线阅读，更多相关《框架页和框架集优秀PPT.ppt（19页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、框架页和框架集你现在浏览的是第一页，共19页 框架页和框架集框架页和框架集 框架在网页设计中可以将窗口分成多个不同的区域，每个框架在网页设计中可以将窗口分成多个不同的区域，每个区域可以分别显示不同的网页。框架由两个部分组成区域可以分别显示不同的网页。框架由两个部分组成-框架集和框架集和单个框架。单个框架。框架集专门负责框架的设置：网页显示的框架数，框架的大小，框架集专门负责框架的设置：网页显示的框架数，框架的大小，是分行型还是分列型，或者是混合型；载入框架的网页源，等等。是分行型还是分列型，或者是混合型；载入框架的网页源，等等。你现在浏览的是第二页，共19页 另外的就是单个框架，也就是普通的另
2、外的就是单个框架，也就是普通的HTML文档分别被放置文档分别被放置到各框架中，当链接到设置框架的到各框架中，当链接到设置框架的HTML文档时，整个框架以及各文档时，整个框架以及各HTML文档就会一起显示在浏览器中。文档就会一起显示在浏览器中。在每个框架中，都有一个蓝色的区域，这个区域是主框架在每个框架中，都有一个蓝色的区域，这个区域是主框架的位置。当在一个页面插入框架时，原来的页面就自动成了主的位置。当在一个页面插入框架时，原来的页面就自动成了主框架的内容。一般主框架用来放置网页内容，而其它小框架用框架的内容。一般主框架用来放置网页内容，而其它小框架用来进行导航。来进行导航。你现在浏览的是第三
3、页，共19页 1、执行【文件】、执行【文件】|【新建】命令创建一个新的网页文件。【新建】命令创建一个新的网页文件。2、将当前鼠标光标定位在需要插入框架的位置，执行如下操作之一将当前鼠标光标定位在需要插入框架的位置，执行如下操作之一即可：即可：执行【插入】执行【插入】|【HTML】|【框架】命令。【框架】命令。执行【修改】执行【修改】|【框架集】【框架集】|【拆分框架】命令。【拆分框架】命令。在【插入】栏的【布局】选项卡中单击【框架】按钮。在【插入】栏的【布局】选项卡中单击【框架】按钮。3、按照设计要求，在、按照设计要求，在“框架框架”列表中选择所需的框架结构。列表中选择所需的框架结构。5.3.
4、2 5.3.2 创建框架创建框架1 1框架的插入框架的插入框架的插入框架的插入“框架框架”按钮按钮 你现在浏览的是第四页，共19页 1、执行【文件】执行【文件】|【新建】命令创建一个新的网页文件。【新建】命令创建一个新的网页文件。2、将光标定位到页面中，执行如下操作之一即可：将光标定位到页面中，执行如下操作之一即可：执行【查看】执行【查看】|【可视化助理】【可视化助理】|【框架边框】命令。【框架边框】命令。在【文档工具栏】中单击【视图选项】按钮在【文档工具栏】中单击【视图选项】按钮，执行【可视化助理】，执行【可视化助理】|【框架边【框架边框】命令。框】命令。3、页面四周显示出框架的边框线。、页
5、面四周显示出框架的边框线。4、将光标定位到页面中，执行如下操作之一即可：将光标定位到页面中，执行如下操作之一即可：将鼠标移到【文档窗口】边界线上，当鼠标变成为将鼠标移到【文档窗口】边界线上，当鼠标变成为 （左右分割框架）或（左右分割框架）或 （上下分割框架）时，拖动鼠标至相应位置，即可创建一条边框线。（上下分割框架）时，拖动鼠标至相应位置，即可创建一条边框线。将鼠标移到【边框架】角上，当鼠标变成为将鼠标移到【边框架】角上，当鼠标变成为 形状时，拖动鼠标至相应位置，即形状时，拖动鼠标至相应位置，即可创建可创建4个边框。个边框。2 2插入自定义框架插入自定义框架插入自定义框架插入自定义框架你现在浏
6、览的是第五页，共19页 1、执行【文件】执行【文件】|【新建】命令创建一个新的网页文件。【新建】命令创建一个新的网页文件。2、将光标定位到页面中，单击【布局】选项卡中的【框架】按钮，完成框架将光标定位到页面中，单击【布局】选项卡中的【框架】按钮，完成框架的插入。的插入。3、将光标定位到主框中，单击【布局】选项卡中的【框架】按钮，按照设计将光标定位到主框中，单击【布局】选项卡中的【框架】按钮，按照设计要求，插入嵌套的框架结构。要求，插入嵌套的框架结构。3 3重复插入框架重复插入框架重复插入框架重复插入框架 虽然虽然Dreamweaver MX提供了最常用的提供了最常用的13种框架模型，但是在实际
7、操作种框架模型，但是在实际操作时还是可能会需要使用到其它形式的框架模型，这时可以用重复插入的时还是可能会需要使用到其它形式的框架模型，这时可以用重复插入的方法，创建各种形式的框架结构。方法，创建各种形式的框架结构。重复插入框架可以随意创建框架格式。重复插入框架时，每个框架都会被自动重复插入框架可以随意创建框架格式。重复插入框架时，每个框架都会被自动命名，提高了效率；而且框架的形式是用命名，提高了效率；而且框架的形式是用rows“，80”这样只指定一个全框架大小的这样只指定一个全框架大小的语句，可以适应各种分辩率的浏览器窗口。语句，可以适应各种分辩率的浏览器窗口。如果是多层嵌套的框架，则必须分别
8、保存多个导航框架。如果是多层嵌套的框架，则必须分别保存多个导航框架。你现在浏览的是第六页，共19页 1、执行【文件】执行【文件】|【新建】命令创建一个新的网页文件。【新建】命令创建一个新的网页文件。2、将当前鼠标光标定位在需要插入框架的位置，执行【修改】将当前鼠标光标定位在需要插入框架的位置，执行【修改】|【框架集】框架集】|【拆分左【拆分左/右右/上上/下框架】命令。然后按照设计要求，拆分框下框架】命令。然后按照设计要求，拆分框架。架。4 4分割框架分割框架分割框架分割框架 另外，也可以用拖动鼠标的方法来分割框架：执行【可视化助理】另外，也可以用拖动鼠标的方法来分割框架：执行【可视化助理】|
9、【框架边【框架边框】命令，然后按照框】命令，然后按照“插入自定义框架插入自定义框架”的方式设置即可。的方式设置即可。你现在浏览的是第七页，共19页 5.3.3 5.3.3 框架的编辑和制作框架的编辑和制作框架的编辑和制作框架的编辑和制作 框架在网页上的应用可以说是形式多样，所以，熟练运用框架框架在网页上的应用可以说是形式多样，所以，熟练运用框架的属性，可以使网页的框架结构美观而实用。的属性，可以使网页的框架结构美观而实用。使框架成为一个整体：使框架成为一个整体：虽然应用框架后，窗口被分为几个部分，但出于美观考虑，虽然应用框架后，窗口被分为几个部分，但出于美观考虑，应该使框架看起来像是个整体，一
10、般采用的方法是把框架的边应该使框架看起来像是个整体，一般采用的方法是把框架的边界设置为界设置为0。然后把导航框中的元素确定位置，不进行移动，。然后把导航框中的元素确定位置，不进行移动，使滚动条只出现在主框架中。同时，将框架页的背景设置为使滚动条只出现在主框架中。同时，将框架页的背景设置为一致。一致。你现在浏览的是第八页，共19页 在编辑完成框架的结构后，有时会发现错误，这时可以通过替换与删在编辑完成框架的结构后，有时会发现错误，这时可以通过替换与删除框架来达到目的。除框架来达到目的。1 1替换框架与删除框架替换框架与删除框架替换框架与删除框架替换框架与删除框架 在某些多层嵌套框架建立完成后，有
11、时需要重新设置某一层的框架结构，这时就需在某些多层嵌套框架建立完成后，有时需要重新设置某一层的框架结构，这时就需要替换框架。替换框架就是将框架集中某个框架的内容替换成另外一个框架文件。要替换框架。替换框架就是将框架集中某个框架的内容替换成另外一个框架文件。（1）替换框架）替换框架 1、打开已经设置完成的框架集。在【框架】面板中单击需要替换打开已经设置完成的框架集。在【框架】面板中单击需要替换的那个框架页，进行编辑。的那个框架页，进行编辑。2、执行命令【文件】执行命令【文件】|【在框架中打开】命令。【在框架中打开】命令。3、弹出【选择、弹出【选择HTML文件】对话框。在其中选择替换文件，单击【确
12、文件】对话框。在其中选择替换文件，单击【确定】按钮。定】按钮。你现在浏览的是第九页，共19页 将鼠标定位在某一框架页内，按住【将鼠标定位在某一框架页内，按住【Alt】键，单击鼠标左键，就选中】键，单击鼠标左键，就选中了框架页，同时在编辑区该框架页周围有一圈虚线，鼠标光标变成了框架页，同时在编辑区该框架页周围有一圈虚线，鼠标光标变成 形状。形状。（1）选择框架页）选择框架页 1、打开设置完成的框架集。在【框架】面板中单击需要删除的框架页，进行打开设置完成的框架集。在【框架】面板中单击需要删除的框架页，进行编辑。编辑。2、将光标定位在要删除框架的框架页边框，将边框移动至框架外沿，即可、将光标定位在
13、要删除框架的框架页边框，将边框移动至框架外沿，即可删除框架。删除框架。2 2选择框架页和框架集选择框架页和框架集选择框架页和框架集选择框架页和框架集（2）删除框架）删除框架 将鼠标定位在框架边框上，当鼠标光标变成将鼠标定位在框架边框上，当鼠标光标变成 或或 形状时，单击鼠形状时，单击鼠标左键，就选中整个了框架，同时在编辑区该框架集周围有一圈虚线。标左键，就选中整个了框架，同时在编辑区该框架集周围有一圈虚线。（2）选择框架集）选择框架集你现在浏览的是第十页，共19页（1）保存框架集）保存框架集 1、选中整个框架，执行【文件】选中整个框架，执行【文件】|【保存全部】或【文件】【保存全部】或【文件】
14、|【框架集另存【框架集另存为】命令。为】命令。2、此时，弹出一个存储框架集设置选项的对话框（同时在编辑区此时，弹出一个存储框架集设置选项的对话框（同时在编辑区整个框架集周围有一圈虚线），在【文件名】文本框中键入文件名称，整个框架集周围有一圈虚线），在【文件名】文本框中键入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮即可。在【保存类型】下拉列表中选择文档类型，单击【保存】按钮即可。3 3保存框架页和框架集保存框架页和框架集保存框架页和框架集保存框架页和框架集 在插入框架后，必须及时保存框架页和框架集。在保存框架之前，必须先保存在插入框架后，必须及时保存框架页和框架集。在保存框
15、架之前，必须先保存框架集文档，指明整个框架的形成，否则会出现递归错误。框架集文档，指明整个框架的形成，否则会出现递归错误。你现在浏览的是第十一页，共19页 1、保存框架集完成后，立即弹出保存主框架的对话框（同时在编辑区主保存框架集完成后，立即弹出保存主框架的对话框（同时在编辑区主框架周围有一圈虚线），在【文件名】文本框中输入文件名称，在【保存类型框架周围有一圈虚线），在【文件名】文本框中输入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮。】下拉列表中选择文档类型，单击【保存】按钮。2、最后弹出保存导航框架的对话框（同时在编辑区导航框架周围有一圈最后弹出保存导航框架的对话框（同
16、时在编辑区导航框架周围有一圈虚线），在【文件名】文本框中输入文件名称，在【保存类型】下拉列表中选虚线），在【文件名】文本框中输入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮即可。择文档类型，单击【保存】按钮即可。（2）保存框架页）保存框架页如果是嵌套的框架，则必须分别保存各个导航框架。如果是嵌套的框架，则必须分别保存各个导航框架。你现在浏览的是第十二页，共19页 1、打开上节设置完成的框架集。在【框架】面板中单击各个框架页，分别进打开上节设置完成的框架集。在【框架】面板中单击各个框架页，分别进行编辑。行编辑。2、在【框架属性】检查器中进行设置，选择需要的在【框架属性】检查器
17、中进行设置，选择需要的HTML文档，文档，指定每个框架页的源文件。在【源文件】文本框后单击【浏览文件】按指定每个框架页的源文件。在【源文件】文本框后单击【浏览文件】按钮，在打开的【选择文件】对话框中选择需要加入的钮，在打开的【选择文件】对话框中选择需要加入的HTML文档，然后文档，然后单击【确认】按钮。单击【确认】按钮。3、如果需要的如果需要的HTML文档未编辑，则在【文档】窗口单击框架页，在文档未编辑，则在【文档】窗口单击框架页，在【属性】检查器中进行设置。【属性】检查器中进行设置。直接在框架中编辑直接在框架中编辑HTML文档，和在普通页面中编辑文档，和在普通页面中编辑HTML文档一致，只须
18、注文档一致，只须注意在保存时，必须选择【文件】意在保存时，必须选择【文件】|【保存全部】命令。【保存全部】命令。4 4给框架页加入给框架页加入给框架页加入给框架页加入HTMLHTML文档文档文档文档 在框架建立完成后，必须编辑各个框架的页面内容，通过框架集显示出丰在框架建立完成后，必须编辑各个框架的页面内容，通过框架集显示出丰富的内容。富的内容。你现在浏览的是第十三页，共19页（1）设置框架集属性）设置框架集属性 1、打开创建好的、打开创建好的HTML框架文档，打开【框架】面板。框架文档，打开【框架】面板。2、如果【框架】面板没有出现，可以执行【窗口】如果【框架】面板没有出现，可以执行【窗口】
19、|【框架】命令。【框架】命令。3、在【框架】面板中单击各个框架集边框，【属性】检查器中就、在【框架】面板中单击各个框架集边框，【属性】检查器中就会变成各框架集的属性设置。会变成各框架集的属性设置。4、根据设置要求，对每一个层次的框架集进行属性设置。根据设置要求，对每一个层次的框架集进行属性设置。5 5设置框架页和框架集属性设置框架页和框架集属性设置框架页和框架集属性设置框架页和框架集属性 嵌套框架中的属性设置级别高于框架设置文档中的属性级别，如果在框架设置中指嵌套框架中的属性设置级别高于框架设置文档中的属性级别，如果在框架设置中指定框架的边界为零，而在嵌套框架中指定有边界，则最后显示的框架是有
20、边界的。定框架的边界为零，而在嵌套框架中指定有边界，则最后显示的框架是有边界的。“框架集框架集”属性检查器属性检查器 你现在浏览的是第十四页，共19页（2）设置框架页属性）设置框架页属性 1、在【框架】面板中单击个框架页，在【属性】检查器中就会显示各、在【框架】面板中单击个框架页，在【属性】检查器中就会显示各框架页的属性。框架页的属性。2、根据设置要求，对各个框架页进行属性设置。、根据设置要求，对各个框架页进行属性设置。“框架页框架页”属性检查器属性检查器 你现在浏览的是第十五页，共19页 组织组织HTML是建立框架的目的，在框架建立完成后，还需要正确设定是建立框架的目的，在框架建立完成后，还
21、需要正确设定链接的目标框架，才能充分发挥框架的导航作用。链接的目标框架，才能充分发挥框架的导航作用。6 6为框架页创建超级链接为框架页创建超级链接为框架页创建超级链接为框架页创建超级链接 1、打开上节设置完成的框架集。在【框架】面板中单击个导航框架页，对打开上节设置完成的框架集。在【框架】面板中单击个导航框架页，对其进行编辑。其进行编辑。2、在导航框架中建立各个栏目的超链接，在【属性】检查器中选择链接的目、在导航框架中建立各个栏目的超链接，在【属性】检查器中选择链接的目标框架，选中导航链接，设置【属性】检查器。标框架，选中导航链接，设置【属性】检查器。在【目标】下拉列表中有四个预设项：在【目标
22、】下拉列表中有四个预设项：_blank会打开一个浏览窗口来显示链接内容；会打开一个浏览窗口来显示链接内容；_parent会在当前框架中打开链接；会在当前框架中打开链接；_self在当前框架打开链接，这也是默认方式；在当前框架打开链接，这也是默认方式；_top会在当前浏览器的最外层打开链接。会在当前浏览器的最外层打开链接。你现在浏览的是第十六页，共19页 根据选择的框架集形式，会出现以下备选预设项：根据选择的框架集形式，会出现以下备选预设项：mainframe 会在主框架中打链接，通常情况下，大多数都是选择本选项；会在主框架中打链接，通常情况下，大多数都是选择本选项；leftFrame 会在左侧
23、框架中打链接；会在左侧框架中打链接；rightFrame 会在右侧框架中打链接；会在右侧框架中打链接；topFrame 会在顶部框架中打链接；会在顶部框架中打链接；bottomFrame 会在底部框架中打链接；会在底部框架中打链接；如果框架集中的框架名称被重新设置，则会显示新的框架名称，替代以上备选预设如果框架集中的框架名称被重新设置，则会显示新的框架名称，替代以上备选预设项。项。“超链接超链接-目标目标”属性设置属性设置 你现在浏览的是第十七页，共19页 5.3.45.3.4处理无框架浏览器处理无框架浏览器 有些浏览器（有些浏览器（Netscape2.0以前版本）不支持框架网页，浏览到以前版
24、本）不支持框架网页，浏览到有框架时不能正常显示。有框架时不能正常显示。Dreamweaver允许创建无框架内容，使不支允许创建无框架内容，使不支持框架的浏览器能够显示其中的内容。持框架的浏览器能够显示其中的内容。尽管框架内容和框架内容是分开编辑的，但同属于一个网页，在尽管框架内容和框架内容是分开编辑的，但同属于一个网页，在HTML代码内，分别位于代码内，分别位于和和标签中。标签中。在框架设置文档的在框架设置文档的HTML语句中，最后总有语句中，最后总有 一对标签，当不支持框架的浏览器浏览到该页时，将一对标签，当不支持框架的浏览器浏览到该页时，将忽略忽略 标签中的所有内容，而显示标签中的所有内容，而显示标签中的内容。标签中的内容。你现在浏览的是第十八页，共19页 1、打开设置完成的框架集。、打开设置完成的框架集。2、执行【修改】、执行【修改】|【框架集】【框架集】|【编辑无框架内容】命令。【编辑无框架内容】命令。3、在出现的页面中编辑网页内容。、在出现的页面中编辑网页内容。4、再次执行【修改】、再次执行【修改】|【框架集】【框架集】|【编辑无框架内容】命令，就可以回到有框【编辑无框架内容】命令，就可以回到有框架的编辑状态。架的编辑状态。你现在浏览的是第十九页，共19页