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 常用工具栏和面板的使用方法要求掌握的知识点和分析方法要求掌握 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 的使用教学反思通过学习,大部分学生对网页制作这门课产生了浓厚的兴趣。3章 节
4、 项目一2 规划和创建站点 课时;2 课时讲授主要内容1. 创建站点的基本方法2. 管理站点的基本方法3. 设置首选参数的方法4. 创建文件夹和文件的基本方法重 点难 点导入和导出站点的基本方法设置首选参数的方法要求掌握的知识点和分析方法要求掌握网站制作流程、网页布局的基本方式、定义站点、创建文件夹和文件、设置首选参数等知识点。项目主要是让学生对使用 Dreamweaver 8 定义、创建和发布站点有一个总体认识,并学会其基本操作方法。在项目中,首先介绍做好一个网站必须经历的基本过程及网页布局和色彩搭配的基础知识,然后介绍服务器环境的配置以及在Dreamweaver 8 中定义和创建站点的基本
5、方法,最后使用 Dreamweaver 8 发布站点的方法。授课思路,采用的教学方法和辅助手段,板书设计,重点如何突出,难点如何解决,师生互动等1、教师讲解网站制作流程、网页布局的基本方式、网页色彩搭配的原理和技巧等基础知识,并演示创建站点的基本过程。2、通过 PPT 课件讲授基本知识。3、让学生自己动手重新制作教学案例。4、通过实训让学生进一步熟悉所学知识。作业布置 新建悠悠我心的站点,导出,发送给老师教学反思大部分学生都能很好的完成站点建设,对网页制作的基本知识有了进一步的了解4项目二 制作网站首页任务描述:上一个项目中,创建了“幽幽我心的个人网站” 。本项目将在这个站点中进行首页内容的制
6、作,学习如何在网页中添加文本和图像,使用 CSS 设置文本、图像和页面的样式。任务完成后效果如图所示:本项具体的教学过程共分为以下五个方面的任务:任务一 添加首页文本(4 课时)任务二 编辑文本样式 (4 课时)任务三 添加图像 (4 课时)任务四 创建与应用 CSS 美化网页 (4 课时)任务五 使用代码制作图文网页 (4 课时)5任务一 添加首页文本一、提出任务1任务目标完成首页文本内容。2. 解决的问题通过完成本任务学习修改网页标题,在网页中添加文本,分段换行和段内换行,输入连续空格,保存和预览网页等知识。 3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有:使用站点管理功能创
7、建站点,在文件面板中创建和打开首页文件。二、教学目标1. 知识目标 掌握修改网页标题。 掌握输入网页文本内容的方法。 掌握网页编辑中三种不同换行方式的区别。 了解在文档窗口中输入连续空格的几种方法。 熟悉保存和预览网页的方法。2. 能力目标掌握添加和编辑网页文本的基本操作,能够根据具体需求添加网页文本内容;通过参加科学探究活动,具有初步添加和编辑网页文本的能力,并加深对网页文本重要性的理解。3. 情感目标通过分组完成任务,提高自主学习和协作学习的能力,培养团队精神。三、教学分析与准备1. 教学重点 修改网页标题。 输入网页文本内容的方法。 在文档中对文本分段换行和段内换行,输入连续空格。2教学
8、难点 网页编辑中三种不同换行方式的区别。 在文档窗口中输入连续空格的几种方法。3. 教学方法任务驱动学习和协作学习、探究学习相结合。4. 课时安排4 课时。 5. 教学环境多媒体网络教室。四、教学过程(组织课堂、复习知识、教师引领完成任务占 1 学时;举一反三占 3 学时。 )教学环节及手段 教学内容 备注组织课堂复习知识集中学生注意力,准备上课。指定学生上前操作,考察学生对新建站点、新建文件功能的掌握情况。通过学生动手操作,复习与本次6任务流程导入任务浏览规定站点,教师引导,学生讨论、分析分析任务完成任务教师启发学生,使学生借助课本、帮助等完成。1新建站点“幽幽我心的个人网站” 。2新建首页
9、文件 index.html 并打开。在开始新的课程学习之前,先来了解一下,网页元素的构成,为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页,引导学生分析网页的构成元素,得出结论:网页元素归纳起来有文本、图像、表格等,其中最常用的是文本。因而,为首页添加内容,最重要的是为首页添加文本。打开前面创建的首页文件,展示给学生。显然,一个没有任何内容的网页是毫无意义的,从而导入要为首页添加内容。为首页添加文本,就需要掌握在网页中编辑文本的一些操作。提出任务:添加首页文本在第一单元中建立了首页空白文件“index.html”,本单元将对首页修改标题,添加准备好的内容并设置其格式。鼓励学生通过查
10、书、查找帮助找到并总结出添加网页内容的途径以及设置网页内容格式的方法。修改网页标题并预览列举各站点的首页标题。明确首页的标题是对网站主旨的概括,起着画龙点睛的作用。制作首页,首先就是要修改首页标题文本。回顾打开首页文件的方法。在文档工具栏中,将标题修改为“幽幽我心的个人网站” 。提醒学生注意:文档窗口左上角网页名称处的“*”代表文件已经被修改过但并没保存,保存后“*”会消失。预览网页输入首页文本内容并划分段落 输入首页文本将素材“index.txt”文本内容复制粘贴到文档窗口。通过比较使学生明确:从普通文档中复制过来的文本不保留格式内容,只保留段落结构,并且在文本遇到文档窗口的边界时会自动换行
11、。 换行操作a “自我介绍” 、 “青春寄语”和“立志飞翔 任务有关的知识。力求通过任务导入,吸引学生学习欲望。引导学生分析归纳。明确任务。教师提出任务要求,由学生进行讨论,教师归纳总结。学生观察标题修改后文档窗口左上角网页名称的变化。学生观察预览效果。7结合 PPT 进行知识讲解知识总结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结任务目标启发思路分组完成任务学生自评互评”部分进行段落划分b “立志飞翔 ”部分进行强制换行总结,三种换行方式的特点及其实现方法。 输入连续空格演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后,保存网页。强调及时保存页面是一个好
12、习惯,可以避免断电或系统故障导致的数据丢失。通过完成本任务学习了修改网页标题,输入网页文本内容,分段换行和段内换行,输入连续空格,保存和预览网页。依据前面学习的知识与掌握的专业技能,学生自己完成类似的任务,教师作为组织者和引导者,着重启发学生寻找完成任务的思路,养成检索与应用“书籍” 、 “帮助” 、 “网络”自学的好习惯。1使用 IE 浏览器浏览各种类型的页面,分析各个页面中文本所起作用,并分析是否可以用其他网页元素代替。在互连网上有各种类型的网站,如搜索引擎类网站,商业类网站,个人网站等。设计各种类型的页面都可以从中借鉴。对学生进行分组,每组选择一个主题网站进行分析。要求每组学生讲出自己的
13、分析结果,并自评。结论:文本在网页制作中起着关键的作用,通常不能用其他网页元素替代。2新建一个网页“practice2-1.html” ,将本单元素材“举一反三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中,使用插入空格的方法修改文本,使每一行文本中的“vs”字样达到对齐的效果。新建网页“practice2-1.html” ,可以这样完学生对照观察原文本文件与粘贴到文档窗口后文本格式的变化情况。 教师作为引导者和组织者,学生分组上机操作,完成相应任务并进行评价。8教师点评总结任务目标启发思路分组完成任务学生自评互评教师点评总结布置作业成:借助头脑里的知识;借助互联网借助D
14、reamweaver 帮助同学讨论。对学生分组,开始完成任务每组同学演示自己完成的任务,其他组给以评价。总结各组同学完成任务情况,对完成好的给以表扬,没有完成的引导其找出没有完成的原因。3新建一个网页“practice2-2.html” ,输入多行文字内容并进行分段和强制换行,修改网页标题为“换行效果预览” ,保存后预览页面,观察在 IE 浏览器中标题在什么位置,浏览器窗口大小发生变化时,对三种换行方式的影响。三种换行方式指的是自动换行、分段和强制换行,重点理解它们的区别。对学生分组,开始完成任务每组同学演示自己完成的任务,其他组给以评价。总结各组同学完成任务情况,对完成好的给以表扬,没有完成
15、的引导其找出没有完成的原因。可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。思考下列问题:1如何预览和保存网页?2如何对文档窗口中的文本进行段落的划分和强制换行操作?3如何实现插入栏两种显示方式的转换?9任务二 编辑文本样式一、提出任务1任务目标完成首页文本样式设置,添加水平分隔线与列表。2. 解决的问题本任务通过设置首页文本样式,学习文本样式设置与应用,修改文本样式,添加水平分隔线与列表知识。 3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有:输入文本内容的方法,段内换行与划分段落方法,输入连续空格的方法。二、教学目标1. 知识目标 掌握文本样式设置与应用。 掌握修改文
16、本样式。 掌握重命名文本样式。 掌握添加水平分隔线与列表。2. 能力目标能够根据具体需求进行文本各种属性及样式的编辑与设置,并提高学生自主学习、协作学习和知识迁移的能力。3. 情感目标通过教师引导学生主动参与学习,使学生学会使用探求性学习方法获取新知识,激发学习本课程的兴趣,增强学好本课程的信心。三、教学分析与准备1. 教学重点 文本样式的设置、应用及修改。 添加水平分隔线与列表。2教学难点文本样式的设置、应用及修改。3. 教学方法任务驱动学习、协作学习和探究学习相结合4. 课时安排4 课时。 5. 教学环境多媒体网络教室四、教学过程(组织课堂、复习知识、教师引领完成任务占 2 学时;举一反三
17、占 2学时。 )教学环节及手段 教学内容 备注组织课堂 集中学生注意力,准备上课。10复习知识任务流程导入任务分析任务演 示本任务完成效果,教师分析。完成任务指定学生上前操作,考察对添加文本内容及划分行与段落的掌握情况。在指定站点内新建一个网页,将事先输入的两首诗(没做任何格式设置)复制过来,要求学生通过插入空格、分行与分段操作,使页面外观美观。最后,预览网页。在开始新的课程学习之前,先来了解一下,为什么要为网页设置文本样式及设置哪些文本样式。通过浏览网站,引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的,那么,如何完成文本样式的设置与编辑呢? 提出任务:完成首页
18、文本样式设置,为首页添加水平分隔线与列表。可以直接通过属性面板设置指定文本的样式,也可以其他文本位置应用该样式,但样式的修改需要在 CSS 样式面板中进行。可以通过制作列表,添加水平线来编辑网页的外观。1文本样式设置与应用 为网页中第一行文字“幽幽我心的个人网站”设置文本样式回忆 Word 文本格式设置的设置步骤:首先选中相应文本;接着通过格式工具栏进行设置。网页制作也类似,首先要选中相应文本,接着通过文本属性面板完成设置。演示设置过程,强调:文本属性设置一气呵成的重要性以及反复选中修改属性的弊端。简介文本属性面板各部分及其功能,讲解为“字体”列表项添加字体的方法。 为网页中第二段标题文字“自我介绍”设置文本样式。 为标题文字“青春寄语” 、 “立志飞翔” ,应用样式(为“自我介绍”设置的样式)样式重命名引导学生观察并总结出样式默认命名形式为通过指定学生上前演示,复习与本任务有关的知识。力求通过任务导入,吸引学生学习兴趣。引入课题。教师讲解为主。大多数学生都有编辑 Word 格式的经验,引导学生将 Word 格式设置中的经验迁移过来,加深学习的印象。