第3章静态网页开发技术_Web开发技术基础(java).docVIP

课程名称 Web 开发技术基础（ Java ） 第 3 章 / 共 12 章 授课专业、层次 计算机应用技术（职专） 本章内容 静态网页开发技术 授课方式及学时 理论+实践12学时 ? 教学 目的 要求、 重点 与难 点 ? 重点：掌握 HTML 语言表格、表单、链接、段落分行、字体颜色设置等标记，掌握使用 JavaScript 语言编写简单的客户端验证功能。 难点： HTML 语言中的表单编写， JavaScript 语言编写。 主 要 教 学 内 容 及 时 间 分 配 ?? HTML 语言常用标签介绍 1 学时 ?? HTML 语言表格设计 1 学时 ?? HTML 语言表单设计 2 学时 ?? JavaScript 语言介绍 1 学时 ?? 编写简单的客户端验证功能 1 学时 教 学 后 记 ? 审 阅 意 见 ? ? ? 课程负责人签字： 年 月 日 教 学 设 计 课程名称 Web 开发技术基础（ Java ） 授课专业、层次 计算机应用技术（职专） 本章内容 静态网页开发技术 授课方式及学时 理论+实践12学时 1． 复习 ?? JSP 运行环境： ?? JSP 编辑环境： ?? JSP 的运行原理， JDK 和 Tomcat 在其中起什么作用 ?? HTML 简介（要求学生使用记事本编写） ?? 介绍 HTML 语言的作用，说明什么是超文本文档 ?? 强调标签、属性的作用 ?? 编写注意： HTML 语言不区分大小写，属性值的引号可写可不写 2． HTML 标签的结构形态 ?? 演示以下几个示例： ?? h2 节日快乐 /h2 ?? body text=”red” ?? img src=”” height=15 width=22 ?? HTML 文件结构，指出文档头和文档体部分。 3 ． HTML 常用标签 ?? html 标签 ?? body 标签：解释设置颜色的两种方式，演示例子 ?? 标题标签 h1 到 h6 ?? 段落换行标签 p 和 br ，让学生做实例，感受一下二者的区别 ?? 字体 font 标记：设置文字的大小、颜色、字体 font size=5 color=purple face= 华文彩云 Web 开发技术 /font ?? 链接： 提问学生回答“显示的链接文字是百度，点击进入百度主页，这个链接怎么编写” a href= 百度 /a 一定要将 http 协议加上 ?? 图像：让学生在自己电脑上找一张图片练习 img src=D:\ 图片 \15_25594_b54e96e786efb12.gif height=80 width=60 4 ． HTML 中的表格 利用课件演示一个简单的表格，让学生照做，以下内容在该表格基础上修改 要求学生查看 th 和 td 两个标记的区别 设置表格大小： width 和 height 两个属性，用象素和百分比两种方法设置 设置边框 跨多行 rowspan 和跨多列 colspan 5 ．课堂练习书上 P32 第一题 ? ? 教 学 设 计 课程名称 Web 开发技术基础（ Java ） 授课专业、层次 计算机应用技术（职专） 本章内容 静态网页开发技术 授课方式及学时 理论+实践12学时 6． 表格设计 1 4 6 10 2 5 7 11 8 12 3 9 7． 列表标记 olul 歌手列表（无序列表） 歌手排名（有序列表） 8．图像标记 img img src=D:\ 图片 \P100291.JPG alt ＝ 魅力的小猫 width ＝ 200 height=250 border=2 align=center hspace=10 vspace=15 / 通过课件细说每个属性作用 ?? 图像在页面的对齐方式 ?? 设置图像和文本之间的关系 9． 超文本链接标记 body link=black vlink=red alink=green a href=/ 校园网 /abr a href=/ 百度 /a /body 10． 多媒体标记 bgsound src=inuyasia.mp3 autostart=false loop= 一般加在 head 标记中 src=your.mid 设定 midi 档案及路径，可以是相对或绝对。 autostart=true 是否在音乐文件传完之後，就自动播放音乐。 true 是，