主讲：网页设计与制作 Dreamweaver 8项目七 使用框架布局论坛网页任务一 创建论坛框架网页任务二 设置论坛框架网页项目七： 使用框架布局论坛网 页网页设计与制作 Dreamweaver 8任务一小 结任务二实 训任务一 创建论坛框架网页本任务将介绍使用框架创建论坛网页 的基本方法，用到的基础知识主要包括创建 框架、拆分框架、保存框架等。Dreamweaver 8网页设计与制作项目七： 使用框架布局论坛网 页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网页设计与制作本操作主要介绍创建论坛网页框架的基本方法。通过本操 作的学习，应该掌握的内容主要有： 1.创建框架网页的方法（1）在【起始页页】中选择选择 【从范例创创建】/【框架集】命令或通 过过【文件】/【新建】菜单单命令，打开/【新建文档】 对话对话 框，在 【常规规】 选项选项 卡中选择选择 【框架集】，然后在 【框架集】 列表中 选择选择 需要的选项选项 。 项目七： 使用框架布局论坛网 页创建框架操作动画任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网页设计与制作创建框架 项目七： 使用框架布局论坛网 页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网页设计与制作（2）在当前网页页中通过过【插入】面板中的【框架】工具按钮钮。 【框架】工具按钮项目七： 使用框架布局论坛网 页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网页设计与制作（3）在当前网页页中通过过【插入】/【HTML】/【框架】命令。 菜单中的【框架】命令项目七： 使用框架布局论坛网 页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网页设计与制作（4）通过过【查查看】/【可视视化助理】/【框架边边框】命令显显示出 当前网页页的边边框，然后手动设计动设计 。 手动设计框架项目七： 使用框架布局论坛网 页任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作一 创建框架2.编辑框架的方法虽虽然Dreamweaver 8已预预先提供了多种框架集，但并不一定能 够满够满 足实际实际 需要，许许多时时候要根据实际实际 情况对对框架集进进行编辑编辑 。将光标标置于某一框架内，在【插入】/【布局】面板中单击单击 【 框架】按钮钮，从中选择选择 要插入的框架类类型。也可以在主菜单栏单栏 中选择选择 【修改】/【框架页页】/【拆分上框架】或【拆分下框架】 等命令来拆分框架。3.删除多余框架的方法如果要删删除多余的框架，用鼠标标将其边边框拖到父框架边边框上或 拖离页页面即可。 项目七： 使用框架布局论坛网 页任务一小 结任务二实 训操作二 保存框架Dreamweaver 8网页设计与制作每一个框架都包含1个文档，因此1个框架集会包含多个文件。在保 存文件的时候，不能只简单地保存1个文档，要将整个网页文档都保存下来。本操作将介绍保存框架网页的基本方法。通过本操作的学习，应该掌 握的内容主要有： 1.保存框架的方法在主菜单单中选择选择 【文件】/【保存全部】命令，整个框架边边 框的内侧侧会出现现一个阴影框，同时弹时弹 出【另存为为】对话对话 框。因 为为阴影框出现现在整个框架集边边框的内侧侧，所以要求保存的是整个 框架集。输输入文件名，然后保存整个框架集。接着出现现第2个【 另存为为】对话对话 框，要求保存另一个框架，输输入文件名后进进行保 存。以下以此类类推。 项目七： 使用框架布局论坛网 页保存框架操作动画任务一小 结任务二实 训操作二 保存框架Dreamweaver 8网页设计与制作2. 在框架内打开已有的文档新创创建的框架网页页，每一个框架里都是1个空文档，需要像制作普通网 页页一样进样进 行制作，当然也可以在该该框架内直接打开已经预经预 先制作好的文 档。将光标标置于框架内，在主菜单单中选择选择 【文件】/【在框架中打开】命 令，打开预预先准备备好的文档。3. 保存某一个框架和另存为的方法如果仅仅仅仅 是修改了某一个框架中的内容，可以选择选择 【文件】/【保存框 架】命令进进行保存，如果要改名保存可选择选择 【文件】/【框架另存为为】命 令。项目七： 使用框架布局论坛网 页任务一小 结任务二实 训论坛框架网页创建好以后，框架的大小、边框 宽度、是否有滚动条等不一定符合实际要求，这就需 要对其进行设置。本任务将介绍通过【属性】面板设 置框架和框架集属性的基本方法。Dreamweaver 8网页设计与制作任务二 设置论坛框架网页项目七： 使用框架布局论坛网 页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网页设计与制作本操作主要介绍绍框架和框架集属性的设设置。通过本操 作的学习，应该掌握的内容主要有： 1.选定框架的方法（1）选择选择 主菜单单中的【窗口】/【 框架】命令，打开【框架】面板， 在面板中单击单击 要选择选择 的框架，此时时 被选择选择 的框架边边框内侧侧也会出现现虚 线线。 项目七： 使用框架布局论坛网 页设置框架属性操作动画任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网页设计与制作（2）按下Alt键键，在欲选择选择 的框架内单击单击 鼠标标左键键将其选择选择 ， 此时时【属性】面板中显显示出该该框架的属性参数，被选择选择 的框架 边边框内侧侧出现现虚线线。 2.选定框架集的方法（1）在【框架】面板中用鼠标单击标单击 框架集边边框将整个框架集选选 中，在文档窗口中被选择选择 的框架集边边框将显显示为为虚线线。 （2）在文档窗口中，当鼠标标靠近框架集边边框且出现现上下箭头时头时 ，单击单击 整个框架集的边边框将其选择选择 。 项目七： 使用框架布局论坛网 页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网页设计与制作3.设置框架集属性的方法（1）选选定框架集后，在【属性】面板中可以设设置框架集属性。 项目七： 使用框架布局论坛网 页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网页设计与制作（2）在【属性】面板中，用鼠标单击标单击 框架集预览图预览图 底部，然后 设设置相应应参数。 4.设置框架集属性应该注意的问题（1）用像素为单为单 位设设置框架大小时时，尺寸是绝对绝对 的，即这这种框 架的大小永远远是固定的。若网页页中其他框架用不同的单单位设设置框 架的大小，则浏览则浏览 器首先为这为这 种框架分配屏幕空间间，再将剩余 空间间分配给给其他类类型的框架。 项目七： 使用框架布局论坛网 页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网页设计与制作（2）用百分比为单为单 位设设置框架大小时时，框架的大小将随框架集 大小按所设设的百分比发发生变变化。在浏览浏览 器分配屏幕空间时间时 ，它 比【像素】类类型的框架后分配，比【相对对】类类型的框架先分配。 （3）用相对为单对为单 位设设置框架大小时时，这这种类类型的框架在前两种 类类型的框架分配完屏幕空间间后再分配，它占据前两种框架的所有 剩余空间间。5.设置框架属性的方法选选定框架，然后在【属性】面板中设设置相关参数。 项目七： 使用框架布局论坛网 页任务一任务二小 结实 训Dreamweaver 8网页设计与制作操作二 设置框架中链接的目标窗口本操作主要介绍在框架网页中设置超级链接目标窗口的方法。通过本操作的学习，应该掌握的内容主要有： 1.在框架网页中设置超级链接目标窗口的方法选选中文本，在【属性】面板的【链链接】文本框中添加链链接地 址，在【目标标】下拉列表中选择选择 要打开文档的目标标框架名称。在 使用框架的文档中，在【目标标】下拉列表中增加了与框架有关的 目标标窗口名称，可以在一个框架内使用链链接而改变变另一个框架的 内容。 项目七： 使用框架布局论坛网 页设置框架中链接的目标窗口操作动画任务一任务二小 结实 训Dreamweaver 8网页设计与制作操作二 设置框架中链接的目标窗口2.插入浮动框架的方法浮动动框架是一种较为较为 特殊的框架形式，可以包含在许许多元素当中， 如层层、单单元格等。方法是选择选择 主菜单单中的【插入】/【标签标签 】命令，打开 【标签选择标签选择 器】对话对话 框，展开【HTML标签标签 】，在右侧侧列表中找到 “iframe”，单击单击 【插入】按钮钮打开【标签编辑标签编辑 器Iframe】对话对话 框进进行 设设置。浮动动框架中包含的文档通过过定制的浮动动框架显显示出来，可通过过拖 曳滚动滚动 条来滚动显滚动显 示。项目七： 使用框架布局论坛网 页任务一任务二小 结实 训实训 制作校园论坛框架网页本项目着重介绍了框架在网页制作中的应用。实训将使用框架 制作如图7-22所示页面，以进一步巩固框架的基本操作。 Dreamweaver 8网页设计与制作项目七： 使用框架布局论坛网 页实训结果文件见“项目结果”文件夹中的“shixun.htm”。【实训目的】 l 进一步巩固创建框架集的基本方法。 l 进一步巩固在框架中打开网页的方法。 l 进一步巩固框架集属性设置的基本方法。 l 进一步巩固框架属性设置的基本方法。任务一任务二小 结实 训实训 使用表格进行网页布局Dreamweaver 8网页设计与制作项目七： 使用框架布局论坛网 页任务一任务二小 结实 训小结本项目以论坛网页为例介绍了创建和保存框架网页 以及设置框架集和框架属性的基本方法。通过本项目 的学习，读者应该掌握创建框架页面的方法，还要了 解在什么情况下使用框架以及根据不同的情况设置框 架的属性。Dreamweaver 8网页设计与制作项目七： 使用框架布局论坛网 页任务一任务二小 结实 训