动态网页制作教案

动态网页制作

教师授课教案

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和FrontPageo

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、巩固练习

操练课本L1-1.3案例

五、教具，课件及挂图

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在

计算机上用PPT课件进行演示。

六、作业及辅导

七、课后小结：本节比较重要，学生掌握情况良好

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应用的好处:

应m了css

2、新课讲授

(1)css的定义

CSS是CascadingStyleSheets的缩写，中文为“层叠样式表

(2)CSS的特点

CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页

内容的位置及大小尺寸等属性。

(3)css样式表的类型

内部、外部、元素中的样式表三种

在网页的标记中应用“样式”，时采用的是“层叠式”原则。

样式是由成对的属性名和属性值以冒号“：”相间组成。

一系列的“样式”以分号相间组成为“样式表”。

(4)CSS中的颜色和长度定义

CSS中的颜色是由红、蓝、绿3种颜色组合而成的，每一种颜色用

数字0至255表示。

o长皮北义

csss让&华便

•<*r>

•cm(AO

•《供今》

•cm(手鼻)

•pa(I/7J!蔑看》

■pc<I?.4.)

•px(<t-A>

(5)常见的样式属性

常用妁科大舄性:

1.文字

2,皆录

3.边枢战

4.高度和克电

5.m”艮如边理

6.f*JA

7,也■痴布局

（6）定义样式表

对象1,对象2……｛样式表｝

内部样式表：是将定义样式表的内容放在style元素中，并且设置

type属性为text/csso然后将style元素放在HTML文档的head元

素中。

外部样式表：放在一个文本文件中，一般都是以.css作为扩展名，

然后在HTML文档的head元素中插入link元素，通过下属格式将外

部样式表文件连接到HTML文档中。

<linkrel="stylesheet"type="text/css"href=”外部样式表文

件.css”>

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用于菜单设计

|次刊次《的6K月长上单的内*,

\体6.ititMJUl的大义及更』，的A吃，人.

\为上才用力上片7.

[*,1<♦.、勾♦小M分・

J以使2时地位制工*.

菜单设计的原则：

L简单的导向菜单条

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文件有一些交互式的功能没法在客户端实现，怎么办

呢？我们可以借助javascripto则什么是javascript呢？它有哪些

特点？又是如何使用的呢？

2、新课讲授

(1)什么是JavaScript

JavaScript的发展历史：

它是写在HTML文档中的一种基于对象和事件驱动。并具有安全性能

的脚本语言，当用户在客户端的浏览器中显示该网页时，浏览器就

会执行JavaScript程序，让用户通过交互式的操作变换网页显示的

内容，以实现HTML语言所不能实现的一些功能。

2.JavaScript的特点

解弊性妁

।基于时拿的!

I______________________________________!

•

与J.V.比收

3.JavaScript及Java比较

4.JavaScript的作用

校看用

)榜人的

内容

5T6地

显示网页姐饮M

TM-

4.律外H

为同天不3.动后灵

能实现的产—

(2)编辑及调试JavaScript

L浏览器

J

Microvoft^InternetLSxplorcr

Q

lircfoxILS

2.编辑软件

MncromcdiADreamweaver

MicrosoftIr«>ntPage

3,调试软件

Microsoft^InternetKxplorcre

一

(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示例

四、教学过程

同学们，javascript到底是如何使用的呢？这就是我们本章要学习

的内容，它的编程基础。

2、新课讲授

（1）数据类型及变量

AM<«

Oxm里

*Mii*aAA*

««<«

常量及变量

JavaScript的常量通常又称为字面常量，它是不能改变的数据。

变量就是在计算机内存中暂时保存数据的地方。

变量的数据类型及其转换

变量的作用范围

(2)表达式及运算符

I-UM：

1-smt抬”博戕“•

3三建科：”三人录彼的跋队

算术运算符、逻辑运算符、位运算符、操作后赋值运算符、特殊运

算符

运算符顺序

(3)基本语句

1.注择诉句

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、事件及事件处理程序

三、重点，难点及处理方法

事件处理程序

四、教学过程

同学们，我们知道很多功能的实现，需要运用函数、对象，才能进行

事件处理的。

2、新课内容

(1)函数

1.定义函数

function函数名（[参数1,参数2,•••]）｛程序语句…

[return值；]｝

2.使用函数

参数的传递｛1.按值传递参数2.按地址传递参数｝

3.函数的参数

⑵对象

1.什么是对象

JavaScript的对象就是

这样一种特殊的数据类型，

它不仅可以保存一组不同类型的数据

（称做“对象的属性

而且还可以包含有关“处理”这些数据的函数（称做“对象的方

法”）。

2.定义对象

3.使用对象

❷住网“做的乂”

•遹过卜：E(.)达鼻科

,通过离日名

・通过用“话与

・通11withi/i41

使用对象的方法：对象作为函数的参数

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)对象

L使用字串对象

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年

n月5日

第7章JavaScript常用文档对象

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

1、认识什么是Javascript

2、通过DW或FrontPage软件编辑调试Javascript

二、内容

1、文档对象结构

2、文档对象

3、动态改变网页内容和样式

三、重点，难点及处理方法

如何动态改变网页内容和样式

四、教学过程

2、导入

同学们，你们平常有没有留意到HTML的文档对象呢？知道这个文档

对象是如何划分的吗？

2、新课讲授

（1）文档对象结构

1.文档对象的节点树

r~1

■lbrmt>J|

:「

▲弋M(bl>A4.*][1•>▲£今[

《MftrAJI-hl>JI<F>

「、工.一二

[th]E/用

2.得到文档对象中元素对象的般方法

1、document.getElementByld

2、document.getElementsByTagName

3.document.getElenfientsByName

（2）文档对象

1.文档对象的属性和方法

2.文档对象的cookie属性

设置、取出、删除

3,表单(form)及其控件元素对象

1.表单中的控件元素对象

2.列表及列表选项控件元素对象

在JavaScript中对列表进行添加、删除选项的操作如下:

添加列表选项

删除列表选项

3.表单元素对象的应用实例

4.链接(link)对象

5.图像(image)对象

(3)动态改变网页内容和样式

1.动态改变网页内容

。本3n**a

2.动态改变网页样式

3、巩固练习

跟着老师一起来操练第七章的javascript源程序示例

五、教具，课件及挂图

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在

计算机上用PPT课件进行演示。

六、作业及辅导

课上操练和辅导

七、课后小结：本章学习，学生已经具有之前的HTML学习基础，所

以接触起来比较简单。

2014-2015学年第1学期第8周星期4第3、4节2014年

n月6日

第7章JavaScript常用文档对象实训

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏

览器和Firefox浏览器中调试javascript的基本操作。

二、内容

1、编写示例源文件，并调试

2、测试一段程序，找出其中的错误，分别在IE和Firefox中进行调

试。

三、重点，难点及处理方法

测试程序并找错误

四、教学过程

1、实验导入

展示第七章实训项目作品

2、实验过程

本次实训，大家需要注意的问题有：

(1)根据文档结构图，了解代码的过程。

(2)素材程序编辑和调试

(3)改写程序

请同学按照实训步骤进行操作，完成实训项目。

五、教具，课件及挂图

所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。

六、作业及辅导

实训过程中，课上辅导和答疑

十一、课后小结：

实训项目能提升同学们对于javascript程序的编写和调试能力。

2014-2015学年第1学期第9周星期3第3、4节2014年

n月12日

第8章JavaScript其他常用窗口对象1

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程(也可另用备课纸)；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

认识什么是屏幕对象和浏览器信息(navigator)对象

二、内容

1、屏幕(screen)对象

2、浏览器信息(navigator)对象

三、重点，难点及处理方法

理解Javascript示例

四、教学过程

3、导入

同学们，HTML文件有一些交互式的功能没法在客户端实现，怎么办

呢？我们可以借助javascripto则什么是javascript呢？它有哪些

特点？又是如何使用的呢？

2、新课讲授

(1)屏幕对象

¥■7

意义

属性

height显示屏摹的高度

width显示屏幕的宽度

availHei^it可用高度

availV^dtii可用宽度

每像素中用于颜色的位数，其值为

colorDepth

1,4,8,15,16^432

*-r

(2)浏览器对象

意义

属性

appVcrsion浏览器版本号

appCodeName浏览品内码名称

appName浏览器名称

platfbzm用户操作系统

该宇率也含了浏览器的内码名称及版本号，

usCzAgmt它被包含在向服务器端请求的头字串中，

用于识别用户

langoage(除IE步浏览器设重的语言

usecLang[iage(IE)操作系虢设宣的语言

systemLangoage(DE)操作系统绕省设宣的语畲

browserLai^uage(IE)浏览器设置的语言

3、巩固练习

联系屏幕对象和浏览器对象的示例

五、教具，课件及挂图

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在

计算机上用PPT课件进行演示。

六、作业及辅导

同学们根据教师的操作，可以制作一个浏览器对象和屏幕对象。

七、课后小结：对象的学习，学生比较有成就感

2014-2015学年第1学期第9周星期4第3、4节2014年

11月13日

第8章JavaScript其他常用窗口对象2

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

熟练掌握在HTML文件中编写javascript程序的基本操作及在IE浏

览器和Firefox浏览器中调试javascript的基本操作。

二、内容

1、窗口(window)对象

2、编写示例源文件，并调试

3、测试一段程序，找出其中的错误，分别在IE和Firefox中进行调

试。

三、重点，难点及处理方法

测试程序并找错误

四、教学过程

1、导入

展示第四章实训项目作品

2、新课讲授

(1)窗口(window)对象

L窗口对象的常用属性和方法

A性营义

histocy历史对系

Location网址对象

name窗口名字

属性意义

opener打开当市窗口的窗口对象

document文档对修

parent当前窗口的上一皴窗口对象

frames框架对象

self当前窗口或框架

seteen房幕对良

navigator浏览器信息对象status状告栏中的信息

length框架数组的长度defmiltStatus状态栏中的缺省信息

窗口对象的常用方法:

意义

方法focusQ聚焦到窗口

打开一个包含信息字串的提示

alert（信息字串）bluiQ离开窗口

柩

打开一个包含信息、喘定和取open（网页地以窗口名L样性值］）打开窗口

confirm（信息字串）

消按钮的对话框

closcQ关闭窗口

prompt（信息字串，块省的用户打开一个用户可以输入信息的

每降指定至秒时间

输入信息）对话框（函数，亳秒）

seJntetval执行碉用一下函教

2.多窗口控制

(

'->

』

控

口

制

之

间

及

的

关

闭

窗

口

3.输入输出信息

•窗口对象的akt储句

・窗口对象的confirm语句

•窗口对象的prompt语句

五、教具，课件及挂图

所用的教室为多媒体实验室，PPT展示和演练相结合。

六、作业及辅导

课上辅导和答疑。

十二课后小结：

本节课学习到的属性和方法非常多，学生接触起来比较困难

2014-2015学年第1学期第10周星期3第3、4节2014年

11月19日

第8章JavaScript其他常用窗口对象3

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

认识和掌握一些对象，熟练使用他们。

二、内容

1、网址（location）对象

2、历史记录（history）对象

3、框架（frame）对象

三、重点，难点及处理方法

理解Javascript示例

四、教学过程

1、导入

同学们，HTML文件有一些交互式的功能没法在客户端实现，怎么办

呢？我们可以借助javascripto则什么是javascript呢？它有哪些

特点？又是如何使用的呢？

2、新课讲授

(1)网址(location)对象

1.网址对象的常用属性和方法

ud中服务器名、域•名子

意义示例hostname67.85^38.132

属性域名或IP地址

pottutl中流。名18

http:〃6Z8S3&132:18/hosturl中hostname和port4|S分67.85^38.132:18

整个ud字串cbx/csssQr.jo^iisanttxic=pathnameUfl中的文件名或路银名/cbx/cssay.jsp

adrnm&group=gq)l#bhe

hash向中由#开始的锚点名称#bhic

Utl中从开始至旨号?usctnamc=admiD&g^oup

url中从问号开始至每束

ptotocol(包括冒号)httpsearch=grp1

的表示变量的字串

袅示通信协议的字串#bhie

网址对象的常用方法:

意义

属性

Reload刷新当有网页，其中•是否从服务器端

(［是否从服务器端刷新］)刷新”的值遥que或

repla£e(iid)用ud网址用新当前的网页

3.网址对象的应用实例

(2)历史记录(history)对象

1.历史对象的常用属性和方法

意义

方法

backQ星示浏览器的历史列表中石运一个网址的网页

fotwatdO臭示浏览方的历史列表中前进一个网址的网页

显示浏览器的历史列袅中第n个网址的网页，

go(n)或gp(网址)n>0表示前进，反之，n<04l示后退或显示浏览香

的历史列表中对庭的.网址“网页

2.历史对象的应用实例

使当前的链接不写入历史列表中

使浏览器的后退按钮失效

显示历史列表中的第一个网址的网页

(3)框架(frame)对象

L框架对象的常用属性和方法

2.框架对象的应用实例

❶在一个柩架对象中控制另一个框架对象

❷控制柩架的尺寸

{0使用隐含框架

3、巩固练习

跟着老师一起来联系第八章的各个对象示例

五、教具，课件及挂图

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在

计算机上用PPT课件进行演示。

六、作业及辅导

课上操练和辅导

七、课后小结：从本章开始进入javascript的学习，学生们普遍反

映比较难

2014-2015学年第1学期第10周星期4第3、4节2014年

n月20日

第8章JavaScript其他常用窗口对象实训1

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程（也可另用备课纸）；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

熟练掌握javascript屏幕对象、浏览器信息对象、窗口对象、网址

对象、历史记录对象及框架对象。

二、内容

1、编写第八章中的示例源文件，并调试

3、测试一段程序，找出其中的错误，分别在IE和Firefox中进行调

试。

三、重点，难点及处理方法

测试程序并找错误

四、教学过程

1、实验导入

展示第8章实训项目作品

2、实验过程

本次实训，大家需要注意的问题有：

（1）窗口对象的特点

（2）素材程序编辑和调试

（3）改写程序

请同学按照实训步骤进行操作，完成实训项目。

五、教具，课件及挂图

所用的教室为多媒体实验室，学生使用电脑进行程序编写和调试。―

六、作业及辅导

实训过程中，课上辅导和答疑

十三、课后小结：

实训项目能提升同学们对于javascript程序的编写和调试能力。

2014-2015学年第1学期第11周星期3第3、4节2014年

11月26日

第9章JavaScript实用技巧

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程(也可另用备课纸)；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

掌握建立函数库的方法

学会识别浏览器

二、内容

1、建立函数库

2、识别浏览器的方法

三、重点，难点及处理方法

建立函数库

四、教学过程

1、导入

我们在实际的网页设计及制作过程中，往往会重复地应用一些

javascript函数。将这些常用的函数集中在一起，就是函数库。

2、新课讲授

(1)建立函数库

函数库中的函数一般可以分为几种类型：

用于简化程序的函数、用于校验用户输入的函数、用于取值及设置值

的函数、用于字符串处理的函数、用于列表处理的函数、用于网页元

素显示的函数。

(2)识别浏览器

通过浏览器对象和浏览器功能识别。由于识别浏览器的目的就是为了

将不同的功能应用于不同的浏览器，因此，使用浏览器功能识别的方

法更为直接和准确。

3、巩固练习

跟着老师一起来练习课本上的案例

五、教具，课件及挂图

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在

计算机上用PPT课件进行演示。

六、作业及辅导

课上操练，当堂答疑辅导

七、课后小结：学生们普遍反映比较难

2014-2015学年第1学期第11周星期4第3、4节2014年

11月27日

第9章JavaScript实用技巧2

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法;

四，教学过程(也可另用备课纸)；五，教具，课件及挂图；六,

作业及辅导；

七，课后小结。

一、教学目标

熟练掌握用户输入的校验方法。

二、内容

1、校验用户输入

2、弹出窗口

三、重点，难点及处理方法

弹出窗口的使用方法

四、教学过程

1、导入

上节课我们已经学习了一些javascript实用技巧，这节课

我们将学习更多的技巧。

2、新课讲授

(1)、校验用户输入

应将常用的校验用户输入的函数放入函数库中，但是在实际的应用

中，如果直接使用这些函数进行用户输入的校验，当校验失败时，就

会逐一报出出错信息。

如果一次出现多个出错域，用户必须多次按下信息窗口的ok按钮，

因此这样的程序设计界面不友好，所以我们需要对用户信息进行校

验。

(2)、弹出窗口

一般的弹出窗口、对话框式的弹出窗口、窗口中的窗口。

五、教具，课件及挂图

所用的教室为多媒体实验室，进行课件展示。

六、作业及辅导

课上辅导和答疑

十四、课后小结：

实训项目能提升同学们对于javascript程序的编写和调试能力。

2014-2015学年第1学期第12周星期3第3、4节2014年

12月3日

第9章JavaScript实用技巧3

教案内容：一，本次课的教学目标；二，内容及课时分配；三，重点,

难点及处理方法；

四，教学过程(也可另用备课纸)：五，教具，课件及挂图：六,

作业及辅导；

七，课后小结。

一、教学目标

熟练掌握javasc