《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 教师活动：启发诱导，展示实际不同网页配色方案。及时点评，注意：不同应用场合、不同人群。 学生活动：学生分组讨论，交流互动。最后到讲台说思路。 教学意图：通过实际问题的探究，及时巩固学生网页构思的能力。拓展学生的思维空间，培养学生的创新意识和创新能力。
《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 制作一个简单的网页，题材自定，不要复制网上的。 学生活动：学生看书学习，上机操作。 教学意图：培养学生良好的看书习惯，培养自学能力，培养创新精神、增强实践能力、拓展知识结构。 师生交流，学生之间交流。 教学意图：“前事不忘，后事之师”，教师上课也是如此，每一堂课都有得有失，只有及时了解了课堂上的成功和失误之处，才能扬长避短，不断取得新的进步。通过师生之间的交流，教师了解到有哪些教学环节比较新颖，比较科学，学生乐于接受；解决的问题中，有哪些学生比较满意，哪些问题还有更好的解决办法；教师在上课过程中，有哪些言行不得体，还有哪些课堂现象需要教师关注，或需要教师恰当地引导；听听学生的建议，哪些环节还需要优化，怎么设计就比较合理…… 通过这样的课后反思教研，教师会很容易抓住学生的思维导向，在以后的备课中就有的放矢了。通过课后反思教研，教师的上课思路会越来越清晰，课堂会越来越严谨，言行会越来越规范。
《HTML网页设计》教案
