《框架的应用》word版.doc

实验五 框架的应用一实验目的：1、了解框架的优缺点；2、掌握框架的创建，保存，修改的方法；3、学会使用框架面板以及框架和框架页的属性面板;4、学会内置框架iframe的使用。二预备知识1框架的组成在网页中使用框架可以把浏览器的窗口分隔为若干相互独立又有联系的区域，在每一个区域中显示一个独立的网页文件。一个框架的网页，一定包括N1张网页，如左右型框架包含左右二张网页和一张总的框架页。2框架的特点框架可以把不同层次的网页中的不同内容（如标志图像、版权信息等）放在一个框架中，把不断改变的文档内容放在别的框架中。所以当访问者浏览网页时，不需要重复下载那些相同的内容，减少了访问者下载页面 的时间3框架的选取：1)工作区中选择：单击边框选择框架页；按Alt键后，在子框架中单击，选择子框架。2)“框架”面板上选择：单击子框架内部，选择子框架；单击外边框，选择框架页。4框架的保存分别保存框架集和每一个框架是很麻烦的事情，在框架较多时容易出现遗漏。选择“文件”/“保存全部”就可以一次保存所有的框架集文件和其中的框架文件。5Iframe内置框架即在网页内部有一个完全独立的框架用于显示一个独立的页面，这是一种独特的框架效果，它在HTML中对应的标签是iframe。请看下面的代码：图5.16框架的属性面板，图5.1使用框架属性面板可以命名一个框架并设置边框和边距。 提示： 要令链接更改其他框架的内容，您必须命名目标框架。要令以后创建跨框架链接更容易一些，请在创建框架时命名每个框架。若要指定选定框架的属性，请执行以下操作： 命名框架“框架名称”是链接的 target 属性或脚本在引用该框架时所用的名称。 备注： 框架名称必须是单个单词；允许使用下划线 (_)，但不允许使用连字符 (-)、句点 (.) 和空格。框架名称必须以字母起始（而不能以数字起始）。框架名称区分大小写。不要使用 JavaScript 中的保留字（例如 top 或 navigator）作为框架名称。根据需要更改以下选项：“源文件”指定在框架中显示的源文档。单击文件夹图标可以浏览到一个文件并选择一个文件。您还可以在框架中打开一个文件，方法是：将插入点放置在框架中并选择“文件”“在框架中打开”。 “滚动”指定在框架中是否显示滚动条。将此选项设置为“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。大多数浏览器默认为“自动”，这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。 “不能调整大小”令访问者无法通过拖动框架边框在浏览器中调整框架大小。（您始终可以在 Dreamweaver 中调整边框大小；该选项仅适用于在浏览器中查看框架的访问者。） “边框”在浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择“边框”选项将重写框架集的边框设置。选项为“是”（显示边框）、“否”（隐藏边框）和“默认值”；大多数浏览器默认为显示边框，除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。 “边框颜色”为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。 备注： 关于给定边框颜色应用到哪些框架边框有一个基础逻辑，但该逻辑十分复杂；理解为什么某些边框在指定边框颜色后还会更改颜色可能十分困难。有关指定边框颜色的效果的详细信息，请参见有关框架和框架集的书籍。您可以根据需要设置以下边距选项（如果看不到边距选项，则单击属性检查器右下角的扩展箭头）：“边距宽度”以像素为单位设置左边距和右边距的宽度（框架边框和内容之间的空间）。 “边距高度”以像素为单位设置上边距和下边距的高度（框架边框和内容之间的空间）。 备注： 设置框架的边距宽度和高度并不等同于在“修改”“页面属性”对话框中设置边距。图5.27框架集的属性面板，图5.2设置框架集属性检查器选项 使用框架集属性可以设置框架集的边框和框架大小。 设置框架属性将重写框架集中该属性的设置。例如，在框架中设置的边框属性将重写在框架集中设置的边框属性。 要设置框架的粗略大小，请在“文档”窗口的“设计”视图中拖动框架边框。然后使用属性检查器指定准确大小 。要指定选定框架集的边框属性，请执行以下操作： 根据需要更改以下选项： “边框”确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框，则选择“是”；要使浏览器不显示边框，则选择“否”。要允许浏览器确定如何显示边框，则选择“默认值”。 “边框宽度”指定框架集中所有边框的宽度。 “边框颜色”设置边框的颜色。使用颜色选择器选择一种颜色，或者键入颜色的十六进制值。 要设置选定框架集的各行和各列的框架大小，请执行以下操作： 在“行列选择范围”区域左侧的标签上单击以选择一行，或者在顶部的标签上单击以选择一列。在“值”域中，输入选定行的高度或选定列的宽度。要指定浏览器分配给每个框架的空间大小，请从“单位”菜单中选择以下选项：“像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。在为以百分比或相对值指定大小的框架分配空间前，为以像素为单位指定大小的框架分配空间。设置框架大小的最常用方法是将左侧框架设定为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后，右侧框架能够伸展以占据所有剩余空间。 备注： 如果所有宽度都是以像素为单位指定的，而指定的宽度对于访问者查看框架集所使用的浏览器而言太宽或太窄，则框架将按比例伸缩以填充可用空间。这同样适用于以像素为单位指定的高度。因此，将至少一个宽度和高度指定为相对大小通常是一个不错的主意。“百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。以“百分比”为单位的框架分配空间是在以“像素”为单位的框架之后，但在将单位设置为“相对”的框架之前。 “相对”指定在为“像素”和“百分比”框架分配空间后，为选定列或行分配其余可用空间；剩余空间在大小设置为“相对”的框架中按比例划分。 备注： 当您从“单位”菜单中选择“相对”时，您在“值”域中输入的所有数字均消失；如果您想要指定一个数字，则必须重新输入。不过，如果只有一行或一列设置为“相对”，则不需要输入数字，因为该行或列在其他行和列已分配空间后，将接受所有剩余空间。为了确保完全的跨浏览器兼容性，您可以在“值”域中输入 1；这等效于不输入任何值。框架的空间分配是十分复杂的；有关详细信息，请参见有关框架和框架集图5.3的书籍。 8框架面板，图5.3显示框架面板：窗口其它框架三实验内容及要求：1 掌握框架的创建、选取、编辑操作；2 掌握框架的保存方法，以及被链接网页的“目标”框架；3 熟练使用框架与框架集的属性面板以及框架面板；4 制作实例1) 建立一“上方固定，左侧嵌套”框架页2) Iframe框架四实验步骤图5.41建立“上方固定，左侧嵌套”框架集，图5.4效果：点左侧三首词的任意一首，右下角的白色块将显示这首词的内容，上方固定为标题。本例中给定三首词的网页，其余自已结合样文完成。1建立“上方固定，左侧嵌套”框架集；将顶端框架高设置为100像素，左下侧框架宽设置为150像素。2选中右下角框架，为其设置框架名（自由定），并且将该框架的源文件设置为第一首词的网页。3保存框架：保存该框架网页，注意保存时所用方法，不管用哪一种，一定要把框架页和框架全部保存；要求整个框架页名为kj.htm、顶端框架名为top.htm、左下侧框架名为left.htm。保存操作提示： 1）单独保存框架页，单击“文件”/“保存框架页”或“文件”/“框架页另存为”。（前选中框架页）2）单独保存新建的（当前）框架（网页文件），单击“文件”/“保存框架”。（选中或光标放在本框架内）3）同时保存两者(推荐使用)，单击“文件”/“保存全部”，保存全部时，先保存框架页，然后逐个保存各个框架。保存对象由粗框线围起。4）将左框架的三个超级链接分别链向三首词，要求这三个被链接的网页在右下侧的框架中打开，最后用CSS定义超级链接的样式；图5.4 注意：链接的网页要在所需要的框架中正确地显示出来，必须正确设置“目标”项为目标框架的框架名。2.Iframe框架，图5.5效果：点上面导航条的任意星座，下面的小窗口将显示该星座的图片，要求用Iframe框架完成。已知三个网页星座网页为链接网页。1）布局网页；2）标定位在适当位置，在网页代码视图中添加