网站设计电子教案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)完成本章习题。