当前位置:首页 >> 其它课程 >> HTML教案第五章

HTML教案第五章


课程名称:使用 HTML 语言开发商业站点

教案

《HTML》理论课教案 第5章
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

使用 Dreamweaver 制作网页

一、 整章授课思路 [100 分钟] ................................................................................................................. 2 回顾、预习检查、任务、目标部分 [10 分钟]....................................................... 2 基本标签的使用[10 分钟] ........................................................................................ 2 表格的使用,创建表格布局页面[10 分钟]............................................................. 3 课堂练习 1[10 分钟] ................................................................................................ 3 表单的使用,结合表格布局进行使用 [10 分钟]................................................... 4 课堂练习 2 [10 分钟] ................................................................................................ 4 制作框架网页[10 分钟] ............................................................................................ 4 制作样式表 [15 分钟] .............................................................................................. 5 课堂练习 3 [10 分钟] ................................................................................................ 5 总结[5 分钟] ............................................................................................................. 5

二、 学员问题汇总 ..................................................................................................................................... 5 三、 作业布置 ............................................................................................................................................. 6

-

-

1

课程名称:使用 HTML 语言开发商业站点

教案

课时:100 分钟

?
? ? ?

本章工作任务
用 Dreamweaver 制作点卡购买页面。 用 Dreamweaver 制作用户注册页面。 用 Dreamweaver 制作客户中心页面。

?
?

本章技能目标
会用 Dreamweaver 实现已学的各类 HTML 标签

?

本章重点

? 使用 Dreamweaver 实现各类 HTML 标签和 CSS 样式 ? 会创建常见的样式:统一文字、颜色等外观、无下划线超链接、细边框输 入框。

?
?

本章难点
样式的制作

?

本章单词

一、

整章授课思路 [100 分钟]

使用 Dreamweaver 依次创建以前学习的各类 HTML 标签和页面,讲解顺序如 下: 1) 基本标签的使用,创建图文并茂的页面。 2) 表格的使用,创建表格布局页面。 3) 表单的使用,结合表格布局页面。 4) 制作框架网页。 5) 制作样式表 注意: (1)讲解要点主要是操作步骤要点,属性框的解释,需要教员课堂 现场演示。 (2)课堂练习提供了练习素材页面,让学员在素材页面上添加样式,否则 会影响课堂进度。

1.

回顾、预习检查、任务、目标部分 [10 分钟] 根据 PPT 中提供的问题,逐一提问学员,注意给予学员引导,建立学员的 信心。

2.

基本标签的使用[10 分钟] 讲解重点:

-

-

2

课程名称:使用 HTML 语言开发商业站点

教案

结合如何制作一个图文并茂的页面示例,仿效演示并穿插讲解:

1) 2) 3) 4) 5) 6) 3.

如何设置页面背景、标题。 如何插入图片。 如何插入段落、换行。 如何设置超链接。 如何格式化文本:文字颜色、字号等 如何插入项目列表 表格的使用,创建表格布局页面[10 分钟] 讲解重点: 结合如何制作一个新产品展示表格页面,依次演示并穿插讲解: 1. 创建跨行或跨列的表格。 2. 设置表格背景 3. 设置单元格背景色,对齐方式。

4.

课堂练习 1[10 分钟] 练习使用表格布局多张图片,关键是设置表格的边框、填充、边界均 为 0。

-

-

3

课程名称:使用 HTML 语言开发商业站点

教案

5.

表单的使用,结合表格布局进行使用 [10 分钟] 结合如何制作一个淘宝注册页面,依次演示并穿插讲解。 1) 插入用于布局的表格 2) 各种表单控件的插入 3) 如何设置相关属性

6.

课堂练习 2 [10 分钟] 练习制作申请表单

7.

制作框架网页[10 分钟] 讲解重点: 结合如何制作客户中心框架页面,依次演示并穿插讲解:

-

-

4

课程名称:使用 HTML 语言开发商业站点

教案

1) 2) 8.

如何制作框架窗口。 如何设置超链接打开目标窗口。

制作样式表 [15 分钟]

结合如何美化表格页面、制作图片按钮、依次演示并穿插讲解: (1) 如何使用 Dreamweaver 制作各类样式。 (2) 如何应用样式 如何使用 Dreamweaver 制作样式,参考文件夹“补充案例\使用 Dreamweaver 制作样式实例.htm”

9.

课堂练习 3 [10 分钟] 练习上述讲解的各种样式

10. 总结[5 分钟] 7) 8) 9) 10) 创建表格最少需要那三个标签? 简述表格的基本结构。 跨行跨列的表格,主要在什么情况下使用? 给你一个表格,你会从哪些方面进行美化?

二、
? ?
-

学员问题汇总
问题 1: 答: 。 。 。 。 。 。 问题 2:
5

课程名称:使用 HTML 语言开发商业站点

教案

?

答: 。 。 。 。 。 。 问题 3: 答: 。 。 。 。 。 。

三、

作业布置

用 DreamWeaver 制作下面的界面

参考代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>框架练习</TITLE> </HEAD> <FRAMESET rows="140,*" cols="*" frameborder="NO" border="0" framespacing="0"> <FRAME src="toplogo.html" name="topFrame" scrolling="NO" noresize > <FRAMESET cols="30%,*" frameborder="NO" border="0" framespacing="0"> <FRAME src="left.html" name="leftFrame" scrolling="NO" noresize > <FRAME src="right1.html" name="rightFrame" >

-

-

6

课程名称:使用 HTML 语言开发商业站点

教案

</FRAMESET> </FRAMESET> <NOFRAMES><BODY> </BODY></NOFRAMES> </HTML>

-

-

7


赞助商链接
更多相关文档:

HTML教案

HTML教案_其它_高等教育_教育专区。1 第一阶段简单介绍 html 和 css HTML(...HTML教案第二章 暂无评价 11页 免费 HTML教案第五章 7页 免费 HTML语言与...

HTML CSS JavaScript教学教案

HTML CSS JavaScript教学教案_职业技术培训_职业教育_教育专区。《HTML CSS ...第 12 章讲述了 CSS 的基本语法,CSS 可以控制字体大小、设置字体样式,目前更多...

HTML5网页编程教案_图文

HTML5网页编程教案_院校资料_高等教育_教育专区。...(newOption2); } 五、小组互评 主要针对页面中...网页编程教学第8章 76页 免费 HTML网页编程1 9页...

html教案

html教案 隐藏>> html 语言剖析目 录一、html 简介 五、排版标记 九、表单标记 十三、多媒体标记 二、html 标记一览 六、字体标记 十、图形标记 十四、其他标记...

HTML5教案-WebStorage

HTML5教案-WebStorage - Web Storage API 11.1 Web Storage 的概念 ——也称为 DOMStorage,是一种在 Web 请求之间的数据持久化技术。...

HTML语言基础教案2_图文

HTML语言基础教案2_其它课程_高中教育_教育专区。HTML 语言基础教学对象:高一学生...识别 HTML 环节五: 活用 HTML 学生利用 HTML 代码制 作网页效果 小结拓展 加深...

《HTML+CSS网页设计与布局》教案

HTML+CSS网页设计与布局》教案_院校资料_高等教育...五、 课堂小结 本次课主要内容: 1、网页设计基础...学生实训及辅导; 十四、 课外作业 第 8 章上机实践...

动态HTML教案_图文

课题:动态 HTML 一、教学目标: 【知识与技能目标】 1、了解动态 html 的几种...HTML教案第五章 7页 免费 HTML教案第三章 8页 免费 喜欢此文档的还喜欢 ...

HTML第6章教案

HTML第6章教案 - 1.了解CSS的概念 2.掌握CSS的基本语法 3.掌握如何使用样式表 4.了解<DIV>和<SPAN>标签

网页制作与HTML电子教案_图文

网页制作与HTML电子教案_教育学_高等教育_教育专区。《网页制作与 HTML教案 *学年第 * 学期 班教 级:* 师: * 2013 年 8 月至 2014 年 1 月 教课...

更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com