网页设计与制作案例教程—Dreamweaver cs6电子教案-第6章.pptx

网页设计与制作案例教程

电子教案

本章学习目标掌握框架创建的方法掌握导入框架文件技巧掌握保存框架和框架文件的方法了解设置框架和框架集属性了解编辑框架内容第6章框架布局

教学案例：“班级故事”网页插入文字本章的案例是创建一个利用嵌套框架搭建的“班级故事”网站。网页将一个浏览器窗口分割成3个部分，分别是上、左下、右下3个框架，这种框架称之为嵌套结构框架，是最复杂的一种框架，把文字插入本案例相对应的位置

案例制作步骤1：在站点下创建3个页面步骤2：建立一个名为“index.html”的页面，并打开此页面，此时的页面为空白页面，我们插入预定义框架集。步骤3：选择“插入”→“HTML”→“框架”→“上方及左侧嵌套”，使用默认的名称，在网页中插入框架集

案例制作步骤4：在“框架面板”中选中下框架，在属性面板“源文件”后单击“浏览文件”按钮，在弹出的对话框中选择top.html页面。另外，页面的Banner不需要滚动条，设置滚动为“否”，制作好的网页肯定不希望浏览者随意调整框架页面的大小，选中“不能调整大小”复选框，并将“边框”定为“否”步骤5：完成后，下框架中的页面就会正常显示

案例制作步骤6：在“框架面板”中选中左框架，在属性面板“源文件”后单击“浏览文件”按钮，在弹出的对话框中选择left.htm页面，设置滚动为“否”，选中“不能调整大小”复选框，并将“边框”定为“否”

案例制作步骤7：选中top.html中的饮食常识，链接站点中的right.html子网页，目标设置为mainframe，使链接的子网页的内容显示在右侧的框架中，只有这样，框架网页才能显示出它真正的功能。选中top.html中的班级故事，链接站点中的banjigushi.html子网页，目标设置为mainframe。

案例制作步骤8：在【框架面板】中选中总框架集，设置总框架集的属性，在属性面板中将“边框”设为“否”，边框宽度设为“0”，则在页面中不显示框架集的边框步骤9：调整框架的大小使页面美观地显示在浏览器中。步骤10：在“框架面板”中选中框架集，将框架集保存为index.html

案例制作步骤11：预览窗口后，我们可以看到浏览器中的预览效果。当按下链接时，在框架集的右边框架会出现相关的内容，这样框架才能发挥真正的效用。

知识准备一、创建框架集框架网页包括两个部分：框架集和框架，框架集将整个浏览器版面分割为多个框架，每个框架是单独的一个页面。框架集是多个框架的集合，有三种方法创建框架集。方法一：用“修改”菜单创建框架集方法二：插入预定义框架集选择预定义框架集将会设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。方法三：通过“可视化助理”创建框架集通过“可视化助理”自定义创建框架使用户有了很大的自由度，可以任意控制拆分方式以及框架的宽度和高度。

知识准备二、选择框架和框架集要更改框架或框架集的属性，先选择要更改的框架或者框架集。1.?选择框架 在“框架”面板中直接用鼠标单击要选取的框架区域，即可将该框架选定。被选定的框架边框周围会出现一个虚线边框，表示该框架被选中。

知识准备2.?选择框架集 在“框架”面板中，用鼠标单击“框架”面板周围的框架集边框。被选中的框架集以粗黑线边框显示，表示文档中对应的框架集被选中。

知识准备三、设置框架集和框架属性框架属性确定框架集内各个框架的名称、源文件、边距、滚动、边框，以及能否调整大小框架集属性、控制框架的大小和框架之间边框的颜色、宽度。每个框架和框架集都有自己的属性检查器，使用“属性”检查器可以设置大多数框架集的属性（包括框架集标题、边框以及框架大小）。使用“属性”检查器也可以查看和设置大多数框架属性，包括边框、边距以及是否在框架中显示滚动条。设置框架属性将覆盖框架集中该属性的设置。

知识准备1.?设置框架集属性选择框架集之后，“属性”面板会显示框架集的属性2.?设置框架属性当选择某个框架之后，“属性”面板会显示该框架的属性

知识准备四、导入框架文件1.?导入框架文件当把框架集和框架的外观设置好后，就可以向框架内插入内容了，在已经创建好的框架中插入页面或在框架中嵌入页面，可以通过以下两种方式实现：方法一：设置框架源文件方法二：在框架中嵌入页面

知识准备2.?用不同的方式打开链接页面在目标下拉菜单中，可以看到比没有框架的页面多了三种目标方式：mainFrame、leftFrame和topFrame，这三种方式的名称可以通过框架面板看到

知识准备五、保存框架在浏览器中预览框架集之前必须保存框架集文件以及要在框架中显示的所有文档。由于框架集把一个网页分成了多个部分，使用框架集的网页中便包括了多个文件，所以，在保存网页文件时，要选择合适的保存方式。框架、框架集与页面是对应的，整个框架集是一个单独的页面，每个框