动态网页制作教案.docx
《动态网页制作教案.docx》由会员分享，可在线阅读，更多相关《动态网页制作教案.docx（45页珍藏版）》请在冰豆网上搜索。
动态网页制作教案
动态网页制作
教师授课教案
12多媒体1班动态网页制作课程使用教材：
动态网页设计与制作-HTML+CSS+JavaScript
2014-2015学年第1学期第1周星期3第3、4节2014年9月17日
第1章html基础
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
1、了解HTML常见元素包含哪些
2、HTML简介，区分网页与HTML，标签元素和属性
二、内容
1、HTML简介2、HTML常见元素
三、重点，难点及处理方法
重点：
运用HTML常见元素
难点：
一些特殊元素的运用
四、教学过程
1、引入
打开网页设计作品，让学生们欣赏评价
同学们，大家觉得刚刚展示的网页设计作品怎么样呢？
运用了什么软件制作的呢？
采用了哪些技巧呢？
可以从哪些方面做得更好呢？
（学生们随机回答）
2、讲授新课
（1）HTML基础
a．网页与HTML
HTML是HyperTextMarkupLanguage的缩写，中文翻译为“超文本标记语言”，
是制作网页的最基本语言。
b．编写及显示HTML文件
使用任何一种文本编辑器来编写，如记事本、写字板等，也可使用任何一种编辑HTML文件的工具软件，如DW和FrontPage。
c.标签、元素和属性
HTML标签是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”。
HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般“起始标签”表示元素的开始，“结束标签”表示元素的结束。
在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：
<标签名称属性名=“属性值”>
（2）HTML常见元素
基本结构元素：
{HTML元素、head元素、body元素}
常用块元素：
1、标题类
2、段落类
●p（段落）元素
●pre（原样显示文字）元素
●div（通用块）元素
3、通用属性
最常用的段落块元素：
●id（元素标识）属性
●title（提示）属性
●style（CSS样式）属性
●class（CSS分类）属性
（3）常用列表元素
ul、ol、li
3、巩固练习
操练课本1.1-1.3案例
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
完成案例1.1-1.3
七、课后小结：
本节比较重要，学生掌握情况良好
2014-2015学年第1学期第1周星期4第3、4节2014年9月18日
第1章html基础及实训1
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
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（换行）元素
行元素总是与其前后其他元素保持在同一行中
（3）表单元素
表单控件元素用于收集用户输入信息
●input（输入框）元素
●select（下拉框）元素
●textarea（多行文本输入框）元素
label（表单控件名称）元素
fieldset（表单控件组）元素
（4）一些特殊元素
注释元素
meta（描述网页信息）元素
doctype（文档类型的定义）与HTML文档的检验
特殊字符
3、巩固练习
完成实训1
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
根据实训1的完成情况，课上辅导项目
七、课后小结：
本节比较重要，学生掌握情况良好
2014-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基本特点
难点：
样式表的应用
五、教学过程
1、引入
通过实例导入css应用的好处：
2、新课讲授
（1）CSS的定义
CSS是CascadingStyleSheets的缩写，中文为“层叠样式表”。
（2）CSS的特点
CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。
（3）css样式表的类型
内部、外部、元素中的样式表三种
在网页的标记中应用“样式”，时采用的是“层叠式”原则。
样式是由成对的属性名和属性值以冒号“：
”相间组成。
一系列的“样式”以分号“；”相间组成为“样式表”。
（4）CSS中的颜色和长度定义
CSS中的颜色是由红、蓝、绿3种颜色组合而成的，每一种颜色用数字0至255表示。
（5）常见的样式属性
（6）定义样式表
对象1,对象2……{样式表}
内部样式表：
是将定义样式表的内容放在style元素中，并且设置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章CSS基础实训
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
1、根据css基本特点和语法规则，应用css练习
2、通过实训项目2，提升css应用水平
二、内容
按照实训项目2的要求完成实训任务
三、重点，难点及处理方法
重点：
认识HTML语法结构难点：
掌握HTML基本标记的使用方法
四、教学过程
1、引入
展示实训项目2的作品，激趣导入。
2、讲授新课
（1）调整页面边距、间距、背景色、链接颜色
（2）加入图片，并调整图片的尺寸等
3、操练
请同学们按照实训2的操作步骤，以及提供的素材，完成网页设计。
五、教具，课件及挂图
所用的教室为多媒体实验室，教师需要演示，学生需要操练。
六、作业及辅导
练习过程中，课上答疑和辅导
七、课后小结：
本节课是学生操作课，操作效果还不错！
2014-2015学年第1学期第3周星期3第3、4节2014年10月1日
第3章CSS实用技巧
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
1、了解css的常用技巧和设计原则
2、运用css进行网页布局设计
二、内容
1、CSS的常用技巧
2、CSS用于网页布局设计
3、CSS用于菜单设计
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．尽量使用已有的HTML元素
6．尽量组合定义样式
7．使用正确的Doctype
8．验证CSS
3、巩固练习
练习使用CSS各种设计规则
五、教具，课件及挂图
所用的教室为多媒体实验室，学生在软件上进行练习
六、作业及辅导
练习过程中，课上答疑和辅导
七、课后小结：
本节课是HTML语言的核心基础，学生掌握效果较好
2014-2015学年第1学期第3周星期4第3、4节2014年10月2日
第3章CSS实用技巧实训
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
综合使用HTML和CSS技术
二、内容
1、编写第三章中的实例源文件，并在浏览器中进行调试
2、修改排版内容
三、重点，难点及处理方法
掌握CSS综合使用技巧
四、教学过程
1、引入
通过第三章实训项目作品展示导入。
2、实验教学
同学们，本次实训课的要求有以下几点：
（1）需要将菜单栏改成简单的导向菜单
（2）网页的主要内容区在中间
（3）设计左导向和右导向栏，宽度、背景和链接颜色。
3、巩固练习
按照步骤，练习完成项目
五、教具，课件及挂图
所用的教室为多媒体实验室，学生在软件上进行练习
六、作业及辅导
练习过程中，课上答疑和辅导
七、课后小结：
CSS实用技巧具有调整型，学生们的练习热情高。
2014-2015学年第1学期第4周星期3第3、4节2014年10月8日
第4章JavaScript简介
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
1、认识什么是Javascript
2、通过DW或FrontPage软件编辑调试Javascript
二、内容
1、什么是JavaScript
2、编辑与调试JavaScript
3、第一个JavaScript示例
三、重点，难点及处理方法
理解Javascript示例
四、教学过程
1、导入
同学们，HTML文件有一些交互式的功能没法在客户端实现，怎么办呢？
我们可以借助javascript。
那么什么是javascript呢？
它有哪些特点？
又是如何使用的呢？
2、新课讲授
（1）什么是JavaScript
JavaScript的发展历史：
它是写在HTML文档中的一种基于对象和事件驱动。
并具有安全性能的脚本语言，当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。
2.JavaScript的特点
3.JavaScript与Java比较
4.JavaScript的作用
（2）编辑与调试JavaScript
1.浏览器
2.编辑软件
3.调试软件
（3）第一个JavaScript示例
3、巩固练习
跟着老师一起来联系第一个javascript示例
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
同学们根据教师的操作，可以制作一个javascript简单示例
七、课后小结：
从本章开始进入javascript的学习，学生们普遍反映比较难
2014-2015学年第1学期第4周星期4第3、4节2014年10月9日
第4章javascript简介实训
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏览器和Firefox浏览器中调试javascript的基本操作。
二、内容
1、下载、安装、设置第四章中用于IE浏览器的MSD调试软件
2、编写示例源文件，并调试
3、测试一段程序，找出其中的错误，分别在IE和Firefox中进行调试。
三、重点，难点及处理方法
测试程序并找错误
四、教学过程
1、实验导入
展示第四章实训项目作品
2、实验过程
本次实训，大家需要注意的问题有：
（1）MSD软件安装
（2）素材程序编辑和调试
（3）改写程序
请同学按照实训步骤进行操作，完成实训项目。
五、教具，课件及挂图
所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。
六、作业及辅导
实训过程中，课上辅导和答疑
七、课后小结：
实训项目能提升同学们对于javascript程序的编写和调试能力。
2014-2015学年第1学期第5周星期3第3、4节2014年10月15日
第5章JavaScript编程基础
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
1、认识什么是Javascript
2、通过DW或FrontPage软件编辑调试Javascript
二、内容
1、数据类型及变量
2、表达式与运算符
3、基本语句
三、重点，难点及处理方法
理解Javascript示例
四、教学过程
1、导入
同学们，javascript到底是如何使用的呢？
这就是我们本章要学习的内容，它的编程基础。
2、新课讲授
（1）数据类型及变量
常量与变量
JavaScript的常量通常又称为字面常量，它是不能改变的数据。
变量就是在计算机内存中暂时保存数据的地方。
变量的数据类型及其转换
变量的作用范围
（2）表达式与运算符
算术运算符、逻辑运算符、位运算符、操作后赋值运算符、特殊运算符
运算符顺序
（3）基本语句
3、巩固练习
学会写javascript基本语句
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
制作简单的javascript语句
七、课后小结：
Java基础编写，新知识较多，学生学习较快。
2014-2015学年第1学期第5周星期4第3、4节2014年10月16日
第5章javascript编程基础
（2）
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏览器和Firefox浏览器中调试javascript的基本操作。
二、内容
1、函数
2、对象
3、事件及事件处理程序
三、重点，难点及处理方法
事件处理程序
四、教学过程
1、导入
同学们，我们知道很多功能的实现，需要运用函数、对象，才能进行事件处理的。
2、新课内容
（1）函数
1.定义函数
function函数名（[参数1,参数2,…]）{程序语句…[return值;]}
2.使用函数
参数的传递{1.按值传递参数2.按地址传递参数}
3.函数的参数
（2）对象
1.什么是对象
JavaScript的对象就是
这样一种特殊的数据类型，
它不仅可以保存一组不同类型的数据
（称做“对象的属性”），
而且还可以包含有关“处理”这些数据的函数（称做“对象的方法”）。
2.定义对象
3.使用对象
使用对象的方法：
对象作为函数的参数
1、网页中的事件
2、用JavaScript处理事件
五、教具，课件及挂图
所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。
六、作业及辅导
实训过程中，课上辅导和答疑
八、课后小结：
实训项目能提升同学们对于javascript程序的编写和调试能力。
2014-2015学年第1学期第6周星期3第3、4节2014年10月22日
第5章JavaScript编程基础实训
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
掌握javascript的基本编程概念和编程技术。
二、内容
1、编辑与调试第五章中的JavaScript示例
三、重点，难点及处理方法
调试程序中的错误。
四、教学过程
1、实验导入
展示第五章实训项目
2、实验教学
编写第五章中的示例文件，在浏览器中调试。
五、教具，课件及挂图
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
六、作业及辅导
操练的同学进行辅导
七、课后小结：
实训项目具有一定难度，学生练习效果不佳
2014-2015学年第1学期第6周星期4第3、4节2014年10月23日
第6章JavaScript常用内置对象
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
熟练掌握内置对象的使用规则
二、内容
1、数组（Array）对象
2、字串（String）对象
3、数学（Math）对象
4、日期（Date）对象
三、重点，难点及处理方法
数组、字串是重点
四、教学过程
1、导入
同学们知道什么是内置对象吗？
有哪些常见的内置对象呢？
2、新课讲授
本次实训，大家需要注意的问题有：
（1）数组（Array）对象
新建一个长度为零的数组。
语法规则如下：
var变量名=newArray（）
数组中的序列号、引用数组元素、.动态数组、.数组对象的常用属性与方法、排序数组
（2）字串（String）对象
1.使用字串对象
2.字串相加
3.在字串中使用单引号、
双引号及其他特殊字符
4.比较字串是否相等
5.字串与整数、浮点数之间的转换
6.串对象的属性与方法
7.字串对象应用实例
（3）数学（Math）对象
1.使用数学对象
2.数学对象的属性与方法
3.特殊的常数和函数
4.格式化数字
5.产生随机数
（4）日期（Date）对象
五、教具，课件及挂图
所用的教室为多媒体实验室。
六、作业及辅导
练习课本上的示例
九、课后小结：
同学们对于javascript程序的编写和调试能力提高了很多。
2014-2015学年第1学期第7周星期3第3、4节2014年10月29日
第6章JavaScript常用内置对象实训1
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
熟练掌握javascript数组对象、字符串对象、数字对象及日期对象。
二、内容
第六章中的示例源文件
三、重点，难点及处理方法
编写javascript函数
四、教学过程
1、导入
常用的javascript函数有很多，我们如何编写呢？
2、操作演练
请大家按照实训内容的要求，逐个编写javascript函数。
操作步骤和实现效果见课本。
五、教具，课件及挂图
所用的教室为多媒体实验室，学生上机操练完成实训项目
六、作业及辅导
同学们根据教师的操作，可以制作一个javascript简单示例
七、课后小结：
实训项目，需要掌握的javascript函数众多，学生接受起来有难度。
2014-2015学年第1学期第7周星期4第3、4节2014年10月30日
第6章JavaScript常用内置对象实训2
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，重点，难点及处理方法；
四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六，作业及辅导；
七，课后小结。
一、教学目标
了解JavaScript常用文档对象，并学会使用这些文档对象
二、内容
第六章中的示例源文件
三、重点，难点及处理方法
测试程序并找错误
四、教学过程
1、实验导入
第六章中涉及到的javascript函数非常多，大家在上次实验课只完成了一部分，这节课接着编写剩下的源程序，并测试效果
2、实验过程
项目过程中，大家需要注意的是：
（1）区分每种对象的适用范围和使用方法。
（2）完整测试每种对象在两个浏览器中的运行效果。
五、教具，课件及挂图
所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。
六、作业及辅导
实训过程中，课上辅导和答疑。
十、课后小结：
实训项目能提升同学们对于javascript程序的编写和调试能力。
2014-2015学年第1学期第8周星期3第3、4节2014年11月5日
第7章JavaScript常用文档对象
教案内容：
一，本次课的教学目标；二，内容及课时分配；三，
升级会员 