网页设计与制作教案62196.docVIP

《网页设计与制作》课程电子档教案第 PAGE 5页，共 NUMPAGES 6页 作者：常雪敏 淮安市辅仁职业技术学校 （2016年春学期电子档教案） 一、序号 3 学科 网页设计与制作 授课班级 1407 第 4 周第 1 次课 执教者 常雪敏 二、授课类型： A (A新授课、B复习课、C习题课) 三、授课章节、标题 项目一：创建框架网页 四、教学目标： 任务一 创建框架网页 五、重难点： 会创建框架网页 六、教学准备： 无 七、教学过程（含板书设计、作业布置等）： 1、新课导入：在Dreamweaver中预定义了多种框架集，可以很方便地创建想要的框架网页。 2、新课讲解： 择预定义的框架集将自动设置创建布局所需要的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。创建框架集的具体操作步骤如下。 1．选择菜单中的【文件】|【新建】命令，打开【新建文档】对话框，在对话框中选择【常规】选项卡中的【类别】|【框架集】|【上方固定，左侧嵌套】选项。如图 2.单击【创建】按钮，即可创建一上方固定，左侧嵌套的框架网页。如图,提示：还可以用以下两种方法创建框架网页 在【布局】插入栏中单击按钮，在弹出的菜单中选择【左侧和嵌套的下方框架】选项，即可创建框架网页。如图7-3： 选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命令，即可创建框架网页。 插入预定义框架集 插入预定义框架集的具体操作步骤如下。 标放置在头部框架中，选择菜单中的【修改】|【页面属性】命令，打开【页面属性】对话框中将【左边距】设置为0像素，【右边距】设置为0像素。如图 2．【确定】按钮。选中头部框架，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，打开【选择HTML文件】对话框，在对话框中选择top1.htm。 3．单击【确定】按钮，插入文件。 4．将光标放置在左侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择HTML文件】对话框中选择leftl．htm，单击【确定】按钮，插入文件。 5．将光标放置在右侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择HTML文件】对话框中选择right.htm，单击【确定】按钮，插入文件。 保存框架和框架集文件 在浏览器中预览框架集之前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架和框架集文件的具体操作步骤如下。 新建一上方固定，左侧嵌套的框架网页。选择菜单中的【文件】|【保存全部】命令，打开【另存为】对话框，此时整个框架集内侧出现阴影，所以询问的是框架集的名称，在【文件名】文本框中输入index.htm。 2．单击【保存】按钮，打开第2个【另存为】对话框，因为右侧框架内侧出现阴影，所示询问的是右侧框架的名称，在【文件名】文本框中输入right.htm。如图7-6： 图7-6 3．单击【保存】按钮，打开第3个【另存为】对话框，因为左侧框架内侧出现阴影，所以询问的是左侧框架的名称，在【文件名】丈本框中输入left.htm。如图7-7： 图7-7 4．单击【保存】按钮，打开第4个【另存为】对话框，因为头部框架内侧出现阴影，所示询问的是头部框架的名称，在【文件名】文本框中输入top.htm。如图7-8： 5．单击【保存】按钮，至此整个框架保存完毕。 图7-8 在【框架】面板中选择框架或框架集 在【框架】面板中选择框架或框架集的具体操作步骤如下。 1.选择菜单中的【窗口】|【框架】命令，打开【框架】面板，在面板中单击需要选择的框架，框架的边界就会被虚线包围。如图7-9： 图7-9 2.在【框架】面板中单击框架集的