举例HTML的图像标记,教案html之css滤镜及练习层div块及span标记举例窗口内例题演示功能的实现总结.pdf...

名师精编 优秀教案

章节题目 CSS 滤镜及练习、层 Div 块及 Span 标记举例、窗口 课型 讲授

内例题演示功能的实现总结

教学目的 学习 HTML 语言

重点 语言格式及应用

难点 做为语言，体系的理解

参考书目 HTML专用课件 教具

教学后记

教 学 过 程 备注

内容及安排 : A 、B 、C 分

1. 层( 教学 \web 开发技术 我的 JSP 站点 例题层行为)，继续 别 为 要 求 学

讲完； 生 掌 握 、 理

2. CSS (滤镜)( 教学 \web 开发技术 例题 \alpha 滤镜，同学们 解、了解

参考教材自己练习 blur 和 wave 滤镜！)；

3. HTML基础之一 .PPT，p64~91 ；Dreamweaver 行为演示及代码解析 可 以 适 当 用

( 教学 \web 开发技术 例题 定义 div 块并进行平滑移动)； Dreamweaver

( 教学 \web 开发技术 例题 \ span 标记举例)； 制 作 ， 并 讨

( 教学 \web 开发技术 例题 利用 form 计算阶乘)；(机动) 论、演示同一

4. 窗口内例题演示功能的实现总结。 (结合 iframe 、例题 span 标记 例题

举例、层！)

5. 留 10 分钟，共同总结应该掌握及考试的内容！

练习 :

1. CSS 滤镜( blur 、wave )；

2. 结合“ span 标记举例”和“例题层行为”及“ iframe 例题”，实现

课件演示！

3. 将“定义 div 块并进行平滑移动”中向左移动完成。

说明 :

内容较多，大约时间是 2 次课完成！

名师精编 优秀教案

3.4 HTML 的图像与多媒体标记

在网页中加入图像和多媒体信息可以使网页更加生动活泼。

3.4.1 图像标记

再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的元素，

HTML语言提供了 标记来处理图像的输出。

功能：在当前位置插入图像。

格式：

“边框长度” hspace= “x ” vspace= “y ” align= “对齐方式” >。

属性：

src ：设置要加入图像文件的 URL地址，通常图像格式为 gif 或 jpg 。

alt ：设置图像文件的替代说明，当图像无法显示时，显示“简单说明” 。

“alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息，” 此时， 浏览器显示这个 “交互

文本 ”来代替图像。给页面上的图像都加上 alt 属性是一个好习惯，它有助于更好地显示信息，而且，对纯

文本