动态网页制作教案.docx

1、动态网页制作教案动态网页制作教 师 授 课 教 案12多媒体1 班 动态网页制作课程 使用教材：动态网页设计与制作-HTML+CSS+JavaScript2014 - 2015 学年第 1 学期第 1 周 星期3第 3、4节 2014年9 月17日第 1章 html基础教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 1 、了解HTML常见元素包含哪些 2、HTML简介，区分网页与HTML，标签元素和属性二、内容1、HTML简介2、HTML常见元素三、重点，难点及处理方

2、法重点：运用HTML常见元素难点：一些特殊元素的运用4、教学过程1、引入打开网页设计作品，让学生们欣赏评价同学们，大家觉得刚刚展示的网页设计作品怎么样呢？运用了什么软件制作的呢？采用了哪些技巧呢？可以从哪些方面做得更好呢？（学生们随机回答）2、讲授新课（1）HTML基础a网页与HTMLHTML 是Hyper Text Markup Language的缩写， 中文翻译为“超文本标记语言”， 是制作网页的最基本语言。 b编写及显示HTML文件使用任何一种文本编辑器来编写，如记事本、 写字板等，也可使用任何一种编辑HTML文件 的工具软件，如DW和FrontPage。 c. 标签、元素和属性HTML

3、标签是由一对尖括号和标签名称组成。标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”。 HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般“起始标签”表示元素的开始，“结束标签”表示元素的结束。在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是： (2）HTML常见元素基本结构元素：HTML 元素、head元素、body元素常用块元素：1、标题类2、段落类 p（段落）元素 pre（原样显示文字）元素 div（通用块）元素3、通用属性最常用的段落块元素： id（元素标识）属性title（提示）属性 style（C

4、SS样式）属性 class（CSS分类）属性(3)常用列表元素ul、ol、li3、巩固练习操练课本1.1-1.3案例五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导完成案例1.1-1.3七、课后小结：本节比较重要，学生掌握情况良好2014 - 2015 学年第 1 学期第 1 周 星期4第 3、4节 2014年9 月18日第1章 html基础及实训1教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学

5、目标 1 、了解常见表格、行、表单、特殊元素等2、通过基础知识的学习完成实训项目1二、内容（1）常见表格元素table、tr、td、th(表头)（2）常用行元素（3）表单元素（4）一些特殊元素三、重点，难点及处理方法重点：表格、行、表单、特殊元素难点：实训项目1四、教学过程1、引入（1）上节课已经学习了表格的一部分元素，相信同学们都掌握啦，这节课我们接着学习常见的元素和一些特殊元素。 2、讲授新课（1）常见表格元素table、tr、td、th(表头)（2）常用行元素 img（图像）元素 a（链接）元素 span（通用行）元素 sub（下标） sup（上标）元素 b（粗体） i（斜体）br（换行

6、）元素 行元素总是与其前后其他元素保持在同一行中（3）表单元素表单控件元素 用于收集用户输入信息 input（输入框）元素 select（下拉框）元素 textarea（多行文本输入框）元素 label（表单控件名称）元素fieldset（表单控件组）元素（4）一些特殊元素注释元素meta（描述网页信息）元素doctype（文档类型的定义）与HTML文档的检验特殊字符3、巩固练习完成实训1五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导根据实训1的完成情况，课上辅导项目七、课后小结：本节比较重要，学生掌握情况良好20

7、14 - 2015 学年第 1 学期第 2 周 星期3 第 3、4节 2014年9月24日第 2章 CSS基础教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标1、掌握css基本语法 2、了解css 特点二、内容1.图解CSS 2.CSS定义3.CSS的特点4.css基本语法三、重点，难点及处理方法重点：css基本语法和css基本特点难点：样式表的应用5、教学过程1、引入通过实例导入css应用的好处：2、新课讲授（1）CSS的定义CSS是Cascading Style S

8、heets的缩写，中文为“层叠样式表”。（2）CSS的特点CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。 （3）css样式表的类型内部、外部、元素中的样式表三种在网页的标记中应用“样式”，时采用的是“层叠式”原则。 样式是由成对的属性名和属性值 以冒号“：”相间组成。一系列的“样式”以分号“；” 相间组成为“样式表”。 （4）CSS中的颜色和长度定义CSS中的颜色是由红、蓝、绿3种颜色组合而成的， 每一种颜色用数字0至255表示 。（5）常见的样式属性（6）定义样式表对象1, 对象2 样式表 内部样式表 ：是将定义样式表的内容放在style元素中，并

9、且设置type属性为text/css。然后将style元素放在HTML文档的head元素中。 外部样式表：放在一个文本文件中，一般都是以.css作为扩展名，然后在HTML文档的head元素中插入link元素，通过下属格式将外部样式表文件连接到HTML文档中。 3、巩固练习练习示例2-1、2-2、2-3五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导根据本次练习，课上答疑和辅导七、课后小结：本节比较重要，学生掌握情况良好2014 - 2015 学年第 1 学期第 2 周 星期4 第 3、4节 2014年9月25日第2章

10、 CSS基础实训教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 1 、根据css基本特点和语法规则，应用css练习 2、通过实训项目2，提升css应用水平二、内容按照实训项目2的要求完成实训任务三、重点，难点及处理方法重点：认识HTML语法结构 难点：掌握HTML基本标记的使用方法四、教学过程1、引入展示实训项目2的作品，激趣导入。 2、讲授新课（1）调整页面边距、间距、背景色、链接颜色（2）加入图片，并调整图片的尺寸等3、操练请同学们按照实训2的操作步骤，以及提供的

11、素材，完成网页设计。五、教具，课件及挂图 所用的教室为多媒体实验室，教师需要演示，学生需要操练。六、作业及辅导练习过程中，课上答疑和辅导七、课后小结：本节课是学生操作课，操作效果还不错！2014 - 2015 学年第 1 学期第3周 星期3第3、4节 2014年10 月1日第3章 CSS实用技巧教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 1 、了解css的常用技巧和设计原则2、运用css进行网页布局设计二、内容1、CSS的常用技巧 2、CSS用于网页布局设计3、C

12、SS用于菜单设计4、CSS其他设计原则三、重点，难点及处理方法重点：CSS常用技巧难点：CSS其他设计原则用于网页布局四、教学过程1、引入通过上节课的学习，同学们掌握了哪些CSS设计技巧呢？（问答）这节课，我们接着学习CSS常见的实用技巧 2、新课讲授（1）CSS常用技巧1.网页内容的居中对齐2.网页内容的隐藏与显示3.方框长度的计算4.圆角边框5.图片6.定义外部样式表的选项（2）CSS用于菜单设计菜单设计的原则：1.简单的导向菜单条 2.简单的标签菜单3.推拉门式图片标签菜单（3）CSS其他设计原则1有效地定义样式名2尽量使用CSS的简写方式3有效地控制边距和间距4不要定义缺省值5尽量使用

13、已有的HTML元素6尽量组合定义样式7使用正确的Doctype8验证CSS 3、巩固练习练习使用CSS各种设计规则五、教具，课件及挂图 所用的教室为多媒体实验室，学生在软件上进行练习六、作业及辅导练习过程中，课上答疑和辅导七、课后小结：本节课是HTML语言的核心基础，学生掌握效果较好2014 - 2015 学年第 1 学期第3周 星期4第3、4节 2014年10 月2日第3章 CSS实用技巧实训教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 综合使用HTML和CSS技

14、术二、内容1、编写第三章中的实例源文件，并在浏览器中进行调试2、修改排版内容三、重点，难点及处理方法掌握CSS综合使用技巧四、教学过程1、引入通过第三章实训项目作品展示导入。2、实验教学同学们，本次实训课的要求有以下几点：（1） 需要将菜单栏改成简单的导向菜单（2） 网页的主要内容区在中间（3） 设计左导向和右导向栏，宽度、背景和链接颜色。3、巩固练习按照步骤，练习完成项目五、教具，课件及挂图 所用的教室为多媒体实验室，学生在软件上进行练习六、作业及辅导练习过程中，课上答疑和辅导七、课后小结：CSS实用技巧具有调整型，学生们的练习热情高。2014 - 2015 学年第 1 学期第4周 星期3第

15、3、4节 2014年10 月8日第4章 JavaScript简介教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 1 、认识什么是Javascript2、通过DW或FrontPage软件编辑调试Javascript二、内容1、什么是JavaScript2、编辑与调试JavaScript3、第一个JavaScript示例三、重点，难点及处理方法理解Javascript示例四、教学过程1、导入同学们，HTML文件有一些交互式的功能没法在客户端实现，怎么办呢？我们可以借助ja

16、vascript。那么什么是javascript呢？它有哪些特点？又是如何使用的呢？2、新课讲授（1）什么是JavaScript JavaScript的发展历史 ：它是写在HTML文档中的一种基于对象和事件驱动 。并具有安全性能的脚本语言， 当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序， 让用户通过交互式的操作变换网页显示的内容， 以实现HTML语言所不能实现的一些功能。 2. JavaScript的特点 3. JavaScript与Java比较 4. JavaScript的作用（2）编辑与调试JavaScript1. 浏览器 2.编辑软件 3.调试软件（3）第

17、一个JavaScript示例 3、巩固练习跟着老师一起来联系第一个javascript示例五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导同学们根据教师的操作，可以制作一个javascript简单示例七、课后小结：从本章开始进入javascript的学习，学生们普遍反映比较难 2014 - 2015 学年第 1 学期第4周 星期4第3、4节 2014年10 月9日第4章 javascript简介实训教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，

18、课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏览器和Firefox浏览器中调试javascript的基本操作。二、内容1、下载、安装、设置第四章中用于IE浏览器的MSD调试软件2、编写示例源文件，并调试3、测试一段程序，找出其中的错误，分别在IE和Firefox中进行调试。三、重点，难点及处理方法测试程序并找错误四、教学过程1、实验导入展示第四章实训项目作品2、实验过程本次实训，大家需要注意的问题有：（1）MSD软件安装（2）素材程序编辑和调试（3）改写程序请同学按照实训步骤进行操作，完成实训项目。五、教具，课件

19、及挂图 所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。六、作业及辅导实训过程中，课上辅导和答疑7、课后小结：实训项目能提升同学们对于javascript程序的编写和调试能力。2014 - 2015 学年第 1 学期第5周 星期3第3、4节 2014年10 月15日第5章 JavaScript编程基础教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 1 、认识什么是Javascript2、通过DW或FrontPage软件编辑调试Javascript二、内容1、

20、数据类型及变量2、表达式与运算符3、基本语句 三、重点，难点及处理方法理解Javascript示例四、 教学过程1、导入同学们， javascript到底是如何使用的呢？这就是我们本章要学习的内容，它的编程基础。2、新课讲授（1）数据类型及变量常量与变量 JavaScript的常量通常又称为字面常量，它是不能改变的数据。 变量就是在计算机内存中暂时保存数据的地方。变量的数据类型及其转换变量的作用范围（2）表达式与运算符 算术运算符、逻辑运算符 、位运算符 、操作后赋值运算符、特殊运算符 运算符顺序（3）基本语句 3、巩固练习学会写javascript基本语句五、教具，课件及挂图 所用的教室为多

21、媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导制作简单的javascript语句七、课后小结：Java基础编写，新知识较多，学生学习较快。2014 - 2015 学年第 1 学期第5周 星期4第3、4节 2014年10 月16日第5章 javascript编程基础（2）教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标 熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏览器和Firefox浏览器中调试jav

22、ascript的基本操作。二、内容1、函 数 2、对 象 3、事件及事件处理程序三、重点，难点及处理方法事件处理程序四、教学过程1、导入同学们，我们知道很多功能的实现，需要运用函数、对象，才能进行事件处理的。2、新课内容（1）函数1.定义函数 function 函数名（参数1, 参数2,） 程序语句 return 值; 2.使用函数 参数的传递 1.按值传递参数 2.按地址传递参数3.函数的参数 (2)对象1.什么是对象 JavaScript的对象就是 这样一种特殊的数据类型， 它不仅可以保存一组不同类型的数据 （称做“对象的属性”）， 而且还可以包含有关“处理”这些数据的函数（称做“对象的方

23、法”）。2.定义对象 3.使用对象 使用对象的方法：对象作为函数的参数1、网页中的事件 2、用JavaScript处理事件 五、教具，课件及挂图 所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。六、作业及辅导实训过程中，课上辅导和答疑8、课后小结：实训项目能提升同学们对于javascript程序的编写和调试能力。2014 - 2015 学年第 1 学期第6周 星期3第3、4节 2014年10 月22日第5章 JavaScript编程基础实训教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导

24、；七，课后小结。一、教学目标掌握javascript的基本编程概念和编程技术。二、内容1、编辑与调试第五章中的JavaScript示例三、重点，难点及处理方法调试程序中的错误。四、 教学过程1、实验导入展示第五章实训项目2、实验教学编写第五章中的示例文件，在浏览器中调试。五、教具，课件及挂图 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。六、作业及辅导操练的同学进行辅导七、课后小结：实训项目具有一定难度，学生练习效果不佳2014 - 2015 学年第 1 学期第6周 星期4第3、4节 2014年10 月23日第6章 JavaScript常用内置对象教

25、案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标熟练掌握内置对象的使用规则二、内容1、数组（Array）对象2、字串（String）对象3、数学（Math）对象4、日期（Date）对象三、重点，难点及处理方法数组、字串是重点四、教学过程1、导入同学们知道什么是内置对象吗？有哪些常见的内置对象呢？2、新课讲授本次实训，大家需要注意的问题有：（1） 数组（Array）对象新建一个长度为零的数组。语法规则如下：var 变量名 = new Array( )数组中的序列号、引用数组

26、元素、.动态数组、.数组对象的常用属性与方法、排序数组 （2） 字串（String）对象1.使用字串对象2.字串相加3.在字串中使用单引号、 双引号及其他特殊字符4.比较字串是否相等5.字串与整数、浮点数之间的转换6.串对象的属性与方法7.字串对象应用实例（3） 数学（Math）对象1. 使用数学对象2.数学对象的属性与方法3.特殊的常数和函数4.格式化数字5.产生随机数（4）日期（Date）对象五、教具，课件及挂图 所用的教室为多媒体实验室。 六、作业及辅导练习课本上的示例9、课后小结：同学们对于javascript程序的编写和调试能力提高了很多。2014 - 2015 学年第 1 学期第7

27、周 星期3第3、4节 2014年10 月29日第6章 JavaScript常用内置对象实训1教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标熟练掌握javascript数组对象、字符串对象、数字对象及日期对象。二、内容第六章中的示例源文件三、重点，难点及处理方法编写javascript函数四、 教学过程1、导入常用的javascript函数有很多，我们如何编写呢？2、操作演练请大家按照实训内容的要求，逐个编写javascript函数。操作步骤和实现效果见课本。五、教具，

28、课件及挂图 所用的教室为多媒体实验室，学生上机操练完成实训项目六、作业及辅导同学们根据教师的操作，可以制作一个javascript简单示例七、课后小结：实训项目，需要掌握的javascript函数众多，学生接受起来有难度。2014 - 2015 学年第 1 学期第7周 星期4第3、4节 2014年10 月30日第6章 JavaScript常用内置对象实训2教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；七，课后小结。一、教学目标了解JavaScript常用文档对象，并学会使用这些文档对象二、内容

29、第六章中的示例源文件三、重点，难点及处理方法测试程序并找错误四、教学过程1、实验导入第六章中涉及到的javascript函数非常多，大家在上次实验课只完成了一部分，这节课接着编写剩下的源程序，并测试效果2、实验过程项目过程中，大家需要注意的是：（1） 区分每种对象的适用范围和使用方法。（2） 完整测试每种对象在两个浏览器中的运行效果。五、教具，课件及挂图 所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。六、作业及辅导实训过程中，课上辅导和答疑。10、课后小结：实训项目能提升同学们对于javascript程序的编写和调试能力。2014 - 2015 学年第 1 学期第8周 星期3第3、4节 2014年11 月5日第7章 JavaScript常用文档对象教案内容：一，本次课的教学目标；