《HTML网页设计》教案
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5+8分钟
变化：
hao123网址之家内容不变
（1）如果hao123网址之家的网站浏览速度不够快？
（2）如果网站里的连接打开后是一些错误连接或者没有品位的站点？
（3）如果网站打开后广告在首页满天飞？
教师活动：师：是否因为hao123网址之家的网页美观、内容丰富、实用就成功了呢？
学生活动：学生积极思考、讨论得出结果。
教学意图：把本节知识纳入学生已有的认识结构中，有利于学生对设计思路的有序储存和转化，培养学生的抽象思维能力。
附加题
课后作业（本周五3、4节前上交）：
1．简述网页、网站和主页的异同。
2．网页标准主要由哪三部分组成？分别解释其含义。
3．简述网站开发的工作流程。
4．常用的网页制作工具有哪些？分别有哪些特点？
通过这样的课后反思教研，教师会很容易抓住学生的思维导向，在以后的备课中就有的放矢了。通过课后反思教研，教师的上课思路会越来越清晰，课堂会越来越严谨，言行会越来越规范。
教学意图：“前事不忘，后事之师”，教师上课也是如此，每一堂课都有得有失，只有及时了解了课堂上的成功和失误之处，才能扬长避短，不断取得新的进步。通过师生之间的交流，教师了解到有哪些教学环节比较新颖，比较科学，学生乐于接受；解决的问题中，有哪些学生比较满意，哪些问题还有更好的解决办法；教师在上课过程中，有哪些言行不得体，还有哪些课堂现象需要教师关注，或需要教师恰当地引导；听听学生的建议，哪些环节还需要优化，怎么设计就比较合理……
（1）HTML概念；
（2）一个HTML的示例。
教师活动：启发诱导、构思、实际操作演示。注意：①配色方案、风格问题；②软件操作的方法。
学生活动：学生讨论，交流互动，发散探究。
教学意图：通过软件实际操作，及时巩固专业技能。拓展学生的思维空间，培养学生的动手能力。
归纳总结：
小结本节课的主要内容、主要思想方法和主要操作技能。
注意：……
教师活动：教师及时引导学生小结。
学生活动：学生及时整理出网页设计原则。
教学意图：学生及时形成能力。
练习一：DREAMWEAVER8
基本操作：
（1）安装与启动；
（2）文档使用；
（3）工作区结构（上）（下）；
（4）菜单概述（上）（下）；
（5）插入栏详解；
（6）面板组。
练习二：操作技能
建立HTML代码文件
1、掌握网页设计原则，引发学习兴趣；
2、掌握DREAMWEAVER操作技能；
3、本节课主要用了转化的思想、理论结合实际的思想。
《HTML网页设计》教案（续页）第5页
教学过程及时间分配
教学内容
（六）
课外作业
5分钟
课后反思
5分钟
教师活动：指导小结，激励评价，概括总结。
学生活动：学生回忆本节内容，小结网页设计思想方法和解决问题的思路。
课外练习：
1、根据自己的兴趣、爱好、特点，构思一个个人网站的首页，并在草稿纸上勾画出来。
2、用DREAMVEAVER制作一个简单的网页，题材自定，不要复制网上的。
学生活动：学生看书学习，上机操作。
教学意图：培养学生良好的看书习惯，培养自学能力，培养创新精神、增强实践能力、拓展知识结构。
师生交流，学生之间交流。
（组织教学贯彻于上课的始终）
在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作，上网展示在大家面前的是丰富多彩的网页，比如……
注意：
（1）网站与网页的概述
（2）网页的基本元素
（3）网页布局
（4）配色原则
（5）HTML与渲染
教师活动：利用多媒体展示实际网页，引导学生思考。
教学意图：创设问题情境，激发学习动机。
《HTML网页设计》教案
章节课题
第一章HTML网页设计入门
审阅者签名
授课日期
2007年9月4日第一周星期（二）第1～2节
授课时数
2学时
教学目的
知识目标：了解HTML的发展历史，掌握网页设计原则。学会操作DREAMWEAVER 8，学会结合Dreamweaver辅助编写HTML代码。
能力目标：培养学生们软件操作的技能、协作学习的能力以及应用所学知识解决实际问题的能力。
教学意图：加深学生对网页设计原则的理解，加强学生应用专业知识的兴趣和能力的培养。
例2：网页色彩的搭配问题探究：
（1）IBM（蓝色巨人）网站
（2）爱情交友网
例3：网页风格的设计问题探究：
（1）儿童网不同网页配色方案。及时点评，注意：不同应用场合、不同人群。
学生活动：学生分组讨论，交流互动。最后到讲台说思路。
品德目标：引发学生学习制作网页知识的兴趣，发展创新精神，培养实事求是，理论与实际相结合的科学态度与科学精神。通过师生、生生互动，增进增强学生的自主性和合作精神。
教学方法
多媒体教室，采用“演示式”教学法。
教学重点
掌握网页设计原则，引发学习兴趣。
教学难点
1.DREAMWEAVER 8基本操作技能；
2.结合Dreamweaver辅助编写HTML代码。
教学意图：通过实际问题的探究，及时巩固学生网页构思的能力。拓展学生的思维空间，培养学生的创新意识和创新能力。
《HTML网页设计》教案（续页）第4页
教学过程及时间分配
教学内容
（三）小结
8分钟
（四）
操作技能
练习一
练习二
10+5分钟
（五）
归纳总结
8分钟
网页设计原则是：
1.结构性；2.通用性；3.差异性；4.习惯性；5.适用性；6.反复性；
教具、挂图
见课前准备工作
作业题号
见教案：附加题
教学过程及时间分配
主 要 教 学 内 容 及 步 骤
课前准备工作
图样
图1—1：腾迅QQ网站首页；图1—2：网址之家首页截图；
图1—3：IBM蓝色巨人网站截图；图1—4：爱情交友网站首页截图；
图1—5：儿童网站首页截图；图1—6：新浪网站首页截图。
演示素材
1．《第一章HTML网页设计入门》PPT演示文稿，13页；
2．HAO123网站代码，1套。
软件
DREAMWEAVER 8绿色企业版，1套。
《HTML网页设计》教案（续页）第2页
教学过程及时间分配
教学内容
组织教学
3分钟
（一）
创设情境，引入课题
10分钟
（二）
实例探究
例1
5+8分钟
师生致礼、点名、检查学生准备情况、使学生集中注意力上课。
例1．中国最成功的个人网站--hao123网址之家，在经过大家羡慕模仿复制以后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复制其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面，大家都已经认为了他一点技术含量没有，但是为什么他就这样一直做的很好，而别的网站倒的倒，改行的改行，那么“hao123网址之家”他到底好在哪里？
教师活动：启发诱导，师生互动，把实际问题转化为专业问题。
学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。
教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应用专业知识的意识。
《HTML网页设计》教案（续页）第3页
教学过程及时间分配
教学内容
条件变化
5+5分钟
实例讲解
例2、例3
变化：
hao123网址之家内容不变
（1）如果hao123网址之家的网站浏览速度不够快？
（2）如果网站里的连接打开后是一些错误连接或者没有品位的站点？
（3）如果网站打开后广告在首页满天飞？
教师活动：师：是否因为hao123网址之家的网页美观、内容丰富、实用就成功了呢？
学生活动：学生积极思考、讨论得出结果。
教学意图：把本节知识纳入学生已有的认识结构中，有利于学生对设计思路的有序储存和转化，培养学生的抽象思维能力。
附加题
课后作业（本周五3、4节前上交）：
1．简述网页、网站和主页的异同。
2．网页标准主要由哪三部分组成？分别解释其含义。
3．简述网站开发的工作流程。
4．常用的网页制作工具有哪些？分别有哪些特点？
通过这样的课后反思教研，教师会很容易抓住学生的思维导向，在以后的备课中就有的放矢了。通过课后反思教研，教师的上课思路会越来越清晰，课堂会越来越严谨，言行会越来越规范。
教学意图：“前事不忘，后事之师”，教师上课也是如此，每一堂课都有得有失，只有及时了解了课堂上的成功和失误之处，才能扬长避短，不断取得新的进步。通过师生之间的交流，教师了解到有哪些教学环节比较新颖，比较科学，学生乐于接受；解决的问题中，有哪些学生比较满意，哪些问题还有更好的解决办法；教师在上课过程中，有哪些言行不得体，还有哪些课堂现象需要教师关注，或需要教师恰当地引导；听听学生的建议，哪些环节还需要优化，怎么设计就比较合理……
（1）HTML概念；
（2）一个HTML的示例。
教师活动：启发诱导、构思、实际操作演示。注意：①配色方案、风格问题；②软件操作的方法。
学生活动：学生讨论，交流互动，发散探究。
教学意图：通过软件实际操作，及时巩固专业技能。拓展学生的思维空间，培养学生的动手能力。
归纳总结：
小结本节课的主要内容、主要思想方法和主要操作技能。
注意：……
教师活动：教师及时引导学生小结。
学生活动：学生及时整理出网页设计原则。
教学意图：学生及时形成能力。
练习一：DREAMWEAVER8
基本操作：
（1）安装与启动；
（2）文档使用；
（3）工作区结构（上）（下）；
（4）菜单概述（上）（下）；
（5）插入栏详解；
（6）面板组。
练习二：操作技能
建立HTML代码文件
1、掌握网页设计原则，引发学习兴趣；
2、掌握DREAMWEAVER操作技能；
3、本节课主要用了转化的思想、理论结合实际的思想。
《HTML网页设计》教案（续页）第5页
教学过程及时间分配
教学内容
（六）
课外作业
5分钟
课后反思
5分钟
教师活动：指导小结，激励评价，概括总结。
学生活动：学生回忆本节内容，小结网页设计思想方法和解决问题的思路。
课外练习：
1、根据自己的兴趣、爱好、特点，构思一个个人网站的首页，并在草稿纸上勾画出来。
2、用DREAMVEAVER制作一个简单的网页，题材自定，不要复制网上的。
学生活动：学生看书学习，上机操作。
教学意图：培养学生良好的看书习惯，培养自学能力，培养创新精神、增强实践能力、拓展知识结构。
师生交流，学生之间交流。
（组织教学贯彻于上课的始终）
在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作，上网展示在大家面前的是丰富多彩的网页，比如……
注意：
（1）网站与网页的概述
（2）网页的基本元素
（3）网页布局
（4）配色原则
（5）HTML与渲染
教师活动：利用多媒体展示实际网页，引导学生思考。
教学意图：创设问题情境，激发学习动机。
《HTML网页设计》教案
章节课题
第一章HTML网页设计入门
审阅者签名
授课日期
2007年9月4日第一周星期（二）第1～2节
授课时数
2学时
教学目的
知识目标：了解HTML的发展历史，掌握网页设计原则。学会操作DREAMWEAVER 8，学会结合Dreamweaver辅助编写HTML代码。
能力目标：培养学生们软件操作的技能、协作学习的能力以及应用所学知识解决实际问题的能力。
教学意图：加深学生对网页设计原则的理解，加强学生应用专业知识的兴趣和能力的培养。
例2：网页色彩的搭配问题探究：
（1）IBM（蓝色巨人）网站
（2）爱情交友网
例3：网页风格的设计问题探究：
（1）儿童网不同网页配色方案。及时点评，注意：不同应用场合、不同人群。
学生活动：学生分组讨论，交流互动。最后到讲台说思路。
品德目标：引发学生学习制作网页知识的兴趣，发展创新精神，培养实事求是，理论与实际相结合的科学态度与科学精神。通过师生、生生互动，增进增强学生的自主性和合作精神。
教学方法
多媒体教室，采用“演示式”教学法。
教学重点
掌握网页设计原则，引发学习兴趣。
教学难点
1.DREAMWEAVER 8基本操作技能；
2.结合Dreamweaver辅助编写HTML代码。
教学意图：通过实际问题的探究，及时巩固学生网页构思的能力。拓展学生的思维空间，培养学生的创新意识和创新能力。
《HTML网页设计》教案（续页）第4页
教学过程及时间分配
教学内容
（三）小结
8分钟
（四）
操作技能
练习一
练习二
10+5分钟
（五）
归纳总结
8分钟
网页设计原则是：
1.结构性；2.通用性；3.差异性；4.习惯性；5.适用性；6.反复性；
教具、挂图
见课前准备工作
作业题号
见教案：附加题
教学过程及时间分配
主 要 教 学 内 容 及 步 骤
课前准备工作
图样
图1—1：腾迅QQ网站首页；图1—2：网址之家首页截图；
图1—3：IBM蓝色巨人网站截图；图1—4：爱情交友网站首页截图；
图1—5：儿童网站首页截图；图1—6：新浪网站首页截图。
演示素材
1．《第一章HTML网页设计入门》PPT演示文稿，13页；
2．HAO123网站代码，1套。
软件
DREAMWEAVER 8绿色企业版，1套。
《HTML网页设计》教案（续页）第2页
教学过程及时间分配
教学内容
组织教学
3分钟
（一）
创设情境，引入课题
10分钟
（二）
实例探究
例1
5+8分钟
师生致礼、点名、检查学生准备情况、使学生集中注意力上课。
例1．中国最成功的个人网站--hao123网址之家，在经过大家羡慕模仿复制以后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复制其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面，大家都已经认为了他一点技术含量没有，但是为什么他就这样一直做的很好，而别的网站倒的倒，改行的改行，那么“hao123网址之家”他到底好在哪里？
教师活动：启发诱导，师生互动，把实际问题转化为专业问题。
学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。
教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应用专业知识的意识。
《HTML网页设计》教案（续页）第3页
教学过程及时间分配
教学内容
条件变化
5+5分钟
实例讲解
例2、例3