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

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