Dreamweaver网页制作教程 第7章 框架.ppt

第第7章章 框架框架课前复习课前复习1.什么是超级连接?2.超级链接的类型?如何创建超级链接?3.命名锚记?有何作用?如何创建命名锚记?4.从属性检查器的“目标”弹出菜单:_blank _parent _self _top的含义5.如何创建电子邮件链接?本章要点本章要点1.1.框架的概念2.2.创建框架3.3.选择框架4.4.编辑框架5.5.保存框架和框架集文件7.1框架的概念框架的概念n n框架的作用就是把浏览器窗口划分为若干个区域，每个区框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。域可以分别显示不同的网页。n n框架主要包括两部分，一个是框架集，另一个就是框架。框架主要包括两部分，一个是框架集，另一个就是框架。框架集是在一个文件内定义一组框架结构的框架集是在一个文件内定义一组框架结构的HTMLHTML网页。网页。n n框架集是框架集是HTMLHTML文件，它定义一组框架的布局和属性，包文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的显示的页面的 URLURL。框架集文件本身不包含要在浏览器中。框架集文件本身不包含要在浏览器中显示的显示的 HTML HTML 内容；框架集文件只是向浏览器提供应如何内容；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信显示一组框架以及在这些框架中应显示哪些文档的有关信息。息。n n而框架则是指在网页上定义的一个显示区域。而框架则是指在网页上定义的一个显示区域。7.2创建框架创建框架和框架集和框架集有两种创建框架集的方法：既可以从若干预定义的框架集中选择，也可以自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架的布局的最简单方法。只能在文档窗口的设计视图中插入预定义的框架集。7.2.1使用预定义的框架集使用预定义的框架集 1.1.在现有文档中创建预定义的框架集。在现有文档中创建预定义的框架集。n n将插入点放置在打开的文档中将插入点放置在打开的文档中 n n从插入从插入 HTMLHTML 框架子菜单中选框架子菜单中选择预定义的框架集。择预定义的框架集。n n在在“插入插入”栏的栏的“布局布局”类别中，单击类别中，单击“框架框架”按钮上的下拉箭头，然后选择预定义的框架按钮上的下拉箭头，然后选择预定义的框架集。集。n n单击确定。单击确定。2.2.选择文件选择文件 新建菜单命令。新建菜单命令。n n在新建文档对话框中，选择框架集类在新建文档对话框中，选择框架集类别。别。n n从框架集列表选择框架集。从框架集列表选择框架集。n n单击创建。单击创建。7.2.2用户自定义框架集用户自定义框架集 选择选择“修改修改”“框架页框架页”，然后从子菜单选择拆分项（例如，然后从子菜单选择拆分项（例如“拆分左框拆分左框架架”或或“拆分右框架拆分右框架”）。）。Dreamweaver Dreamweaver 将窗口拆分成几个框架。如将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。果打开一个现有的文档，它将出现在其中一个框架中。1)1)将一个框架拆分成几个更小的框架。将一个框架拆分成几个更小的框架。将光标定位在要拆分的框架中，然后选择修改将光标定位在要拆分的框架中，然后选择修改 框架页子菜单选框架页子菜单选择拆分项。择拆分项。将框架边框从设计视图的边缘，拖入设计视图的中间，可以将将框架边框从设计视图的边缘，拖入设计视图的中间，可以将垂直或水平方式拆分成一个框架或一组框架。垂直或水平方式拆分成一个框架或一组框架。2 2）删除框架）删除框架将边框框架拖离页面或拖到父框架的边框上，则可实现框架的删除操作。将边框框架拖离页面或拖到父框架的边框上，则可实现框架的删除操作。如果要删除的框架中的文档有未保存的内容，则如果要删除的框架中的文档有未保存的内容，则 Dreamweaver Dreamweaver 将提示将提示保存该文档。保存该文档。3 3）调整框架的大小）调整框架的大小要设置框架的粗略大小，是在文档窗口的设计视图中拖动框架要设置框架的粗略大小，是在文档窗口的设计视图中拖动框架边框。边框。7.3 选择框架和框架集选择框架和框架集1.1.在在“框架框架”面板面板中选择框架和框架集中选择框架和框架集1)1)选择选择“窗口窗口”“框架框架”菜单命令，或按菜单命令，或按Shift-F2Shift-F2键，显示键，显示“框架框架”面板。面板。2)2)选择一个框架选择一个框架 :在在“框架框架”面板中单击框架。在面板中单击框架。在“框架框架”面板和面板和“文档文档”窗口的窗口的“设计设计”视图中，框架周围都会视图中，框架周围都会显示一个选择轮廓显示一个选择轮廓 3)3)选择一个框架集选择一个框架集 :在框架面板中单击环绕框架集的边框。在框架面板中单击环绕框架集的边框。框架集周围都会显示一个选择轮廓。框架集周围都会显示一个选择轮廓。2.2.在在“文档文档”窗口中选择框架和框架集窗口中选择框架和框架集 1)1)在在“文档文档”窗口的窗口的“设计设计”视图中视图中 2)2)选择一个框架选择一个框架 :按住按住 Alt Alt 键的同时单击框架内部。键的同时单击框架内部。在框架周在框架周围显示一个选择轮廓。围显示一个选择轮廓。3)3)选择一个框架集选择一个框架集:单击框架集的某一内部框架边框。单击框架集的某一内部框架边框。7.4 在框架中打开文档在框架中打开文档可以通过将新内容插入框架的空文档中，或通过在框架中打开现有文档，来指定框架的初始内容。要在框架中打开现有文档：1）将插入点放置在框架中。2）选择“文件”“在框架中打开”。3）选择要在该框架中打开的文档，然后单击“确定”。该文档随即显示在框架中。7.5 保存框架和框架集文件保存框架和框架集文件 在浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的在浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。所有文档。1.1.保存框架集文件：保存框架集文件：1)1)在在“框架框架”面板或面板或“文档文档”窗口中选择框架集。窗口中选择框架集。2)2)选择选择“文件文件”“保存框架集保存框架集”。或将框架集文件另存为新文件：选择。或将框架集文件另存为新文件：选择“文件文件”“框架集另存为框架集另存为”。在属性检查器的在属性检查器的“目标目标”弹出式菜单中，选择链接的文档应在其中显示弹出式菜单中，选择链接的文档应在其中显示的框架或窗口：的框架或窗口：_blank _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent _parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。个框架集。_self _self 在当前框架中打开链接，同时替换该框架中的内容。在当前框架中打开链接，同时替换该框架中的内容。_top _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。在当前浏览器窗口中打开链接的文档，同时替换所有框架。2.2.保存框架中显示的文档保存框架中显示的文档 在框架中单击，然后选择在框架中单击，然后选择“文件文件”“保存框架保存框架”或选择或选择“文件文件”“框框架另存为架另存为”。3 3保存与一组框架关联的所有文件：保存与一组框架关联的所有文件：选择文件选择文件 保存所有框架。保存所有框架。7.6查看和设置框架属性查看和设置框架属性1 1查看框架属性查看框架属性 1 1）选择框架。）选择框架。2 2）在）在“属性属性”检查器（检查器（“窗口窗口”“属性属性”）中，单击右下角的展开箭头，查看）中，单击右下角的展开箭头，查看所有框架属性。所有框架属性。2.2.更改框架属性更改框架属性 框架名称：接的框架名称：接的 target target 属性或脚本在引用该框架时所用的名称。属性或脚本在引用该框架时所用的名称。源文件：在框架中显示的源文档。单击文件夹图标可以浏览到一个文件并选源文件：在框架中显示的源文档。单击文件夹图标可以浏览到一个文件并选择一个文件。择一个文件。滚动：在框架中是否显示滚动条。将此选项设置为默认将不设置相应属滚动：在框架中是否显示滚动条。将此选项设置为默认将不设置相应属性的值，从而使各个浏览器使用其默认值。大多数浏览器默认为自动，性的值，从而使各个浏览器使用其默认值。大多数浏览器默认为自动，这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。显示滚动条。不能调整大小：令访问者无法通过拖动框架边框在浏览器中调整框架大小。不能调整大小：令访问者无法通过拖动框架边框在浏览器中调整框架大小。边框：浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择边框边框：浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择边框选项将重写框架集的边框设置。选项将重写框架集的边框设置。边框颜色：所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框颜色：所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。边框，并且重写框架集的指定边框颜色。边距宽度：以像素为单位设置左边距和右边距的宽度。边距宽度：以像素为单位设置左边距和右边距的宽度。边距高度：以像素为单位设置上边距和下边距的高度。边距高度：以像素为单位设置上边距和下边距的高度。7.7 查看和设置框架集属性查看和设置框架集属性查看框架集属性查看框架集属性1 1）选择框架集）选择框架集2 2）在属性）在属性“检查器（检查器（”窗口窗口“”属性属性“）2 2更改框架集属性更改框架集属性1 1）边框：）边框：确定在浏览器中查看文档时在框架周围是否应显示边框。确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框，则选择是；要使浏览器不显示边框，则选择否。要显示边框，则选择是；要使浏览器不显示边框，则选择否。要允许浏览器确定如何显示边框，则选择默认值。要允许浏览器确定如何显示边框，则选择默认值。2 2）边框宽度：指定框架集中所有边框的宽度。）边框宽度：指定框架集中所有边框的宽度。3 3）边框颜色：设置边框的颜色。使用颜色选择器选择一种颜色，）边框颜色：设置边框的颜色。使用颜色选择器选择一种颜色，或者键入颜色的十六进制值。或者键入颜色的十六进制值。4 4）框架集的各行和各列的框架的大小：单击行列选择范围区域左侧）框架集的各行和各列的框架的大小：单击行列选择范围区域左侧或顶部的选项卡；然后在值文本框中，输入高度或宽度，及选择或顶部的选项卡；然后在值文本框中，输入高度或宽度，及选择相应的单位。相应的单位。单位菜单中包含像素、百分比和相对三种。其中像素将选定列单位菜单中包含像素、百分比和相对三种。其中像素将选定列或行的大小设置为一个绝对值；百分比指定选定列或行应相当于或行的大小设置为一个绝对值；百分比指定选定列或行应相当于其框架集的总宽度或总高度的百分比；相对指定在为像素和其框架集的总宽度或总高度的百分比；相对指定在为像素和百分比框架分配空间后，为选定列或行分配其余可用空间；剩余百分比框架分配空间后，为选定列或行分配其余可用空间；剩余空间在大小设置为相对的框架中按比例划分。空间在大小设置为相对的框架中按比例划分。5 5）设置框架集文档的标题）设置框架集文档的标题7.8控制具有链接的框架内容控制具有链接的框架内容要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。链接的标。链接的 target target 属性指定在其中打开链接的内容的框架或窗口。属性指定在其中打开链接的内容的框架或窗口。1)1)在设计视图中，选择文本或对象。在设计视图中，选择文本或对象。2)2)在属性检查器（窗口在属性检查器（窗口 属性）的链接字段中，执行以下操属性）的链接字段中，执行以下操作之一：作之一：单击文件夹图标并选择要链接到的文件。单击文件夹图标并选择要链接到的文件。将指向文件图标拖动到文件面板以选择要链接到的文件。将指向文件图标拖动到文件面板以选择要链接到的文件。3)3)在属性检查器的目标弹出式菜单中，选择链接的文档应在其中显在属性检查器的目标弹出式菜单中，选择链接的文档应在其中显示的框架或窗口：示的框架或窗口：_blank _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent _parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。个框架集。_self _self 在当前框架中打开链接，同时替换该框架中的内容。在当前框架中打开链接，同时替换该框架中的内容。_top _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。在当前浏览器窗口中打开链接的文档，同时替换所有框架。例例7-1(7_1.html)创建红楼梦诗词欣赏网站。创建红楼梦诗词欣赏网站。网站由上方固定，左侧嵌套框架构成，其效果如图网站由上方固定，左侧嵌套框架构成，其效果如图7-17-1所所示。当访问者浏览时，顶部和左侧框架是显示的文件保持示。当访问者浏览时，顶部和左侧框架是显示的文件保持不变，左侧框架导航条包含链接，单击其中某一链接会在不变，左侧框架导航条包含链接，单击其中某一链接会在主框架内打开相应的网页并显示文件内容。主框架内打开相应的网页并显示文件内容。1 1）在本地硬盘上建立站点文件夹）在本地硬盘上建立站点文件夹part7part7，并在其下新建一个，并在其下新建一个imagesimages文件夹，用来存放图像文件。文件夹，用来存放图像文件。2 2）打开）打开Dreamweaver Dreamweaver，新建站点。设置站点名称，新建站点。设置站点名称part7part7，设置本地根文件夹位置在设置本地根文件夹位置在part7part7和默认图像文件夹位置和默认图像文件夹位置在在part7/imagespart7/images。3 3）创建新的空预定义框架集。文件新建，打开新建文）创建新的空预定义框架集。文件新建，打开新建文档对话框，在类别中选择框架集，在框架集档对话框，在类别中选择框架集，在框架集中选择上方固定，左侧嵌套，如图中选择上方固定，左侧嵌套，如图7-127-12所示。所示。4 4）选择文件全部保存。）选择文件全部保存。系统自动显示提示信息，依据显示系统自动显示提示信息，依据显示出的虚线粗边框包围的范围确定保存不同的网页，如虚线粗边框包围出的虚线粗边框包围的范围确定保存不同的网页，如虚线粗边框包围整个框架时保存为整个框架时保存为index.htmlindex.html，如图，如图7-137-13所示。虚线粗边框包围下部右所示。虚线粗边框包围下部右侧框架时保存为侧框架时保存为main.htmmain.htm。虚线粗边框包围下部左侧框架时保存为。虚线粗边框包围下部左侧框架时保存为left.htmlleft.html。虚线包围上部框架时保存为。虚线包围上部框架时保存为top.htmltop.html。5 5）编辑）编辑left.htmlleft.html、main.htmlmain.html、top.htmltop.html等网页。如设置网页属性，插入背等网页。如设置网页属性，插入背景图像，在景图像，在left.htmlleft.html插入一行多列的表格并在表格单元格内用于链接的插入一行多列的表格并在表格单元格内用于链接的文本信息文本信息“红楼梦红楼梦”、“十二金钗册十二金钗册”等。上部是等。上部是top.htmltop.html、左下是、左下是left.htmlleft.html、右下是、右下是main.htmlmain.html，如图，如图7-147-14所示。所示。6 6）创建各子页）创建各子页p1.thmlp1.thml、p2.thmlp2.thml、p3.thmlp3.thml、p4.thmlp4.thml、p5.thmlp5.thml，p6.thmlp6.thml，p7.thmlp7.thml，并在网页内布局并在适当位置插入图像和文本并编辑。，并在网页内布局并在适当位置插入图像和文本并编辑。P2.htmlP2.html红楼梦页在主框架内显示，如图红楼梦页在主框架内显示，如图7-157-15所示。所示。7 7）建立导航链接。在左侧）建立导航链接。在左侧leftleft框架内的选择文本，使用属性检查器的指框架内的选择文本，使用属性检查器的指向文件按钮链接到相应网页。如选择表格第二行的红楼梦向文件按钮链接到相应网页。如选择表格第二行的红楼梦 ，在属，在属性检查器的链接文本框输入性检查器的链接文本框输入p2.htmlp2.html，并在目标列表框内选择，并在目标列表框内选择mainFramemainFrame。指定该页浏览时将在下部右侧的主框架内打开该页。如。指定该页浏览时将在下部右侧的主框架内打开该页。如图图7-167-16所示。所示。本章小结本章小结 框架是比较常用的网页技术。使用框架技术可以将不同的网页文档在同一个浏览器窗口中显示出来。框架最常见的用途是导航，常见的例子是：一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。本章主要介绍了框架的概念、如何创建框架、编辑框架、创建框架超级链接和保存框架等内容。本章重点内容是框架的创建，难点是保存框架。作业作业1 1填空题填空题1 1）框架的作用就是）框架的作用就是_。2 2）框架集文件本身不包含）框架集文件本身不包含_，框架集文件只是向，框架集文件只是向浏览器提供浏览器提供_信息。信息。3 3）如果一个站点在浏览器中显示为包含三个框架的单个页）如果一个站点在浏览器中显示为包含三个框架的单个页面，则它实际上至少由面，则它实际上至少由_单独的单独的 HTML HTML 文档组成。文档组成。4 4）只能在）只能在_来插入预定义的框架集。来插入预定义的框架集。2 2简答题简答题1 1）简述如何创建框架。）简述如何创建框架。2 2）简述如何保存框架。）简述如何保存框架。3 3）说明）说明在属性检查器的目标弹出式菜单中，选择链接在属性检查器的目标弹出式菜单中，选择链接的文档应在其中显示的框架或窗口的含义（如的文档应在其中显示的框架或窗口的含义（如_blank_blank等等）。）。