《项目九 框架──制作林木论坛网页-PPT》由会员分享，可在线阅读，更多相关《项目九 框架──制作林木论坛网页-PPT（28页珍藏版）》请在装配图网上搜索。
1、网页网页设计与设计与制作制作老虎工作室老虎工作室20122012年年1212月月项目九项目九 框架框架制作林木论坛网页制作林木论坛网页任务一任务一 创建论坛框架网页创建论坛框架网页 任务二任务二 设置论坛框架网页设置论坛框架网页 实训实训 制作制作“竹子夜谈竹子夜谈”网页网页 在制作网页的过程当中，如果要将一个浏览在制作网页的过程当中，如果要将一个浏览器窗口划分为多个区域、每个区域显示不同的网器窗口划分为多个区域、每个区域显示不同的网页文档，有没有解决的方法呢？答案当然是肯定页文档，有没有解决的方法呢？答案当然是肯定的，可以使用框架技术。本项目以论坛网页为例，的，可以使用框架技术。本项目以论坛
2、网页为例，介绍创建、编辑和保存框架以及设置框架属性的介绍创建、编辑和保存框架以及设置框架属性的基本方法。在本项目中，首先创建一个基本方法。在本项目中，首先创建一个“上方固上方固定，左侧嵌套定，左侧嵌套”的框架集，然后再将右侧框架拆的框架集，然后再将右侧框架拆分成上下两个框架，并进行相关属性设置。分成上下两个框架，并进行相关属性设置。任务一任务一 创建论坛框架网页创建论坛框架网页 （一）（一）创建框架创建框架（二）（二）保存框架保存框架（一）创建框架（一）创建框架 需要掌握的内容主要有：需要掌握的内容主要有：1、框架的概念、框架的概念 2、创建预定义框架集、创建预定义框架集 3、拆分框架、拆分框
3、架 4、手动自定义框架集、手动自定义框架集 5、删除框架、删除框架 框架是浏览器窗口中的一个区域，不同的框框架是浏览器窗口中的一个区域，不同的框架可以显示不同的网页文档。框架集是架可以显示不同的网页文档。框架集是HTML文文件，它定义一组框架的布局和属性，包括框架的件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始数目、框架的大小和位置以及在每个框架中初始显示的页面的显示的页面的URL。也就是说，框架集文件将向。也就是说，框架集文件将向浏览器提供应如何显示一组框架以及在这些框架浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。中应显示哪些文
4、档的有关信息。当创建框架网页时，当创建框架网页时，Dreamweaver 8就建立就建立起一个未命名的框架集文件。一个包含起一个未命名的框架集文件。一个包含4个框架的个框架的框架集实际上存在框架集实际上存在5个文件：一个是框架集文件，个文件：一个是框架集文件，其他的分别是包含于各自框架内的文件。其他的分别是包含于各自框架内的文件。1 1、框架的概念、框架的概念 创建预定义框架集的方法如下：创建预定义框架集的方法如下：（1）在主菜单中选择）在主菜单中选择【文件文件】/【新建新建】命令打开命令打开【新建文件新建文件】对话框，在对话框，在【常规常规】选项卡中选择选项卡中选择【框架框架集集】命令。命令
5、。（2）在）在【起始页起始页】中选择中选择【从范例创建从范例创建】/【框架框架集集】命令。命令。（3）在当前网页中单击）在当前网页中单击【插入插入】面板中的面板中的【框架框架】工具按钮。工具按钮。（4）在当前网页中选择主菜单中的）在当前网页中选择主菜单中的【插入插入】/【HTML】/【框架框架】命令。命令。2 2、创建预定义框架集、创建预定义框架集 主菜单中选择主菜单中选择【修改修改】/【框架页框架页】命令，在弹出命令，在弹出的子菜单中选择的子菜单中选择【拆分左框架拆分左框架】、【拆分右框架拆分右框架】、【拆分上框架拆分上框架】或或【拆分下框架拆分下框架】命令可以拆分框架。这命令可以拆分框架。
6、这些命令可以反复用来对框架进行拆分，直至满意为止。些命令可以反复用来对框架进行拆分，直至满意为止。3 3、拆分框架、拆分框架 在主菜单中选择在主菜单中选择【查看查看】/【可视化助理可视化助理】/【框架边框架边框框】命令显示出当前网页的边框，然后将鼠标置于框架最命令显示出当前网页的边框，然后将鼠标置于框架最外层边框线上，当鼠标指针变为双箭头时，单击并拖动鼠外层边框线上，当鼠标指针变为双箭头时，单击并拖动鼠标到合适的位置即可创建新的框架。标到合适的位置即可创建新的框架。如果将鼠标指针置于最外层框架的边角上，当鼠标指如果将鼠标指针置于最外层框架的边角上，当鼠标指针变为十字箭头时，单击并拖动鼠标到合适
7、的位置，可以针变为十字箭头时，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，将框架分隔为一次创建垂直和水平的两条边框，将框架分隔为4个框架。个框架。如果拖动内部框架的边角，可以一次调整周围所有框如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。如要创建新的框架，可架的大小，但不能创建新的框架。如要创建新的框架，可以按住以按住Alt键，同时拖动鼠标，可以对框架进行垂直和水平键，同时拖动鼠标，可以对框架进行垂直和水平的分隔。的分隔。4 4、手动自定义框架集、手动自定义框架集 如果在框架集中出现了多余的框架，这时需要将其删如果在框架集中出现了多余的框架，这时
8、需要将其删除。删除多余框架的方法比较简单，用鼠标将其边框拖到除。删除多余框架的方法比较简单，用鼠标将其边框拖到父框架边框上或拖离页面即可。父框架边框上或拖离页面即可。5 5、删除框架、删除框架（二）保存框架（二）保存框架 需要掌握的内容主要有：需要掌握的内容主要有：1、保存框架、保存框架 2、在框架中打开网页、在框架中打开网页 由于一个框架集包含多个框架，每一个框架都包含一个文由于一个框架集包含多个框架，每一个框架都包含一个文档，因此在保存框架网页的时候，要将所有的框架网页文档都档，因此在保存框架网页的时候，要将所有的框架网页文档都保存下来。保存下来。在主菜单中选择在主菜单中选择【文件文件】/
9、【保存全部保存全部】命令，整个框架命令，整个框架边框的内侧会出现一个阴影框，同时弹出边框的内侧会出现一个阴影框，同时弹出【另存为另存为】对话框。对话框。因为阴影框出现在整个框架集边框的内侧，所以要求保存的是因为阴影框出现在整个框架集边框的内侧，所以要求保存的是整个框架集，输入文件名将整个框架集保存。接着出现第整个框架集，输入文件名将整个框架集保存。接着出现第2个个【另存为另存为】对话框，输入文件名继续保存，以此类推。对话框，输入文件名继续保存，以此类推。如果仅仅是修改了某一个框架中文档的内容，可以选择如果仅仅是修改了某一个框架中文档的内容，可以选择【文件文件】/【保存框架保存框架】命令进行单独
10、保存。如果要给框架中的命令进行单独保存。如果要给框架中的文档改名，可以选择文档改名，可以选择【文件文件】/【框架另存为框架另存为】命令进行换名命令进行换名保存。如果要把框架保存为模板，可以选择保存。如果要把框架保存为模板，可以选择【文件文件】/【框架框架另存为模板另存为模板】命令进行保存。命令进行保存。1 1、保存框架、保存框架 将光标置于顶部框架内，在主菜单中选择将光标置于顶部框架内，在主菜单中选择【文件文件】/【在框架中打开在框架中打开】命令，将在框架内打开已存在的文档。命令，将在框架内打开已存在的文档。2 2、在框架中打开网页、在框架中打开网页任务二任务二 设置论坛框架网页设置论坛框架网
11、页 （一）设置框架集和框架属性（一）设置框架集和框架属性（二）设置框架中链接的目标窗口（二）设置框架中链接的目标窗口（三）（三）使用浮动框架使用浮动框架（四）编辑无框架内容（四）编辑无框架内容（一）（一）设置框架集和框架属性设置框架集和框架属性 需要掌握的内容主要有：需要掌握的内容主要有：1、选择框架集、选择框架集 2、设置框架集属性、设置框架集属性 3、选择框架、选择框架 4、设置框架属性、设置框架属性1 1、选择框架集、选择框架集 （1）在主菜单中选择）在主菜单中选择【窗口窗口】/【框架框架】命令打开命令打开【框架框架】面板，在面板中用鼠标单击框架集边框将整个面板，在面板中用鼠标单击框架集
12、边框将整个框架集选中，在文档窗口中被选择的框架集边框将显示框架集选中，在文档窗口中被选择的框架集边框将显示为虚线。为虚线。（2）在文档窗口中，当鼠标靠近框架集边框且出现）在文档窗口中，当鼠标靠近框架集边框且出现上下箭头时，单击整个框架集的边框也可将其选择。上下箭头时，单击整个框架集的边框也可将其选择。2 2、设置框架集属性、设置框架集属性 在在【属性属性】面板中根据需要设置框架集属面板中根据需要设置框架集属性参数性参数。3 3、选择框架、选择框架 （1）在）在【框架框架】面板中用鼠标单击要选择的框架将框架面板中用鼠标单击要选择的框架将框架选中。选中。（2）按下）按下Alt键，在框架内单击鼠标左
13、键将框架选中。键，在框架内单击鼠标左键将框架选中。4 4、设置框架属性、设置框架属性 在在【属性属性】面板中根据需要设置框架相关参数。面板中根据需要设置框架相关参数。在使用框架的文档中，增加了与框架有关的目标窗在使用框架的文档中，增加了与框架有关的目标窗口，可以在一个框架内使用链接而改变另一个框架的内口，可以在一个框架内使用链接而改变另一个框架的内容。容。（二）设置框架中链接的目标窗口（二）设置框架中链接的目标窗口 浮动框架是一种较为特殊的框架形式。在主菜单中浮动框架是一种较为特殊的框架形式。在主菜单中选择选择【插入插入】/【标签标签】命令，打开命令，打开【标签选择器标签选择器】对话对话框，展
14、开框，展开【HTML标签标签】，在右侧列表中找到，在右侧列表中找到“iframe”。（三）使用浮动框架（三）使用浮动框架 单击单击【插入插入】按钮打开按钮打开【标签编辑器标签编辑器iframe】对话对话框进行设置即可。浮动框架中包含的文档通过定制的浮框进行设置即可。浮动框架中包含的文档通过定制的浮动框架显示出来，可通过拖曳滚动条来滚动显示，虽然动框架显示出来，可通过拖曳滚动条来滚动显示，虽然显示区域有所限制，但能灵活地显示位置及尺寸，使浮显示区域有所限制，但能灵活地显示位置及尺寸，使浮动框架具有不可替代的作用。动框架具有不可替代的作用。有些浏览器不支持框架技术，有些浏览器不支持框架技术，Dre
15、amweaver 8提供了提供了处理这种情况的方法，即创建无框架内容。方法是，在处理这种情况的方法，即创建无框架内容。方法是，在主菜单中选择主菜单中选择【修改修改】/【框架页框架页】/【编辑无框架内容编辑无框架内容】命令进入如图所示文档窗口，在其中输入一些内容，命令进入如图所示文档窗口，在其中输入一些内容，然后在主菜单中再次选择然后在主菜单中再次选择【修改修改】/【框架页框架页】/【编辑编辑无框架内容无框架内容】命令返回到普通视图继续对页面进行编辑。命令返回到普通视图继续对页面进行编辑。（四）编辑无框架内容（四）编辑无框架内容实训实训 制作制作“竹子夜谈竹子夜谈”网页网页 本项目主要介绍了使用
16、框架布局网页本项目主要介绍了使用框架布局网页的基本方法，本实训将让读者进一步巩固的基本方法，本实训将让读者进一步巩固所学的基本知识。所学的基本知识。要求：把素材文件复制到站点根文件要求：把素材文件复制到站点根文件夹下，然后根据操作提示制作网页。夹下，然后根据操作提示制作网页。制作“送孟浩然之广陵”网页 制作“送孟浩然之广陵”网页 项目小结项目小结 本项目以论坛网页为例，介绍了创建和保存框架网页以本项目以论坛网页为例，介绍了创建和保存框架网页以及设置框架集和框架属性的基本方法。通过本项目的学习，及设置框架集和框架属性的基本方法。通过本项目的学习，读者应该掌握创建框架页面的基本方法，还要了解在什么情读者应该掌握创建框架页面的基本方法，还要了解在什么情况下使用框架以及根据不同的情况设置框架集和框架的属性。况下使用框架以及根据不同的情况设置框架集和框架的属性。另外，还要掌握在框架中超级链接目标窗口的设置方法，针另外，还要掌握在框架中超级链接目标窗口的设置方法，针对不支持框架技术的浏览器编辑无框架内容网页的方法以及对不支持框架技术的浏览器编辑无框架内容网页的方法以及在网页中插入浮动框架的方法等。在网页中插入浮动框架的方法等。
项目九 框架──制作林木论坛网页-PPT
