网站设计电子教案1.docx

网站设计电子教案1.docx

《网站设计电子教案1.docx》由会员分享，可在线阅读，更多相关《网站设计电子教案1.docx（11页珍藏版）》请在冰豆网上搜索。

网站设计电子教案1

1.1课堂任务1什么是网页和网站

课程名称：

认识网页和网站

课时数：

1

教学目标：

知识与技能：

了解网页和网站的概念和关系。

过程与方法：

掌握观察网页页面基本结构的方法

掌握观察网页页面组成元素类型的方法；

掌握绘制网站结构图的方法；

情感与价值观：

培养学生学习网页的兴趣和团结互助的精神。

教学重点：

观察网页页面的基本结构、网页页面组成元素的类型、绘制网站结构图。

教学难点：

绘制网站结构图。

教法：

任务驱动法

学法：

阅读，记录要点。

课前准备：

第一章第一节素材和实例。

教学过程设计：

（一）导入设计：

打开并展示几个常用网站（比如：

**的博客、网易、校园网、论坛、淘宝网等），吸引学生的注意力，同时说明网络与生活的密切关系。

信息在网络上传播和表达，往往是通过网页这个载体。

我们这门课程学的是如何制作和美化网站。

希望通过三个学期的努力，我们同学中的大部分人，可以制作出具有一定功能的漂亮的网站。

到时候，你可以帮你邻居家的叔叔阿姨制作他们公司的企业网站，也可以设计一个属于自己的个性网站，把它挂到自己申请的空间上，让你的亲朋好友来访问。

这次课我们先来认识网页和网站。

（二）新课讲解设计：

（1）请学生带着以下问题阅读P1～2知识预读1，问题如下：

A.什么是网页？

B.什么是网站？

C.什么是网站首页，一般首页文件名怎么取？

D.网页有哪些分类？

如何区分不同类别的网页。

E.根据网站内容的不同，网站有哪些分类？

（2）教师提问，请学生一一回答以上问题。

期间对回答问题的同学要多多表扬，如“你真棒”。

增强学生对教师的亲和力。

（3）教师在学生回答问题的同时，总结评价并补充相关要点。

（4）学生自学教材第3页至第4页的内容，由学生分析中国奥委会的官方网站（）的基本结构。

（5）教师提问，并总结补充。

（6）教师讲解分析网页组成元素的类型，（详见教材第4页至第5页的内容）。

（7）学生完成任务一对照练习第5、6两题。

个别点名回答，检验教学成果。

（8）教师演示如何绘制网站结构图，（详见教材第5页至第6页的内容）。

操作要点及注意事项如下：

●先理解一级页面和二级页面的概念；

●根据网页导航，分析一级页面，二级页面。

●最后绘制网站结构图。

（9）学生完成任务一对照练习第7、8两题。

个别点名回答，检验教学成果。

（三）小结和作业：

小结：

（1）什么是网页和网站

（2）网页页面的基本结构

（3）网页页面组成元素的类型

（4）网站结构图的绘制

作业：

填写《任务评价表》并上交

1.1课堂任务2认识常用的网页制作软件

课程名称：

认识常用的网页制作软件

课时数：

1

教学目标：

知识与技能：

了解常用的网页制作软件。

过程与方法：

掌握获取、安装网页制作软件；

掌握常用网页制作软件的启动和退出。

情感与价值观：

培养学生学习网页的兴趣和团结互助的精神。

教学重点：

网页制作软件的启动和退出。

教学难点：

网页制作软件的获取与安装。

教法：

任务驱动法、演示法

学法：

阅读，记录要点，动手操作

课前准备：

第一章第一节素材和实例。

教学过程设计：

（一）导入设计：

请学生带着任务二对照练习2、3两题，阅读P8～9知识预读2。

请学生一一回答以上问题。

教师总结评价并补充相关要点。

（二）新课讲解设计：

（1）教师提出新的问题：

如何获取与安装这些网页制作软件

（2）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。

（3）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。

（4）让学生自主操作练习，获取与安装已有的网页制作软件。

说明：

没有网络支持条件的，可以播放视频文件“认识常用的网页制作软件.wmv”。

（5）请学生回答任务二对照练习第1题。

（6）教师再次提出问题：

如何启动和退出这些网页制作软件

（7）让学生上台完成这些问题

（8）教师总结并演示网页制作软件的启动和退出，（详见教材第10页的内容）。

（9）由学生完成任务二对照练习第4，5题。

（10）教师提出问题：

a、除了书上介绍的网页制作软件，还有哪些网页制作软件？

b、这些网页制作软件有什么区别，各有哪些特点？

（11）学生在网上搜索查找问题答案。

（三）小结和作业：

小结：

（1）认识常用的网页制作软件

（2）网页制作软件的获取方法及安装

（3）常用网页制作软件的启动与退出

作业：

（1）填写《任务评价表》并上交

（2）自学《知识拓展：

什么是WWW服务》。

课堂任务认识常用的网页制作软件

课程名称：

认识常用的网页制作软件

课时数：

1

教学目标：

知识目标：

了解有哪些网页制作软件，各有哪些功能。

技能目标：

掌握获取、安装网页制作软件的技能；

掌握各网页制作软件启动和退出的操作。

情感目标：

培养学生学习网页的兴趣和团结互助的精神。

教学重点：

各网页制作软件的安装、启动和退出。

教学难点：

各网页制作软件的获取

教法：

任务引领、操作演示

学法：

记录关键步骤，积极动手练习。

课前准备：

第一章第一节素材和实例，视频教程：

认识常用的网页制作软件.wmv。

教学过程设计：

（一）导入设计：

提问复习上节课的内容，引出问题：

大家都知道有哪些网页制作软件？

由学生回答并解释

这次课我们来认识并了解一些常用的网页制作软件。

（二）新课讲解设计：

（1）请学生带着任务二对照练习2、3两题，阅读P8～9知识预读2；

（2）请学生一一回答以上问题。

（3）教师总结评价并补充相关要点。

（4）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。

（5）学生回答任务二对照练习第1题。

（6）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。

（7）请学生将已有软件安装起来。

说明：

没有网络支持条件的，可以播放视频文件认识常用的网页制作软件.wmv。

（8）教师演示网页制作软件的启动和退出，（详见教材第10页的内容）。

（9）由学生完成任务二对照练习第4题。

（三）小结和作业：

小结：

（1）了解有哪些网页制作软件，各有哪些功能

（2）学会获取、安装网页制作软件

（3）学会各软件的启动与退出

作业：

（1）填写《任务评价表》并上交

（2）对照练习第5题

1.2课堂任务1我的第一个网页

课程名称：

HTML语言

课时数：

2

教学目标：

知识与技能：

了解HTML相关概念。

过程与方法：

掌握网页文件中基本的HTML标记；

掌握使用记事本编写网页；

情感与价值观：

激发学生学习网页的兴趣，主动思考问题和解决问题的习惯。

教学重点：

熟悉HTML标记，使用记事本编写网页。

教学难点：

使用记事本编写网页。

教法：

任务驱动法

学法：

阅读，记录要点，动手操作。

课前准备：

第一章第二节素材和实例。

视频教程：

用记事本编写网页.wmv

教学过程设计：

（二）导入设计：

[分析前一次上交的任务评价表总结出来的问题，有针对性的做知识补救。

]

WWW服务中的网页要让使用不同计算机和操作系统的人们都能浏览，就必须有一套统一的编写标准。

HTML就是一套用于统一网页规范的语言。

只有采用HTML制作的网页，浏览器才能正确地阅读和运行。

打开一个网页（比如中国奥委会的官方网站），通过执行“查看”菜单下的“源文件”命令，查看到这个网页的源代码文件。

这上面的代码就是HTML语言编写的。

那么这些代码分别是什么意思，起到什么作用呢？

这就是今天我们要来学习的。

（二）新课讲解设计：

（1）请学生带着以下问题阅读P11的知识预读1，问题如下：

A.什么是HTML？

B.HTML语言编写网页有几种方法，分别使用什么软件作为工具？

C.什么是XML？

D.什么是XHTML？

XHTML是基于什么的标记语言？

（2）请学生一一回答以上问题。

（3）教师总结评价并补充相关要点。

（4）了解任务目标。

（5）教师演示利用记事本编写网页代码，（详见教材第13页至第14页的内容）。

操作要点及注意事项如下：

A.<>内的标记符号（包括<>）必须在英文半角状态下输入。

B.文件保存时，请注意一定要将“保存类型”改为“所有文件”，扩展名必须为html或者htm。

（6）学生完成相同操作。

可参考视频文件用记事本编写网页.wmv。

（7）教师演示使用IE浏览器查看网页效果，（详见教材第14页的内容）。

（8）教师演示分析HTML文档的基本格式，（详见教材第14页至第15页的内容）。

（9）请学生归纳组成网页基本结构的HTML语言标记，完成任务一对照练习第3题。

（10）教师演示分析网页中的标记，（详见教材第15页至第16页的内容）。

（11）请学生一一回答任务一对照练习第1、2、4题。

教师总结评价并补充。

（12）请学生完成任务一对照练习第5题，并上传作业。

教师巡逻并收集问题。

（13）教师针对学生作品评价，并补充学生操作时需解释的问题。

（三）小结和作业：

小结：

（5）什么是HTML

（6）HTML语言的基本结构

（7）记事本编写网页的步骤

作业：

填写《任务评价表》并上交

1.2课堂任务2跑马灯效果

课程名称：

跑马灯效果

课时数：

2

教学目标：

知识与技能：

了解HTML相关概念。

过程与方法：

掌握记事本编写网页方法；

掌握编写简单的跑马灯效果的代码；

掌握在HTML文件中插入代码的方法。

情感与价值观：

激发学生学习网页的兴趣，培养学生乐于动手实践的习惯。

教学重点：

编写跑马灯效果的代码。

教学难点：

编写跑马灯效果的代码。

教法：

任务驱动法、演示法

学法：

观察、记录、动手操作

课前准备：

第一章第二节素材和实例。

视频教程：

默认的跑马灯效果.wmv，有属性参数的跑马灯效果.wmv。

教学过程设计：

（二）导入设计：

教师演示几个跑马灯效果实例，让学生从视觉感观上对跑马灯有一个了解。

（二）新课讲解设计：

（1）请学生打开“素材与实例/第一章/第二节/课堂任务2/marquee1.html”，观察跑马灯效果；

（2）请学生查看该文件的源代码，分析回答滚动文字前后的HTML标记。

（3）教师补充相关要点并总结Marquee的基本语法。

（4）教师演示制作默认的跑马灯效果，（详见教材第18页的内容）。

操作要点及注意事项如下：

在已有的代码上插入对称标记的时候，要注意标记的嵌套，不要使标记交叉而导致文件出错。

（5）学生完成相同操作。

可参考视频文件默认的跑马灯效果.wmv。

（6）教师演示有属性参数的跑马灯效果的网页成品，激发学生学习积极性。

（7）教师演示制作有属性参数的跑马灯效果，（详见教材第18页至第19页的内容）。

（8）学生完成相同操作。

可参考视频文件有属性参数的跑马灯效果.wmv。

（9）教师介绍Marquee参数属性表，（详见教材第19页的内容）。

（10）由学生完成任务二对照练习1、2两题，并上传作业。

教师巡逻指导。

（11）教师选择个别学生作品做点评，并补充解释学生操作时遇到的问题。

（三）小结和作业：

小结：

（4）什么是跑马灯效果

（5）Marquee的基本语法

（6）带属性参数的跑马灯效果

作业：

（3）填写《任务评价表》并上交

（4）完成本章习题。