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