HTML网页设计教案.doc

《HTML网页设计》教案 章节课题 第一章 HTML网页设计入门 审阅者签名 授课日期 2007年9月4日 第一周 星期（二） 第1～2节 授课时数 2学时 教学目的 知识目标：了解HTML的发展历史，掌握网页设计原则。学会操作DREAMWEAVER 8 ，学会结合 Dreamweaver 辅助编写HTML代码。 能力目标：培养学生们软件操作的技能、协作学习的能力以及应用所学知识解决实际问题的能力。 品德目标：引发学生学习制作网页知识的兴趣，发展创新精神，培养实事求是，理论与实际相结合的科学态度与科学精神。通过师生、生生互动，增进增强学生的自主性和合作精神。 教学方法 多媒体教室，采用“演示式”教学法。 教学重点 掌握网页设计原则，引发学习兴趣。 教学难点 DREAMWEAVER 8 基本操作技能； 结合 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分钟 师生致礼、点名、检查学生准备情况、使学生集中注意力上课。 （组织教学贯彻于上课的始终） 在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作，上网展示在大家面前的是丰富多彩的网页，比如…… 注意： 网站与网页的概述 网页的基本元素 网页布局 配色原则 HTML与渲染 教师活动：利用多媒体展示实际网页，引导学生思考。 教学意图：创设问题情境，激发学习动机。 例1．中国最成功的个人网站--hao123网址之家，在经过大家羡慕模仿复制以后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复制其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面，大家都已经认为了他一点技术含量没有，但是为什么他就这样一直做的很好，而别的网站倒的倒，改行的改行，那么“hao123网址之家”他到底好在哪里？ 教师活动：启发诱导，师生互动，把实际问题转化为专业问题。 学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。 教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应用专业知识的意识。 《HTML网页设计》教案（续页）　　 第 3 页 教学过程及时间分配 教学内容 条件变化 5+5分钟 实例讲解 例2、例3 5+8分钟 变化： hao123网址之家内容不变 （1）如果hao123网址之家的网站浏览速度不够快？ （2）如果网站里的连接打开后是一些错误连接或者没有品位的站点？ （3）如果网站打开后广告在首页满天飞？ 教师活动：师：是否因为hao123网址之家的网页美观、内容丰富、实用就成功了呢？ 学生活动：学生积极思考、讨论得出结果。 教学意图：加深学生对网页设计原则的理解，加强学生应用专业知识的兴趣和能力的培养。 例2：网页色彩的搭配问题探究： （1）IBM（蓝色巨人）网站 （2）爱情交友网 例 3：网页风格的设计问题探究： （1）儿童网站 （2）新浪网站 教师活动：启发诱导，展示实际不同网页配色方案。及时点评，注意：不同应用场合、不同人群。 学生活动：学生分组讨论，交流互动。最后到讲台说思路。 教学意图：通过实际问题的探究，及时巩固学生网页构思的能力。拓展学生的思维空间，培养学生的创新意识和创新能力。 《HTML网页设计》教案（续页）　　 第 4 页 教学过程及时间分配 教学内容 （三）小结 8分钟 （四） 操作技能 练习一 练习二 10+5分钟 （五） 归纳总结 8分钟 网页设计原则是： 1.结构性； 2.通用性； 3.差异性； 4.习惯性； 5.适用性； 6.反复性； 注意：…… 教师活动：教师及时引导学生小结。 学生活动：学生