网页设计Dreamweaver CS3 教案(华东师范大学出版社)讲述.docx

第 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 放到整个浏览器窗口并删除所有框架。　　 在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFram