《网页制作》项目式教案设计3304.pdf

《《网页制作》项目式教案设计3304.pdf》由会员分享，可在线阅读，更多相关《《网页制作》项目式教案设计3304.pdf（80页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实用标准 文案大全 长汀职业中专学校 教 案 科目：电商网页制作 计算机组：张开秀 班级：15 电商3、4 班 2 项目一 初始dreamweaver8 和建立站点 章 节 项目一1 初识Dreamweaver 8 课时；2 课时 讲授主 要内容 1.Dreamweaver 8 的基本概况 2.Dreamweaver 8 的功能和作用 3.Dreamweaver 8 的学习方法 4.Dreamweaver 8 的工作界面 5.Dreamweaver 8 工具栏和面板的使用方法 重 点 难 点 Dreamweaver 8 的工作界面 Dreamweaver 8 常用工具栏和面板的使用方法 要求掌

2、握 的知识点和分析方法 要求掌握Dreamweaver 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 的使用 3 教学反思 通过学习，大部分

4、学生对网页制作这门课产生了浓厚的兴趣。章 节 项目一2 规划和创建站点 课时；2 课时 讲授主 要内容 1.创建站点的基本方法 2.管理站点的基本方法 3.设置首选参数的方法 4.创建文件夹和文件的基本方法 重 点 难 点 导入和导出站点的基本方法 设置首选参数的方法 要求掌握 的知识点和分析方法 要求掌握网站制作流程、网页布局的基本方式、定义站点、创建文件夹和文件、设置首选参数等知识点。项目主要是让学生对使用Dreamweaver 8 定义、创建和发布站点有一个总体认识，并学会其基本操作方法。在项目中，首先介绍做好一个网站必须经历的基本过程 及 网 页 布 局 和 色 彩 搭 配 的 基 础

5、 知 识，然 后 介 绍 服 务 器 环 境 的 配 置 以 及 在Dreamweaver 8 中定义和创建站点的基本方法，最后使用Dreamweaver 8 发布站点的方法。授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等 1、教师讲解网站制作流程、网页布局的基本方式、网页色彩搭配的原理和技巧等基础知识，并演示创建站点的基本过程。2、通过PPT 课件讲授基本知识。3、让学生自己动手重新制作教学案例。4、通过实训让学生进一步熟悉所学知识。作业布置 新建悠悠我心的站点，导出，发送给老师 4 教学反思 大部分学生都能很好的完成站点建设，对网页制作的基本知识有了进

6、一步的了解 项目二 制作网站首页 任务描述：上一个项目中，创建了“幽幽我心的个人网站”。本项目将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS 设置文本、图像和页面的样式。任务完成后效果如图所示：本项具体的教学过程共分为以下五个方面的任务：任务一 添加首页文本（4 课时）5 任务二 编辑文本样式（4 课时）任务三 添加图像（4 课时）任务四 创建与应用CSS 美化网页（4 课时）任务五 使用代码制作图文网页 （4 课时）任务一 添加首页文本 一、提出任务 1任务目标 完成首页文本内容。2.解决的问题 通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换

7、行，输入连续空格，保存和预览网页等知识。3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：使用站点管理功能创建站点，在文件面板中创建和打开首页文件。二、教学目标 1.知识目标 掌握修改网页标题。掌握输入网页文本内容的方法。掌握网页编辑中三种不同换行方式的区别。了解在文档窗口中输入连续空格的几种方法。熟悉保存和预览网页的方法。2.能力目标 掌握添加和编辑网页文本的基本操作，能够根据具体需求添加网页文本内容；通过参加科学探究活动，具有初步添加和编辑网页文本的能力，并加深对网页文本重要性的理解。3.情感目标 通过分组完成任务，提高自主学习和协作学习的能力，培养团队精神。三、教学分析与准备

8、 1.教学重点 修改网页标题。6 输入网页文本内容的方法。在文档中对文本分段换行和段内换行，输入连续空格。2教学难点 网页编辑中三种不同换行方式的区别。在文档窗口中输入连续空格的几种方法。3.教学方法 任务驱动学习和协作学习、探究学习相结合。4.课时安排 4 课时。5.教学环境 多媒体网络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占1 学时；举一反三占3 学时。）教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 浏 览 规 定 站点，教师引导，学生讨论、分析 分析任务 完成任务 集中学生注意力，准备上课。指定学生上前操作，考察学生对新建站点、新建文件功能的掌

9、握情况。1新建站点“幽幽我心的个人网站”。2新建首页文件index.html 并打开。在开始新的课程学习之前，先来了解一下，网页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页，引导学生分析网页的构成元素，得出结论：网页元素归纳起来有文本、图像、表格等，其中最常用的是文本。因而，为首页添加内容，最重要的是为首页添加文本。打开前面创建的首页文件，展示给学生。显然，一个没有任何内容的网页是毫无意义的，从而导入要为首页添加内容。为首页添加文本，就需要掌握在网页中编辑文本的一些操作。提出任务：添加首页文本 在第一单元中建立了首页空白文件“index.html”，本单元将对首页修

10、改标题，添加准备好的内容并设置其格式。鼓励学生通过查书、查找帮助找到并总结出添加网页内容的途径以及设置网页内容格式的方法。修改网页标题并预览 列举各站点的首页标题。明确首页的标题是对网站主旨的概括，起着画龙点睛的作用。制作首页，通 过 学 生 动 手操作，复习与本次任务有关的知识。力 求 通 过 任 务导入，吸引学生学习欲望。引 导 学 生 分 析归纳。明确任务。教 师 提 出 任 务要求，由学生进行讨论，教师归纳总结。7 教 师 启 发 学生，使学生借助课本、帮助等完成。结合PPT进行知识讲解 知识总结 举一反三 任务目标 启发思路 分组完成任务 首先就是要修改首页标题文本。回顾打开首页文件

11、的方法。在文档工具栏中，将标题修改为“幽幽我心的个人网站”。提醒学生注意：文档窗口左上角网页名称处的“*”代表文件已经被修改过但并没保存，保存后“*”会消失。预览网页 输入首页文本内容并划分段落 输入首页文本 将素材“index.txt”文本内容复制粘贴到文档窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式内容，只保留段落结构，并且在文本遇到文档窗口的边界时会自动换行。换行操作 a“自我介绍”、“青春寄语”和“立志飞翔”部分进行段落划分 b“立志飞翔”部分进行强制换行 总结，三种换行方式的特点及其实现方法。输入连续空格 演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操

12、作。最后，保存网页。强调及时保存页面是一个好习惯，可以避免断电或系统故障导致的数据丢失。通过完成本任务学习了修改网页标题，输入网页文本内容，分段换行和段内换行，输入连续空格，保存和预览网页。依据前面学习的知识与掌握的专业技能，学生自己完成类似的任务，教师作为组织者和引导者，着重启发学生寻找完成任务的思路，养成检索与应用“书籍”、“帮助”、“网络”自学的好习惯。1使用IE 浏览器浏览各种类型的页面，分析各个页面中文本所起作用，并分析是否可以用其他网页元素代替。在互连网上有各种类型的网站，如搜索引擎类网站，商业类网站，个人网站等。设计各种类型的页面都可以从中借鉴。对学生进行分组，每组选择一个主题网

13、站进行 学 生 观 察 标 题修改后文档窗口左上角网页名称的变化。学 生 观 察 预 览效果。学 生 对 照 观 察原文本文件与粘贴到文档窗口后文本格式的变化情况。8 学生自评或互评 教师点评总结 任务目标 启发思路 分组完成任务 学生自评互评 教师点评总结 任务目标 启发思路 分组完成任务 学生自评互评 教师点评总结 布置作业 分析。要求每组学生讲出自己的分析结果，并自评。结论：文本在网页制作中起着关键的作用，通常不能用其他网页元素替代。2新建一个网页“practice2-1.html”，将本单元素材“举一反三”文件夹中“practice2-1.txt”的文本内容拷贝到页面中，使用插入空格的

14、方法修改文本，使每一行文本中的“vs”字样达到对齐的效果。新建网页“practice2-1.html”，可以这样完成：借助头脑里的知识；借助互联网借助Dreamweaver 帮助同学讨论。对学生分组，开始完成任务 每组同学演示自己完成的任务，其他组给以评价。总结各组同学完成任务情况，对完成好的给以表扬，没有完成的引导其找出没有完成的原因。3新建一个网页“practice2-2.html”，输入多行文字内容并进行分段和强制换行，修改网页标题为“换行效果预览”，保存后预览页面，观察在IE 浏览器中标题在什么位置，浏览器窗口大小发生变化时，对三种换行方式的影响。三种换行方式指的是自动换行、分段和强制

15、换行，重点理解它们的区别。对学生分组，开始完成任务 每组同学演示自己完成的任务，其他组给以评价。总结各组同学完成任务情况，对完成好的给以表扬，没有完成的引导其找出没有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。教 师 作 为 引 导者和组织者，学生分组上机操作，完成相应任务并进行评价。9 思考下列问题：1如何预览和保存网页？2如何对文档窗口中的文本进行段落的划分和强制换行操作？3如何实现插入栏两种显示方式的转换？任务二 编辑文本样式 一、提出任务 1任务目标 完成首页文本样式设置，添加水平分隔线与列表。2.解决的问题 本任务通过设置首页文本样式，学习文本样式设置与应用

16、，修改文本样式，添加水平分隔线与列表知识。3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：输入文本内容的方法，段内换行与划分段落方法，输入连续空格的方法。二、教学目标 1.知识目标 掌握文本样式设置与应用。掌握修改文本样式。掌握重命名文本样式。掌握添加水平分隔线与列表。2.能力目标 能够根据具体需求进行文本各种属性及样式的编辑与设置，并提高学生自主学习、协作学习和知识迁移的能力。3.情感目标 通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。三、教学分析与准备 1.教学重点 文本样式的设置、应用及修改。10 添加水平

17、分隔线与列表。2教学难点 文本样式的设置、应用及修改。3.教学方法 任务驱动学习、协作学习和探究学习相结合 4.课时安排 4 课时。5.教学环境 多媒体网络教室 四、教学过程（组织课堂、复习知识、教师引领完成任务占2 学时；举一反三占2 学时。）教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 分析任务 演示本任务完成效果，教师分析。完成任务 集中学生注意力，准备上课。指定学生上前操作，考察对添加文本内容及划分行与段落的掌握情况。在指定站点内新建一个网页，将事先输入的两首诗（没做任何格式设置）复制过来，要求学生通过插入空格、分行与分段操作，使页面外观美观。最后，预览网页。

18、在开始新的课程学习之前，先来了解一下，为什么要为网页设置文本样式及设置哪些文本样式。通过浏览网站，引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的，那么，如何完成文本样式的设置与编辑呢？提出任务：完成首页文本样式设置，为首页添加水平分隔线与列表。可以直接通过属性面板设置指定文本的样式，也可以其他文本位置应用该样式，但样式的修改需要在CSS 样式面板中进行。可以通过制作列表，添加水平线来编辑网页的外观。1文本样式设置与应用 为网页中第一行文字“幽幽我心的个人网站”设置文本样式 回忆Word 文本格式设置的设置步骤：首先选 通过指定学生上前演示，复习与本 任 务 有

19、关 的 知识。力求通过任务导入，吸引学生学习兴趣。引入课题。教师讲解为主。大多数学生都有编辑Word格式的经验，引导学生将Word格式设置中的经验迁移过来，加深学习的印象。11 知识总结 举一反三 任务目标 中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接着通过文本属性面板完成设置。演示设置过程，强调：文本属性设置一气呵成的重要性以及反复选中修改属性的弊端。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。为网页中第二段标题文字“自我介绍”设置文本样式。为标题文字“青春寄语”、“立志飞翔”，应用样式（为“自我介绍”设置的样式）样式重命名 引导学生

20、观察并总结出样式默认命名形式为STYLE+N。一个网页中可能会定义许多样式，而这些样式不一定全是文本类型的，为了方便使用样式，最好对样式进行重命名，使名称能表示样式含义。演示为“幽幽我心的个人网站”中的文本样式重命名的方法，并按照课本P37 页表格要求，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。修改文本样式 提出如何修改文本样式让学生思考，学生们可能有说通过属性面板修改样式的，教师可以演示通过属性面板不能修改样式。演示修改title2 样式：单击“样式”列表旁的按钮，打开“CSS 样式”面板。对样式“title2”进行编辑，在面板当中修改颜色值为“#FF6600”。让学生观察应用了“

21、title2”样式的文本颜色是否会发生相应的变化。插入列表与水平线 选中“自我介绍”部分的文本内容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。将光标插入到“青春寄语”标题之前，将“插入”栏切换到“HTML”类别，选择其中的“水平线”按钮，在“自我介绍”内容和“青春寄语”内容之间插入一条水平线，起到分隔的作用。通过完成本任务学习了文本样式设置与应用，修 教师启发思路，学生自己动手完成。12 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 改文本样式，添加水平分隔线与列表知识，设置文本样式时最好一气呵成。依据前面学习的知识与掌握的专业技能，引导学生完成类似的任务，教

22、师作为组织者和引导者，着重启发学生寻找完成任务的思路，养成利用“书籍”、“帮助”、“网络”等自学的好习惯。将本单元素材“举一反三”文件夹中的网页“practice2-3.html”拷贝到D:mysite 目录下，给页面中的每一段文字设置一种不同的文本样式。要设置各部分文字样式首先做什么，接下来通过什么面板进行设置；要做到标题醒目，各段样式不同但风格要一致。把不同层次的学生分在一组中，鼓励同学积极讨论完成任务。组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。可以根据每组任务完成情况结合自评与互

23、评情况给出每组的成绩。1新建一个网页“practice2-4.html”，插入 5 条水平线，使用属性面板进行不同的宽、高、对齐与阴影属性设置，预览页面并比较不同属性的设置效果。2.新 建“班 级 荣 誉”页 面，文 件 名 为“practice2-5.html”，列举班级成员所获奖励，设置为编号列表，修改文本样式，用不同的文本大小、颜色区分奖励的等级，保存并预览页面。尝试先设文本样式后设编号列表有何区别。（要求各组课下搜集班级成员获奖情况，并制定一个设置方案）提醒学生使用帮 助 功 能 找 到 答案。13 任务三 添加图像 一、提出任务 1任务目标 为首页添加图像内容。2.解决的问题 本任务

24、通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：在网页中输入文本内容。二、教学目标 1.知识目标 掌握使用插入栏插入图像。掌握使用菜单栏插入图像。掌握使用Ctrl+Alt+I 组合键插入图像。掌握使用文件面板插入图像。掌握编辑图像的方法。2.能力目标 能够根据具体情况在指定位置灵活高效地插入图像并进行必要的编辑。3.情感目标 通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学习本课程的兴趣，增强学好本课程的信心。三、教学分析与准备 1.教学重点 插入图像的各种方法。图像的编辑操作。14 2教学

25、难点 图像编辑的方法。3.教学方法 任务驱动学习、协作学习和探究学习相结合。4.课时安排 4 课时。5.教学环境 多媒体网络教室 四、教学过程（组织课堂、复习知识、教师引领完成任务占2 学时；举一反三占2 学时。）教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 结合PPT 进行讲解 集中学生注意力，准备上课。通过提问考察学生对设置文本样式及插入水平线的掌握情况。1如何设置文本样式？2如何重命名文本样式以及在CSS 样式面板中修改文本样式？3如何插入水平线？通过联想学校宣传栏、报纸、儿童书籍以及课本等内容，总结出其中都有图像；引导学生懂得通过插入图像可

26、以使内容生动直观，具体形象。进一步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网页明确哪一个更适用并说明原因，引出要使首页内容生动形象，图像的添加和编辑就必不可少了。提出任务：为首页添加图像内容。图像是网页中经常使用的元素，图像的插入方法比较简单，但需要区分图像的格式，并不是所有的图像都能在网页中正常显示。插入图像后需要熟悉其属性面板的设置。1网页中图像文件的格式及其特点 教师提出下列问题让学生分组查找答案：通常在网页中使用什么格式的图像文件，它们的特点是什么？在同学回答上述问题基础上，教师总结并讲解在网页中通常使用“.jpg”、“.gif”和“.png”格式图像文件及

27、其这三种格式图像文件的特点。2 准 备 素 材：将 本 单 元 素 材 文 件 夹 中 的“images”文 件 夹 下 的 全 部 图 像 素 材 复 制 到D:mysiteimages 文件夹下。复 习 时 教 师 按照学生回答演示操作，指出其中的问题。力 求 通 过 任 务导入，吸引学生学习欲望。引入课题。教师提出问题，并提示可以通过网络搜索及查帮助找到答案。知识讲解。15 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 任务目标 启发思路 分组完成任务 使用文件面板插入图像 拖曳文件面板中的“top.jpg”到“自我介绍”标题前，插入图像“top.j

28、pg”。选中所插入的图像，在属性面板中设置对齐方式为“右对齐”。预览页面效果。通过复习Word 中插入图像的方法，总结出另外三种插入图像的方法。A使用菜单栏插入图像 定位插入点到“立志飞翔”文字前，选择菜单栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。B使用插入栏常用类别中的按钮插入图像 定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的按钮，插入“flying.gif”图像文件并设置对齐方式为“右对齐”。C使用Ctrl+Alt+I 组合键插入图像 定位插入点到“立志飞翔”的第五段文字前，使用Ctrl+Alt+I 组合键，插

29、入“flying.gif”图像文件并设置对齐方式为“左对齐”。4介绍图像属性面板 完成图像的编辑。概括本课插入图像的四种方式。1将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”中，裁剪后宽度为200 像素，高度为100 像素，并设置边框宽度为5，完成后预览页面。插入后选中该图像并通过属性面板完成。把不同层次的学生分在一组中，鼓励同学积极研究探索完成任务。组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。2新建网页“practice2-8.htm

30、l”，插入本单元 素 材 文 件 夹 中 的“jyfs2.jpg”，尝 试 使 用Dreamweaver 8 的图像编辑功能修改图像的亮度并进行锐化设置。插入后选中该图像并通过属性面板完成。师生一起回顾，探索发现插入图像的三种方法。根据Word 中插入图像的经验让学生尝试进行，尝试失败的可以查找“帮助”或通过网络获得答案。教师启发思路，学生自己动手完成。16 学生自评或互评 教师点评总结 布置作业 把不同层次的学生分在一组中，鼓励同学积极讨论完成任务的方法 组织不同组的同学互相评论对方完成任务的优缺点。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没

31、有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。1通过网络下载3 张图片，文件类型分别为“jpg”、“gif”、“bmp”，使用不同的方法插入到一个新建页面“practice2-6.html”中。任务四 创建与应用CSS 美化网页 一、提出任务 1任务目标 使用CSS 美化网页。2解决的问题 本任务通过为对首页进行美化，学习应用CSS 样式。3本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。二、教学目标 1.知识目标 了解CSS 样式的作用与特点。掌握使用CSS 设置文本样式。掌握使用CSS 设置背景样式。掌握使用CSS

32、 设置列表样式。掌握使用CSS 设置水平线样式。2.能力目标 能够使用CSS 样式面板进行样式的设置，区分使用“类”样式与“标签”样式。通过帮助或搜索引擎等查询学习过程中出现的的概念和定义，掌握获得相关信息的方法。3.情感目标 正确看待自己，合理评价他人。三、教学分析与准备 1.教学重点 CSS 样式的设置。“类”样式与“标签”样式的区别。17 2教学难点“类”样式与“标签”样式的区别。3.教学方法 提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。4.课时安排 4 课时。5.教学环境 多媒体网络教室。四、教学过

33、程（组织课堂、复习知识、教师引领完成任务占2 学时；举一反三占2 学时。）教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 集中学生注意力，准备上课。通过提问复习上节课所学内容，并了解学生对上节课知识点的掌握情况。1网页中文本样式是如何设置的？2其他网页元素的样式是如何设置的？是否也可以使用“属性”面板来完成？在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。即丰富了文本的外观、美化了页面同时也使文本属性的修改变得简单快捷。思考：是否可以用同样方法设置其它网

34、页元素的样式？提出任务：使用CSS 美化网页。使用属性面板设置文本样式是CSS 应用的一种特例，其他网页元素可以使用属性面板应用已定义好的CSS 样式，但不能通过属性面板完成样式的定义，本任务将学习CSS 样式定义的一般方法。1创建与应用CSS 文本样式。使用CSS 面板创建文本样式“title3”，并将新样式应用到“青春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。知识讲解：CSS 样式的三种类型 在使用“CSS 样式”面板定义新的样式的时候，在弹出的对话框中要进行样式类型的选择，其中包含了“类”、“标签”和“高级”三种类型，三种类型分别具有如下特点。复 习 时 教 师

35、 按照学生回答演示操作，指出其中的问题。力 求 通 过 任 务导入，吸引学生学习欲望。学 生 分 组 讨 论并尝试操作。学 生 分 组 讨 论实现方法，并比较与之前所使用方法的不同。18 “类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。但是这种类型的样式在定义之后需要选择对象并应用后才会生效。“标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应的标签对象中。“高级”样式：这种样式仅用于定义超级链接的 4 种状态

36、，所以可定义的样式名称也只有相应的4 种，分别是：“a:link”用于定义超级链接初始状态；“a:visited”用于定义已经访问过的超级链接状态；“a:hover”用于定义鼠标经过超级链接对象时的状态；“a:active”用于定义超级链接的活动状态。CSS 样式可定义参数。“类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。“背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。“区块”选项：用于定义文本的间距与对齐方式等属性。“方框”选项：用于定义表格、框架等对象的属性。“边框”选项：用于定义各种对象的边框属性，表格、框架、

37、水平线的边框样式都可以使用这一选项进行定义。“列表”选项：用于定义文本列表的属性。“定位”选项：用于定义层对象的属性。“扩展”选项：用于定义光标、图像等内容的视觉效果的扩展属性。2创建与应用页面背景样式。文本样式的设置使用的是三种CSS 样式中的第一种类型，即“类”样式。其特点为：样式的定义与应用过程是分离的，所有定义好的“类”样式都需要选择相应对象进行应用。观察以下操作，比较“标签”样式与“类”样式的区别。单击“CSS 样式”面板上的“新建CSS 规则”按钮，弹出“新建CSS 规则”对话框，在当前文档中新建一个命名为“body”的“标签”样式。完成相应设置并浏览网页。19 知识总结 举一反三

38、 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 任务目标 启发思路 分组完成任务 学生自评或互评 思考并讨论：“类”样式与“标签”样式的区别。3完成其他样式的设置 定义“标签”样式“li”。定义“类”样式“line”并应用到页面中的水平线上。思考：作为“类”样式的“line”是否只能应用于水平线？如果将一张图片应用了该样式，会有什么结果，为什么？通过本任务学习了样式设置方法及“类”样式与“标签”样式的区别。1新建网页“practice2-9.html”，插入3 条水平线，定义3 种“类”样式“l1”、“l2”、“l3”。定义过程中修改样式中的边框属性，使其拥有不同的效果，分别

39、应用在各条水平线上，预览页面。三种“类”样式分别定义与应用，体现了“类”样式的使用特点。每组4 名同学，组长安排成员完成某一样式的相关操作。组织不同组的同学互相评论对方完成任务的优缺点。对正确完成的小组提出表扬，不正确的进行指正，或请其他组同学更正错误。2将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到D 盘根目录下，定义“标签”样式“p”，设置文本大小与颜色，保存后预览页面观察效果，之后定义“类”样式“p1”，设置不同的文本大小与颜色，并应用于页面中所插入的文本，浏览页面观察效果，总结“类”样式与“标签”样式的区别。注意区分两种样式分别为“标签”样式和“类”

40、样式，观察在两种样式共存的情况下，那种样式优先。把不同层次的学生分在一组中，鼓励同学积极讨论完成任务的方法。教 师 作 为 引 导者和组织者，学生分组上机操作，完成相应任务并进行评价。学 生 总 结 之 前任务中的方法或按教材中的操作步骤完成。学 生 分 组 讨 论并通过尝试操作得出结论。20 教师点评总结 布置作业 组织同学自评或互评。教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。新建网页“practice2-10.html”，插入本单元素材“举一反三”文件夹中的“jyfs3.jpg”和一条水平线，定义“类”样式“line1”，修改

41、样式中的边框属性。分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。任务五 使用代码制作图文网页 一、提出任务 1任务目标 使用HTML 代码制作一个图文网页“唐诗赏析”。2.解决的问题 通过完成本任务，学习使用HTML 代码为网页添加图像、文本等元素并设置其属性。3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：在设计视图中为网页添加文本、图像等元素并设置属性。二、教学目标 1.知识目标 掌握使用HTML 代码在网页中插入文本。掌握使用HTML 代码在网页中插入列表。掌握使用HTML 代码在网页中插入图像。掌握使用HTML 代码在网页中插入水平线。掌握使用H

42、TML 代码在网页中创建CSS 样式。掌握使用HTML 代码设置文本等元素的属性。2.能力目标 能够使用HTML 代码制作图文网页，并学会使用HTML 代码设置图像、文本、水平线的属性。3.情感目标 培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。21 三、教学分析与准备 1.教学重点 使用HTML 代码插入文本、图像和水平线。使用HTML 代码设置网页元素属性。2教学难点 使用HTML 代码设置网页元素属性。3.教学方法 任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。4.课时安排 4 课时。

43、5.教学环境 多媒体网络教室。四、教学过程（组织课堂、复习知识、教师引领完成任务占2 学时；举一反三占2 学时。）教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 知识讲解 教师引导，学生讨论、分析。集中学生注意力，准备上课。通过指定学生上前操作下列各题考察学生对已学 HTML 代码的掌握情况。1使用HTML 代码创建一个空白网页文件。2使用记事本创建一个空白网页文件。通过完成一个任务，启发学生思考完成任务的方法，讲授必要的知识，传授必要的技能。1展示一个图文页面，让学生描述在设计视图下的制作流程。2让学生讨论上面复习知识的第2 个问题，如果要求使用H

44、TML 代码来完成这个操作，该如何实现？由以上两个问题引出本课课题。提出任务：使用代码制作图文网页 使用HTML 代码在网页中插入文本和图像，并进行简单的属性设置，了解相应标签的使用方法、插入位置和基本属性。1知识讲解 在使用HTML 语言制作网页过程中，首先要设置网页的标题标签。如下所示：标 签 描 述 页面标题标签 插入文本、图片以及水平线需要如下标签：标 签 描 述 学生操作。力求通过任务导入，吸引学生学习兴趣。任 务提出后的分析过程可以先由学生讨论，再由教师总结。22 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 段落标签 图像标签 水平

45、线标签 列表标签分为两种形式而列表项标签是相同的，如下所示：标 签 描 述 项目列表标签 编号列表标签 列表项标签 如何设置页面的背景颜色属性？如何设置段落标签、图像标签及水平线标签的属性？如何在代码试图下应用CSS。2自己动手 准备工作。设置标题并修改背景颜色。添加图像与文本。a添加段落标签并设置属性。b添加图像标签并设置属性。c添加列表并设置属性。d.添加水平线标签并设置属性。安排学生分组讨论并示范操作，教师引导。使用CSS。使用代码定义CSS 样式并将其应用到段落标签中。通过本任务主要学习了使用代码在网页中插入文本、图像、列表、水平线，并设置相应属性。将本单元素材“举一反三”文件夹中的网

46、页“practice2-12.html”拷贝到D 盘根目录下，使用标签代码制作项目列表，并比较与编号列表的区别。项目列表标签与编号列表标签的区别在于列表的浏览效果不同，使用方法是相同的，所以两种列表中的列表项都是使用标签。学生分组上机，在组内进行讨论交流，最终完成任务。由各组学生代表来分析说明本组完成情况。培养学生自主学习、探究学习的能力。23 指出学生在总结时可能出现的错误，补充不足，鼓励学生学习使用HTML 代码制作网页的信心。将本单元素材“举一反三”文件夹中的网页“practice2-13.html”拷贝到D 盘根目录下，在“代码”视图下定义样式“txt”，设置字体样式为大小18 像素，

47、颜色为“#662244”，将这一样式应用到页面中的所有段落标签中，在任一位置插入本单元素材“举一反三”文件夹中的图像“jyfs4.jpg”，使用代码设置图像的对齐方式，完成后预览页面。项目三 制作“作品展示”网页 本项目通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接”四个任务，完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页的布局。任务完成后效果如图所示：24 本项具体的教学过程共分为以下五个方面的任务：任务一 创建表格（4 课时）任务二 编辑表格（4 课时）任务三 添加表格内容（4 课时）任务四 建立超级链接（6 课时）任务五 使用代码制作表

48、格网页（6 课时）任务一 创建表格 一、提出任务 1任务目标 完成“作品展示”网页中表格的创建。2解决的问题 通过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，掌握创建表格的几种方法。3本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：在页面添加文本，设置文本格式，插入图像，设置图像格式。二、教学目标 1.知识目标 理解表格在网页设计中的作用。掌握利用表格布局页面。掌握创建表格的基本方法。掌握创建嵌套表格。掌握在网页中利用表格进行排版。2.能力目标 掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。25 3.情感目标 通过参与

49、作品评价，提高学生的审美能力与鉴别能力。鼓励学生根据任务需求进行科学合理的设计，提高学生分析问题与解决问题能力。三、教学分析与准备 1.教学重点 理解表格在网页设计中的作用。分析页面的表格布局。创建表格的基本方法。2教学难点 分析页面的表格布局。创建嵌套表格。3.教学方法 任务驱动学习、协作学习、探究拓展学习与举一反三相结合。4.课时安排 4 课时。5.教学环境 多媒体网络教室。四、学习过程（组织课堂、复习知识、教师引领完成任务占2 学时，举一反三占2 学时。）教学环节及手段 教学内容 备注 组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 分析网页布局 集中学生注意力，准备上课。通

50、过提问考察学生对插入图像基础知识的了解。如何在网页上插入一张图片，并调整图片的大小、位置？学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、地址、联系电话”。通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。在 Dreamweaver 8 中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。提出任务：利用表格规划、布局作品展示网页。依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“tabl