第第6章应用框架技术制作网页章应用框架技术制作网页网页设计与制作网页设计与制作学学学学 习习习习 目目目目 标标标标 框架也称为帧，是设计网页时非常有用的工具。它框架也称为帧，是设计网页时非常有用的工具。它可以将浏览器窗口划分为若干个区域，每个区域分别可以将浏览器窗口划分为若干个区域，每个区域分别显示不同的网页，从而使用户能够一次浏览更多内容。显示不同的网页，从而使用户能够一次浏览更多内容。本章学习框架的一些基础知识，以及怎么同时在一个本章学习框架的一些基础知识，以及怎么同时在一个浏览器窗口中显示多个网页。浏览器窗口中显示多个网页。网页设计与制作网页设计与制作本本本本 章章章章 重重重重 点点点点uu 框架的基本构成框架的基本构成框架的基本构成框架的基本构成uu 创建和设置框架创建和设置框架创建和设置框架创建和设置框架uu 框架中的链接目标框架中的链接目标框架中的链接目标框架中的链接目标uu 框架中网页的设置框架中网页的设置框架中网页的设置框架中网页的设置uu 框架设置滚动条框架设置滚动条框架设置滚动条框架设置滚动条网页设计与制作网页设计与制作一个框架应用实例一个框架应用实例网页设计与制作网页设计与制作页面分析页面分析 该实例实质是一个应用了top left框架的网页。这种框架的页面被分成了3个区域，其中包含了4个网页文件，分别为：frameset网页、上边topframe框架中包含的网页文件、左边leftframe框架中包含的网页文件、右边mainframe中包含的网页文件。 因此在保存这个框架集网页时，需要因此在保存这个框架集网页时，需要4个文件。个文件。网页设计与制作网页设计与制作实现基于框架的网页的基本思路如下：实现基于框架的网页的基本思路如下：（1）在页面中创建框架集和框架，并对页面布局进行适当 的调整。（2）输入框架页面内容。（3）保存框架集文件和框架文件。（4）确认链接目标的框架设置，使所有链接内容都出现在 正确的区域内。（5）通过设置框架和框架集属性，来改变框架网页的外观 等。网页设计与制作网页设计与制作创建框架结构创建框架结构调出框架面板（frames），利用它可以进行选取、观察修改框架等基本操作。在对框架操作时，最好一起打开框架面板！打开方法“窗口”“框架”。或者快捷键Shift+F2没有插入框架时的框架面板没有插入框架时的框架面板网页设计与制作网页设计与制作插入插入top left结构的框架集页面结构的框架集页面n为了方便观察和操作框架，需要启用可视化助理，打开方法菜单栏可视化助理n打开方法是：菜单栏查看可视化助理框架边框n当启用了辅助工具后文档窗口的四周就出现了灰色框架边框网页设计与制作网页设计与制作对象面板上的框架集对象面板上的框架集插入框架集插入框架集插入一个框架集，操作步骤如下 (1) 新建一个文件 (2) 执行以下操作之一，插入DW预定的框架集 A、菜单栏插入框架左边 B、在对象面板上单击框架按钮，或者把按钮拖 到页面上网页设计与制作网页设计与制作n在文档窗口出现了包含3个区域的top left结构框架集。其中立体的灰色边框为框架集的边框，而没有立体效果的细边框为框架边框。每一个框架都有自己的名字，用于识别其他框架，默认的框架名分别为topframe、leftframe、mainframe 说明：说明：创建框架集还可以使用自由托拽法，前提是框架边框是可见的。用这个方法首先要分析要创建的框架集的结构，然后进行相应的拖拽操作即可。网页设计与制作网页设计与制作Top left 结构的框架集结构的框架集对应的框架面板对应的框架面板自由创建Top left结构的框架集，操作步骤如下：(1) 将光标置于文档窗口框架的上边框。(2) 待光标变为双箭头形状后，按住鼠标左键向下拖动上边框 到适当的位置，这样就创建了一个上下结构的框架集。网页设计与制作网页设计与制作自由建立的框架集自由建立的框架集所对应的框架面板所对应的框架面板(3) 按住alt的同时，用鼠标点击下边区域，按住鼠标左键向右拖动左下边框到适当的位置，就可以生成top left结构框架。利用这种方法，可以自由建立自己所需要的框架集。 注意：注意：利用自由拖拽创建的框架集，其框架名称均为“没有名称”。由于框架名称将被作为超级链接的目标和脚本的引用，所以需要为框架命名。网页设计与制作网页设计与制作选取框架和框架集选取框架和框架集 在插入框架集之后，如果不满意，可以进行相应的修改操作。首先进行框架和框架集的选取操作：1.选取框架 方法一：在框架面板中单击要选取的框架。 方法二：在文档窗口中按alt键，在要选择的框架 里点击，便选取了相应的框架。 被选取的框架在框架面板中被加黑显示的细线围住，而在文档窗口中被较细的虚线框围着，同时在状态栏上加黑显示的是。网页设计与制作网页设计与制作2.选取框架集 方法一：在框架面板中单击立体边框 方法二：在文档窗口中将鼠标移动到框架与框架之间的 分隔线上，单击鼠标左键选中框架集。n这时被选中的框架集边框在框架面板中被加黑显示，而在文档窗口中被较细的虚线框围住，同时在状态栏上加黑显示的是。n当我们在新建的页面中插入框架集时，默认选中的就是整个框架集。网页设计与制作网页设计与制作选中选中的状态的状态选中选中的状态的状态网页设计与制作网页设计与制作增加框架增加框架增加框架可以使用鼠标拖拽法和菜单方式。1.鼠标拖拽法 (1) 按住alt键拖拽任一条框架边框，可以垂直或 水平分割文档(或已有的框架)。 (2) 按住alt键从一个角上拖拽框架边框，可以把 文档(或已有的框架)划分为4个框架。 注意：注意：要选中框架才能在框架内部进行增加框架，要选中框架才能在框架内部进行增加框架，否则默认是在外框架否则默认是在外框架(整个框架集上增加整个框架集上增加!)网页设计与制作网页设计与制作直接从底部向上拖拽直接从底部向上拖拽出来的框架出来的框架选中右下方的框架后再选中右下方的框架后再按按alt拖拽出来的框架拖拽出来的框架网页设计与制作网页设计与制作2.2.菜单方式菜单方式 在菜单栏修改框架页，在子菜单中单击相应的选项。网页设计与制作网页设计与制作删除框架删除框架方法：方法： 将想要删除的框架边框拖至文档窗口的边缘为止，或拖拽想要删除的框架边框到父框架的边框上。网页设计与制作网页设计与制作调整框架的大小调整框架的大小 插入框架后，会发现框架的大小并不一定符合要求，因此需要将框架的大小进行适当的调整。 方法：方法：将鼠标指针移到要调整的框架边框线上，在出现双箭头后，按住鼠标左键(进行左/右、或上下的拖拽即可)。网页设计与制作网页设计与制作编辑框架集页面内容编辑框架集页面内容 框架集设计好后就可以编辑每个框架的内容了。编辑框架集中内容有两个方法： (1) 利用前面所学内容，直接在相应的框架中输 入内容。 (2) 将框架中的网页文件事先编辑好，然后在框 架中导入。网页设计与制作网页设计与制作对话框对话框n这两种不同的编辑方法，在保存框架集网页的操作过程有所不同。n使用第一种方法，直接在3个区域(框架)中分别插入相应的内容(页面中的文本可以直接从前面制作的网页上拷贝过来)n制作完成后按F12预览页面，弹出一个对话框。提示没有保存框架集和框架文件。我们必须先进行保存，以后每次修改框架网页时如果直接预览页面都会出现这个对话框!网页设计与制作网页设计与制作 该对话框提示在预览框架集网页之前需要保存框架集文件和各个框架文件。单击“确定”，将保存框架集文件和框架文件，然后才打开浏览器预览；单击“取消”则放弃预览。网页设计与制作网页设计与制作保存框架集文件保存框架集文件保存的方法通常有两种： (1) 同时保存框架集中的所有网页文件。 (2) 分别保存框架集中的网页和各个框架中的网 页文件。网页设计与制作网页设计与制作 保存框架集中的所有网页文件，操作步骤如下： (1) 菜单栏中选择“文件” “全部保存”。 (2) top left结构的框架由4个网页文件组成，在 保存过程中会先后弹出4个“另存为”对话框， 依次进行保存。同时保存框架集中的所有网页文件同时保存框架集中的所有网页文件网页设计与制作网页设计与制作 小技巧：小技巧： 保存的时候被虚线框围住的框架就是我们正在保存的框架文件。如果虚线框围在左边就是保存左边框架中的网页，在右边就是保存右边的框架中的网页。 但是如果使用导入网页到框架，保存的方法就有所不同了。网页设计与制作网页设计与制作分别保存框架集中的网页和各个框架中的网页文件分别保存框架集中的网页和各个框架中的网页文件保存框架集网页文件，操作步骤： (1) 选中整个框架集 (2) 在菜单中选择“文件”“保存框架”保存单个框架网页文件的操作步骤如下： (1) 将光标定位在要保存网页文件的框架内，或 在框架面板上单击网页所在框架 (2) 在菜单栏中选择“文件”“保存框架页”网页设计与制作网页设计与制作单独保存框架集网页文件单独保存框架集网页文件保存框架网页文件保存框架网页文件网页设计与制作网页设计与制作 注意：注意： 在框架中设置网页标题的步骤：选中框架集在常用面板中，再对网页标题进行设置。(设置完成后要保存整个框架)，此时网页标题才能被设置，我们一般的网页标题设置方法不能直接设置。网页设计与制作网页设计与制作设置框架中的链接目标设置框架中的链接目标 为左边框架中的各个导航栏目建立一个可以链接到右边框架中的超级链接。其步骤： (1) 选中文本，打开文本的属性面板。 (2) 在属性面板上单击文件夹按钮，选取要连接 的文件。 (3) 在属性面板上单击“目标”的下拉列表，点中 “mainframe”这个框架名称，告诉浏览器在 mainframe框架中打开被链接的网页文件。网页设计与制作网页设计与制作选择不同的框架名称，链接文件将在不同的框架中打开：(1) 选择“mainframe”，在窗口的右边mainframe框 (2) 架中显示所链接的文件内容。(2) 选择“leftframe”，在窗口的左边leftframe框架 中显示所链接的文件内容。(3) 选择“topframe”，在窗口的上边topfrmae框架 中显示所链接的文件内容。网页设计与制作网页设计与制作将链接目标设置在默认框架中将链接目标设置在默认框架中这是这是4个默认的框架名称个默认的框架名称(1) _blank(空白窗口空白窗口)：在另一个新的窗口中显示链接内容，这：在另一个新的窗口中显示链接内容，这样可以保留现有的窗口文档内容。样可以保留现有的窗口文档内容。(2) _parent(父窗口父窗口)：在上一层的框架集中显示链接内容：在上一层的框架集中显示链接内容(该选该选项只有在框架集中还包含另一个框架集的情况下才能产生效果项只有在框架集中还包含另一个框架集的情况下才能产生效果)。(3) _self(当前窗口当前窗口)：在本身所在的框架中显示链接内容这样会：在本身所在的框架中显示链接内容这样会覆盖当前框架中的所有内容。该目标是默认值。覆盖当前框架中的所有内容。该目标是默认值。(4) _top(最高最高)：在整个浏览窗口中显示链接内容，这样会覆盖：在整个浏览窗口中显示链接内容，这样会覆盖当前框架中所有内容。当前框架中所有内容。网页设计与制作网页设计与制作修改框架集网页外观修改框架集网页外观 框架默认的外观不好看，我们可以通过设置框架(或框架集)的属性来修改。1、设置框架集属性、设置框架集属性 框架集属性包括框架的大小和框架之间的边框颜色及宽度等。查看和设置框架集的属性如下：网页设计与制作网页设计与制作表示当前选择表示当前选择的是框架集的是框架集表示当前的框架表示当前的框架结构为结构为2行行1列列用于设置当前框架集边框用于设置当前框架集边框的类型、宽度和颜色的类型、宽度和颜色设置选定行设置选定行(列列)的大小及其单位的大小及其单位行列选择器深行列选择器深色行为当前行色行为当前行(1) 选中整个框架集。选中整个框架集。(2) 在菜单栏中选择在菜单栏中选择“窗口窗口”“属性属性”，此时打开的属性面板，此时打开的属性面板为为 整个框架集的属性面板为整个框架集的属性面板。整个框架集的属性面板为整个框架集的属性面板。(3) 根据需要在属性面板上进行相应设置即可根据需要在属性面板上进行相应设置即可!网页设计与制作网页设计与制作精确调整框架大小精确调整框架大小 将leftframe框架区域的列宽精确调整到180像素，步骤如下： (1) 在框架面板上单击上下框架之间的立体边框 (2) 此时属性面板为下边框架集的属性面板 (3) 在“值”文本框中输入180，单位选择像素即可n注意：如果想调整注意：如果想调整topframe框架区域的高度，框架区域的高度，就要选中整个框架集。在就要选中整个框架集。在“值值”文本框中输入一文本框中输入一个数字即可设置行的大小个数字即可设置行的大小 网页设计与制作网页设计与制作2.2.设置框架的边框及其宽度和颜色设置框架的边框及其宽度和颜色 在框架属性面板上的“边框”项用于设置在当文档在浏览器中被浏览时是否显示框架，共有三种选择： (1) yes(是)：显示边框，宽度由“边框宽度”中的 值指定 (2) no(否)：不显示边框 (3) default(默认)：让用户浏览器决定是否显示 边框。一般情况下为立体的灰色边框网页设计与制作网页设计与制作n“边框宽度”项用于设置框架边框的宽度，实际上是框架与框架之间的距离，与表格中单元格的间距相似，其单位默认为像素n刚建立框架集网页时，框架集中的边框设为“NO”，宽度设为0。在浏览框架网页时，看不到框架之间的边框，形成了一个整体，这就是无缝连接的效果。网页设计与制作网页设计与制作没有边框时的无缝连接效果没有边框时的无缝连接效果网页设计与制作网页设计与制作设置边框为设置边框为5时的框架效果时的框架效果网页设计与制作网页设计与制作设置框架属性设置框架属性 框架属性包括框架的名称、源文件、边距、滚动、边框等。使用框架属性面板可以查看和设置框架属性。 网页设计与制作网页设计与制作通过执行以下操作之一选择框架： n在“文档”窗口的“设计”视图中，按住 Alt 键的同时单击一个框架 (Windows) 或在按住 Shift 和 Option 键的同时单击一个框架 (Macintosh)。 n在“框架”面板（“窗口”“框架”）中单击框架。 网页设计与制作网页设计与制作1.命名框架 打开框架面板，可以看到在top left结构的框架集中，框架的默认名称分别为topframe、leftframe、和mainframe，这些名称都可以重新定义的。 (1) 在框架面板中的topframe框架内单击，以选 中topframe框架。 (2) 打开属性面板，在框架属性面板的“框架名 称”里输入框架的名称，回车即可。网页设计与制作网页设计与制作表示当前选择的是表示当前选择的是一个独立的框架一个独立的框架对框架名对框架名称修改称修改以像素为单位设置以像素为单位设置框架边框与内容之框架边框与内容之间的左右间距间的左右间距设置或显示当前框架中的网页文件设置或显示当前框架中的网页文件选中可防止用户选中可防止用户在浏览时调整当在浏览时调整当前框架的大小前框架的大小滚动：滚动：在下拉列表中设置框架是否出现滚动条在下拉列表中设置框架是否出现滚动条设置边框和设置边框和边框颜色边框颜色网页设计与制作网页设计与制作注意：注意： 框架名称将被作为超级链接的目标和脚本使用，命名框架必须符合一下要求：框架名应该是一个单词，允许使用下划线(_)，但不能使用横杠(-)、名号(.)和空格；框架名应该以字母开头，不要使用JavaScript的保留字(如top或navigator)。网页设计与制作网页设计与制作2.更换框架中的网页更换框架中的网页 利用“导入”，既可以在当前框架中导入预先设计好的网页文件，也可以更换当前框架中的网页。其步骤： （1）选中想要导入（或更换）网页的框架。 （2）使用以下几种方法依次导入网页： A、直接在框架属性面板上的“源文件”文本框中输入文件名。 B、单击框架属性面板上的黄色按钮，浏览并选择一个文件。 C、把光标置于页面中想更换内容的框架内，然后在菜单栏中选择“文件”“在框架中打开”命令打开一个文件。网页设计与制作网页设计与制作三种在框架中打开文件的方法网页设计与制作网页设计与制作3.3.为框架设置滚动条为框架设置滚动条 使用“scroll”选项就可以为当前框架设置滚动条。好处：当没有足够的显示空间来显示框架内容时，通过拖动滚动条来显示剩下的内容。 其中的四个选择项： （1）yes（是）：显示滚动条 （2）no（否）：不显示滚动条 （3）auto（自动）：当没有足够的空间来显示当前框架 的内容时自动显示滚动条 （4）default（默认）：采用浏览器的默认值（大多数浏 览器默认为auto自动）。网页设计与制作网页设计与制作一般情况下，在一般情况下，在“scroll”的下拉列表中选择的下拉列表中选择“默认默认”或或“自动自动”，这样浏览器会自动跟据窗口的大小来判断，这样浏览器会自动跟据窗口的大小来判断是否需要出现滚动条。是否需要出现滚动条。4.为框架设置边框及颜色为框架设置边框及颜色5.设置框架边框与框架内容之间的距离设置框架边框与框架内容之间的距离注意：设置框架属性会覆盖框架集中设置的相应属性注意：设置框架属性会覆盖框架集中设置的相应属性网页设计与制作网页设计与制作本章小结本章小结1.在页面中创建框架集和框架，并对页面布局进行适当的调整2.输入框架页面内容3.保存框架集文件和框架文件4.确认链接目标的框架设置，使所有链接内容都出现在正确的区域内5.通过设置框架和框架集属性，来改变框架网页的外观网页设计与制作网页设计与制作n导航栏目中的链接设置是相当重要的，它决定了链接目标是否正确n框架网页的保存对初学者来说有一定的难度，请反复练习n使用框架的两个好处：一、可以用来布置页面；二、可以使页面具有导航的功能，无论浏览到哪儿都可以很好地把握。n注意：由于框架集网页中包含多个框架网页，在浏览时一会需要载入几个页面，所以会降低用户的浏览速度。网页设计与制作网页设计与制作练习：练习： 完成左图中的网页设计，要求点击“网页1”时在右边的框架中显示网页1，点击“网页2”时显示网页2，点击“网页3”时显示网页3。