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

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