动态网页制作教案

动态网页制作

教师授课教案

五、教学过程

1、引入

通过实例导入css应用的好处：

2、新课讲授

（1）CSS的定义

CSS是Cascading Style Sheets的缩写，中文为“层叠样式表”。

（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 文档中。

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

2、新课讲授

（1）什么是JavaScript

JavaScript的发展历史：

它是写在HTML文档中的一种基于对象和事件驱动。并具有安全性能的脚本语言，当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。

2. JavaScript的特点

3. JavaScript与Java比较

4. JavaScript的作用

（2）编辑与调试JavaScript

1. 浏览器

2.编辑软件

3.调试软件

（3）第一个JavaScript示例

3、巩固练习

跟着老师一起来联系第一个javascript示例

五、教具，课件及挂图

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

常量与变量

JavaScript的常量通常又称为字面常量，它是不能改变的数据。变量就是在计算机内存中暂时保存数据的地方。

变量的数据类型及其转换

变量的作用范围

（2）表达式与运算符

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

（3）基本语句