网页制作公开课教案
合集下载
创建站点市公开课获奖教案省名师优质课赛课一等奖教案
创建站点教案一. 引言网站是现代社会中最重要的信息传播和交流媒体之一。
无论是企业宣传还是个人展示，都离不开一个精美、易用的网站。
因此，学习如何创建一个站点是非常有价值的技能。
本教案旨在帮助学生们掌握创建站点的基本知识和技能。
二. 教学目标1. 了解什么是网站，以及网站的重要性。
2. 学习使用HTML和CSS创建基本的网站页面。
3. 掌握网站的结构和布局设计原则。
4. 学会使用各种工具和资源来优化网站的用户体验。
5. 实际操作中分析和解决常见的网站设计和开发问题。
三. 教学内容和步骤1. 什么是网站1.1 介绍网站的定义和作用。
1.2 分享网站在不同领域的应用案例。
2. 基本网页制作技术2.1 学习使用HTML创建网页的基本结构。
2.2 掌握使用CSS样式表定义网页的外观和布局。
3. 网站结构和布局设计原则3.1 介绍常见的网站结构和布局设计原则，如流线型布局、层次结构等。
3.2 分析和讨论各种网站布局的优缺点。
3.3 实践操作中演示如何设计一个具有良好结构和布局的网站。
4. 优化网站用户体验4.1 学习使用图像、颜色、字体等元素来提高网站的视觉吸引力。
4.2 了解响应式设计和移动优先原则，以适应不同设备和屏幕尺寸。
4.3 探讨网站导航和搜索功能的设计要点。
4.4 分享使用工具和技术来提高网站加载速度和性能。
5. 解决网站设计和开发问题5.1 分析和讨论常见的网站设计和开发问题，如浏览器兼容性、跨平台支持等。
5.2 掌握使用调试工具和技术来解决网站的问题。
5.3 实际操作中演示如何改进和优化一个存在问题的网站。
四. 教学方法1. 讲解：通过讲解的方式介绍相关概念和知识。
2. 演示：使用具体的案例演示如何创建站点和解决问题。
3. 实践：让学生亲自动手实验和操作，提高技能和经验。
4. 分组讨论：将学生分组，让他们共同讨论和解决问题，促进合作和学习。
五. 教学资源和评估1. 教学资源：- 电脑和互联网连接：用于学生实验和操作。
网页制作超链接公开课教案
1、完成后思考题
2、机房实践熟练操作链接的几种类型
3、完成教材案例项目4
4、学有余力的同学自己发挥想象设计一个书本目录
五、板书设计
URL、链接路径（3种）、链接类型、创建链接方法
教学评议
1.超链接基础
2.链接路径（绝对路径、文档相对路径、站点根目录相对路径）
3.链接的几种类型（链接到其他文档或文件、电子邮件链接、空链接和脚本链接、命名锚记链接）
4.创建链接的三种方法（使用属性检查器创建链接、使用“指向文件”：图标创建链接、使用“超链接”命令）
5.链接目标（_blank _parent _self _top）
福宝中学公开课教案
第3周星期三第3节 2016年3月9日
执教：刘云授课班级：14计升A班 课型 ： 新授课
课题
“教材简介”——超链接的应用
教
学
目
标
知识目标
掌握超链接的几种类型及操作方法
技能目标
通过超链接的制作，培养学生观察力，动手操作能力。
情感目标
通过学习，培养学生浓厚的学习兴趣，提高学生自主、合作、探究的学习能力，培养学生创新精神。
6.超链接标签超链接标签为<a> </a>
三、实战演练（20分钟左右，设计意图：通过教师演示和学生操作，提高学生动手能力，培养学生兴趣。）
1、点我看大图
2、网页与网页直接的链接
3、与互联网链接（友情链接）
4、电子邮件链接
5、FTP链接
6、空链接
7、下载链接
8、锚记链接
四、课程总结、作业布置（3-5分钟）
教学重点
超链接的几种类型及其操作方法，设置超链接的方法
教学难点
超链接的设置
2、机房实践熟练操作链接的几种类型
3、完成教材案例项目4
4、学有余力的同学自己发挥想象设计一个书本目录
五、板书设计
URL、链接路径（3种）、链接类型、创建链接方法
教学评议
1.超链接基础
2.链接路径（绝对路径、文档相对路径、站点根目录相对路径）
3.链接的几种类型（链接到其他文档或文件、电子邮件链接、空链接和脚本链接、命名锚记链接）
4.创建链接的三种方法（使用属性检查器创建链接、使用“指向文件”：图标创建链接、使用“超链接”命令）
5.链接目标（_blank _parent _self _top）
福宝中学公开课教案
第3周星期三第3节 2016年3月9日
执教：刘云授课班级：14计升A班 课型 ： 新授课
课题
“教材简介”——超链接的应用
教
学
目
标
知识目标
掌握超链接的几种类型及操作方法
技能目标
通过超链接的制作，培养学生观察力，动手操作能力。
情感目标
通过学习，培养学生浓厚的学习兴趣，提高学生自主、合作、探究的学习能力，培养学生创新精神。
6.超链接标签超链接标签为<a> </a>
三、实战演练（20分钟左右，设计意图：通过教师演示和学生操作，提高学生动手能力，培养学生兴趣。）
1、点我看大图
2、网页与网页直接的链接
3、与互联网链接（友情链接）
4、电子邮件链接
5、FTP链接
6、空链接
7、下载链接
8、锚记链接
四、课程总结、作业布置（3-5分钟）
教学重点
超链接的几种类型及其操作方法，设置超链接的方法
教学难点
超链接的设置
高中信息技术选修：网络技术应用 动态网页-“十市联赛”一等奖
江都区大桥高级中学公开课教案
教者： 龚宜成
课题
（章节名称）
动态网页制作专题复习
学科
信息技术
授课年级
高二年级
学期
上
课时数
1
教学方法
任务驱动、启发式
教学内容分析
本文就教科版网络技术应用(选修)第五章动态网页制作展开分析，本章内容课本分了四小节，以“认识动态网页”“理解动态html”“应用html”“asp脚本应用”为主线，这样的布局安排从整体来看似乎是一气呵成，合理到位，真正落实到教学实践中，效果不尽人，每年学业考试时，这块都是学生惧怕的难点之一。这一章内容在测试中，会出现三种类型的操作题和5条左右的选择题，分值达到近20分，所以显得尤其的重要。为了能到达更好的教学效果，在学测复习教学中我立足于教材但不拘泥于教材。我把整章大体分成动静态网页的初识、JavaScript部分学习、css部分的学习。每部分的学习是否吸引学生，好的切入点至关重要。高二学生对什么感兴趣新奇的、身边的、直接关联的。所以依托网络环境下的教学平台，在教学中以师生共同发现问题、提出问题、解决问题为学习主线，应用任务教学法与半成品组装法，让学生处在“做中学、学中思、思中做”的状态中，积极主动地完成知识的建构，达成学习目标。
5、能根据实际需要简单应用CSS。
重点、难点分析
教学重点：
1、掌握JavaScrip代码的应用方式
2、了解CSS样式表的类别，以及不同类别的应用方式
教学难点：
1、了解CSS样式表的类别，以及不同类别的应用方式
课堂教学过程结构设计
教学环节
教师活动
学生活动
设计意图
课前准备
老师准备素材，课件，学习平台
学生预习
掀起你的盖头来
教者： 龚宜成
课题
（章节名称）
动态网页制作专题复习
学科
信息技术
授课年级
高二年级
学期
上
课时数
1
教学方法
任务驱动、启发式
教学内容分析
本文就教科版网络技术应用(选修)第五章动态网页制作展开分析，本章内容课本分了四小节，以“认识动态网页”“理解动态html”“应用html”“asp脚本应用”为主线，这样的布局安排从整体来看似乎是一气呵成，合理到位，真正落实到教学实践中，效果不尽人，每年学业考试时，这块都是学生惧怕的难点之一。这一章内容在测试中，会出现三种类型的操作题和5条左右的选择题，分值达到近20分，所以显得尤其的重要。为了能到达更好的教学效果，在学测复习教学中我立足于教材但不拘泥于教材。我把整章大体分成动静态网页的初识、JavaScript部分学习、css部分的学习。每部分的学习是否吸引学生，好的切入点至关重要。高二学生对什么感兴趣新奇的、身边的、直接关联的。所以依托网络环境下的教学平台，在教学中以师生共同发现问题、提出问题、解决问题为学习主线，应用任务教学法与半成品组装法，让学生处在“做中学、学中思、思中做”的状态中，积极主动地完成知识的建构，达成学习目标。
5、能根据实际需要简单应用CSS。
重点、难点分析
教学重点：
1、掌握JavaScrip代码的应用方式
2、了解CSS样式表的类别，以及不同类别的应用方式
教学难点：
1、了解CSS样式表的类别，以及不同类别的应用方式
课堂教学过程结构设计
教学环节
教师活动
学生活动
设计意图
课前准备
老师准备素材，课件，学习平台
学生预习
掀起你的盖头来
初中八年级信息技术课件制作网页优秀公开课PPT
提高信息素养
培养创新思维
在学习过程中，鼓励学生发挥创意， 自主设计课件，培养其创新思维和解 决问题的能力。
通过学习课件制作，学生将更加熟悉 信息技术在日常学习中的应用，提高 自身的信息素养和信息处理能力。
课程内容
文字编辑与排版
学习文字编辑技巧、字体设置、 段落排版等，提升课件的文字表 现力。
图片与多媒体素材的使用
教授如何选择合适的图片和多媒 体素材，以及如何将其插入课件 中，丰富课件内容。
动画与交互设计
学习添加动画效果、设置超链接 、制作交互式元素等，提升课件 的趣味性和互动性。
课件制作基础知识
介绍课件制作的基本概念、常用 工具和制作流程，为学生后续学 习打下基础。
综ቤተ መጻሕፍቲ ባይዱ实践
组织学生进行小组合作，根据某 一主题自主设计并制作完整的课 件作品，培养其实践能力和团队 协作精神。
初中八年级信息技术课件制作网 页优秀公开课
汇报人：可编辑 2023-12-27
• 课程介绍 • 网页制作基础 • 网页制作进阶 • 优秀网页案例分析 • 学生作品展示与点评 • 课程总结与展望
01
课程介绍
课程目标
掌握课件制作的基本技能
学生将通过本课程学习，掌握使用常 见课件制作工具进行课件制作的基本 技能，包括文字编辑、图片插入、动 画设置等。
02
网页制作基础
HTML基础
HTML标签
包括标题、段落、列表、链接、 图片等常用标签。
HTML文档结构
包括文档类型声明、html标签、 head标签和body标签等。
CSS基础
CSS选择器
包括元素选择器、类选择器和ID选择 器等。
CSS属性
潭州学院网页制作公开课：html图片不规则布局滑动效果制作
css样式 - 选择器的分组
对选择器进行分组，用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 { color: green; }
css样式 - CSS注释语法
CSS注释的开始使用/*,结束使用*/ /* 注释内容 */
/* 文章标题注释 */ h1{color:red;font-size:12px;}
css样式 - CSS 类选择器
在 CSS 中，类选择器以一个点号显示
.center {text-align: center} .str{color:red;font-size:12px;}
h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中 的规则
<h1 class="center">文章的标题</h1> <p class="center">这是段落的标签</p>
课程视频下载地址：/forum-38-1.html
下一期vip零基础报名开始啦
课程周期时间安排：（开课时间12月1日，现在报名有优惠 ！） 学时：2个月每周5节课；学制：一年6期，一年制； 班级时间： 项目实战班：周一至周五，每晚9点-10点正式课程；10点11点课后问题解答 基础班：每周一、三、五基础班； 课前预习 - 正式课程 - 课后作业 vip报名费用： 1280￥ 潭州学院技术总监Arry老师QQ： 910984013
css样式 - 内嵌样式
<!--内嵌样式--> <style type="text/css"> /* .top{width:985px;height:260px;background:#FFCC66;} .center{width:985px;height:1000px;background:#CCCC33;} .center_lianxi{width:985px;height:50px;background:#FF6666;} .center_left{width:700px;height:950px;background:green;float:left;} .center_right{width:280px;height:950px;background:#CC99FF;} .bottom{width:985px;height:100px;background:red;} */ </style>
初中八年级信息技术课件制作网页优秀公开课
布局控制
通过CSS的盒模型、浮动 、定位等技术，可以实现 对页面元素的精确布局控 制。
响应式设计
利用媒体查询等技术，可 以实现页面的响应式设计 ，使得页面在不同设备上 都能良好地显示和使用。
04
JavaScript编程入门
JavaScript基本语法和数据类型
变量和数据类型
控制结构
介绍JavaScript中的变量定义、命名 规则以及基本数据类型（如字符串、 数字、布尔值等）。
测试和发布网站：在完成网站制作后，学生将对 网站进行测试，确保其在不同设备和屏幕尺寸下 表现良好。然后，学生可以将网站发布到互联网 上，与其他人分享自己的作品。
THANKS
感谢观看
`margin`, `padding`等，用于设置元素的外观和布局。
03
样式应用
可以通过内联样式、内部样式表和外部样式表三种方式将CSS样式应用
到HTML文档中。
HTML与CSS结合实现页面效果
结构与样式分离
HTML负责页面结构，CSS 负责页面样式，实现结构 与样式的分离，使得页面 更加清晰和易于维护。
确定网站主题和目标受众：学生将选择一个主题 ，并确定网站的目标受众和功能需求，以此为基 础进行网站规划和设计。
添加内容和样式：学生将为网站添加文本、图片 和其他媒体内容，并使用CSS进行样式调整和优 化，使网站更加美观和易于使用。
使用Bootstrap搭建网站框架：学生将使用 Bootstrap框架搭建网站的基本结构，包括导航栏 、主体内容区域和页脚等部分。
图像格式选择
根据网页需求和图像特点选择合适的图像格式，如JPEG、 PNG、GIF等。
图像优化处理
通过压缩、裁剪、调整色彩和对比度等方式对图像进行优化 ，以减小文件大小和提高加载速度。
潭州学院网页制作公开课：HTML基础知识-用标签和属性让你的网页文字滚动起来
marquee滚动标签 - 属性
width、height 决定滚动文字在页面中的矩形范围大小，width属性用以规定矩形的宽度， height属性规定矩形的高度。
Leabharlann loop滚动文字的滚动次数(缺省是无限循环。参数值可以是任意的正整数， 如果设置参数值为-1或infinite时将无限循环) scrollamount文字滚动的速度 100,50 scrolldelay延时 1000
3.0vip 课程时间安排表
课程周期时间安排： 学时：2个月，每周5节课； 时间：周一至周五，每晚9点-10点正式课程； 10点-11点课后问题解答 课前预习 - 正式课程 - 课后作业
网页制作2.0新课改 - 课程学习大纲 - 01
一. 第一阶段学习目标 - 基础课程
完成简单网页的制作(企业站)
（熟练掌握HTML/css常用标签属性，制作符合W3C标准的页面）
二. 第二阶段学习课程目标 - 高级课程
html5+css3最新技术 常用js，jquery特效打包
HTML基础知识：用标签和属性让你的网页文字滚动起来
潭州学院-网页制作公开课
HTML标签 - marquee滚动标签
<marquee>标签，它是成对出现的标签
首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容
标签的属性主要： behavior属性 参数值为alternate（来回滚动）scroll（单方向循环滚动）、slide只滚动一次 bgcolor 文字滚动范围的背景颜色 direction文字滚动的方向 属性：down、left、right、up分别代表滚动方向向下、向左、向右、向上
潭州学院网页制作公开课：必用的图片的延时加载技术
使用JQuery插件 ，插件名: zyload
三行代码实现：
1.导入JS插件
<scr" src="js/jquery.js"></script> <script type="text/javascript" src="js/zyload.js"></script>
2. 引入 <script type="text/javascript"> var Img = "images/lazyload.gif"; jQuery.noConflict()(function(){jQuery.noConflict()("img").lazyload({pla ceholder:Img,effect:"fadeIn"});}); </script>
三行代码实现图片延时加载技术
潭州学院-网页制作vip课程
实现图片延迟加载技术的应用
图片是在下拉滚动条时加载,这是一个非常不错 的用户体验，同时减少了页面加载的时间了，也 减轻了服务器的压力。
淘宝 京东 to8to（潭州学院指导的经典案例） 图片类网站
zyload 实现图片延迟加载 什么是ImageLazyLoad技术？
在页面上图片比较多的时候，打开一张页面必然引起与 服务器大数据量的交互。尤其是对于高清晰的图片，占 的几M的空间。 ImageLazyLoad技术就是，当前可见界面的图片是加载 进来的，而不可见页面（通过滚动条下拉可见）中的图 片是不加载的，这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
三行代码实现：
1.导入JS插件
<scr" src="js/jquery.js"></script> <script type="text/javascript" src="js/zyload.js"></script>
2. 引入 <script type="text/javascript"> var Img = "images/lazyload.gif"; jQuery.noConflict()(function(){jQuery.noConflict()("img").lazyload({pla ceholder:Img,effect:"fadeIn"});}); </script>
三行代码实现图片延时加载技术
潭州学院-网页制作vip课程
实现图片延迟加载技术的应用
图片是在下拉滚动条时加载,这是一个非常不错 的用户体验，同时减少了页面加载的时间了，也 减轻了服务器的压力。
淘宝 京东 to8to（潭州学院指导的经典案例） 图片类网站
zyload 实现图片延迟加载 什么是ImageLazyLoad技术？
在页面上图片比较多的时候，打开一张页面必然引起与 服务器大数据量的交互。尤其是对于高清晰的图片，占 的几M的空间。 ImageLazyLoad技术就是，当前可见界面的图片是加载 进来的，而不可见页面（通过滚动条下拉可见）中的图 片是不加载的，这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.提高学生分析问题、解决问题的能力
2．锻炼学生的表达能力和协作、沟通能力
3．提高学生的动手实践能力，能运用层制作有趣的拼图
1、培养学生的观察能力及勇于探索、勇于创新的精神
2、培养学生的团队精神
教学重点
与难点
教学重点：层的特点、“拖动层”行为。
教学难点：“拖动层”行为。
教学方法
综合（讲授、启发、引导、演示示范、观察、比较、实践等）
教学资源
多媒体计算机、多媒体教学软件
教学
设计
本节是《网址制作Dreamweaver MX 2004》中层的应用中的内容，是操作实践课。
本节采用情景导学与任务驱动相结合的教学法帮助学生消化吸收新知识，引起学生的学习兴趣，激起学生的求知欲望，发挥学生的主体作用，体现教师的主导作用。通过兴趣与任务使学生学习到相关的计算机基础知识和操作技能，进而培养学生的自学能力与动手实践能力。
（三）任务再分析（学时分配：5min ）
请同学们汇报自己作品的调试成果。
针对调试作品所发现的问题进行再分析。
1.“拖动层”行为。
2.事件。
1、激发学生学习兴趣。
2、导入新课
让学生理解理解掌握层的特点。
通过练习巩固所学知识内容。
让学生理解理解掌握“拖动层”行为以及事件的用法。
教师：帮助学生回顾复习层的特点。
公开课教案
教学科目
网页制作
授课班级
10计4
授课教师
徐彬
授课日期
2011．06．12
课型
任务驱动
授课学时
1课时
节 次
下午第二节
授课地点
图书馆动漫机房
教学内容
有趣的拼图
教学目标
通过讲解、演示、实践，让学生掌握在网页中运用层制作拼图游戏。
知识目标
技能目标
态度目标
通过讲解让学生掌握在网页制作中层的特点，学会添加“拖动层”行为。并且了解相应的事件。
学生：实践，完成练习
教师：巡视、评价、辅导
教师：展评学生操作结果，进行评价
学生：讨论、互评、反馈操作中遇到的问题
教师：总结、拓展
继续完善自己的作品。
【评价与反馈】（学时分配：3min）
1、评价学生完成情况
2、学生反馈在操作过程中遇到的问题。
【Hale Waihona Puke 务小结】（学时分配：2min）1、层的特点
2、“拖动层”事件
3、onLoad事件
学生实践，巩固所学知识内容。
评价学生完成情况，促进学生主动思考、学习，反馈学生学习信息
梳理所学知识、巩固课堂教学内容。
学生：回顾并实践复习已学知识
教师：根据实例，提问诱导，导入课堂任务
学生：观察、讨论、思考
教师：明确学习目标
教师：讲解、示范、演示
学生：观看操作演示、学习领会
学生：实践，完成练习
教师：巡视、评价、辅导
教师：讲解、演示、示范
学生：观察、学习、领会
教学环节与主要内容
具体教
学目标
教学活动
（四）任务再制作（学时分配：10min）
1、层的特点。
2、“拖动层”行为。
3、onLoad事件。
【任务分析与制作】
（一）任务初分析（学时分配：5min）
打开趣味拼图网页，引导学生分析制作此网页所需的技术：
1、网页布局：表格。
2、图片素材的添加：插入图片（拓展）。
3、拼图图片的移动：表格转换为层。
（二）任务初制作（学时分配：15min）
学生制作趣味拼图网页并调试。
教学 过 程 设 计
教学环节与主要内容
具体教
学目标
教学活动
【复习导入】
(一)导入（学时分配：2min）
创设情境，打开“趣味拼图”网页，请同学玩一玩拼图游戏。
(二)复习知识点（学时分配：2min）
1、你觉得我们玩的拼图游戏有什么特点？这种特点是利用了什么技术实现的？
2、拼图游戏利用了层的什么特点？
(三)明确学习目标（学时分配：1min）
2．锻炼学生的表达能力和协作、沟通能力
3．提高学生的动手实践能力，能运用层制作有趣的拼图
1、培养学生的观察能力及勇于探索、勇于创新的精神
2、培养学生的团队精神
教学重点
与难点
教学重点：层的特点、“拖动层”行为。
教学难点：“拖动层”行为。
教学方法
综合（讲授、启发、引导、演示示范、观察、比较、实践等）
教学资源
多媒体计算机、多媒体教学软件
教学
设计
本节是《网址制作Dreamweaver MX 2004》中层的应用中的内容，是操作实践课。
本节采用情景导学与任务驱动相结合的教学法帮助学生消化吸收新知识，引起学生的学习兴趣，激起学生的求知欲望，发挥学生的主体作用，体现教师的主导作用。通过兴趣与任务使学生学习到相关的计算机基础知识和操作技能，进而培养学生的自学能力与动手实践能力。
（三）任务再分析（学时分配：5min ）
请同学们汇报自己作品的调试成果。
针对调试作品所发现的问题进行再分析。
1.“拖动层”行为。
2.事件。
1、激发学生学习兴趣。
2、导入新课
让学生理解理解掌握层的特点。
通过练习巩固所学知识内容。
让学生理解理解掌握“拖动层”行为以及事件的用法。
教师：帮助学生回顾复习层的特点。
公开课教案
教学科目
网页制作
授课班级
10计4
授课教师
徐彬
授课日期
2011．06．12
课型
任务驱动
授课学时
1课时
节 次
下午第二节
授课地点
图书馆动漫机房
教学内容
有趣的拼图
教学目标
通过讲解、演示、实践，让学生掌握在网页中运用层制作拼图游戏。
知识目标
技能目标
态度目标
通过讲解让学生掌握在网页制作中层的特点，学会添加“拖动层”行为。并且了解相应的事件。
学生：实践，完成练习
教师：巡视、评价、辅导
教师：展评学生操作结果，进行评价
学生：讨论、互评、反馈操作中遇到的问题
教师：总结、拓展
继续完善自己的作品。
【评价与反馈】（学时分配：3min）
1、评价学生完成情况
2、学生反馈在操作过程中遇到的问题。
【Hale Waihona Puke 务小结】（学时分配：2min）1、层的特点
2、“拖动层”事件
3、onLoad事件
学生实践，巩固所学知识内容。
评价学生完成情况，促进学生主动思考、学习，反馈学生学习信息
梳理所学知识、巩固课堂教学内容。
学生：回顾并实践复习已学知识
教师：根据实例，提问诱导，导入课堂任务
学生：观察、讨论、思考
教师：明确学习目标
教师：讲解、示范、演示
学生：观看操作演示、学习领会
学生：实践，完成练习
教师：巡视、评价、辅导
教师：讲解、演示、示范
学生：观察、学习、领会
教学环节与主要内容
具体教
学目标
教学活动
（四）任务再制作（学时分配：10min）
1、层的特点。
2、“拖动层”行为。
3、onLoad事件。
【任务分析与制作】
（一）任务初分析（学时分配：5min）
打开趣味拼图网页，引导学生分析制作此网页所需的技术：
1、网页布局：表格。
2、图片素材的添加：插入图片（拓展）。
3、拼图图片的移动：表格转换为层。
（二）任务初制作（学时分配：15min）
学生制作趣味拼图网页并调试。
教学 过 程 设 计
教学环节与主要内容
具体教
学目标
教学活动
【复习导入】
(一)导入（学时分配：2min）
创设情境，打开“趣味拼图”网页，请同学玩一玩拼图游戏。
(二)复习知识点（学时分配：2min）
1、你觉得我们玩的拼图游戏有什么特点？这种特点是利用了什么技术实现的？
2、拼图游戏利用了层的什么特点？
(三)明确学习目标（学时分配：1min）