网页制作：项目07使用框架布局论坛网页--ppt课件

1、主讲：主讲：网页设计与制作Dreamweaver 8项目七 使用框架布局论坛网页任务一 创建论坛框架网页任务二 设置论坛框架网页项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页网 页 设 计 与 制 作Dreamweaver 8任务一小 结任务二实 训任务一 创建论坛框架网页 本任务将介绍使用框架创建论坛网页的基本方法，用到的基础知识主要包括创建框架、拆分框架、保存框架等。Dreamweaver 8网 页 设 计 与 制 作项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网 页 设 计 与 制 作本操作主要介

2、绍创建论坛网页框架的基本方法。通过本操本操作主要介绍创建论坛网页框架的基本方法。通过本操作的学习，应该掌握的内容主要有：作的学习，应该掌握的内容主要有： 1.创建框架网页的方法（1在【起始页】中选择【从范例创建】在【起始页】中选择【从范例创建】/【框架集】命令或通【框架集】命令或通过【文件】过【文件】/【新建】菜单命令，翻开【新建】菜单命令，翻开/【新建文档】【新建文档】 对话框，在对话框，在【常规】【常规】 选项卡中选择【框架集】，然后在选项卡中选择【框架集】，然后在 【框架集】【框架集】 列表中列表中选择需要的选项。选择需要的选项。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网

3、页创建框架操作动画创建框架操作动画任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网 页 设 计 与 制 作创建框架创建框架 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网 页 设 计 与 制 作（2在当前网页中通过【插入】面板中的【框架】工具按钮。在当前网页中通过【插入】面板中的【框架】工具按钮。 【框架】工具按钮【框架】工具按钮项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网 页 设 计 与 制 作（3在当前网页中通

4、过【插入】在当前网页中通过【插入】/【HTML】/【框架】命令。【框架】命令。 菜单中的【框架】命令菜单中的【框架】命令项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训操作一 创建框架Dreamweaver 8网 页 设 计 与 制 作（4经过【查看】经过【查看】/【可视化助理】【可视化助理】/【框架边框】命令显示出当【框架边框】命令显示出当前网页的边框，然后手动设计。前网页的边框，然后手动设计。 手动设计框架手动设计框架项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训Dreamweaver 8网 页 设 计 与 制 作操作一

5、 创建框架2.编辑框架的方法 虽然虽然Dreamweaver 8已预先提供了多种框架集，但并不一定能已预先提供了多种框架集，但并不一定能够满足实际需要，许多时候要根据实际情况对框架集进行编辑。够满足实际需要，许多时候要根据实际情况对框架集进行编辑。 将光标置于某一框架内，在【插入】将光标置于某一框架内，在【插入】/【规划】面板中单击【框【规划】面板中单击【框架】按钮，从中选择要插入的框架类型。也可以在主菜单栏中选架】按钮，从中选择要插入的框架类型。也可以在主菜单栏中选择【修正】择【修正】/【框架页】【框架页】/【拆分上框架】或【拆分下框架】等命【拆分上框架】或【拆分下框架】等命令来拆分框架。令

6、来拆分框架。3.删除多余框架的方法 如果要删除多余的框架，用鼠标将其边框拖到父框架边框上或如果要删除多余的框架，用鼠标将其边框拖到父框架边框上或拖离页面即可。拖离页面即可。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训操作二 保存框架Dreamweaver 8网 页 设 计 与 制 作 每一个框架都包含每一个框架都包含1个文档，因此个文档，因此1个框架集会包含多个文件。在保个框架集会包含多个文件。在保存文件的时候，不能只简单地保存存文件的时候，不能只简单地保存1个文档，要将整个网页文档都保存下个文档，要将整个网页文档都保存下来。本操作将介绍保存框架网页的基

7、本方法。通过本操作的学习，应该来。本操作将介绍保存框架网页的基本方法。通过本操作的学习，应该掌握的内容主要有：掌握的内容主要有： 1.保存框架的方法 在主菜单中选择【文件】在主菜单中选择【文件】/【保存全部】命令，整个框架边框【保存全部】命令，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为】对话框。因为阴的内侧会出现一个阴影框，同时弹出【另存为】对话框。因为阴影框出现在整个框架集边框的内侧，所以要求保存的是整个框架影框出现在整个框架集边框的内侧，所以要求保存的是整个框架集。输入文件名，然后保存整个框架集。接着出现第集。输入文件名，然后保存整个框架集。接着出现第2个【另存个【另存为】对话框

8、，要求保存另一个框架，输入文件名后进行保存。以为】对话框，要求保存另一个框架，输入文件名后进行保存。以下以此类推。下以此类推。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页保存框架操作动画保存框架操作动画任务一小 结任务二实 训操作二 保存框架Dreamweaver 8网 页 设 计 与 制 作2. 在框架内打开已有的文档 新创建的框架网页，每一个框架里都是新创建的框架网页，每一个框架里都是1个空文档，需要像制作普通网个空文档，需要像制作普通网页一样进行制作，当然也可以在该框架内直接打开已经预先制作好的文页一样进行制作，当然也可以在该框架内直接打开已经预先制作好的文档。将光标置于

9、框架内，在主菜单中选择【文件】档。将光标置于框架内，在主菜单中选择【文件】/【在框架中打开】命【在框架中打开】命令，打开预先准备好的文档。令，打开预先准备好的文档。3. 保存某一个框架和另存为的方法 如果仅仅是修改了某一个框架中的内容，可以选择【文件】如果仅仅是修改了某一个框架中的内容，可以选择【文件】/【保存框【保存框架】命令进行保存，如果要改名保存可选择【文件】架】命令进行保存，如果要改名保存可选择【文件】/【框架另存为】命【框架另存为】命令。令。项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一小 结任务二实 训 论坛框架网页创建好以后，框架的大小、论坛框架网页创建好以后，

10、框架的大小、边框宽度、是否有滚动条等不一定符合实际边框宽度、是否有滚动条等不一定符合实际要求，这就需要对其进行设置。本任务将介要求，这就需要对其进行设置。本任务将介绍通过【属性】面板设置框架和框架集属性绍通过【属性】面板设置框架和框架集属性的基本方法。的基本方法。Dreamweaver 8网 页 设 计 与 制 作任务二 设置论坛框架网页项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网 页 设 计 与 制 作 本操作主要介绍框架和框架集属性的设置。通过本操本操作主要介绍框架和框架集属性的设置。通过本操作的学习，应

11、该掌握的内容主要有：作的学习，应该掌握的内容主要有： 1.选定框架的方法（1选择主菜单中的【窗口】选择主菜单中的【窗口】/【框架】命令，翻开【框架】面板，【框架】命令，翻开【框架】面板，在面板中单击要选择的框架，此时在面板中单击要选择的框架，此时被选择的框架边框内侧也会出现虚被选择的框架边框内侧也会出现虚线。线。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页设置框架属性操作动画设置框架属性操作动画任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网 页 设 计 与 制 作（2按下按下Alt键，在欲选择的框架内单击鼠标左键将其选择，此键，在欲选择的框架内单击鼠标

12、左键将其选择，此时【属性】面板中显示出该框架的属性参数，被选择的框架边框时【属性】面板中显示出该框架的属性参数，被选择的框架边框内侧出现虚线。内侧出现虚线。 2.选定框架集的方法（1在【框架】面板中用鼠标单击框架集边框将整个框架集选在【框架】面板中用鼠标单击框架集边框将整个框架集选中，在文档窗口中被选择的框架集边框将显示为虚线。中，在文档窗口中被选择的框架集边框将显示为虚线。 （2在文档窗口中，当鼠标靠近框架集边框且出现上下箭头时，在文档窗口中，当鼠标靠近框架集边框且出现上下箭头时，单击整个框架集的边框将其选择。单击整个框架集的边框将其选择。 项目七：项目七： 使用框架布使用框架布局论坛网页局

13、论坛网页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网 页 设 计 与 制 作3.设置框架集属性的方法（1选定框架集后，在【属性】面板中可以设置框架集属性。选定框架集后，在【属性】面板中可以设置框架集属性。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网 页 设 计 与 制 作（2在【属性】面板中，用鼠标单击框架集预览图底部，然后在【属性】面板中，用鼠标单击框架集预览图底部，然后设置相应参数。设置相应参数。 4.设置框架集属性应该注意的问题（1用像素为单位设置框架大小时，尺寸是绝对的，

14、即这种框用像素为单位设置框架大小时，尺寸是绝对的，即这种框架的大小永远是固定的。若网页中其他框架用不同的单位设置框架的大小永远是固定的。若网页中其他框架用不同的单位设置框架的大小，则浏览器首先为这种框架分配屏幕空间，再将剩余空架的大小，则浏览器首先为这种框架分配屏幕空间，再将剩余空间分配给其他类型的框架。间分配给其他类型的框架。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一任务二小 结实 训操作一 设置框架属性Dreamweaver 8网 页 设 计 与 制 作（2用百分比为单位设置框架大小时，框架的大小将随框架集用百分比为单位设置框架大小时，框架的大小将随框架集大小按所设

15、的百分比发生变化。在浏览器分配屏幕空间时，它比大小按所设的百分比发生变化。在浏览器分配屏幕空间时，它比【像素】类型的框架后分配，比【相对】类型的框架先分配。【像素】类型的框架后分配，比【相对】类型的框架先分配。（3用相对为单位设置框架大小时，这种类型的框架在前两种用相对为单位设置框架大小时，这种类型的框架在前两种类型的框架分配完屏幕空间后再分配，它占据前两种框架的所有类型的框架分配完屏幕空间后再分配，它占据前两种框架的所有剩余空间。剩余空间。5.设置框架属性的方法选定框架，然后在【属性】面板中设置相关参数。选定框架，然后在【属性】面板中设置相关参数。 项目七：项目七： 使用框架布使用框架布局论

16、坛网页局论坛网页任务一任务二小 结实 训Dreamweaver 8网 页 设 计 与 制 作操作二 设置框架中链接的目标窗口 本操作主要介绍在框架网页中设置超级链接目标窗口的方法。本操作主要介绍在框架网页中设置超级链接目标窗口的方法。通过本操作的学习，应该掌握的内容主要有：通过本操作的学习，应该掌握的内容主要有： 1.在框架网页中设置超级链接目标窗口的方法 选中文本，在【属性】面板的【链接】文本框中添加链接地选中文本，在【属性】面板的【链接】文本框中添加链接地址，在【目的】下拉列表中选择要打开文档的目标框架名称。在址，在【目的】下拉列表中选择要打开文档的目标框架名称。在使用框架的文档中，在【目

17、的】下拉列表中增加了与框架有关的使用框架的文档中，在【目的】下拉列表中增加了与框架有关的目标窗口名称，可以在一个框架内使用链接而改变另一个框架的目标窗口名称，可以在一个框架内使用链接而改变另一个框架的内容。内容。 项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页设置框架中链接的目标窗口操作动画设置框架中链接的目标窗口操作动画任务一任务二小 结实 训Dreamweaver 8网 页 设 计 与 制 作操作二 设置框架中链接的目标窗口2.插入浮动框架的方法 浮动框架是一种较为特殊的框架形式，可以包含在许多元素当中，浮动框架是一种较为特殊的框架形式，可以包含在许多元素当中，如层、单元格等。

18、方法是选择主菜单中的【插入】如层、单元格等。方法是选择主菜单中的【插入】/【标签】命令，翻开【标签】命令，翻开【标签选择器】对话框，展开【标签选择器】对话框，展开【HTML标签】，在右侧列表中找到标签】，在右侧列表中找到“iframe”，单击【插入】按钮打开【标签编辑器，单击【插入】按钮打开【标签编辑器Iframe】对话框进行设】对话框进行设置。浮动框架中包含的文档通过定制的浮动框架显示出来，可通过拖曳置。浮动框架中包含的文档通过定制的浮动框架显示出来，可通过拖曳滚动条来滚动显示。滚动条来滚动显示。项目七：项目七： 使用框架布使用框架布局论坛网页局论坛网页任务一任务二小 结实 训实训 制作校园论坛框架网页本项目着重介绍了框架在网页制作中的应用。实训将使用框架本项目着重介绍了框架在网页制作中的应用。实训将使用框架制作如图制作如图7-22所示页面，以进一步巩固框架的基本操作。所示页面，以进一步巩固框