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