《网页制作》项目式教案

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

2、用、te义站点的基本过程、创建文件和保 存文件的方法、Dreamweaver 8窗口界囿、浮动面板组、【标准】工具栏、【文件】面 板、【文档】工具栏、【属性】面板、【插入】面板、工作区布局等知识点。项目主要是让学生对网页制作软件Dreamweaver 8有一个总体认识，并掌握学习Dreamweaver 8的基本方法。在项目中，首先介绍Dreamweaver 8的发展历程、功能和作用，同时欣赏一些优秀网站，然后介绍学习Dreamweaver 8的基本方法，最后介绍Dreamweaver 8的工作界面及其相关知识。授课思路，采 用的教学方 法和辅助手 段，板书设 计，重点如何 突出，难点如 何解决

3、，师生 互动等1、从网页案例欣赏入手，让学生增强对网页设计与制作这门课程的兴趣，同时 增强创业的信心。2、以f景模拟的方式介绍 Dreamweaver 8的功能和作用以及学习方法。3、以制作一个简单的网页为例（悠悠我心的个人网站），让学生认识Dreamweaver8的工作界面和工作过程。4、通过PPT课件讲授基本知识。5、让学生自己动手制作教学案例，来进,步巩固Dreamweaver 8的使用。作业布置打开教师发布的悠悠我心个人网站，巩固Dreamweaver 8的使用教学反思通过学习，大部分学生对网页制作这门课产生了浓厚的兴趣。早 下项目一 、2规划和创建站点课时；2课时讲授主 要内容1 .

4、创建站点的基本方法2 .管理站点的基本方法3 .设置首选参数的方法4 .创建文件夹和文件的基本方法重点 难点导入和导出站点的基本方法 设置首选参数的方法要求掌握 的知识点和 分析方法要求掌握网站制作流程、网页布局的基本方式、定义站点、创建文件夹和文件、 设置首选参数等知识点。项目主要是让学生对使用Dreamweaver 8 te义、创建和发布站点什-个总体认识，并学会具基本操作方法。在项目中，首先介绍做好一个网站必须经历的基本过 程及网页布局和色彩搭配的基础知识，然后介绍服务器环境的配置以及在 Dreamweaver 8中定义和创建站点的基本方法，最后使用Dreamweaver 8发布站点的方

5、法。授课思路，采 用的教学方 法和辅助手 段，板书设 计，重点如何 突出，难点如 何解决，师生互动等1、教师讲解网站制作流程、网页布局的基本方式、网页色彩搭配的原理和技巧 等基础知识，并演示创建站点的基本过程。2、通过PPT课件讲授基本知识。3、让学生自己动手重新制作教学案例。4、通过实训让学生进一步熟悉所学知识。作业布置新建悠悠我心的站点，导出，发送给老师教学反思大部分学生都能很好的完成站点建设，对网页制作的基本知识有了进一步的了解项目二制作网站首页任务描述：上一个项目中，创建了 “幽幽我心的个人网站”。本项目将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS设置文

6、本、图像和页面的样式。幽幽我心的个人网站任务完成后效果如图所示:自我介绍+ a +.1 B -r +B +44 -1A- 名别龄座格好联 网性年星性爱5 ® ® ® ® ® ® ®座所, 瓶心乐 女9水断音:y3. 作16 写优也许大生的旅程不是那么一帆风II短可能处处都充满着荆棘和坎坷.然而雎健的苍寇却能冲破那无边的 天际,自由地翱翔于渺茫的天宇。破旧的扁舟却能横渡那幽深的大洋，艰难地航行于离蓝的大洲.啊，快走出那阴疆的笼罩，去投身温暖的阳光，去接受青春的洗礼.有一天，渊会突然发现世界是那么 美好.自信是胜利的武春自卑是失

7、败的敌军.汗水点滴看生活的印迹，泪花扑洒着进取的源泉.生命终归 Y 整完毕我同电防本项具体的教学过程共分为以下五个方面的任务:任务一添加首页文本（4课时）任务二编辑文本样式（4课时）任务三 添加图像 （4课时）任务四创建与应用CSS美化网页 （4课时）任务五 使用代码制作图文网页（4课时）任务一添加首页文本一、提出任务1 .任务目标完成首页文本内容。2 .解决的问题通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换行，输入连 续空格，保存和预览网页等知识。3 .本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：使用站点管理功能创建站点，在文件面板中创建和 打开首页文件。二

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

9、在文档窗口中输入连续空格的几种方法。3 .教学方法任务驱动学习和协作学习、探究学习相结合。4 .课时安排4课时。5 .教学环境多媒体网络教室。四、教学过程(组织课堂、复习知识、教师引领完成任务占1学时；举一反三占3学时。)教学环节及手段教学内容备注组织课堂复习知识集中学生注意力，准备上课。指定学生上前操作，考察学生对新建站点、新 重文件功能的掌握情况。通过学生动手 操作，复习与本次任任务流程导入任务浏览规定站 k教师引导，学 /讨论、分析分析任务完成任务教师启发学 生，使学生借助课 k帮助等完成。1 .新建站点“幽幽我心的个人网站”。2 .新建首页文件index.html 并打开。在开始新的课

10、程学习之前，先来了解一下，网 页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页，引导 学生分析网页的构成元素，得出结论：网页元素归 纲起来有文本、图像、表格等，其中最常用的是文 本。因而，为首页添加内容，最重要的是为首页添 加文本。打开前面创建的首页文件，展示给学生。显然，一个没有任何内容的网页是毫无意义的，从而导入 要为首页添加内容。为首页添加文本，就需要掌握在网页中编辑文 本的一些操作。提出任务：添加首页文本在第一单元中建立了首页空白文件 “index.html”,本单元将对首页修改标题，添加准 备好的内容并设置其格式。鼓励学生通过查书、查找帮助找到并总结出添 加

11、网页内容的途径以及设置网页内容格式的方法。1 .修改网页标题并预览列举各站点的首页标题。明确首页的标题是对 网站主旨的概括，起着画龙点睛的作用。制作首页， 苜先就是要修改首页标题文本。回顾打开首页文件的方法。在文档工具栏中，将标题修改为“幽幽我心的 个人网站”。提醒学生注意：文档窗口左上角网页名称处的 “*”代表文件已经被修改过但并没保存，保存后 “*”会消失。预览网页2 .输入首页文本内容并划分段落输入首页文本将素材"index.txt ”文本内容复制粘贴到文 卜当窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式内 容，只保留段落结构，并且在文本遇到文档窗口的 边界时

12、会自动换行。换行操作务有关的知识。力求通过任务 导入，吸引学生学习 欲望。引导学生分析 归纳。明确任务。教师提出任务 要求，由学生进行讨 论，教师归纳总结。学生观察标题 修改后文档窗口左 上角网页名称的变 化。学生观察预览 效果。a. “自我介绍”、“青春寄语”和“立志飞翔 ” 部分进行段落划分结合PPT进行 知识讲解知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评互评b. “立志飞翔”部分进行强制换行总结，三种换行方式的特点及其实现方法。输入连续空格演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后，保存网页。强调及

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

14、 分析。要求每组学生讲出自己的分析结果，并自评。结论：文本在网页制作中起着关键的作用，通 常不能用其他网页元素替代。2 .新建一个网页"practice2-1.html ”,将本 单元素材"举一反三"文件夹中"practice2-1.txt ' 的文本内容拷贝到页面中，使用插入空格的方法修 改文本，使每一行文本中的“ vs”字样达到对齐的 效果。新建网页"practice2-1.html ”,可以这样完 或：借助头脑里的知识；借助互联网借助 Dreamweaver帮助同学讨论。学生对照观察 原文本文件与粘贴 到文档窗口后文本 格式的变化

15、情况。教师作为引导 者和组织者，学生分 组上机操作，完成相 应任务并进行评价。对学生分组，开始完成任务教师点评总结任务目标启发思路分组完成任务学生自评互评教师点评总结布置作业每组同学演示自己完成的任务，其他组给以评 价。总结各组同学完成任务情况，对完成好的给以 麦扬，没有完成的引导其找出没有完成的原因。3 .新建一个网页"practice2-2.html ”,输入 多行文字内容并进行分段和强制换行，修改网页标 题为“换行效果预览”，保存后预览页面，观察在 E浏览器中标题在什么位置， 浏览器窗口大小发生 变化时，对三种换行方式的影响。三种换行方式指的是自动换行、分段和强制换 行，重点理

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

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

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

19、设置文本样式及设置哪些文本样 式。通过浏览网站，引导学生明白文本字体、字 号、颜色、加粗、倾斜及对齐方式等文本样式的 设置是必需的，那么，如何完成文本样式的设置 与编辑呢？提出任务：完成首页文本样式设置，为首页添加水平分隔线与列表。识。力求通过任务 导入，吸引学生学 习兴趣。引入课题。完成任务教师讲解为 主。大多数学生都 有编辑Word格式的 经验，引导学生将 Word格式设置中的 经验迁移过来，加 深学习的印象。可以直接通过属性面板设置指定文本的样 式，也可以其他文本位置应用该样式，但样式的 修改需要在CSS羊式面板中进行。可以通过制作列表，添加水平线来编辑网页 的外观。1 .文本样式设置与

20、应用 为网页中第一行文字 “幽幽我心的个人网 站”设置文本样式回忆Word文本格式设置的设置步骤：首先选 中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接 着通过文本属性面板完成设置。演示设置过程，强调：文本属性设置一气呵 成的重要性以及反复选中修改属性的弊端。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。为网页中第二段标题文字“自我介绍”设置 文本样式。为标题文字“青春寄语”、“立志飞翔” 应用样式（为“自我介绍”设置的样式）2 .样式重命名引导学生观察并总结出样式默认命名形式为 STYLE+N 一个网页中可能会定义许多样式，而这 些样式不

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

22、水平线知识总结选中“自我介绍”部分的文本内容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。教师启发思将光标插入到“青春寄语”标题之前，将“插路，学生自己动手举一反三入”栏切换到“ HTML类别，选择其中的“水平完成。线”按钮，在“自我介绍”内容和“青春寄语”内容之间插入一条水平线，起到分隔的作用。任务目标通过完成本任务学习了文本样式设置与应用，修改文本样式，添加水平分隔线与列表知识，设置文本样式时最好一气呵成。启发思路依据前面学习的知识与掌握的专业技能，引分组完成任务导学生完成类似的任务，教师作为组织者和引导如臼生于二h jzrn帮助功能找到答者，着重启发学生寻找完成任务的思路，

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

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

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

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

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

28、f ”和“ .png ”格 式图像文件及其这三种格式图像文件的特点。2 .准备素材：将本单元素材文件夹中的 “images ”文件夹下的全部图像素材复制到 D:mysiteimages 文件夹卜。3 .使用文件面板插入图像拖曳文件面板中的“top.jpg ”到“自我介绍”标题前，插入图像“ top.jpg ; 选中所插入的图 像，在属性面板中设置对齐方式为“右对齐”。预览页面效果。通过复习Word中插入图像的方法，总结出另 外三种插入图像的方法。A.使用菜单栏插入图像定位插入点到“立志飞翔”文字前，选择菜单 栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“

29、左对齐”。B.使用插入栏常用类别中的按钮插入图像定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的国按钮，插入“flying.gif ”图像文件并设置对齐方式为“右 对齐”。C.使用Ctrl+Alt+I组合键插入图像定位插入点到“立志飞翔”的第五段文字前，力求通过任务 导入，吸引学生学习 欲望。引入课题。教师提出问题， 并提不可以通过网 络搜索及查帮助找 到答案。知识讲解。师一起回顾， 探索发现插入图像 的三种方法。根据Word中插 入图像的经验让学 生尝试进行，尝试失 败的可以查找“帮 助”或通过网络获得 答案。举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总

30、结任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业使用Ctrl+Alt+I组合键，插入"flying.gif ”图像文件并设置对齐方式为“左对齐”。4.介绍图像属性面板完成图像的编辑。概括本课插入图像的四种方式。1 .将本单元素材文件夹中的“ jyfsi.jpg ”插入到一个新建页面“practice2-7.html ”中，裁剪 后宽度为200像素，高度为100像素，并设置边框 宽度为5,完成后预览页面。教师启发思路,插入后选中该图像并通过属性面板完成。学生自己动手完成。把不同层次的学生分在一组中，鼓励同学积极 研究探索完成任务。组织不同组的同学互相评论对方完成任务的

31、优缺点。教师对每组同学完成任务情况进行总结，对完 成任务的表扬，对没有完成任务的鼓励，并帮助他 们分析没有完成的原因。2 .新建网页“practice2-8.html ”,插入本单元素材文件夹中的“jyfs2.jpg ; 尝试使用 Dreamweaver 8的图像编辑功能修改图像的亮度并 进行锐化设置。插入后选中该图像并通过属性面板完成。把不同层次的学生分在一组中，鼓励同学积极 讨论完成任务的方法组织不同组的同学互相评论对方完成任务的 优缺点。教师对每组同学完成任务情况进行总结，对完 成任务的表扬，对没有完成任务的鼓励，并帮助他 们分析没有完成的原因。可以根据每组任务完成情 况结合自评与互评情

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

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

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

35、置其它网页元素 的样式？提出任务：使用 CSS美化网页。力求通过任务 导入，吸引学生学习 欲望。学生分组讨论 并尝试操作。分析任务使用属性面板设置文本样式是CSS应用的一种特例，其他网页元素可以使用属性面板应用已定义 好的CSS样式，但不能通过属性面板完成样式的定 义，本任务将学习 CSS羊式定义的一般方法。完成任务1.创建与应用CS或本样式。使用CSS面板创建文本样式 “title3 ”，并将新 样式应用到“青春寄语”部分的标题文本上。讨论 这种方法与之前学习的设置方法有什么不同。知识讲解：CSS样式的三种类型在使用“ CSS羊式”面板定义新的样式的时候， 在弹出的对话框中要进行样式类型的选

36、择，其中包 含了 “类”、“标签”和“高级”三种类型，三种类 型分别具有如下特点。“类”样式：“类”样式是最为灵活的一种类型 的样式，它可以任意定义名称并且应用到网页中的 各种对象上。但是这种类型的样式在定义之后需要 选择对象并应用后才会生效。“标签”样式：“标签”样式的定义是建立在 HTML言基础上的，可以针对网页中的各种标签进 行定义，所以用这种类型的样式定义的名称仅限于 固定的标签名称，并且在样式定义后，直接被应用 到页面中相应的标签对象中。“高级”样式：这种样式仅用于定义超级链接 的4种状态，所以可定义的样式名称也只有相应的 4种，分别是：“a:link ”用于定义超级链接初始状 态；

37、"a:visited ”用于定义已经访问过的超级链接 状态；"a:hover ”用于定义鼠标经过超级链接对象 时的状态；"a:active ”用于定义超级链接的活动状 态。CSS样式可定义参数。“类型”选项：用于定义常规的文本属性，包 括“字体”、“大小”、“颜色”等选项。学生分组讨论 实现方法，并比较与 之前所使用方法的 不同。“背景”选项：用于定义背景属性， 可设置“背 景颜色”、“背景图像"、背景图像的“水平位置”等 选项。“区块”选项：用于定义文本的间距与对齐方 式等属性。“方框”选项：用于定义表格、框架等对象的 属性。“边框”选项：用于定义各种

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

39、式。完成相应设置并浏览网页。思考并讨论：“类”样式与“标签”样式的区别。3 .完成其他样式的设置定义“标签”样式“ li定义“类”样式“line ”并应用到页面中的 水平线上。知识总结举一反三任务目标启发思路思考：作为“类”样式的“ line ”是否只能应 用于水平线？如果将一张图片应用了该样式，会有 什么结果，为什么？通过本任务学习了样式设置方法及“类”样式 与“标签”样式的区别。教师作为引导 者和组织者，学生分 组上机操作，完成相 应任务并进行评价。学生总结之前 任务中的方法或按1.新建网页“practice2-9.html ”,插入 3 条 水平线，定义3种“类”样式“ 11 ”、“12

40、 ”、“13 定义过程中修改样式中的边框属性，使其拥有不同 的效果，分别应用在各条水平线上，预览页面。三种“类”样式分别定义与应用，体现了 “类” 样式的使用特点。分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业每组4名同学，组长安排成员完成某一样式的 相关操作。组织/、同组的同学互相评论对方完成任务的优 缺点。对正确完成的小组提出表扬，不止确的进行指 正，或请其他组同学更止错误。2.将本单兀素材“举一反三”文件夹中的网页 “practice2-11.html ”拷贝到D盘根目录下，定义 “标签”样式“ p”，设置文本大小与颜色，保存后 预览

41、页面观察效果，之后定义“类”样式“ pl”，设 置小何的文本大小与颜色，并应附于贝向中所插入 的文本，浏览页面观察效果，总结“类”样式与“标 签”样式的区别。注意区分两种样式分别为“标签”样式和“类” 样式，观察在两种样式共存的情况下，那种样式优 先。把/、同层次的学生分在一组中，鼓励同学积极 讨论完成任务的方法。组织同学自评或互评。教师对每组同学完成任务情况进行总结，对完 成任务的表扬，对没后完成任务的鼓励，并帮助他 们分析没有完成的原因。新建网页"practice2-10.html ”,插入本单兀 素材“举一反三”文件夹中的“ jyfs3.jpg ”和一条 水平线，定义“类”样式

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

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

44、学方法的运用，不仅让学生掌握相关知识，同时提高学生的学习能力。4 .课时安排4课时。5 .教学环境多媒体网络教室。四、教学过程(组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。)教学环节及手段教学内容备注组织课堂复习知识集中学生注意力，准备上课。通过指定学生上前操作卜列各题考察学生对已 学HTML代码的掌握情况。1 .使用HTML代码创建一个空白网页文件。2 .使用记事本创建一个空白网贝文件。学生操作。任务流程导入任务分析任务完成任务知识讲解教师引导，学生讨论、分析。通过完成一个任务，启发学生思考完成任务的方 法，讲授必要的知识，传授必要的技能。1 .展示一个图文页面，让学生描

45、述在设计视图 下的制作流程。2 .让学生讨论上面复习知识的第2个问题，如果要求使用HTML代码来完成这个操作，该如何实现？由以上两个问题引出本课课题。提出任务：使用代码制作图文网页使用HTML代码在网页中插入文本和图像，并进 行简单的属性设置，了解相应标签的使用方法、插入 位置和基本属性。1.知识讲解在使用HTML言制作网页过程中，首先要设 置网页的标题标签。如下所示：标签描 述<title >,</t itle> ,页面标 题标签插入文本、图片以及水平线需要如下标签：标签描 述<p>,</ p>,段落标签 <img>,图像标签<

46、;hr>,水平线标签列表标签分为两种形式而列表项标签是相同 的，如下所示：标签描 述<ul >,</ ul>,项目列表标签<ol >,</ ol> ,编号列表标签<li> ,列表项标签如何设置页面的背景颜色属性？如何设置段落标签、图像标签及水平线标签 的属性？(6)如何在代码试图卜应用 CSS2.自己动手准备工作。设置标题并修改背景颜色。添加图像与义本。a.添加段落标签并设置属性。b.添加图像标签并设置属性。c.添加列表并设置属性。d.添加水平线标签并设置属性。安排学生分组讨论笄不范操作，教师引导。力求通过任务 导入，吸引学生学

47、 习兴趣。任务提出后的 分析过程可以先由 学生讨论，再由教 师总结。知识总结(4)使用CSS使用代码定义 CSS样式并将其应用到段落标签中。举一反三任务目标通过本任务主要学习了使用代他在网页中插入培养学生自主文本、图像、列表、水平线，并设置相应属性。学习、探究学习的能力。将本单兀素材“举一反三”文件夹中的网页启发思路“practice2-12.html ”拷贝到D盘根目录下，使用<ul></ul>标签代码制作项目列表，并比较与编号列表的区别。分组完成任务项目列表标签与编号列表标签的区别在于列表的浏览效果不同，使用方法是相同的， 所以两种列表中的列表项都是使用<li

48、>标签。学生自评或互评学生分组上机，在组内进行讨论交流， 最终完成教师点评总结任务。由各组学生代表来分析说明本组完成情况。布置作业指出学生在总结时可能出现的错误，补充不足，鼓励学生学习使用 HTML弋码制作网页的信心。将本单兀素材“举一反三”文件夹中的网页“practice2-13.html ”拷贝到D盘根目录下，在“代码”视缸F定义样式“ txt ”，设置字体样式为大小18像素，颜色为“ #662244”，将这一样式应用到页面中的所有段落标签中， 在任一位置插入本单兀素材“举一反三”文件夹中的图像“jyfs4.jpg ”，使用代码设直图像的对齐方式，完成后预览贝面。项目三制作作品展示”

49、网页本项目通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接” 四个任务, 完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页 的布局。任务完成后效果如图所示：本项具体的教学过程共分为以下五个方面的任务:任务一创建表格 （4课时）任务二编辑表格 （4课时）任务三添加表格内容 （4课时）任务四建立超级链接 （6课时）任务五使用代码制作表格网页（6课时）任务一创建表格一、提出任务1 .任务目标完成“作品展示”网页中表格的创建。2 .解决的问题通过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，掌握创建表格的几种方法。3 .本任务

50、所涉及原有知识要点完成本任务所涉及原有知识要点有：在页面添加文本，设置文本格式，插入图像，设置 图像格式。二、教学目标1.知识目标理解表格在网页设计中的作用。掌握利用表格布局页面。 掌握创建表格的基本方法。(4)掌握创建嵌套表格。 掌握在网页中利用表格进行排版。2 .能力目标掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。3 .情感目标 通过参与作品评价，提高学生的审美能力与鉴别能力。鼓励学生根据任务需求进行科学合理的设计，提高学生分析问题与解决问题能力。三、教学分析与准备1 .教学重点理解表格在网页设计中的作用。分析页面的表格布局。创建表格的基本方法。2 .

51、教学难点分析页面的表格布局。创建嵌套表格。3 .教学方法任务驱动学习、协作学习、探究拓展学习与举一反三相结合。4 .课时安排4课时。5 .教学环境多媒体网络教室。四、学习过程(组织课堂、复习知识、教师引领完成任务占2学时，举一反三占2学时。)教学环节及手段教学内容备注组织课堂集中学生注意力，准备上课。复习提问通过提问考察学生对插入图像基础知识的了解。学生回答，如何在网页上插入一张图片，并调整图片的大小、教师按照步骤操作。任务流程学生展开导入任务学生分组讨论如何在网页上制作一个班级通讯录， 每行内容有“姓名、照片、地址、联系电话”。通过上面讨论，引导学生认识利用表格制作通讯录 是方便快捷的方式，

52、再引导学生联想生活中用到的表 格，进而了解表格在网页制作中的广泛应用。在Dreamweaver 8中，表格是用于在页面上显示表 格式数据及对文本和图像等元素进行布局的强用力的 （具。本任务将学习在网页制作中如何灵活运用表格。提出任务：利用表格规划、布局作品展示网页。讨论分析任务教师展示依据设计图样，可以使用四个表格把页面划分为四“作品展示”网个区域，四个表格分别命名为" tablel "、"table2 ”、 "table3 "和"table4 ”。依据不同的设计内容，这四0表格还需要进行相应的编辑与嵌套。页成品完成任务PPT给出课分

53、析网页布局1.分析网贝布局本图3-1贝囿布见喋本图3-2 ,教师带领字生进行贝囿表格分 析。引导学生了解：“tablel ”是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套一个1行5列的表格“ table1-1 ”，用于放置五个导航按钮。“table2 ”是一个1行4列的表格。左右单元格为 空白区域，中间两个单兀格分别用于放置“作品展示” 和“友情链接”两张图像。“table3 ”是一个1行3列的表格。左右单元格为 空白区域，中间单元格用于放置作品分类标题和图像。在中间单元格嵌套一个6行1列的表格“ table3-1 ”。“table3-1 ”表格的每一行再嵌套一个表格，其中第、三、五行分别嵌套一个 1行2列的表格，用于放置 图标及作品题目；第二、四、六行分别嵌套一个1行5列的表格，放置三幅作品及左右两个空白区域。“table4 ”是一个3行1列的表格，第一行是空白 区域，第二行通过设置行属性显示为一条细线，第三行放置版权信息。重点理解如下内容：