2016网页设计与制作DreamWeaver教案：第十一讲 使用框架布局网页.docVIP

第十一讲　使用框架布局网页 授课日期 班级名称 授课地点 教学课题 第十一讲使用框架布局网页 课时 2学时 教学目的 （1）掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件的操作方法。 （3）掌握如何保存框架集文件和各个框架操作文件。 （4）掌握设置框架集属性和框架属性的操作方法。 （5）掌握编辑框架内容的操作方法。 （6）了解设置超级链接的操作方法。 知识目标 （1）在网页中创建框架。 （2）为框架命名并导入框架源文件。 （3）保存框架集文件和各个框架操作文件。 （4）设置框架集属性和框架属性。 （5）编辑框架内容。 （6）设置超级链接。 能力目标 设置框架属性（2）设置框架集属性（3）编辑框架内容 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 设置框架属性、框架集属性 难点 使用框架布局网页的方法和技巧 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社 教学环节 及 板书设计 时间安排 1．复习提问 曾经学习过的网页布局常见有哪些类型？ 2 2．新课引入 如何把导航内容固定在页面的顶部、左边或右边呢？ 3 3．项目展示 展示导航内容固定在页面的顶部的网页 5 4．知识技能目标说明 导航内容固定在页面的顶部、左边或右边，必须掌握创建框架结构。 5 讲解各知识点：具体讲述本次课新课内容 43 课堂实践： 15 7．问题探讨 如果页面上含有三个框架文件，则需要保存几个文件？ 4 8．疑难解析 8 9.课堂小结 在这一讲中，我们首先学习了框架的概念与特点，再详细讲解了框架的创建、保存、属性的设置等基本操作。 3 10．作业布置 2 总计 90 新授内容 框架的概述 （1）框架的概念 （2）框架的特点 框架的创建与设置 新建网页 显示框架边框和框架面板 创建框架 选择框架集和框架 分割框架和调整框架的大小 保存框架集和框架 设置框架集和框架的属性 导入框架源文件 调整各框架区域的大小 设置超级链接 案例6：应用框架制作电子书—— 操作步骤： 创建框架集 方法： 创建站点kj，图像文件夹img，新建HTML页面。 “插入”/“布局”/选择框架集“顶部和嵌套的左侧框架” 文件/保存框架页，命名“index.htm”。 在顶部框架内单击，文件/保存框架，命名“top.html”。 用同样的方法，将左侧框架保存“left.html”，右侧框架保存为“main.html”。 按Alt的同时单击框架，在“属性”面板上设置框架名称。 制作框架页 在顶部框架内创建标题栏，设置为“HTML在线教程”。 光标定位在top.html，插入图片ch6/html.gif、ch6/bar.gif，设计对齐方式为居中对齐。 光标定位在main.html，插入1×1的表格，居中对齐，表格宽度80，百分比，其它都为0。 在表格内输入文本，字体大小14px。 新建一个目录pages，再在其中新建5个页面，分别为1.htm、2.htm、3.htm、4.htm和5.htm。 编辑页面1.htm，设置对齐为水平居中，插入1×1的表格，宽度为80%，插入文本，字体大小为14px。 同样编辑2.htm、3.htm、4.htm和5.htm。注意：文字素材分别在1.txt，2.txt，3.txt，4.txt和5.txt中。 编辑left.htm，插入一个5×2的表格，宽度为200像素，如下所示（图片ch6/star.gif） 课堂实践 （1）打开“课堂实践”站点文件夹“07框架网页”中的网页文档“07.html”，该网页采用了“顶部框架”结构。 （2）顶部框架的源文件为“top07.html”，该网页中插入了一张2行1列的表格，第一行输入一行文字，第二行中插入一张1行10列的嵌套表格，该表格每个单元格中输入文字作为超级链接。 （3）底部框架的源文件为“main07.html”，该网页文档原先已制作好，只需设置框架的源文件就可以。 疑难解析 问题1：显示在框架中的文档是否为框架的一部分？ ???? 答：显示在框架中的文档并不是框架的一部分。框架不是文件，而是存放文档的容器，任何一个框架都可以显示任意一个文档。 ??? 问题2：如果一个站点在浏览器中显示为包含三个框架的单个页面，该框架应该包括多少个独立的HTML文档。 ???? 答：至少由四个单独的HTML文档组成：框架集文件以及三个网页文档，这三个网页文档包含这些框架内初始显示的内容。在Dreamweaver中设计使用框架集的页面时，必须保存全部这四个文