项目七框架──制作绿色天空论坛网页（课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目七框架──制作绿色天空论坛网页 创建论坛框架网页 任务一 设置论坛框架网页 任务二 （一） 创建框架 当创建框架网页时，Dreamweaver 8就建立起一个未命名的框架集文件。框架集文件实际上就是框架的集合，每个框架又包含一个文档。也就是说，一个包含4个框架的框架集实际上存在5个文件：一个是框架集文件，其他的分别是包含于各自框架内的文件。下面介绍创建框架网页的基本方法。 1.首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下 。 【操作步骤】 2.在菜单栏中选择【文件】／【新建】命令，打开【新建文档】对话框，在【常规】选项卡中选择【框架集】分类，在右侧【框架集】列表框中选择【上方固定，左侧嵌套】选项，如图所示。 3. 将鼠标光标置于右下侧的“mainframe”框架内，在【插入】／【布局】面板中单击（底部框架）按钮，如果在【首选参数】／【辅助功能】设置中已经勾选了【框架】复选框，这时仍将弹出【框架标签辅助功能属性】对话框，否则将直接插入一个框架，也可以在菜单栏中选择【修改】／【框架页】／【拆分上框架】或【拆分下框架】命令，将该框架拆分为上下两个框架。 由于一个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，要将所有的框架网页文档都保存下来。下面介绍保存框架网页的基本方法。 （二） 保存框架 1.在菜单栏中选择【文件】／【保存全部】命令，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为】对话框。因为阴影框出现在整个框架集边框的内侧，所以要求保存的是整个框架集，如图所示。 【操作步骤】 2.输入文件名“index.htm”，然后单击 按钮，将整个框架集保存。 3.接着出现第2个【另存为】对话框，要求保存标题为“bottomFrame”的框架，输入文件名“bottom2.htm”进行保存。 4.接着出现第3个【另存为】对话框，要求保存标题为“mainFrame”的框架，输入文件名“main2.htm”进行保存。 5.接着出现第4个【另存为】对话框，要求保存标题为“leftFrame”的框架，输入文件名“left2.htm”进行保存。 6.接着出现第5个【另存为】对话框，要求保存标题为“topFrame”的框架，输入文件名“top2.htm”进行保存。 7.将鼠标光标置于顶部框架内，在菜单栏中选择【文件】／【在框架中打开】命令，打开文档“top.htm”，然后依次在各个框架内打开文档“left.htm”、“main.htm”、“bottom.htm”，如图所示 8.最后在菜单栏中选择【文件】／【保存全部】命令，再次将文档进行保存。 【知识链接】 如果仅仅是修改了某一个框架中文档的内容，可以选择【文件】／【保存框架】命令进行单独保存。如果要给框架中的文档改名，可以选择【文件】／【框架另存为】命令进行换名保存。如果要把框架保存为模板，可以选择【文件】／【框架另存为模板】命令进行保存。 任务二 设置论坛框架网页 框架网页创建好以后，框架的大小、边框宽度、是否有滚动条等不一定符合实际要求，这就需要对其进行设置。下面介绍通过【属性】面板设置框架集和框架属性的基本方法。 （一） 设置框架集和框架属性 【操作步骤】 1.首先设置框架集属性。选择【窗口】／【框架】命令，打开【框架】面板，在【框架】面板中选择要设置的框架后并在【属性】面板中设置框架的宽度和高度。如图所示。 2.在【属性】面板中，单击框架集预览图底部，然后设置相应参数，如图所示。 3.在【框架】面板中单击“topFrame”框架或按下Alt键，在“topFrame”框架内单击鼠标左键将框架选中，然后在【属性】面板中设置相关参数，如图所示 。 4.在【框架】面板中单击“leftFrame”框架，然后在【属性】面板中设置相关参数，如图所示 。 5.在【框架】面板中单击“mainFrame”框架，然后在【属性】面板中设置相关参数，如图所示。 6.在【框架】面板中单击“bottomFrame”框架，然后在【属性】面板中设置相关参数，如图所示。 （二） 设置框架中链接的目标窗口 下面介绍在框架网页中设置超级链接目标窗口的方法 。 1.在“topFrame”框架中选择文本“网站首页”，然后在【属性】面板的【链接】文本框中添加空链接“#”，在【目标】下拉列表中选择【_blank】选项。 2.选中文本“论坛首页”，在【属性】面板的【链接】文本框中输入“main.htm”，在【目标】下拉列表中选择【mainFrame】选项，如图所示。 3.分别选择文本“用户登录”和