《[管理学]网页制作项目式教案1.doc》由会员分享，可在线阅读，更多相关《[管理学]网页制作项目式教案1.doc（42页珍藏版）》请在三一办公上搜索。
1、网页制作教案 科任：王贤全班级：高二（8）班课时：10节4周=40节作业：40次时间：2010.9.272010.10.29 项目二 制作网站首页任务描述：上一个项目中，创建了“幽幽我心的个人网站”。本项目将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS设置文本、图像和页面的样式。任务完成后效果如图所示：本项具体的教学过程共分为以下五个方面的任务：任务一 添加首页文本（4课时）任务二 编辑文本样式 （4课时）任务三 添加图像 （4课时）任务四 创建与应用CSS美化网页 （4课时）任务五 使用代码制作图文网页 （4课时）任务一 添加首页文本一、提出任务1任务目标完成首
2、页文本内容。2. 解决的问题通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换行，输入连续空格，保存和预览网页等知识。 3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：使用站点管理功能创建站点，在文件面板中创建和打开首页文件。二、教学目标1. 知识目标 掌握修改网页标题。 掌握输入网页文本内容的方法。 掌握网页编辑中三种不同换行方式的区别。 了解在文档窗口中输入连续空格的几种方法。 熟悉保存和预览网页的方法。2. 能力目标掌握添加和编辑网页文本的基本操作，能够根据具体需求添加网页文本内容；通过参加科学探究活动，具有初步添加和编辑网页文本的能力，并加深对网页文本重要
3、性的理解。3. 情感目标通过分组完成任务，提高自主学习和协作学习的能力，培养团队精神。三、教学分析与准备1. 教学重点 修改网页标题。 输入网页文本内容的方法。 在文档中对文本分段换行和段内换行，输入连续空格。2教学难点 网页编辑中三种不同换行方式的区别。 在文档窗口中输入连续空格的几种方法。3. 教学方法任务驱动学习和协作学习、探究学习相结合。4. 课时安排4课时。 5. 教学环境多媒体网络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反三占3学时。）教学环节及手段教学内容备注组织课堂复习知识任务流程导入任务浏览规定站点，教师引导，学生讨论、分析分析任务完成任务教师启
4、发学生，使学生借助课本、帮助等完成。结合PPT进行知识讲解知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评互评教师点评总结任务目标启发思路分组完成任务学生自评互评教师点评总结布置作业集中学生注意力，准备上课。指定学生上前操作，考察学生对新建站点、新建文件功能的掌握情况。1新建站点“幽幽我心的个人网站”。2新建首页文件index.html并打开。在开始新的课程学习之前，先来了解一下，网页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页，引导学生分析网页的构成元素，得出结论：网页元素归纳起来有文本、图像、表格等，其中
5、最常用的是文本。因而，为首页添加内容，最重要的是为首页添加文本。打开前面创建的首页文件，展示给学生。显然，一个没有任何内容的网页是毫无意义的，从而导入要为首页添加内容。为首页添加文本，就需要掌握在网页中编辑文本的一些操作。提出任务：添加首页文本在第一单元中建立了首页空白文件“index.html”，本单元将对首页修改标题，添加准备好的内容并设置其格式。鼓励学生通过查书、查找帮助找到并总结出添加网页内容的途径以及设置网页内容格式的方法。修改网页标题并预览列举各站点的首页标题。明确首页的标题是对网站主旨的概括，起着画龙点睛的作用。制作首页，首先就是要修改首页标题文本。回顾打开首页文件的方法。在文档
6、工具栏中，将标题修改为“幽幽我心的个人网站”。提醒学生注意：文档窗口左上角网页名称处的“*”代表文件已经被修改过但并没保存，保存后“*”会消失。预览网页输入首页文本内容并划分段落 输入首页文本将素材“index.txt”文本内容复制粘贴到文档窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式内容，只保留段落结构，并且在文本遇到文档窗口的边界时会自动换行。 换行操作a“自我介绍”、“青春寄语”和“立志飞翔 ”部分进行段落划分b“立志飞翔 ”部分进行强制换行总结，三种换行方式的特点及其实现方法。 输入连续空格演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后，保存网页
7、。强调及时保存页面是一个好习惯，可以避免断电或系统故障导致的数据丢失。通过完成本任务学习了修改网页标题，输入网页文本内容，分段换行和段内换行，输入连续空格，保存和预览网页。依据前面学习的知识与掌握的专业技能，学生自己完成类似的任务，教师作为组织者和引导者，着重启发学生寻找完成任务的思路，养成检索与应用“书籍”、“帮助”、“网络”自学的好习惯。1使用IE浏览器浏览各种类型的页面，分析各个页面中文本所起作用，并分析是否可以用其他网页元素代替。在互连网上有各种类型的网站，如搜索引擎类网站，商业类网站，个人网站等。设计各种类型的页面都可以从中借鉴。对学生进行分组，每组选择一个主题网站进行分析。要求每组
8、学生讲出自己的分析结果，并自评。结论：文本在网页制作中起着关键的作用，通常不能用其他网页元素替代。2新建一个网页“practice2-1.html”，将本单元素材“举一反三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中，使用插入空格的方法修改文本，使每一行文本中的“vs”字样达到对齐的效果。新建网页“practice2-1.html”，可以这样完成：借助头脑里的知识；借助互联网借助Dreamweaver帮助同学讨论。对学生分组，开始完成任务每组同学演示自己完成的任务，其他组给以评价。总结各组同学完成任务情况，对完成好的给以表扬，没有完成的引导其找出没有完成的原因。3新建一
9、个网页“practice2-2.html”，输入多行文字内容并进行分段和强制换行，修改网页标题为“换行效果预览”，保存后预览页面，观察在IE浏览器中标题在什么位置，浏览器窗口大小发生变化时，对三种换行方式的影响。三种换行方式指的是自动换行、分段和强制换行，重点理解它们的区别。对学生分组，开始完成任务每组同学演示自己完成的任务，其他组给以评价。总结各组同学完成任务情况，对完成好的给以表扬，没有完成的引导其找出没有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。思考下列问题：1如何预览和保存网页？2如何对文档窗口中的文本进行段落的划分和强制换行操作？3如何实现插入栏两种显示方
10、式的转换？通过学生动手操作，复习与本次任务有关的知识。力求通过任务导入，吸引学生学习欲望。引导学生分析归纳。明确任务。教师提出任务要求，由学生进行讨论，教师归纳总结。学生观察标题修改后文档窗口左上角网页名称的变化。学生观察预览效果。学生对照观察原文本文件与粘贴到文档窗口后文本格式的变化情况。 教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。任务二 编辑文本样式一、提出任务1任务目标完成首页文本样式设置，添加水平分隔线与列表。2. 解决的问题本任务通过设置首页文本样式，学习文本样式设置与应用，修改文本样式，添加水平分隔线与列表知识。 3. 本任务所涉及原有知识要点完成本任务所涉
11、及原有知识要点有：输入文本内容的方法，段内换行与划分段落方法，输入连续空格的方法。二、教学目标1. 知识目标 掌握文本样式设置与应用。 掌握修改文本样式。 掌握重命名文本样式。 掌握添加水平分隔线与列表。2. 能力目标能够根据具体需求进行文本各种属性及样式的编辑与设置，并提高学生自主学习、协作学习和知识迁移的能力。3. 情感目标通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。三、教学分析与准备1. 教学重点 文本样式的设置、应用及修改。 添加水平分隔线与列表。2教学难点文本样式的设置、应用及修改。3. 教学方法任务驱动学习、协作
12、学习和探究学习相结合4. 课时安排4课时。 5. 教学环境多媒体网络教室四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段教学内容备注组织课堂复习知识任务流程导入任务分析任务演示本任务完成效果，教师分析。完成任务知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业集中学生注意力，准备上课。指定学生上前操作，考察对添加文本内容及划分行与段落的掌握情况。在指定站点内新建一个网页，将事先输入的两首诗（没做任何格式设置）复制过来，要求学生通过插入空格、分行与分段操作，使页面外观美观。最后，预览网页。在开始新的课程学习之前，先来了解一
13、下，为什么要为网页设置文本样式及设置哪些文本样式。通过浏览网站，引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的，那么，如何完成文本样式的设置与编辑呢？ 提出任务：完成首页文本样式设置，为首页添加水平分隔线与列表。 可以直接通过属性面板设置指定文本的样式，也可以其他文本位置应用该样式，但样式的修改需要在CSS样式面板中进行。可以通过制作列表，添加水平线来编辑网页的外观。1文本样式设置与应用 为网页中第一行文字“幽幽我心的个人网站”设置文本样式回忆Word文本格式设置的设置步骤：首先选中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接着通
14、过文本属性面板完成设置。演示设置过程，强调：文本属性设置一气呵成的重要性以及反复选中修改属性的弊端。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。 为网页中第二段标题文字“自我介绍”设置文本样式。 为标题文字“青春寄语”、“立志飞翔”，应用样式（为“自我介绍”设置的样式）样式重命名引导学生观察并总结出样式默认命名形式为STYLE+N。一个网页中可能会定义许多样式，而这些样式不一定全是文本类型的，为了方便使用样式，最好对样式进行重命名，使名称能表示样式含义。演示为“幽幽我心的个人网站”中的文本样式重命名的方法，并按照课本P37页表格要求，设置“青春寄语”与“立志飞翔”中的文
15、本样式并重命名。修改文本样式提出如何修改文本样式让学生思考，学生们可能有说通过属性面板修改样式的，教师可以演示通过属性面板不能修改样式。演示修改title2样式：单击“样式”列表旁的按钮，打开“CSS样式”面板。对样式“title2”进行编辑，在面板当中修改颜色值为“#FF6600”。让学生观察应用了“title2”样式的文本颜色是否会发生相应的变化。插入列表与水平线选中“自我介绍”部分的文本内容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。将光标插入到“青春寄语”标题之前，将“插入”栏切换到“HTML”类别，选择其中的“水平线”按钮，在“自我介绍”内容和“青春寄语”内容之间插入
16、一条水平线，起到分隔的作用。通过完成本任务学习了文本样式设置与应用，修改文本样式，添加水平分隔线与列表知识，设置文本样式时最好一气呵成。 依据前面学习的知识与掌握的专业技能，引导学生完成类似的任务，教师作为组织者和引导者，着重启发学生寻找完成任务的思路，养成利用“书籍”、“帮助”、“网络”等自学的好习惯。将本单元素材“举一反三”文件夹中的网页“practice2-3.html”拷贝到D:mysite目录下，给页面中的每一段文字设置一种不同的文本样式。要设置各部分文字样式首先做什么，接下来通过什么面板进行设置；要做到标题醒目，各段样式不同但风格要一致。把不同层次的学生分在一组中，鼓励同学积极讨论
17、完成任务。组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。1新建一个网页“practice2-4.html”，插入5条水平线，使用属性面板进行不同的宽、高、对齐与阴影属性设置，预览页面并比较不同属性的设置效果。2.新建“班级荣誉”页面，文件名为“practice2-5.html”，列举班级成员所获奖励，设置为编号列表，修改文本样式，用不同的文本大小、颜色区分奖励的等级，保存并预览页面。尝试先设文本样式后设编号列表有何区别。（要求各组课
18、下搜集班级成员获奖情况，并制定一个设置方案）通过指定学生上前演示，复习与本任务有关的知识。力求通过任务导入，吸引学生学习兴趣。引入课题。教师讲解为主。大多数学生都有编辑Word格式的经验，引导学生将Word格式设置中的经验迁移过来，加深学习的印象。 教师启发思路，学生自己动手完成。提醒学生使用帮助功能找到答案。任务三 添加图像一、提出任务1任务目标为首页添加图像内容。2. 解决的问题本任务通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。 3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在网页中输入文本内容。二、教学目标1. 知识目标 掌握使用插入栏插入图像。 掌握使
19、用菜单栏插入图像。 掌握使用Ctrl+Alt+I组合键插入图像。 掌握使用文件面板插入图像。 掌握编辑图像的方法。2. 能力目标能够根据具体情况在指定位置灵活高效地插入图像并进行必要的编辑。3. 情感目标通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。三、教学分析与准备1. 教学重点 插入图像的各种方法。 图像的编辑操作。2教学难点图像编辑的方法。3. 教学方法任务驱动学习、协作学习和探究学习相结合。4. 课时安排4课时。 5. 教学环境多媒体网络教室四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。
20、）教学环节及手段教学内容备注组织课堂复习知识任务流程导入任务分析任务完成任务结合PPT进行讲解知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业集中学生注意力，准备上课。通过提问考察学生对设置文本样式及插入水平线的掌握情况。1如何设置文本样式？2如何重命名文本样式以及在CSS样式面板中修改文本样式？3如何插入水平线？通过联想学校宣传栏、报纸、儿童书籍以及课本等内容，总结出其中都有图像；引导学生懂得通过插入图像可以使内容生动直观，具体形象。进一步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网
21、页明确哪一个更适用并说明原因，引出要使首页内容生动形象，图像的添加和编辑就必不可少了。提出任务：为首页添加图像内容。图像是网页中经常使用的元素，图像的插入方法比较简单，但需要区分图像的格式，并不是所有的图像都能在网页中正常显示。插入图像后需要熟悉其属性面板的设置。1网页中图像文件的格式及其特点教师提出下列问题让学生分组查找答案：通常在网页中使用什么格式的图像文件，它们的特点是什么？在同学回答上述问题基础上，教师总结并讲解在网页中通常使用“.jpg”、“.gif”和“.png”格式图像文件及其这三种格式图像文件的特点。2准备素材：将本单元素材文件夹中的“images”文件夹下的全部图像素材复制到
22、D:mysiteimages文件夹下。使用文件面板插入图像拖曳文件面板中的 “top.jpg”到“自我介绍”标题前，插入图像“top.jpg”。选中所插入的图像，在属性面板中设置对齐方式为“右对齐”。预览页面效果。通过复习Word中插入图像的方法，总结出另外三种插入图像的方法。A使用菜单栏插入图像定位插入点到“立志飞翔”文字前，选择菜单栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。B使用插入栏常用类别中的按钮插入图像定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的按钮，插入“flying.gif”图像文件并设置对齐方式为“
23、右对齐”。C使用Ctrl+Alt+I组合键插入图像定位插入点到“立志飞翔”的第五段文字前，使用Ctrl+Alt+I组合键，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。4介绍图像属性面板完成图像的编辑。概括本课插入图像的四种方式。1将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”中，裁剪后宽度为200像素，高度为100像素，并设置边框宽度为5，完成后预览页面。插入后选中该图像并通过属性面板完成。把不同层次的学生分在一组中，鼓励同学积极研究探索完成任务。组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行
24、总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。2新建网页“practice2-8.html”，插入本单元素材文件夹中的“jyfs2.jpg”，尝试使用Dreamweaver 8的图像编辑功能修改图像的亮度并进行锐化设置。插入后选中该图像并通过属性面板完成。把不同层次的学生分在一组中，鼓励同学积极讨论完成任务的方法组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。1通过网络下载3张图片，文件类型分别为“jpg
25、”、“gif”、“bmp”，使用不同的方法插入到一个新建页面 “practice2-6.html”中。复习时教师按照学生回答演示操作，指出其中的问题。力求通过任务导入，吸引学生学习欲望。引入课题。教师提出问题，并提示可以通过网络搜索及查帮助找到答案。知识讲解。师生一起回顾，探索发现插入图像的三种方法。根据Word中插入图像的经验让学生尝试进行，尝试失败的可以查找“帮助”或通过网络获得答案。教师启发思路，学生自己动手完成。 任务四 创建与应用CSS美化网页一、提出任务1任务目标使用CSS美化网页。2解决的问题本任务通过为对首页进行美化，学习应用CSS样式。3本任务所涉及原有知识要点完成本任务所涉
26、及原有知识要点有：在网页中输入文本内容、插入图像及水平线。二、教学目标1. 知识目标 了解CSS样式的作用与特点。 掌握使用CSS设置文本样式。 掌握使用CSS设置背景样式。 掌握使用CSS设置列表样式。 掌握使用CSS设置水平线样式。2. 能力目标能够使用CSS样式面板进行样式的设置，区分使用“类”样式与“标签”样式。通过帮助或搜索引擎等查询学习过程中出现的的概念和定义，掌握获得相关信息的方法。3. 情感目标正确看待自己，合理评价他人。三、教学分析与准备1. 教学重点 CSS样式的设置。 “类”样式与“标签”样式的区别。2教学难点“类”样式与“标签”样式的区别。3. 教学方法提出任务并带领学
27、生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。4. 课时安排4课时。 5. 教学环境多媒体网络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段教学内容备注组织课堂复习知识任务流程导入任务分析任务完成任务知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业集中学生注意力，准备上课。通过提问复习上节课所学内容，并了解学生对上节课知识点的掌握情况。1网页中文本样式是如何设置的？2其他网页元素的样式是如
28、何设置的？是否也可以使用“属性”面板来完成？在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。即丰富了文本的外观、美化了页面同时也使文本属性的修改变得简单快捷。思考：是否可以用同样方法设置其它网页元素的样式？提出任务：使用CSS美化网页。使用属性面板设置文本样式是CSS应用的一种特例，其他网页元素可以使用属性面板应用已定义好的CSS样式，但不能通过属性面板完成样式的定义，本任务将学习CSS样式定义的一般方法。1创建与应用CSS文本样式。使用CSS面板创建文本样式“title3”，并将新样式应用到“青
29、春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。知识讲解： CSS样式的三种类型在使用“CSS样式”面板定义新的样式的时候，在弹出的对话框中要进行样式类型的选择，其中包含了“类”、“标签”和“高级”三种类型，三种类型分别具有如下特点。“类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。但是这种类型的样式在定义之后需要选择对象并应用后才会生效。“标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应
30、的标签对象中。“高级”样式：这种样式仅用于定义超级链接的4种状态，所以可定义的样式名称也只有相应的4种，分别是：“a:link”用于定义超级链接初始状态；“a:visited”用于定义已经访问过的超级链接状态；“a:hover”用于定义鼠标经过超级链接对象时的状态；“a:active”用于定义超级链接的活动状态。 CSS样式可定义参数。“类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。“背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。“区块”选项：用于定义文本的间距与对齐方式等属性。“方框”选项：用于定义表格、框架等对象
31、的属性。“边框”选项：用于定义各种对象的边框属性，表格、框架、水平线的边框样式都可以使用这一选项进行定义。“列表”选项：用于定义文本列表的属性。“定位”选项：用于定义层对象的属性。“扩展”选项：用于定义光标、图像等内容的视觉效果的扩展属性。2创建与应用页面背景样式。文本样式的设置使用的是三种CSS样式中的第一种类型，即“类”样式。其特点为：样式的定义与应用过程是分离的，所有定义好的“类”样式都需要选择相应对象进行应用。观察以下操作，比较“标签”样式与“类”样式的区别。单击“CSS样式”面板上的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在当前文档中新建一个命名为“body”的“标签”
32、样式。完成相应设置并浏览网页。思考并讨论：“类”样式与“标签”样式的区别。3完成其他样式的设置 定义“标签”样式“li”。 定义“类”样式“line”并应用到页面中的水平线上。思考：作为“类”样式的“line”是否只能应用于水平线？如果将一张图片应用了该样式，会有什么结果，为什么？通过本任务学习了样式设置方法及“类”样式与“标签”样式的区别。1新建网页“practice2-9.html”，插入3条水平线，定义3种“类”样式“l1”、“l2”、“l3”。定义过程中修改样式中的边框属性，使其拥有不同的效果，分别应用在各条水平线上，预览页面。三种“类”样式分别定义与应用，体现了“类”样式的使用特点。
33、每组4名同学，组长安排成员完成某一样式的相关操作。组织不同组的同学互相评论对方完成任务的优缺点。对正确完成的小组提出表扬，不正确的进行指正，或请其他组同学更正错误。2将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到D盘根目录下，定义“标签”样式“p”，设置文本大小与颜色，保存后预览页面观察效果，之后定义“类”样式“p1”，设置不同的文本大小与颜色，并应用于页面中所插入的文本，浏览页面观察效果，总结“类”样式与“标签”样式的区别。注意区分两种样式分别为“标签”样式和“类”样式，观察在两种样式共存的情况下，那种样式优先。把不同层次的学生分在一组中，鼓励同学积极讨论
34、完成任务的方法。组织同学自评或互评。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。新建网页“practice2-10.html”，插入本单元素材“举一反三”文件夹中的“jyfs3.jpg”和一条水平线，定义“类”样式“line1”，修改样式中的边框属性。分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。复习时教师按照学生回答演示操作，指出其中的问题。力求通过任务导入，吸引学生学习欲望。学生分组讨论并尝试操作。学生分组讨论实现方法，并比较与之前所使用方法的不同。教师作为引导者和组织者，学生分组上机操作，完成相应任务
35、并进行评价。学生总结之前任务中的方法或按教材中的操作步骤完成。学生分组讨论并通过尝试操作得出结论。任务五 使用代码制作图文网页一、提出任务1任务目标使用HTML代码制作一个图文网页“唐诗赏析”。2. 解决的问题通过完成本任务，学习使用HTML代码为网页添加图像、文本等元素并设置其属性。3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在设计视图中为网页添加文本、图像等元素并设置属性。二、教学目标1. 知识目标 掌握使用HTML代码在网页中插入文本。 掌握使用HTML代码在网页中插入列表。 掌握使用HTML代码在网页中插入图像。 掌握使用HTML代码在网页中插入水平线。 掌握使用HT
36、ML代码在网页中创建CSS样式。 掌握使用HTML代码设置文本等元素的属性。2. 能力目标能够使用HTML代码制作图文网页，并学会使用HTML代码设置图像、文本、水平线的属性。3. 情感目标培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。三、教学分析与准备1. 教学重点 使用HTML代码插入文本、图像和水平线。 使用HTML代码设置网页元素属性。2教学难点使用HTML代码设置网页元素属性。3. 教学方法任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。4. 课时安排4课时。 5. 教学环境多媒体网
37、络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段教学内容备注组织课堂复习知识任务流程导入任务分析任务完成任务知识讲解教师引导，学生讨论、分析。知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业集中学生注意力，准备上课。通过指定学生上前操作下列各题考察学生对已学HTML代码的掌握情况。1使用HTML代码创建一个空白网页文件。 2使用记事本创建一个空白网页文件。通过完成一个任务，启发学生思考完成任务的方法，讲授必要的知识，传授必要的技能。1展示一个图文页面，让学生描述在设计视图下的制作流程。2让学生讨论上面复习知识的
38、第2个问题，如果要求使用HTML代码来完成这个操作，该如何实现？由以上两个问题引出本课课题。 提出任务：使用代码制作图文网页使用HTML代码在网页中插入文本和图像，并进行简单的属性设置，了解相应标签的使用方法、插入位置和基本属性。1知识讲解 在使用HTML语言制作网页过程中，首先要设置网页的标题标签。如下所示：标 签 描述页面标题标签 插入文本、图片以及水平线需要如下标签：标 签 描述段落标签图像标签水平线标签 列表标签分为两种形式而列表项标签是相同的，如下所示：标 签 描述项目列表标签编号列表标签列表项标签 如何设置页面的背景颜色属性？ 如何设置段落标签、图像标签及水平线标签的属性？ 如何在
39、代码试图下应用CSS。2自己动手 准备工作。 设置标题并修改背景颜色。 添加图像与文本。a添加段落标签并设置属性。b添加图像标签并设置属性。c添加列表并设置属性。d. 添加水平线标签并设置属性。安排学生分组讨论并示范操作，教师引导。 使用CSS。使用代码定义CSS样式并将其应用到段落标签中。通过本任务主要学习了使用代码在网页中插入文本、图像、列表、水平线，并设置相应属性。将本单元素材 “举一反三”文件夹中的网页“practice2-12.html”拷贝到D盘根目录下，使用标签代码制作项目列表，并比较与编号列表的区别。项目列表标签与编号列表标签的区别在于列表的浏览效果不同，使用方法是相同的，所以两种列表中的列表项都是使用标签。学生分组上机，在组内进行讨论交流，最终完成任务。由各组学生代表来分析说明本组完成情况。指出学生在总结时可能出现的错误，补充不足，鼓励学生学习使用HTML代码制作网页的信心。将本单元素材 “举一反三”文件夹中的网页“practice2-13.html”拷贝到D盘根目录下，在“代码”视图下定义样式“txt”，设置字体样式为大小18像素，颜色为“#662244”，将这一样式应用到页面中的所有段落标签中，在任一位置插入本单元素材“举一反三”文件夹中的图像“jyfs4.jpg”，使用代码设置图像的对齐方式，完成后预览页面。
