网页设计与制作 项目教学 教学课件 王君学 孙海伦 金哲第7章教案项目7 制作绿色天空论坛网页.ppt

《网页设计与制作 项目教学 教学课件 王君学 孙海伦 金哲第7章教案项目7 制作绿色天空论坛网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、项目七框架──制作绿色天空论坛网页创建论坛框架网页任务一设置论坛框架网页任务二（一）创建框架当创建框架网页时，Dreamweaver8就建立起一个未命名的框架集文件。框架集文件实际上就是框架的集合，每个框架又包含一个文档。也就是说，一个包含4个框架的框架集实际上存在5个文件：一个是框架集文件，其他的分别是包含于各自框架内的文件。下面介绍创建框架网页的基本方法。1.首先在Dreamweaver8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。【操作步骤】2.在菜单栏中选

2、择【文件】／【新建】命令，打开【新建文档】对话框，在【常规】选项卡中选择【框架集】分类，在右侧【框架集】列表框中选择【上方固定，左侧嵌套】选项，如图所示。3.将鼠标光标置于右下侧的“mainframe”框架内，在【插入】／【布局】面板中单击（底部框架）按钮，如果在【首选参数】／【辅助功能】设置中已经勾选了【框架】复选框，这时仍将弹出【框架标签辅助功能属性】对话框，否则将直接插入一个框架，也可以在菜单栏中选择【修改】／【框架页】／【拆分上框架】或【拆分下框架】命令，将该框架拆分为上下两个框架。由于一

3、个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，要将所有的框架网页文档都保存下来。下面介绍保存框架网页的基本方法。（二）保存框架1.在菜单栏中选择【文件】／【保存全部】命令，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为】对话框。因为阴影框出现在整个框架集边框的内侧，所以要求保存的是整个框架集，如图所示。【操作步骤】2.输入文件名“index.htm”，然后单击按钮，将整个框架集保存。3.接着出现第2个【另存为】对

4、话框，要求保存标题为“bottomFrame”的框架，输入文件名“bottom2.htm”进行保存。4.接着出现第3个【另存为】对话框，要求保存标题为“mainFrame”的框架，输入文件名“main2.htm”进行保存。5.接着出现第4个【另存为】对话框，要求保存标题为“leftFrame”的框架，输入文件名“left2.htm”进行保存。6.接着出现第5个【另存为】对话框，要求保存标题为“topFrame”的框架，输入文件名“top2.htm”进行保存。7.将鼠标光标置于顶部框架内，在菜单栏中

5、选择【文件】／【在框架中打开】命令，打开文档“top.htm”，然后依次在各个框架内打开文档“left.htm”、“main.htm”、“bottom.htm”，如图所示8.最后在菜单栏中选择【文件】／【保存全部】命令，再次将文档进行保存。【知识链接】如果仅仅是修改了某一个框架中文档的内容，可以选择【文件】／【保存框架】命令进行单独保存。如果要给框架中的文档改名，可以选择【文件】／【框架另存为】命令进行换名保存。如果要把框架保存为模板，可以选择【文件】／【框架另存为模板】命令进行保存。任务二设置论

6、坛框架网页框架网页创建好以后，框架的大小、边框宽度、是否有滚动条等不一定符合实际要求，这就需要对其进行设置。下面介绍通过【属性】面板设置框架集和框架属性的基本方法。（一）设置框架集和框架属性【操作步骤】1.首先设置框架集属性。选择【窗口】／【框架】命令，打开【框架】面板，在【框架】面板中选择要设置的框架后并在【属性】面板中设置框架的宽度和高度。如图所示。2.在【属性】面板中，单击框架集预览图底部，然后设置相应参数，如图所示。3.在【框架】面板中单击“topFrame”框架或按下Alt键，在“top

7、Frame”框架内单击鼠标左键将框架选中，然后在【属性】面板中设置相关参数，如图所示。4.在【框架】面板中单击“leftFrame”框架，然后在【属性】面板中设置相关参数，如图所示。5.在【框架】面板中单击“mainFrame”框架，然后在【属性】面板中设置相关参数，如图所示。6.在【框架】面板中单击“bottomFrame”框架，然后在【属性】面板中设置相关参数，如图所示。（二）设置框架中链接的目标窗口下面介绍在框架网页中设置超级链接目标窗口的方法。1.在“topFrame”框架中选择文本“网站

8、首页”，然后在【属性】面板的【链接】文本框中添加空链接“#”，在【目标】下拉列表中选择【_blank】选项。2.选中文本“论坛首页”，在【属性】面板的【链接】文本框中输入“main.htm”，在【目标】下拉列表中选择【mainFrame】选项，如图所示。3.分别选择文本“用户登录”和“用户注册”，然后在【属性】面板的【链接】文本框中输入空链接“#”，在【目标】下拉列表中选择【mainFrame】选项。4.最后在菜单栏中选择【文件】／【保存全部】命令，再次保存文件。