网页制作教程-第6章ppt课件

第6章使用Dreamweaver框架布局网页,（时间：3次课，6学时）,第6章使用Dreamweaver框架布局网页,6.1框架结构概述6.2创建框架和框架集6.3编辑框架和框架集6.4上机实训,6.1框架结构概述,6.1.1框架结构的概念6.1.2框架结构的工作方式6.1.3框架结构的特点6.1.4什么是嵌套框架集,6.1.1框架结构的概念,框架结构(frame)由框架和框架集两部分组成，是Dreamweaver中的一种技术。该技术能够将浏览器窗口分成若干个区域，而每个区域可以被看作是浏览器整个窗口的子窗口，每个子窗口都能够分别显示不同的网页文档。,6.1.2框架结构的工作方式,如果一个站点在浏览器中显示为包含3个框架的单个页面，则实际上至少由4个网页文件组成：框架集文件以及显示在框架中的3个网页，这3个网页包含最初在这些框架中显示的内容。在Dreamweaver中设计使用框架集的页面时，必须保存所有这4个文件，该页面才能在浏览器中正常显示。,6.1.3框架结构的特点,1.使用框架结构的优点制作网站时不需要在站点的每一个网页上制作那些相同的导航，大大提高了网站制作效率。用户的浏览器不需要为每个页面重新加载(刷新)用于导航框架中的网页，只下载主要内容框架中的网页即可，有利于提高浏览速度。每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不全)，因此用户可以独立滚动这些框架。例如：当框架中的内容页面较长时，如果导航条位于不同的框架中，那么滚动到页面底部的用户不需要再滚动回顶部就能使用导航条。使用框架结构的网站便于维护、兼容性好。兼容性好是相对于模板技术而言的，是指在维护中作者无论如何改变站点的结构均不会发生错误。,6.1.3框架结构的特点,2.使用框架结构的缺点可能难以实现不同框架中各元素的精确图形对齐。对导航链接进行测试可能很耗时间，对链接目标窗口设置要求较高。框架中的页面URL地址不在浏览器地址栏中显示，因此用户可能难以将特定页面设为收藏。,6.1.4什么是嵌套框架集,嵌套框架集是指在另一个框架结构中显示的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架结构的Web页实际上都使用嵌套的框架结构，并且在Dreamweaver中大多数预定义的框架集也使用嵌套形式。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。,6.2创建框架和框架集,6.2.1使用预定义创建框架集6.2.2手动创建框架集6.2.3删除框架6.2.4调整框架大小,6.2.1使用预定义创建框架集,下面以创建预定义的框架集为例，说明创建框架集的操作步骤。(1)在【文件】面板的“ch6”文件夹中利用右键快捷菜单创建一个网页文件，并命名为“main.html”。(2)打开“main.html”文档，在【设计】视图网页中输入“main(主题内容页面)”文字内容以示区别。(3)将插入点定位在页面任意位置，在【插入】工具栏的【布局】选项卡中单击【框架】按钮右侧的下拉箭头，在弹出的【框架集】下拉菜单中选择【左侧框架】命令，如图6-3所示，弹出【框架标签辅助功能属性】对话框，如图6-4所示。,6.2.1使用预定义创建框架集,图6-3选择【左侧框架】命令,图6-4【框架标签辅助功能属性】对话框,6.2.1使用预定义创建框架集,(4)单击【确定】按钮即可自动拆分为左右结构的框架集，并自动命名框架名，【设计】视图如图6-5所示。,图6-5【设计】视图,6.2.1使用预定义创建框架集,(5)将插入点定位在左侧框架“新创建的网页”中，在菜单栏中选择【文件】【保存框架】命令，如图6-6所示，弹出【另存为】对话框，如图6-7所示。,图6-6选择【保存框架】命令,图6-7【另存为】对话框,6.2.1使用预定义创建框架集,(6)在【保存在】下拉列表框中选择一个位置，在【文件名】文本框中输入文件名“left”，单击【保存】按钮，即可保存左侧框架中显示的网页。(7)单击框架边框(双箭头光标)将框架集选中，如图6-5所示。(8)在菜单框中选择【文件】【保存框架页】命令，如图6-8所示，弹出【另存为】对话框，将网页保存为“index”。,图6-8保存框架集的【文件】菜单,6.2.2手动创建框架集,1.手动创建框架集会更加自由方便，但应注意命名框架手动创建框架集操作步骤如下。(1)打开一个单一网页，在【设计】视图中将插入点定位在任意位置，在菜单栏中选择【修改】【框架集】命令，然后从弹出的【框架集】子菜单中选择拆分命令(例如：【拆分左框架】命令或【拆分右框架】命令)，如图6-10所示。,图6-10【框架集】子菜单,6.2.2手动创建框架集,(2)打开【框架】面板，选择其中的某一框架，如图6-11所示。在【属性】面板的【框架名称】文本框中输入自己需要的框架名，如图6-12所示。,图6-11【框架】面板,图6-12【属性】面板,6.2.2手动创建框架集,2.通过拖拽拆分框架通过拖拽拆分框架的操作步骤如下。(1)打开一个单一网页，切换到【设计】视图。(2)在菜单栏中选择【查看】【可视化助理】【框架边框】命令，使其前面打上勾选标志，如图6-13所示，使框架边框可见。,图6-13选择【可视化助理】【框架边框】命令,6.2.2手动创建框架集,(3)将光标定位在【设计】视图的边缘(光标变为上下双箭头)，按鼠标左键将边框拖入编辑区，即可拆分框架，如图6-14所示。,图6-14【设计】视图,6.2.3删除框架,在【设计】视图中用鼠标将框架边框向四周拖拽，直到页面边框或上一级框架边框为止，即可删除被拖拽的框架。如果需要删除整个框架集，直接删除框架集页面即可。,6.2.4调整框架大小,在【设计】视图中拖动框架边框可调整框架的大小比例；在【属性】面板中可指定某一框架的准确大小(另一框架必须设为【相对】)。,6.3编辑框架和框架集,6.3.1选择框架和框架集6.3.2在框架中打开网页6.3.3查看和设置框架的属性6.3.4查看和设置框架集的属性6.3.5使链接目标网页显示在框架中,6.3.1选择框架和框架集,1.在框架面板中选择框架或框架集在【框架】面板中若要选择框架，需要单击此框架(在【框架】面板中，框架周围会显示一个黑色轮廓)，如图6-15所示。,图6-15选择框架,6.3.1选择框架和框架集,若要选择框架集，单击环绕框架集的边框，如图6-16所示光标所在位置，即可选中框架集。,图6-16选择框架集,6.3.1选择框架和框架集,2.在文档窗口中选择框架或框架集在【设计】视图中，按键，单击框架任何部位即可选择框架。在【设计】视图中单击框架集的内部框架边框，即可选择框架集(框架边框必须是可见的，如果看不到框架边框，则在菜单栏中选择【查看】【可视化助理】【框架边框】命令，以使框架边框可见)。,6.3.1选择框架和框架集,3.选择不同的框架或框架集要选择不同框架或框架集，可进行下列操作。若要在当前选定内容的同一层次级别上选择下一框架(框架集)或前一框架(框架集)，在按键的同时按左方向键或右方向键。若要选择父框架集(包含当前选定内容的框架集)，在按键的同时按上方向键。若要选择当前选定框架集中的第一个框架(即按在框架集文件中定义的第一个)，按住键的同时按下方向键。,6.3.2在框架中打开网页,可以通过拆分框架自动新建网页，或通过在框架中打开现有文档，来指定框架的初始内容。例如：当第二次打开框架集网页“index.html”(在6.2.1小节中所做的实例)进行编辑时，可能会出现某某文件不存在的【提示】对话框，如图6-17所示。,6.3.3查看和设置框架的属性,使用【属性】面板可以查看和设置大多数的框架属性，包括边框、边距以及是否在框架中显示滚动条。要查看或设置框架属性可以进行以下操作。(1)选中要查看或设置属性的框架(在【框架】面板中单击框架或在【设计】视图中，在按键的同时单击框架)。(2)在【属性】面板中，单击右下角的展开箭头，查看所有框架属性。(3)设置框架【属性】面板选项。,6.3.4查看和设置框架集的属性,使用【属性】面板可以查看和设置大多数框架集属性(包括框架集标题、边框以及框架大小)。(1)通过执行下列操作之一选择框架集。在【文档】窗口的【设计】视图中单击框架集中两个框架之间的边框。在【框架】面板中单击围绕框架集的边框。(2)在【属性】面板设置框架集选项，如图6-20所示。,图6-20【属性】面板,6.3.5使链接目标网页显示在框架中,若要在一个框架中打开并显示另一个框架中的链接目标网页，必须设置链接目标窗口。链接的目标属性指定在其所打开链接内容的框架或窗口中。例如：如果导航条位于左框架，并且希望链接的目标网页显示在右侧的主要内容框架中，则必须为每个导航条链接的目标(窗口)指定主要内容框架的名称，在如图6-21所示的【属性】面板中进行设置。,图6-21【属性】面板,6.4上机实训利用框架结构制作“奥运会徽网站”,1.实训目的利用框架结构制作“奥运会徽”网站，介绍历届奥运会徽的一些情况，网站主页最终效果如图6-22所示。本实训最终效果文件见“站点实例”(WebDemoch6huihuiindex_huihui.html)，所用素材见“站点实例”(WebDemoAY_Mediahuihui)。,6.4上机实训利用框架结构制作“奥运会徽网站”,2.实训分析从网站主页的整体效果分析，站点内所有网页的顶部标题和左侧导航的内容完全相同，只有右侧区域来显示不同时期的奥运会徽内容。这种情况下读者可以利用框架结构，把顶部、左侧和右侧分为3个网页制作，然后，在一个框架集中分成3个框架，分别默认显示顶部、左侧和右侧3个网页。准备介绍的其他内容分别制作出主要内容(无标题、无导航)，最后通过左侧的导航链接将其他所有介绍内容分别显示在右侧框架中。,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(1)启动Dreamweaver软件，在【文件】面板中右击“ch6”，在弹出的右键快捷菜单中选择【新建文件夹】命令，在“ch6”文件夹中创建“huihui”文件夹。(2)在【文件】面板中，右击“huihui”文件夹，在弹出的右键快捷菜单中选择【新建文件】命令，创建一个网页，并改名为“03.html”(从第三届奥运会徽开始制作)。(3)双击“03.html”，使其进入编辑状态，并进入【设计】视图。,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(4)在菜单栏中选择【插入记录】【表格】命令，插入一个“1行，2列，宽200像素，0边框，8边距和0间距”的表格，如图6-23所示。(5)将“AY_Mediahuihuibnay1904(03).jpg”插入左侧单元格中，如图6-24所示。,图6-24拖拽插入图像文件,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(6)将“AY_Mediahuihui奥运会徽.txt”文件中有关第三届奥运会徽的内容复制到右侧单元格中，通过拖拽将表格宽度调整为“620像素”，如图6-25所示。,图6-25调整表格宽度,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(7)在【文件】面板中将“ch5aoyun.css”文件复制到“ch6huihui”文件夹中。(8)在【CSS】面板中单击【附加样式表】按钮，将样式表“aoyun.css”链接到“03.html”网页中。(9)在【CSS】面板中单击【新建CSS规则】按钮，增加一个名称为“nr”的类样式规则，如图6-26所示。,图6-26新建nr类样式规则,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(10)在【CSS规则定义】对话框【区块】选项卡的【文字缩进】文本框中输入“2”，并在右侧下拉列表框中选择【字体高】选项，单击【确定】按钮，关闭对话框。(11)选中表格右侧单元格中的文字内容，在【属性】面板【样式】下拉列表框中选择“nr”选项。(12)在【CSS样式】面板中单击【新建CSS样式规则】按钮，弹出【新建CSS规则】对话框，如图6-27所示，新建一个名称为“body”的标签样式规则。,图6-27【新建CSS规则】对话框,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(13)在【CSS规则定义】对话框【背景】选项卡中单击【背景颜色】按钮，将整个网页背景颜色设置为“#E5EDFF”(浅蓝色)，如图6-28所示，单击【确定】按钮。,图6-28【背景】选项卡,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(14)重复步骤(2)(6)，制作出其他几届奥运会徽的介绍网页，并且每个网页均要链接样式表“aoyun.css”。再关闭所有网页，打开“03.html”网页。(15)将插入点定位在【设计】视图的网页编辑区，在【布局】选项卡中单击【框架】按钮，并在弹出的子菜单中选择【顶部框架】命令，如图6-29所示，创建一个上下结构的框架集。,图6-29【布局】选项卡,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(16)将插入点放入下部框架中，在【布局】选项卡中单击【框架】按钮，在弹出的子菜单中选择【左侧框架】命令，将下部框架再拆分为左右结构的框架，如图6-30所示。,图6-30拆分框架为左右结构,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(17)将插入点定位在顶部框架中，在菜单栏中选择【文件】【保存框架】命令，将新建顶部网页保存为“top.html”。(18)将插入点定位在左侧框架中，在菜单栏中选择【文件】【保存框架】命令，将新建左侧网页保存为“left.html”。(19)在编辑区内单击框架边框选中框架集，在菜单栏中选择【文件】【保存框架页】命令，将框架集网页保存为“index_huihui.html”，再关闭所有网页。,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(20)在【文件】面板中打开刚才关闭的框架集网页“index_huihui.html”(网站主页)，一般会弹出“某某文件不存在”的【提示】对话框，如图6-31所示。单击【确定】按钮，关闭对话框。,图6-31【提示】对话框,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(21)在【框架】面板中单击左侧框架，在【属性】面板中将其左侧框架命名为“leftFrame”，将【源文件】重新指向到“left.html”导航网页，在【滚动】下拉列表框中选择【自动】选项，如图6-32所示。(22)在【框架】面板中单击顶部框架，在【属性】面板中将其顶部框架命名为“topFrame”，将【源文件】重新指向到“top.html”标题页，在【滚动】下拉列表框中选择【否】选项，其他选择默认。,图6-32在【属性】面板中设置指向源文件,6.4上机实训利用框架结构制作“奥运会徽网站”,3.实训步骤,(23)将插入点定位在顶部框架，插入一个“2行、1列、宽760像素、0边框、0边距和0间距”的表格，在上面单元格中插入图