HTML网页设计教案

1、章节课题第一章HTML网页设计入门审阅者签名授课日期9月4日第一周星期（二）第12节授课时数2学时教学目的知识目标：了解 HTML的发展历史，掌握网页设计原则。学会操作DREAMWEA VER 8，学会结合 Dreamweaver辅助编写 HTML代码。能力目标：培养学生们软件操作的技能、协作学习的能力以及应用所学知识解决实际问题的能 力。品德目标：引发学生学习制作网页知识的兴趣，发展创新精神，培养实事求是，理论与实际相 结合的科学态度与科学精神。通过师生、生生互动，增进增强学生的自主性和合作精神。教学方法多媒体教室，采用“演示式”教学法。教学重点掌握网页设计原则，引发学习兴趣。教学难点1.

2、DREAMWEAVE基本操作技能；2. 结合Dreamweaver辅助编写HTMI代码。教具、挂图见课前准备工作作业题号见教案：附加题教学过程及时间分配主要教学内容及步骤课 刖 准 备 工 作图 样图1 1:腾迅QQ网站首页；图1 2：网址之家首页截图；图1 3： IBM蓝色巨人网站截图；图1 4:爱情交友网站首页截图；图1 5:儿童网站首页截图；图1 6:新浪网站首页截图。演 示 素 材1 第一章HTML网页设计入门PPT演示文稿，13页； 2. HAO123网站代码，1套。软件DREAMWEA VER 8绿色企业版，1套。列1号 共5页HTML网页设计教案 HTML网页设计教案（续页）第#

3、页教学过程及 时间分配 组织教学 3分钟创设情境, 引入课题10分钟在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作,上网展示在大家面前的是丰富多彩的网页，比如(1)网站与网页的概述网页的基本元素*一込 也肿鶴XMM- . UO .* !-IMV . -MH .rM i m i iu- a n * c，rv la hIm i i iu= -u nfR IM I M- I F? I M Vi M m -III U I fel I1Y. I 9- II M Sflm亦 a tn! | i HkA 列* uJl!* I I im h中 liiET. 响 JIkMME -kjA tt

4、d(3)网页布局(4)配色原则（5）教师活动:HTML与渲染：熒闘利用多媒体展示实际网页，引导学生思考。 教学意图：创设问题情境，激发学习动机。图1- 1教学内容师生致礼、点名、检查学生准备情况、使学生集中注意力上课。 （组织教学贯彻于上课的始终）实例探究例15+8分钟例1 中国最成功的个人网站-hao123网址之家，在经过大家羡慕模仿复制以 后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复制 其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面， 大家都已经认为了他一点技术含量没有

5、，但是为什么他就这样一直做的很好，而 别的网站倒的倒，改行的改行，那么“ hao123网址之家”他到底好在哪里？ 教师活动：启发诱导，师生互动，把实际问题转化为专业问题。学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应 用专业知识的意识。豊秦 4JAM14Vm A- 站尤 独II 冃科 H S3AMAjen i：n:锹並审 *1手*| Tip Mt IEtKHLQQTtJMjff欢冋1百 *t*ip8TV应舟下itatrwsrs屮BE理而刚m m P!第平丽A PL PI中曲術辽剛ai；*+ia上再捺鎂厂 *HK

6、QE&車也裤上IWI中華期木平用电由丽文韭小说中憩祸昭回人WWW虽咯明星忑 FTfti欢:W卿JOT时挖帕龙号耳糧车冏EftErSUT下酸百歴空侦祖搆賀岐厅丽1丄窗巫巴巴hiBA旳交iffl就鬱祸fi宝阳刊几世乐黑:卞足球些当冏上两Mt屮m万丽捋面盘irXiffltiStr手埶鶴阳下戟刖业珏忧衽址81 GM乐宵tlfcTgJIt 生花H &T 硏 “I.I. -JlElS图1- 2 HTML网页设计教案（续页）第7页教学过程及 时间分配 条件变化5+5分钟教学内容变化:hao123网址之家内容不变（1）如果hao123网址之家的网站浏览速度不够快？（2）如果网站里的连接打开后是一些错误连接或者

7、没有品位的站点？（3）如果网站打开后广告在首页满天飞？教师活动：师：是否因为hao123网址之家的网页美观、内容丰富、实用就成 功了呢？学生活动：学生积极思考、讨论得出结果教学意图：加深学生对网页设计原则的理解，加强学生应用专业知识的兴趣和能力的培养。实例讲解 例2、例35+8分钟例2:网页色彩的搭配问题探究:（1）IBM （蓝色巨人）网站（2）爱情交友网图1- 3例3:网页风格的设计问题探究:（1）儿童网站（2）新浪网站图1- 4图1- 5图1- 6教师活动：启发诱导，展示实际不同网页配色方案。及时点评，注意：不同 应用场合、不同人群。学生活动：学生分组讨论，交流互动。最后到讲台说思路。教学

8、意图：通过实际问题的探究，及时巩固学生网页构思的能力。拓展学生 的思维空间，培养学生的创新意识和创新能力。教学过程及 时间分配教学内容(三)小结网页设计原则是：8分钟1结构性；2.通用性；3差异性；4.习惯性；5适用性；6.反复性；、亠注意：教师活动：教师及时引导学生小结。学生活动：学生及时整理出网页设计原则。 教学意图：学生及时形成能力。(四)练习一：DREAMWEAVER8操作技能基本操作：练习一(1)安装与启动；练习二(2)文档使用；10+5分钟(3) 工作区结构(上)(下)；(4) 菜单概述(上)(下)；(5) 插入栏详解；(6) 面板组。练习二：操作技能建立HTML代码文件(1) H

9、TML 概念；(2) 一个HTML的示例。教师活动：启发诱导、构思、实际操作演示。注意：配色方案、风格问题； 软件操作的方法。学生活动：学生讨论，父流互动，发散探究。教学意图：通过软件实际操作，及时巩固专业技能。拓展学生的思维空间， 培养学生的动手能力。(五)归纳总结：归纳总结小结本节课的主要内容、主要思想方法和主要操作技能。8分钟1、掌握网页设计原则，引发学习兴趣；2、掌握DREAMWEAVER操作技能；3、本节课主要用了转化的思想、理论结合实际的思想。教学过程及时间分配教学内容教师活动：指导小结，激励评价，概括总结。学生活动：学生回忆本节内容，小结网页设计思想方法和解决问题的思路。教学意图

10、：把本节知识纳入学生已有的认识结构中，有利于学生对设计思路 的有序储存和转化，培养学生的抽象思维能力。（六） 课外作业 5分钟附加题课后作业（本周五3、4节前上交）：1. 简述网页、网站和主页的异同。2网页标准主要由哪三部分组成？分别解释其含义。3. 简述网站开发的工作流程。4. 常用的网页制作工具有哪些？分别有哪些特点？ 课外练习：1、根据自己的兴趣、爱好、特点，构思一个个人网站的首页，并在草稿纸上 勾画出来。2、用DREAMVEAVER制作一个简单的网页，题材自定，不要复制网上的 学生活动：学生看书学习，上机操作。教学意图：培养学生良好的看书习惯，培养自学能力，培养创新精神、增强 实践能力、拓展知识结构。课后反思5分钟师生交流，学生之间交流。教学意图：“前事不忘，后事之师”，教师上课也是如此，每一堂课都有得有 失，只有及时了解了课堂上的成功和失误之处，才能扬长避短，不断取得新的进 步。通过师生之间的交流，教师了解到有哪些教学环节比较新颖，比较科学，学 生乐于接受；解决的问题中，有哪些学生比较满意，哪些问题还有更