网页制作项目使用框架布局论坛网页PPT学习教案

1、会计学1网页制作项目使用框架布局论坛网页网页制作项目使用框架布局论坛网页操作一 创建框架Dreamweaver 8网页设计与制作1.创建框架网页的方法（1）在）在【起始页起始页】中选择中选择【从范例创建从范例创建】/【框架集框架集】命令或通过命令或通过【文件文件】/【新建新建】菜单命令，打开菜单命令，打开/【新建文档新建文档】 对话框，在对话框，在【常规常规】 选项卡中选择选项卡中选择【框架集框架集】，然后在，然后在 【框架集框架集】 列表中选择需要的选项。列表中选择需要的选项。 项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页创建框架操作动画创建框架操作动画任务一小 结任务二实 训

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

3、架框架】命令。命令。 菜单中的菜单中的【框架框架】命令命令项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一小 结任务二实 训第5页/共21页操作一 创建框架Dreamweaver 8网页设计与制作（4）通过）通过【查看查看】/【可视化助理可视化助理】/【框架边框框架边框】命令显示出当前网页的边框，然后手动设计。命令显示出当前网页的边框，然后手动设计。 手动设计框架手动设计框架项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一小 结任务二实 训第6页/共21页Dreamweaver 8网页设计与制作操作一 创建框架2.编辑框架的方法 虽然虽然Dreamweaver

4、8已预先提供了多种框架集，但并不一定能够满足实际需要，许多时候要根据实际情况对框架集进行编辑。已预先提供了多种框架集，但并不一定能够满足实际需要，许多时候要根据实际情况对框架集进行编辑。 将光标置于某一框架内，在将光标置于某一框架内，在【插入插入】/【布局布局】面板中单击面板中单击【框架框架】按钮，从中选择要插入的框架类型。也可以在主菜单栏中选择按钮，从中选择要插入的框架类型。也可以在主菜单栏中选择【修改修改】/【框架页框架页】/【拆分上框架拆分上框架】或或【拆分下框架拆分下框架】等命令来拆分框架。等命令来拆分框架。3.删除多余框架的方法 如果要删除多余的框架，用鼠标将其边框拖到父框架边框上或

5、拖离页面即可。如果要删除多余的框架，用鼠标将其边框拖到父框架边框上或拖离页面即可。 项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一小 结任务二实 训第7页/共21页操作二 保存框架Dreamweaver 8网页设计与制作1.保存框架的方法 在主菜单中选择在主菜单中选择【文件文件】/【保存全部保存全部】命令命令，整个框架边框的内侧会出现一个阴影框，同时弹出，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为另存为】对话框。因为阴影框出现在整个框架集边框的内侧，所以要求保存的是整个框架集。输入文件名，然后保存整个框架集。接着出现第对话框。因为阴影框出现在整个框架集边框的内侧，所

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

7、开已经预先制作好的文页一样进行制作，当然也可以在该框架内直接打开已经预先制作好的文档。将光标置于框架内，在主菜单中选择档。将光标置于框架内，在主菜单中选择【文件文件】/【在框架中打开在框架中打开】命命令，打开预先准备好的文档。令，打开预先准备好的文档。3. 保存某一个框架和另存为的方法 如果仅仅是修改了某一个框架中的内容，可以选择如果仅仅是修改了某一个框架中的内容，可以选择【文件文件】/【保存框保存框架架】命令进行保存，如果要改名保存可选择命令进行保存，如果要改名保存可选择【文件文件】/【框架另存为框架另存为】命命令。令。项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一小 结任

8、务二实 训第9页/共21页 论坛框架网页创建好以后，框架的大小、边框论坛框架网页创建好以后，框架的大小、边框宽度、是否有滚动条等不一定符合实际要求，这就宽度、是否有滚动条等不一定符合实际要求，这就需要对其进行设置。本任务将介绍通过需要对其进行设置。本任务将介绍通过【属性属性】面面板设置框架和框架集属性的基本方法。板设置框架和框架集属性的基本方法。Dreamweaver 8网页设计与制作任务二 设置论坛框架网页项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一任务二小 结实 训第10页/共21页操作一 设置框架属性Dreamweaver 8网页设计与制作1.选定框架的方法（1）选择

9、主菜单中的）选择主菜单中的【窗口窗口】/【框架框架】命令，打开命令，打开【框架框架】面板，在面板中单击要选择的框架，此时被选择的框架边框内侧也会出现虚线。面板，在面板中单击要选择的框架，此时被选择的框架边框内侧也会出现虚线。 项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页设置框架属性操作动画设置框架属性操作动画任务一任务二小 结实 训第11页/共21页操作一 设置框架属性Dreamweaver 8网页设计与制作（2）按下）按下Alt键，在欲选择的框架内单击鼠标左键将其选择，此时键，在欲选择的框架内单击鼠标左键将其选择，此时【属性属性】面板中显示出该框架的属性参数，被选择的框架边框内

10、侧出现虚线。面板中显示出该框架的属性参数，被选择的框架边框内侧出现虚线。 2.选定框架集的方法（1）在）在【框架框架】面板中用鼠标单击框架集边框将整个框架集选中，在文档窗口中被选择的框架集边框将显示为虚线。面板中用鼠标单击框架集边框将整个框架集选中，在文档窗口中被选择的框架集边框将显示为虚线。 （2）在文档窗口中，当鼠标靠近框架集边框且出现上下箭头时，单击整个框架集的边框将其选择。）在文档窗口中，当鼠标靠近框架集边框且出现上下箭头时，单击整个框架集的边框将其选择。 项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一任务二小 结实 训第12页/共21页操作一 设置框架属性Dream

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

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

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

14、eamweaver 8网页设计与制作操作二 设置框架中链接的目标窗口1.在框架网页中设置超级链接目标窗口的方法 选中文本，在选中文本，在【属性属性】面板的面板的【链接链接】文本框中添加链接地址，在文本框中添加链接地址，在【目标目标】下拉列表中选择要打开文档的目标框架名称。在使用框架的文档中，在下拉列表中选择要打开文档的目标框架名称。在使用框架的文档中，在【目标目标】下拉列表中增加了与框架有关的目标窗口名称，可以在一个框架内使用链接而改变另一个框架的内容。下拉列表中增加了与框架有关的目标窗口名称，可以在一个框架内使用链接而改变另一个框架的内容。 项目七：项目七： 使用框架布局论坛使用框架布局论坛

15、网页网页设置框架中链接的目标窗口操作动画设置框架中链接的目标窗口操作动画任务一任务二小 结实 训第16页/共21页Dreamweaver 8网页设计与制作操作二 设置框架中链接的目标窗口2.插入浮动框架的方法 浮动框架是一种较为特殊的框架形式，可以包含在许多元素当中，浮动框架是一种较为特殊的框架形式，可以包含在许多元素当中，如层、单元格等。方法是选择主菜单中的如层、单元格等。方法是选择主菜单中的【插入插入】/【标签标签】命令，打开命令，打开【标签选择器标签选择器】对话框，展开对话框，展开【HTML标签标签】，在右侧列表中找到，在右侧列表中找到“iframe”，单击，单击【插入插入】按钮打开按钮

16、打开【标签编辑器标签编辑器Iframe】对话框进行对话框进行设置。浮动框架中包含的文档通过定制的浮动框架显示出来，可通过拖设置。浮动框架中包含的文档通过定制的浮动框架显示出来，可通过拖曳滚动条来滚动显示。曳滚动条来滚动显示。项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一任务二小 结实 训第17页/共21页实训 制作校园论坛框架网页本项目着重介绍了框架在网页制作中的应用。实训将使用框架制作如图本项目着重介绍了框架在网页制作中的应用。实训将使用框架制作如图7-22所示页面，以进一步巩固框架的基本操作。所示页面，以进一步巩固框架的基本操作。 Dreamweaver 8网页设计与制作

17、项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页实训结果文件见实训结果文件见“项目结果项目结果”文件夹中的文件夹中的“shixun.htm”。【实训目的实训目的】l进一步巩固创建框架集的基本方法。进一步巩固创建框架集的基本方法。l进一步巩固在框架中打开网页的方法。进一步巩固在框架中打开网页的方法。l进一步巩固框架集属性设置的基本方法。进一步巩固框架集属性设置的基本方法。l进一步巩固框架属性设置的基本方法。进一步巩固框架属性设置的基本方法。任务一任务二小 结实 训第18页/共21页实训 使用表格进行网页布局Dreamweaver 8网页设计与制作项目七：项目七： 使用框架布局论坛使用框架布局论坛网页网页任务一任务二小 结实 训第19页/共21页小结 本项目以论坛网页为例介绍了创建