网页制作项目式教案

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