资源简介

任务五 使用代码制作图文网页
一、提出任务
1．任务目标
使用HTML代码制作一个图文网页“唐诗赏析”。
2. 解决的问题
通过完成本任务，学习使用HTML代码为网页添加图像、文本等元素并设置其属性。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在设计视图中为网页添加文本、图像等元素并设置属性。
二、教学目标
1. 知识目标
⑴ 掌握使用HTML代码在网页中插入文本。
⑵ 掌握使用HTML代码在网页中插入列表。
⑶ 掌握使用HTML代码在网页中插入图像。
⑷ 掌握使用HTML代码在网页中插入水平线。
⑸ 掌握使用HTML代码在网页中创建CSS样式。
⑹ 掌握使用HTML代码设置文本等元素的属性。
2. 能力目标
能够使用HTML代码制作图文网页，并学会使用HTML代码设置图像、文本、水平线的属性。
3. 情感目标
培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
三、教学分析与准备
1. 教学重点
⑴ 使用HTML代码插入文本、图像和水平线。
⑵ 使用HTML代码设置网页元素属性。
2．教学难点
使用HTML代码设置网页元素属性。
3. 教学方法
任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）
教学环节及手段 教学内容 备注
组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 知识讲解 教师引导，学生讨论、分析。 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过指定学生上前操作下列各题考察学生对已学HTML代码的掌握情况。 1．使用HTML代码创建一个空白网页文件。 2．使用记事本创建一个空白网页文件。 通过完成一个任务，启发学生思考完成任务的方法，讲授必要的知识，传授必要的技能。 1．展示一个图文页面，让学生描述在设计视图下的制作流程。 2．让学生讨论上面复习知识的第2个问题，如果要求使用HTML代码来完成这个操作，该如何实现？ 由以上两个问题引出本课课题。 提出任务：使用代码制作图文网页 使用HTML代码在网页中插入文本和图像，并进行简单的属性设置，了解相应标签的使用方法、插入位置和基本属性。 1．知识讲解 ⑴ 在使用HTML语言制作网页过程中，首先要设置网页的标题标签。如下所示： 标 签 描 述 ………页面标题标签 ⑵ 插入文本、图片以及水平线需要如下标签： 标 签 描 述

…

………………段落标签 ……………………图像标签

---

……………………水平线标签 ⑶ 列表标签分为两种形式而列表项标签是相同的，如下所示： 标 签 描 述

…

………………项目列表标签

…

………………编号列表标签

…………………列表项标签 ⑷ 如何设置页面的背景颜色属性？ ⑸ 如何设置段落标签、图像标签及水平线标签的属性？ ⑹ 如何在代码试图下应用CSS。 2．自己动手 ⑴ 准备工作。 ⑵ 设置标题并修改背景颜色。 ⑶ 添加图像与文本。 a．添加段落标签并设置属性。 b．添加图像标签并设置属性。 c．添加列表并设置属性。 d. 添加水平线标签并设置属性。 安排学生分组讨论并示范操作，教师引导。 ⑷ 使用CSS。 使用代码定义CSS样式并将其应用到段落标签中。 通过本任务主要学习了使用代码在网页中插入文本、图像、列表、水平线，并设置相应属性。 将本单元素材 “举一反三”文件夹中的网页“practice2-12.html”拷贝到D盘根目录下，使用

标签代码制作项目列表，并比较与编号列表的区别。 项目列表标签与编号列表标签的区别在于列表的浏览效果不同，使用方法是相同的，所以两种列表中的列表项都是使用

标签。 学生分组上机，在组内进行讨论交流，最终完成任务。 由各组学生代表来分析说明本组完成情况。 指出学生在总结时可能出现的错误，补充不足，鼓励学生学习使用HTML代码制作网页的信心。 将本单元素材 “举一反三”文件夹中的网页“practice2-13.html”拷贝到D盘根目录下，在“代码”视图下定义样式“txt”，设置字体样式为大小18像素，颜色为“#662244”，将这一样式应用到页面中的所有段落标签中，在任一位置插入本单元素材“举一反三”文件夹中的图像“jyfs4.jpg”，使用代码设置图像的对齐方式，完成后预览页面。 学生操作。 力求通过任务导入，吸引学生学习兴趣。 任务提出后的分析过程可以先由学生讨论，再由教师总结。 培养学生自主学习、探究学习的能力。

展开更多......

收起↑