《网站建设与管理》教案 攸县职业中专 谭育荣
第 1 页 共 4 页 Html（2）教案
一、三维教学目标 知识与技能技能目标 （1）掌握简单表格代码，初步了解复杂表格代码。
（2）掌握使用div标签对网页分块。
（3）初步认识页面框架。
过程与方法目标 （1）打开老师的教学网页2查看代码，并且将其转化为操作技能的方法。
（2）通过实验、探索、讨论，学习解决问题的方法。
情感态度、价值观目标 （1）激发学生的学习兴趣，联系学习过的HTML1进行知识迁移。
（2）通过生生，师生互动，构建和谐的人际关系。
二、教学重点： Table tr td div a 标签的使用。
三、教学难点： 记忆标签和测试代码。
四、教学方法： 1、实验法 2、自学指导 3、讨论法 4、小组协作
五、教学媒体及环境： 理论：教室多媒体，server2003。
实训：机房，server2003，安装文件。
六、教学用具： PC，投影仪，相关软件。
七、课时安排：共计4课时。 第1-2课时：表格代码学习。
第3-4课时：分块代码学习。
八、教学过程
《网站建设与管理》教案 攸县职业中专 谭育荣
第 2 页 共 4 页 第1、2课时（理实一体化）
时序 教学内容及环节（第1、2课时） 教师活动 学生活动
10’ 分析学生作业，简化代码，分析问题，解决问题。
使用投影仪或是电死教师演示，打开学生作业，讲解作业中的问题，提出解决问题的方法。 观察、思考、记录，可以讨论。
10’ 共同分析其他学生的作业并且评价。 使用投影仪或是电子教室演示，打开学生的作业，引导学生分析。 观看，思考、思考，提出自己的看法，观点，发现作业的问题，提出自己的解决方法。
10’ 学习table标签。 展示老师做出的学习网页2，布置本课的主要任务，提出要求 观看，思考，提问，记录。
Web前端开发技术基础案例教程 电子教案
主编：欧阳俊梅 高等教育出版社 课程内容 2组织网页内容（HTML基础）
2.2 添加文字 计划课时 4课时
一、情景引入
如今网络上的个人博客站点很多，一般个人博客的首页主要包括体现自己风格的Logo、banner、导航条以及文章标题列表等，内页的博文较为简洁以图文为主。
二、教学目标
学生通过完成本案例，达成以下目标：
知识目标：知道HTML的文字相关元素：标题h1~h6、分段p和换行br、水平线hr、列表ul/ol/li。
能力目标：学会添加页面内容、设置文本标题、为文本设置分段和换行、添加水平线以及制作列表文字。
情感目标：激发学生对本课程和本专业学习的浓厚兴趣；培养学生互相帮助、团结协作的精神； 拓展学生的审美观念和想象能力，并具有创新能力。
三、教学重、难点
教学重点：添加页面内容、设置文本标题、为文本设置分段和换行、添加水平线
教学难点：制作列表文字
四、教学方法
以案例教学为核心，采用任务驱动式的行为导向教学法。
采取了由浅入深、循序渐进的教学策略，以学生的感知、理解、巩固、运用为教学设计流程。教学互动环节中主要包括六个步骤：明确任务——计划筹备——学生实施——引导组织——评估反馈——巩固实践。
五、教学资源
配套教材：《Web前端开发技术基础案例教程》高等教育出版社 978-7-04-055492-2
多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。 Web前端开发技术基础案例教程 电子教案
主编：欧阳俊梅 高等教育出版社 教学环节 教学过程设计
第一环节：明确任务 一．案例效果展示：
HTML语言基础
教学对象：高一学生 教学课时：1课时
教学目标 1．知识目标：
1）掌握HTML文件的基本格式
2）识别并理解常用的HTML标记
3）掌握HTML语言的简单应用
2．能力目标：培养学生自主学习、主动探究问题的能力
3．情感目标：培养学生合作学习意识
教学重点 HTML常用的标记
教学难点 HTML语法及应用
教法与学法 自主探究法 合作学习 任务驱动法 演示讲授法
教学环节 教师活动 学生活动 设计意图
导入：
对比展示 展示一组学生自制网页和有特殊效果的网页，引导学生对比其中的不同，激发学生深入学习制作网页效果的热情，引出本课课题：HTML语言基础 观察网页
思考网页的实现 展示学习目标，激发学生学习兴趣，导入教学。
环节一：
走近HTML 简要介绍HTML含义
展示网页代码的查看方法，让学生知道网页就是web浏览器对html代码执行后的结果
1、在网页编辑器中查看代码
2、在浏览器中查看代码 学生了解HTML代码及其查看方法 为后面学生自主学习、探索代码含义作铺垫
环节二：
初识HTML 启动frontpage软件，打开空白网页，进入HTML窗口，让学生了解基本的HTML语言及其格式 观察已有的代码布局，根据英语知识讨论代码含义 调动学生学习的积极性，为下面自主探索作铺垫
环节三：
探索HTML 分四个小组进行网页中常见元素的代码的探索，分别是：文字、图片、表格、超链接，让学生先思考探索的方法，然后实践并讨论，教师给定素材 学生分组探索网页中各类元素的代码，通过查看、修改其属性值等探索各类代码的含义 让学生分组探索各代码的含义，培养其自主学习能力和合作学习意识，激发其自主学习热情
环 节 四：
识别HTML 给定2段HTML代码，让学生思考相应的网页效果 学生识别HTML 让学生巩固所学HTML代码
环节五：
活用HTML 给定学生实践任务：制作出滚动字幕从下至上的滚动效果 学生利用HTML代码制作网页效果 让学生了解HTML的基本应用，并考察学生的知识迁移能力，活用HTML语言
第二章HTML编程基础
HTML是超文本标记语言（Hypertext Markup Language）的缩写，是Web环境的语言基础。浏览器的主要功能就是识别和解释HTML语言，从而决定网页内容的显示方式。HTML只是一种描述性的标记语言，不是编程语言，没有复杂的语法和结构，因而非常简单易学。
2．1 构建HTML网页
HTML文件是纯ASCII码文件，可以用任何纯文本编辑工具（如记事本）编写，一般使用Dreamweaver或FrontPage这些所见即所得的可视化工具更为方便。
2.1.1 HTML页面的基本组成
启动 Dreamweaver 时自动建立一个新的空白HTML文档。切换到“代码” 视图窗口，就可以看到以下代码：
无标题文档
从中可见，一个基本的HTML文档总是以标记开始，以结束。其中用和把文档分为两个部分。与之间的是文件头，文件头内包含关于文件的说明信息，这些信息并不在浏览器窗口中显示。在和之间的内容是文档的体，包括文本、图形、窗体和框架等，都是窗口中要显示的内容。HTML文件结构如图2-1所示。
图2-1 HTML文件结构
2.1.2 HTML标记的特点
(1)HTML标记均是用尖括号<>阔起来的，大多数标记是成对出现和使用的，有开始标记和对应的结束标记，结束标记在尖括号中使用反斜杠“/”，其用法格式为：
文本
比如：无标题文档，这条语句的作用是在浏览器的标题栏显示“无标题文档”几个字。
主页标题
主页文档部分 (2)很多标记具有自己的属性，利用这些属性，可作进一步的详细设置。其用法格式为：文本
属性值可用双引号或单引号引起来，各属性之间用空格隔开。属性多是可选项。例如若用红色、隶书、6号字写“西安翻译学院”几个字：
西安翻译学院
(3)有少数标记不用配对使用。例如：
2．2 HTML页面修饰标记
2.2.1 文本控制
1.字体控制标记„
通过设置标记的属性可以控制文本的字体、字号大小、颜色等。
