网页制作实验教程 第七章 框架布局网页.pptVIP

第七章 框架布局网页 ; Dreamweaver提供了几种不同的网页布局方式，之前为同学们介绍了表格，接下来我们将介绍利用框架来布局网页。 ;实验目的： 要求同学们掌握建立框架的方法，熟练运用框架的属性面板对框架进行属性设置。 ;实验原理： 框架将浏览器的窗口分割为多个可显示区域，每一个显示区域称为一个框架，它可以包含一个单独的、可以滚动的页面。每一个框架都包含一个独立的 HTML文件。 ;实验条件： 电脑操作系统Windows XP/2000/98、Dreamweaver 8网页设计软件。 ;实验二十一 利用框架排版 ;实验内容： 步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“Shirly的个人主页”。 步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。 步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。 ;步骤4 选择［窗口］菜单栏中［框架］命令。 步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑示。 步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进行编辑。 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］面板，对“mainFrame”框架进行编辑。 ;步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面板，对“leftFrame”框架进行编辑。 步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。 步骤10 弹出保存整体文件的对话框，为文件命名为“Shirly的个人主页”。 步骤11 对各个框架部分进行保存，为各个框架进行命名。 步骤12 单击F12，在浏览器中预览效果。 ;实验二十二 创建框架集 ;实验内容： 步骤1 选择［修改］菜单栏中的［框架页］命令。 步骤2 根据需要在其子菜单中选择任意一个分割命令。 步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。 ;学习与思考 希望同学们按照以下要求来完善你的个人主页: 1.用??架做一个个人主页，要求最少使用三个框架文件。 2.为你的每个框架设定好相关的内容。使其成为一个结构合理、引导性强 的个人主页。 3.合理设置主页中各个框架的属性。