网页设计DreamweaverCS3教案(华东师范大学出版社)剖析.docx

第 7章 建立框架网页 教学目标： 1．能够理解框架的作用 2．能够合理使用框架划分窗口布局 3．能够明白框架和框架集的关系 4．能在框架中创建编辑网页 5．能在框架中打开已有的网页进行编辑 6．能够正确保存框架和框架集 7．能够理解和编辑框架的属性 教学重点： 绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性 教学难点： 绘制嵌套布局表格 教学课时：理论：2课时 实训：4课时 教学方法：讲授法、任务驱动法。 教学过程: 一、导入新课 网页布局技术还有一种，叫做框架。然而框架本质上是一种浏览器窗口的分割技术。而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口” 的布局技术。按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。 二、讲授新课 　　（ 一）、框架和框架集的概念 框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。 （二）、创建框架 　　 在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。 　　 1、使用预制框架集 　　 (1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。 　　 （2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。 　　2、鼠标拖动创建框架 　　（1）、新建普通网页，命名后将其打开。 　　（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。 　　（三）、保存框架 　　 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。 　　 选择菜单栏文件保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。 　　 这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。 　　 （四）、 编辑框架式网页 　　 虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。 　　 1、 改变框架大小 　　 用鼠标拖拽框架边框可随意改变框架大小。 　　 2、 删除框架 　　 用鼠标把框架边框拖拽到父框架的边框上，可删除框架。 　　 3、设置框架属性 　　 设置框架属性时，必须先选中框架。选择框架方法如下： 　　 选择菜单栏窗口框架，打开框架面板，单击某个框架，即可选中该框架。 　　 在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓 2. 设置框架属性 　　 选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。 　　 需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。 　　 （五）、在框架中使用超级链接 　　 在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。 　　 “目标”下拉菜单中的选项： 　　 * _blank 放在新窗口中。 　　 * _parent 放到父框架集或包含该链接的框架窗口中。 　　 * _self 放在相同窗口中（默认窗口无须指定）。 　　 * _top 放到整个浏览器窗口并删除所有框架。