网站设计电子教案1.docx

1、网站设计电子教案11.1 课堂任务1 什么是网页和网站课程名称：认识网页和网站课时数：1教学目标：知识与技能：了解网页和网站的概念和关系。过程与方法：掌握观察网页页面基本结构的方法掌握观察网页页面组成元素类型的方法；掌握绘制网站结构图的方法；情感与价值观：培养学生学习网页的兴趣和团结互助的精神。教学重点：观察网页页面的基本结构、网页页面组成元素的类型、绘制网站结构图。教学难点：绘制网站结构图。教法：任务驱动法学法：阅读，记录要点。课前准备：第一章第一节素材和实例。教学过程设计：（一） 导入设计：打开并展示几个常用网站（比如：*的博客、网易、校园网、论坛、淘宝网等），吸引学生的注意力，同时说明网

2、络与生活的密切关系。信息在网络上传播和表达，往往是通过网页这个载体。我们这门课程学的是如何制作和美化网站。希望通过三个学期的努力，我们同学中的大部分人，可以制作出具有一定功能的漂亮的网站。到时候，你可以帮你邻居家的叔叔阿姨制作他们公司的企业网站，也可以设计一个属于自己的个性网站，把它挂到自己申请的空间上，让你的亲朋好友来访问。这次课我们先来认识网页和网站。（二）新课讲解设计：（1）请学生带着以下问题阅读P12知识预读1，问题如下：A.什么是网页？B.什么是网站？C. 什么是网站首页，一般首页文件名怎么取？D. 网页有哪些分类？如何区分不同类别的网页。E. 根据网站内容的不同，网站有哪些分类？

3、（2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。（3）教师在学生回答问题的同时，总结评价并补充相关要点。（4）学生自学教材第3页至第4页的内容，由学生分析中国奥委会的官方网站（）的基本结构。（5）教师提问，并总结补充。（6）教师讲解分析网页组成元素的类型，（详见教材第4页至第5页的内容）。（7）学生完成任务一对照练习第5、6两题。个别点名回答，检验教学成果。（8）教师演示如何绘制网站结构图，（详见教材第5页至第6页的内容）。操作要点及注意事项如下： 先理解一级页面和二级页面的概念； 根据网页导航，分析一级页面，二级页面。 最后绘制网

4、站结构图。（9）学生完成任务一对照练习第7、8两题。个别点名回答，检验教学成果。（三）小结和作业：小结：（1） 什么是网页和网站（2） 网页页面的基本结构（3） 网页页面组成元素的类型（4） 网站结构图的绘制作业：填写任务评价表并上交1.1 课堂任务2 认识常用的网页制作软件课程名称：认识常用的网页制作软件课时数：1教学目标：知识与技能：了解常用的网页制作软件。过程与方法：掌握获取、安装网页制作软件；掌握常用网页制作软件的启动和退出。情感与价值观：培养学生学习网页的兴趣和团结互助的精神。教学重点：网页制作软件的启动和退出。教学难点：网页制作软件的获取与安装。教法：任务驱动法、演示法学法：阅读，

5、记录要点，动手操作课前准备：第一章第一节素材和实例。教学过程设计：（一） 导入设计：请学生带着任务二对照练习2、3两题，阅读P89知识预读2。请学生一一回答以上问题。教师总结评价并补充相关要点。（二）新课讲解设计：（1）教师提出新的问题：如何获取与安装这些网页制作软件（2）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。（3）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。（4）让学生自主操作练习，获取与安装已有的网页制作软件。说明：没有网络支持条件的，可以播放视频文件“认识常用的网页制作软件.wmv”。（5）请学生回答任务二对照练习第1题。（6

6、）教师再次提出问题：如何启动和退出这些网页制作软件（7）让学生上台完成这些问题（8）教师总结并演示网页制作软件的启动和退出，（详见教材第10页的内容）。（9）由学生完成任务二对照练习第4，5题。（10）教师提出问题：a、除了书上介绍的网页制作软件，还有哪些网页制作软件？b、这些网页制作软件有什么区别，各有哪些特点？（11）学生在网上搜索查找问题答案。（三）小结和作业：小结：（1） 认识常用的网页制作软件（2） 网页制作软件的获取方法及安装（3） 常用网页制作软件的启动与退出作业：（1） 填写任务评价表并上交（2） 自学知识拓展：什么是WWW 服务。课堂任务 认识常用的网页制作软件课程名称：认识

7、常用的网页制作软件课时数：1教学目标：知识目标：了解有哪些网页制作软件，各有哪些功能。技能目标：掌握获取、安装网页制作软件的技能；掌握各网页制作软件启动和退出的操作。情感目标：培养学生学习网页的兴趣和团结互助的精神。教学重点：各网页制作软件的安装、启动和退出。教学难点：各网页制作软件的获取教法：任务引领、操作演示学法：记录关键步骤，积极动手练习。课前准备：第一章第一节素材和实例，视频教程：认识常用的网页制作软件.wmv。教学过程设计：（一） 导入设计：提问复习上节课的内容，引出问题：大家都知道有哪些网页制作软件？由学生回答并解释这次课我们来认识并了解一些常用的网页制作软件。（二）新课讲解设计：

8、（1）请学生带着任务二对照练习2、3两题，阅读P89知识预读2；（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。（5）学生回答任务二对照练习第1题。（6）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。（7）请学生将已有软件安装起来。说明：没有网络支持条件的，可以播放视频文件认识常用的网页制作软件.wmv。（8）教师演示网页制作软件的启动和退出，（详见教材第10页的内容）。（9）由学生完成任务二对照练习第4题。（三）小结和作业：小结：（1） 了解有哪些网页制作软件，各有哪些功能

9、（2） 学会获取、安装网页制作软件（3） 学会各软件的启动与退出作业：（1） 填写任务评价表并上交（2） 对照练习第5题1.2课堂任务1 我的第一个网页课程名称：HTML语言课时数：2教学目标：知识与技能：了解HTML相关概念。过程与方法：掌握网页文件中基本的HTML标记；掌握使用记事本编写网页；情感与价值观：激发学生学习网页的兴趣，主动思考问题和解决问题的习惯。教学重点：熟悉HTML标记，使用记事本编写网页。教学难点：使用记事本编写网页。教法：任务驱动法学法：阅读，记录要点，动手操作。课前准备：第一章第二节素材和实例。视频教程：用记事本编写网页.wmv教学过程设计：（二） 导入设计：分析前一

10、次上交的任务评价表总结出来的问题，有针对性的做知识补救。WWW服务中的网页要让使用不同计算机和操作系统的人们都能浏览，就必须有一套统一的编写标准。HTML就是一套用于统一网页规范的语言。只有采用HTML制作的网页，浏览器才能正确地阅读和运行。打开一个网页（比如中国奥委会的官方网站），通过执行“查看”菜单下的“源文件”命令，查看到这个网页的源代码文件。这上面的代码就是HTML语言编写的。那么这些代码分别是什么意思，起到什么作用呢？这就是今天我们要来学习的。（二）新课讲解设计：（1）请学生带着以下问题阅读P11的知识预读1，问题如下：A.什么是HTML？B. HTML语言编写网页有几种方法，分别使

11、用什么软件作为工具？C. 什么是XML？D. 什么是XHTML？XHTML是基于什么的标记语言？（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）了解任务目标。（5）教师演示利用记事本编写网页代码，（详见教材第13页至第14页的内容）。操作要点及注意事项如下：A.内的标记符号（包括）必须在英文半角状态下输入。B.文件保存时，请注意一定要将“保存类型”改为“所有文件”，扩展名必须为html或者htm。（6）学生完成相同操作。可参考视频文件用记事本编写网页.wmv。（7）教师演示使用IE浏览器查看网页效果，（详见教材第14页的内容）。（8）教师演示分析HTML文档的基本格式，（

12、详见教材第14页至第15页的内容）。（9）请学生归纳组成网页基本结构的HTML语言标记，完成任务一对照练习第3题。（10）教师演示分析网页中的标记，（详见教材第15页至第16页的内容）。（11）请学生一一回答任务一对照练习第1、2、4题。教师总结评价并补充。（12）请学生完成任务一对照练习第5题，并上传作业。教师巡逻并收集问题。（13）教师针对学生作品评价，并补充学生操作时需解释的问题。（三）小结和作业：小结：（5） 什么是HTML（6） HTML语言的基本结构（7） 记事本编写网页的步骤作业：填写任务评价表并上交1.2 课堂任务2 跑马灯效果课程名称：跑马灯效果课时数：2教学目标：知识与技能

13、：了解HTML相关概念。过程与方法：掌握记事本编写网页方法；掌握编写简单的跑马灯效果的代码；掌握在HTML文件中插入代码的方法。情感与价值观：激发学生学习网页的兴趣，培养学生乐于动手实践的习惯。教学重点：编写跑马灯效果的代码。教学难点：编写跑马灯效果的代码。教法：任务驱动法、演示法学法：观察、记录、动手操作课前准备：第一章第二节素材和实例。视频教程：默认的跑马灯效果.wmv，有属性参数的跑马灯效果.wmv。教学过程设计：（二） 导入设计：教师演示几个跑马灯效果实例，让学生从视觉感观上对跑马灯有一个了解。（二）新课讲解设计：（1）请学生打开“素材与实例/第一章/第二节/课堂任务2/marquee

14、1.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） 完成本章习题。