Dreamweaver框架和框架页面教学设计
大连事业单位招聘-幼儿园健康教育总结
《Dreamweaver——框架和框架页面》教学设计
深圳市第一职业技术学校
叶苑华
中等职业学校信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为<
br>目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，
才能培养
出适应信息社会发展的有用人才。下面，以“框架和框架页面”单元为例，以
个人的观点简单介绍一下怎
样针对学生的心理特点、结合学生的生活实际设计这两堂
课。
（一）、课前系统部分
1、课标分析
《课程标准》对网页制作的学习提
出了更高的要求，其中关于框架页面的要求有：
了解框架的使用方法，包括创建框架、命名框架、设置框
架以及保存框架等操作。在使
用框架的过程中一定要明白框架的基本结构和基本应用。
2、教材内容分析
我教的两个就业班使用的教材是中国软件行业协会职业技术认定指定教材。
教材中
采用的网页制作软件是Dreamweaver 8。框架和框架页面是该教材第9章192页到
209
页的内容，它是制作网页的一个重要模块。能够将浏览器页面分割成几个不等的窗口，
每
个窗口相对独立，在同一页面的几个窗口同时浏览不同的网页文件或者相对保持某些
窗口的内容。
3、学生分析
在这之前，就业班的学生已经学过了Word、Photoshop
等软件。因此，对Dreamweaver
8的启动、关闭、文件操作、文字编辑和图片处理都会有一
种似曾相识的感觉，这种知
识迁移对后续的学习非常有利。同时，学生已初步掌握了网络通信的基础知识
，因特网
的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生
已经具备了获取信息的能力。网页制作单元就可侧重培养信息表达的能力，这对于加强
学生的信息意识，
提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展
示个性、自主创新的机会，促使他们
主动地学、创造性地学；网页的评价则能使学生了
解内容编排的原则，页面布局的种类，色彩搭配的风格
等，提高他们的艺术修养和审美
情趣。
4、教学目标
本单元的认知、能力和情感三种目标分述如下：
认识目标：
①理解框架结构的含义和用途
②掌握框架和框架集的含义，学会创建普通框架页面、创建嵌套
框架结构页面、创
建浮动框架页面
③掌握框架属性的设置方法
④掌握框架网页的保存方法
能力目标：
①掌握建立网页框架及设置框架属性的能力
②能够应用网页框架建立简单的网页
情感目标：
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力
5、教学的难点和重点
教学重点：
①网页框架的建立
②理解浮动框架页面的含义
教学难点：
①框架集和框架之间的关系
②了解框架集标记frameset、框架标记frame、浮动框架标记iframe，掌握框架相关
属性的设置：例如，调整框架大小、设置框架边界、改变边框线的宽度等
6、教学策略（或方法）
教师演示、任务驱动法、合作学习法、自主学习法和分组讨论法。
7、教学准备
①教师准备一些文字和图片素材
②教师提供一些制作框架网页的视频文件
③教师准备一些用网页框架制作的优秀作品
④采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率
（二）、教学过程
1、课前探究
①访问推荐网页，形成小组、组织学生讨论网页内容和风格，分析网页框架和布局
②提供网页栏目划分建议
③组织各小组讨论
2、新课导入：
教学环节 教师活动 学生活动 设计目的
1、教师演示一些用网1、回答问题，带着问1、开门见山，明确这
新
页框架制作的优秀网题观察老师的操作 节课学习的内容
课 页作品
2、分析几个网站的特2、演示优秀作品，引
的 2、提问：这些网页是色。 起学生的兴趣
导 如何制作的呢？引起3、提供网页栏目划
入 学生的兴趣。 分。
3、引入本节课的学习
内容（制作框架网页）
3、师生互动
教学环节
新
课
学
习
实
例
1
实
例
2
实
例
3
师
生
互
动
师
生
互
动
教师活动 学生活动
设计目的
介绍创建普通框架根据教师提供的两个任务驱动，通过教师
页面，过程：
页面名为，页讲解制作框架网页的
1、使框架边框在“设面名为，将方法，学生自主学习。
计”视图中可见 这两个页面整合成一
2、通过鼠标脱拽，个完整的框架页面
生成可视的框架 （上下框架结构）
3、文件的保存 使用同样的方法建立
4、有关属性的设置 一个左右框架结构的
网页
介绍创建嵌套框架根据教师提供的三个创作作品，培养学生
结构页面，过程：
页面名为，页的合作学习和自主学
1、使框架边框在“设面名，页面名习的能力。
计”视图中可见 , 将这三
2、通过鼠标拖拽，个页面整合成一个完
生成可视的框架
整的框架页面（上、
3、文件的保存 左下和右下结构）
4、有关属性的设置
<
br>介绍浮动框架标记学生通过写代码实现小组讨论，培养学生
和属性和相关属性浮动框架。根据教师
自主讨论和合作学习
设置 提供的页面名为的能力。
，插入一个
浮动框架作为子窗
口。
1、教师提供一些素1、各组学生完成相应1、培养学生的合作学
材及布置制作框架的制作任务
习和自主学习的能力
页面的任务。
2、学生挑选有用的素2、积极参加讨论，培
2、教师巡视检查，材，尝试制作作品。
养师生之间的感情。
做个别指导。 3、学生如有疑问，一
方面可以向老师请
教，另一方面可以和
同组的同学讨论。
3、组织学生评价作 3、充分利用评价方式
品。教师重点由技术4、每组发一张表格，对学生
的激励作用。
点的引导转到学生填写上交老师。
教师把主动权交给学
心理素质及与人交表格如下：（见下表）
生，使他们更具参与
往能力的导向上。在 意识引发学习的主动
学生的自评中引导
性，学会正确地、善
学生客观评价自己。 意地、艺术地评价他
4、教师参与讨论，
人和自己，从中学到
帮助学生进行评价 做人的道理。
新
课
学
习
师
生
互
动
5、帮助学生解决问
制小具本节
4、增强学生的学习兴
题
作组组体课完
趣
内长 成分成情
容 员 工 况
5、由学生推选代表主
持评价，以调动学生
积极参与评价。（见
下表）
考核分作品
内容值 评 语
及标及成
准 绩评
定
学生20 （学
互评生填）
成绩
设计40 （教
与制师填）
作得
分
心得40 （教
及思师填）
考题
得分
6、学生对自己的作品
进行修改。
4、课堂总结
本
节主要介绍框架页面的创建、框架和框架集的选择、框架的保存以及框架属性的
基本设置，对于制作风格
统一的页面有很大的优势。
5、课后作业
①什么是浮动框架？有什么好处？ <
br>②每组学生根据教师提供的素材，网页作为上、中、下结构的框架合并成一个完整的页
面。各小组
根据制作的内容，写一份实验报告，主要的内容有：
A、列出具体的制作内容。
B、列出本次实训掌握了哪些新的技术？
（三）教学后记
本单元
教学采用了“演示法”、“任务驱动法”、“小组协作法”、“分层教学法”
等多种教学方法相结合的教
学模式，努力为学生创设一种相互协作、相互激励的学习环
境，同时又能够让学生培养自主学习的能力和
创新精神。在课堂上始终以学生为主体，
通过多种教学方式驱使学生主动学习、主动参与、相互协作、相
互激励、取长补短、共
同提高。
在这两节课中，学生把学到的知识应用于一个实际作品的制作
过程，是一个创作实
践的过程。使学生感到自己是实践活动的主人，是学习的主体。学生在积极、主动的
学
习气氛中，有利于提高学生的学习兴趣，充分调动学生的学习积极性。
教师可以考虑把课件
用网站的形式展现在学生面前，提高他们的对网站的感性认
识，促使他们更容易接受本单元内容。
《Dreamweaver——框架和框架页面》教学设计
深圳市第一职业技术学校 叶苑华
中等职业学校信息技术课已不再是单纯的计算机
技能课，它强调以培养信息素养为
目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破
以往的教学模式，
才能培养出适应信息社会发展的有用人才。下面，以“框架和框架页面”单元为例，以
个人的观点简单介绍一下怎样针对学生的心理特点、结合学生的生活实际设计这两堂
课。
（一）、课前系统部分
1、课标分析
《课程标准》对网页制
作的学习提出了更高的要求，其中关于框架页面的要求有：
了解框架的使用方法，包括创建框架、命名框
架、设置框架以及保存框架等操作。在使
用框架的过程中一定要明白框架的基本结构和基本应用。
2、教材内容分析
我教的两个就业班使用的教材是中国软件行业协会职业技术认定
指定教材。教材中
采用的网页制作软件是Dreamweaver 8。框架和框架页面是该教材第9章
192页到209
页的内容，它是制作网页的一个重要模块。能够将浏览器页面分割成几个不等的窗口，
每个窗口相对独立，在同一页面的几个窗口同时浏览不同的网页文件或者相对保持某些
窗口的内
容。
3、学生分析
在这之前，就业班的学生已经学过了Word、Photos
hop等软件。因此，对Dreamweaver
8的启动、关闭、文件操作、文字编辑和图片处理都
会有一种似曾相识的感觉，这种知
识迁移对后续的学习非常有利。同时，学生已初步掌握了网络通信的基
础知识，因特网
的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生<
br>已经具备了获取信息的能力。网页制作单元就可侧重培养信息表达的能力，这对于加强
学生的信息
意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展
示个性、自主创新的机会，促
使他们主动地学、创造性地学；网页的评价则能使学生了
解内容编排的原则，页面布局的种类，色彩搭配
的风格等，提高他们的艺术修养和审美
情趣。
4、教学目标
本单元的认知、能力和情感三种目标分述如下：
认识目标：
①理解框架结构的含义和用途
②掌握框架和框架集的含义，学会创建普通框架页面、创建嵌套
框架结构页面、创
建浮动框架页面
③掌握框架属性的设置方法
④掌握框架网页的保存方法
能力目标：
①掌握建立网页框架及设置框架属性的能力
②能够应用网页框架建立简单的网页
情感目标：
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力
5、教学的难点和重点
教学重点：
①网页框架的建立
②理解浮动框架页面的含义
教学难点：
①框架集和框架之间的关系
②了解框架集标记frameset、框架标记frame、浮动框架标记iframe，掌握框架相关
属性的设置：例如，调整框架大小、设置框架边界、改变边框线的宽度等
6、教学策略（或方法）
教师演示、任务驱动法、合作学习法、自主学习法和分组讨论法。
7、教学准备
①教师准备一些文字和图片素材
②教师提供一些制作框架网页的视频文件
③教师准备一些用网页框架制作的优秀作品
④采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率
（二）、教学过程
1、课前探究
①访问推荐网页，形成小组、组织学生讨论网页内容和风格，分析网页框架和布局
②提供网页栏目划分建议
③组织各小组讨论
2、新课导入：
教学环节 教师活动 学生活动 设计目的
1、教师演示一些用网1、回答问题，带着问1、开门见山，明确这
新
页框架制作的优秀网题观察老师的操作 节课学习的内容
课 页作品
2、分析几个网站的特2、演示优秀作品，引
的 2、提问：这些网页是色。 起学生的兴趣
导 如何制作的呢？引起3、提供网页栏目划
入 学生的兴趣。 分。
3、引入本节课的学习
内容（制作框架网页）
3、师生互动
教学环节
新
课
学
习
实
例
1
实
例
2
实
例
3
师
生
互
动
师
生
互
动
教师活动 学生活动
设计目的
介绍创建普通框架根据教师提供的两个任务驱动，通过教师
页面，过程：
页面名为，页讲解制作框架网页的
1、使框架边框在“设面名为，将方法，学生自主学习。
计”视图中可见 这两个页面整合成一
2、通过鼠标脱拽，个完整的框架页面
生成可视的框架 （上下框架结构）
3、文件的保存 使用同样的方法建立
4、有关属性的设置 一个左右框架结构的
网页
介绍创建嵌套框架根据教师提供的三个创作作品，培养学生
结构页面，过程：
页面名为，页的合作学习和自主学
1、使框架边框在“设面名，页面名习的能力。
计”视图中可见 , 将这三
2、通过鼠标拖拽，个页面整合成一个完
生成可视的框架
整的框架页面（上、
3、文件的保存 左下和右下结构）
4、有关属性的设置
<
br>介绍浮动框架标记学生通过写代码实现小组讨论，培养学生
和属性和相关属性浮动框架。根据教师
自主讨论和合作学习
设置 提供的页面名为的能力。
，插入一个
浮动框架作为子窗
口。
1、教师提供一些素1、各组学生完成相应1、培养学生的合作学
材及布置制作框架的制作任务
习和自主学习的能力
页面的任务。
2、学生挑选有用的素2、积极参加讨论，培
2、教师巡视检查，材，尝试制作作品。
养师生之间的感情。
做个别指导。 3、学生如有疑问，一
方面可以向老师请
教，另一方面可以和
同组的同学讨论。
3、组织学生评价作 3、充分利用评价方式
品。教师重点由技术4、每组发一张表格，对学生
的激励作用。
点的引导转到学生填写上交老师。
教师把主动权交给学
心理素质及与人交表格如下：（见下表）
生，使他们更具参与
往能力的导向上。在 意识引发学习的主动
学生的自评中引导
性，学会正确地、善
学生客观评价自己。 意地、艺术地评价他
4、教师参与讨论，
人和自己，从中学到
帮助学生进行评价 做人的道理。
新
课
学
习
师
生
互
动
5、帮助学生解决问
制小具本节
4、增强学生的学习兴
题
作组组体课完
趣
内长 成分成情
容 员 工 况
5、由学生推选代表主
持评价，以调动学生
积极参与评价。（见
下表）
考核分作品
内容值 评 语
及标及成
准 绩评
定
学生20 （学
互评生填）
成绩
设计40 （教
与制师填）
作得
分
心得40 （教
及思师填）
考题
得分
6、学生对自己的作品
进行修改。
4、课堂总结
本
节主要介绍框架页面的创建、框架和框架集的选择、框架的保存以及框架属性的
基本设置，对于制作风格
统一的页面有很大的优势。
5、课后作业
①什么是浮动框架？有什么好处？ <
br>②每组学生根据教师提供的素材，网页作为上、中、下结构的框架合并成一个完整的页
面。各小组
根据制作的内容，写一份实验报告，主要的内容有：
A、列出具体的制作内容。
B、列出本次实训掌握了哪些新的技术？
（三）教学后记
本单元
教学采用了“演示法”、“任务驱动法”、“小组协作法”、“分层教学法”
等多种教学方法相结合的教
学模式，努力为学生创设一种相互协作、相互激励的学习环
境，同时又能够让学生培养自主学习的能力和
创新精神。在课堂上始终以学生为主体，
通过多种教学方式驱使学生主动学习、主动参与、相互协作、相
互激励、取长补短、共
同提高。
在这两节课中，学生把学到的知识应用于一个实际作品的制作
过程，是一个创作实
践的过程。使学生感到自己是实践活动的主人，是学习的主体。学生在积极、主动的
学
习气氛中，有利于提高学生的学习兴趣，充分调动学生的学习积极性。
教师可以考虑把课件
用网站的形式展现在学生面前，提高他们的对网站的感性认
识，促使他们更容易接受本单元内容。