第9章 (72)教材配套课件

•框架名称：连接的目标属性或在引用该框架时所用的 名称。
•注意：框架名称允许使用下划线( _ ),但不允许使用 连字符( - )、句点( . )和空格。必须以字母起始(而不能以 数字起始)，框架名称区分大小写。
•源文件：指定在框架中显示的源文档。 •滚动：指定在框架中是否显示滚动条。 •不能调整大小：访问者无法通过拖动框架边框在浏 19 览器中调整框架大小。 •边框：设置在浏览器中查看框架时是否显示当前框 架的边框。 •边框颜色：为所有框架的边框设置边框颜色。 •边界宽度：以像素为单位设置框架左、右边框和内 容之间的距离，即左边距和右边距的宽度。
_blank：保持当前窗口不变，在新的浏览器窗口中打 开链接的文档。
_parent：在链接框架的父框架集中打开链接的文档， 同时替换整个框架集。
_self：在当前框架中打开链接，并替换该框架中的内 容。
_top：在当前浏览器窗口中打开链接的文档，并替换 31 所有框架。
_mainframe、_topframe、_leftframe：框架集中的框架 名，选中对应的框架名表示在该框架中打开并显示链接文 档的内容。
要选中框架集，可在设计视图中单击其框架的任一边 框，而要选择框架，则在按住Alt键的同时在该框架内部单 击。而另一种较为直观的方法是利用Dreamweaver中的 “框架”面板来进行选取：在菜单栏中选择“窗 口”→“框架”或使用Shift+F2快捷键打开“框架”面板， 如图9-6所示，在“框架”面板中形象地显示出了网页框架 的结构。
26
图9-8 组成“商品分类”页面的三个独立页面 (b) “商品分类”页面左框架；
27
图9-8 组成“商品分类”页面的三个独立页面 (c) “商品分类”页面右框架
9.4 在框架内实现页面跳转
28
在“商品分类”页面(fenleipage_index.htm)中，单击左 框架中的“T恤小衫”、“外贸长裤”、“连衣裙”链接 时，右框架中会显示相应的页面，这就是框架内的页面跳 转。下面以“商品分类”页面为例，介绍在框架内实现页 面跳转的方法：
框架集中直接编辑页面的方法是：将光标放置在要添加内
容的框架中，如上框架，此时网页名称将变成我们保存的
上框架的名称“fenleipage_top.htm”，
菜单栏和工具栏的所有属性所设置的都是 “fenleipage_top.htm”页面的属性。我们先在“修 改”→“页面属性”中设置网页的背景颜色为“#FFF4FF”，22 根据前面所学知识，利用表格制作页面的内容并将表格设 置为页面居中。利用同样方法，设置左框架、右框架的背 景颜色，并分别设置上边距、右边距、左边距为0，使框 架中的表格能与框架边框无缝连接。接着利用表格制作框 架内容，并分别将左框架页面内表格和右框架页面内表格 设为页面右对齐和左对齐，以便实现左、右框架页面的有 机结合。在制作过程中，当框架尺寸过大或过小时可以用 鼠标拖动的方式进行调节(见图9-7)。最后，不要忘了保存 全部框架。
3
图9-1 “商品分类”页面
9.1 框架结构规划
4
在建立框架前，首先要对框架的结构进行规划，比如 有哪部分内容是固定不变的，在哪部分显示链接的内容等， 整个网页规划好才能使用框架技术实现页面的内容。根据 图9-1所示的页面，我们规划将框架分为三栏(见图9-2)：顶 部用来放置网页标题信息；左边是栏目分类，通过这一栏， 访问者可以对网页整体有所了解；
使用方便，我们将保存的框架集和框架分别取名为
“feileipage_index.htm”、“fenleipage_top.htm”、
12
“fenlei_left.htm”、“fenleipage_right.htm”。
13
图9-5 顶部和嵌套的左侧框架
9.3 编 辑 框 架
14
9.3.1 选中框架和框架集
菜单下的“保存全部”选项。在选择“保存全部”选项后，
首先弹出对话框保存的是主框架集，默认的名称为
“Untitled Frameset”，且此时整个框架用斜线框包围。在
保存好框架集后，接下来依次出现三个对话框，分别保存
三个框架文件，从斜线框包围的范围可判断正在保存的框
架区域。
如保存的是顶部框架，则斜线框将包围住顶部区域。为了
第9章 框架布局——“商
品分类”页面制作
1
9.1 框架结构规划 9.2 创建、保存框架和框架集 9.3 编辑框架 9.4 在框架内实现页面跳转
所谓框架，是指将浏览器窗口分成不同的区域，每个 区域都可以显示不同的网页。如图9-1所示的“商品分类” 页面(本书配套电子文档中的root/fenleipage_index.htm文件， 2 打开时请将显示器分辨率调至1280×1024，分辨率为 1024×768的显示器可参考fenleipage_index1024.htm文件) 中，用户在左边单击“T恤小衫”、“外贸长裤”、“连 衣裙”链接时，其指向的网页只在右下方窗口中显示，而 不是在整个浏览器窗口中显示链接的页面，这就是一个包 含框架的页面。本章将以图9-1所示的“商品分类”页面为 例，讲述网页框架布局的技巧。
(3) 保存文档。
按下F12键，我们就可以预览到一个完整的“商品分
类”页面了。
32
架”，在子菜单中可选择相对应的框架布局(见图9-4)。
9
图9-3 “框架”按钮下拉菜单
10
图9-4 “框架”命令子菜单项
利用以上方法，根据图9-1所示的页面布局，我们在新
建页面后，创建一个“顶部和嵌套的左侧框架”，创建后
的页面如图9-5所示。
11
框架创建好后先将文件保存。由于使用框架的页面是
由若干个文件组成的，在初次保存时，一般选择“文件”
右边则显示由链接指向的每一个具体的页面。通过对网页 整体结构的规划我们可以确定框架组大概需要的独立页面 数，如“商品分类”页面中，三个栏目需要三个独立的网 5 页文件，而这三个页面整合为一个框架布局则是由“框架 集”来完成的。
6
图9-2 框架结构规划
9.2 创建、保存含了框架的数目、框架的大小和位置以及每个框架中初始 显示的页面链接地址等信息。框架集仅仅用来存储框架的 显示信息。而我们所说的“框架”只是浏览器窗口中的一 个区域，每个框架都由独立的网页填充。实际上，框架页 面是一个仅仅包含框架集的页面，里面的内容则是各个框 架加载的页面产生的。
(1) 先制作好链接所对应的页面，其中，“T恤小衫” 所对应的页面作为默认显示的页面已在“编辑框架”这一 步骤中制作完成。制作“外贸长裤”、“连衣裙”所对应 29 的页面，只需将“T恤小衫”所对应的 “fenleipage_right.htm”页面及表格框架拷贝，重新输入表 格内容即可，并将这两个页面分别另存为 “fenlei_right2.htm”、“fenlei_right3.htm”。
框架集和框架的创建是同步的，只要创建了框架集，框架
就同时被创建；同样，只要创建了框架，框架集就一定会 8
形成。下面介绍创建框架和框架集的方法：
方法一：在“插入”工具栏的类别中选择“布局”类
别，在
“框架”按钮下拉菜单(见图9-3)中选
择合适的框架布局。
方法二：在菜单栏中选择“插入”→“HTML”→“框
架集外，同时还能用于创建新的框架集。合并框架(即删除 框架)的方法与拆分框架相反，只需将框架边框拖动到父框 架的边框上即可。注意，当框架边框不可见时，可在菜单
栏中选择“查看”→“可视化助理“→“框架边框”，使 边框显示出来。
9.3.3 设置框架和框架集的属性
页面中经常混有框架和框架集，选取不同对象可以进 行不同的属性设置。按照9.3.1节介绍的方法选中框架后， 18 框架的“属性”面板将被打开，“属性”面板中各项属性 的含义如下：
(2) 选中左框架中的“T恤小衫”文本，在属性窗口中 “链接”一栏将路径指向“fenleipage_right.htm”，并在 “目标”一栏中选择“mainframe”；同理，将“外贸长 30 裤”、“连衣裙”文本分别链接到“fenlei_right2.htm”和 “fenlei_right3.htm”页面，并将“目标”设置为 “mainframe”。这里，“目标”的下拉菜单中各项的含义 如下：
至此为止，“商品分类”页面框架的编辑基本完成。 图9-8分别展示了构成“商品分类”页面的上框架 “fenleipage_top.htm”、左框架“fenlei_left.htm”和右框架 “fenleipage_right.htm”这三个独立页面。
25
图9-8 组成“商品分类”页面的三个独立页面 (a) “商品分类”页面上框架；
在“框架”面板中，单击最外层的边框可选中框架集，而 要选择某一个框架，只要在“框架面板”中单击该框架对 应的区域即可，选定后的框架或框架集在设计视图中呈虚 15 线显示。
16
图9-6 “框架”面板
9.3.2 拆分、合并框架
在已存在的框架集中，可再次拆分形成嵌套框架集， 具体方法是：在文档窗口中按下Alt键的同时拖动边框，位 17 于页面边缘的边框可直接拖动。此方法除用于创建嵌套框
23
图9-7 调节框架尺寸
其次设置框架集标题。在设置标题时首先要选中框架 集，然后在“标题”一栏中输入标题的名称“商品分类”。
由于框架集由三个页面构成，因而我们在设置标题时 24 要注意，光标不要放在任何一个框架内部，否则设置的只 是框架页面的标题，在预览框架集页面时标题无法显示在 浏览器的标题栏中。
9.3.4 实例分析——“商品分类”页面框架的编辑
在创建好框架后，我们开始对“商品分类”页面进行
编辑。
21
首先添加内容。添加的内容既可直接在框架中编辑，
也可在独立页面中编辑完成后导入到框架中。独立页面编
辑完成后，利用框架中的“源文件”属性指向该页面，即
可将制作好的上、左、右框架的内容导入到框架集中。在