(框架讲义9.docVIP

专业技术部计算机专业课讲义 科 目 Dreamweaver8.0网页制作基础 课 题 框架的创建与编辑 课型 新授 授课时数 4 主备人 黄广萍 参备人 王 丽 周庆珩 备课 时间 10.8 教学目标 掌握框架和框架集的创建和设置方法 教学重点 编辑框架和框架集 教学难点 设置框架和框架集的属性 教学方法 启发 引导 演示 教 具 多媒体网络教室 教 学 过 程 教 学 内 容 教学设计 一、导入 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。　　 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。　　 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。创建框架　　 在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。使用预制框架集　　 (1)新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。 　　　（2）使用鼠标直接从框架的左侧边缘上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。 鼠标拖动创建框架　　（1）新建普通网页，命名后将其打开。　　（2）把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。保存框架　　 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。　　 选择菜单栏文件保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为09.html。　　 这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。 编辑框架式网页　　 虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。 1 改变框架大小　用鼠标拖拽框架边框可随意改变框架大小。 2) 删除框架　用鼠标把框架边框拖拽到父框架的边框上，可删除框架。　3设置框架属性　设置框架属性时，必须先选中框架。选择框架方法如下：　选择菜单栏窗口框架，打开框架面板，单击某个框架，即可选中该框架。　在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓设置框架属性　　 选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。　　 需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。制作框架页面 1选择菜单栏窗口框架，打开框架面板，选中整个框架集，如下图所示： 　　在属性面板中，将行的值设置为100，单位为像素，如下图所示： 　2选择菜单栏窗口框架，打开框架面板，选中子框架集，如下图所示： 在属性面板中，将列的值设置为200，单位为像素，如下图所示： 这样，我们就完成了对整个框架的布局。下面我们来布局各个框架页面。鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了07.html。在页面属性中将上、下、左。右边距全部设为0。 插入一个1行2列的表格，宽度为100％，高度为100px，左单元格宽度为382px并插入背景图片img/103.jpg，设置表格的背景颜色为103.jpg图片右边缘的绿色（用吸管吸取）。鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了08.html，在页面属性中将上、下、左。右边距全部设为0。 插入一个6行1列 的表格，表格宽度为95％，居中对齐。将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。分别输入文字设置导航栏目。分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择mainFrame框架。鼠标