《网页制作》项目式教案.docx

《网页制作》项目式教案.docx

《《网页制作》项目式教案.docx》由会员分享，可在线阅读，更多相关《《网页制作》项目式教案.docx（129页珍藏版）》请在冰豆网上搜索。

《网页制作》项目式教案

长汀职业中专学校

教

案

科目：

《电商网页制作》

计算机组：

张开秀

班级：

15电商3、4班

项目一初始dreamweaver8和建立站点

章节

项目一\1初识Dreamweaver8课时；2课时

讲授主

要内容

1.Dreamweaver8的基本概况

2.Dreamweaver8的功能和作用

3.Dreamweaver8的学习方法

4.Dreamweaver8的工作界面

5.Dreamweaver8工具栏和面板的使用方法

重点

难点

Dreamweaver8的工作界面

Dreamweaver8常用工具栏和面板的使用方法

要求掌握

的知识点和分析方法

要求掌握Dreamweaver8的功能和作用、定义站点的基本过程、创建文件和保存文件的方法、Dreamweaver8窗口界面、浮动面板组、【标准】工具栏、【文件】面板、【文档】工具栏、【属性】面板、【插入】面板、工作区布局等知识点。

项目主要是让学生对网页制作软件Dreamweaver8有一个总体认识，并掌握学习Dreamweaver8的基本方法。

在项目中，首先介绍Dreamweaver8的发展历程、功能和作用，同时欣赏一些优秀网站，然后介绍学习Dreamweaver8的基本方法，最后介绍Dreamweaver8的工作界面及其相关知识。

授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等

1、从网页案例欣赏入手，让学生增强对网页设计与制作这门课程的兴趣，同时增强创业的信心。

2、以情景模拟的方式介绍Dreamweaver8的功能和作用以及学习方法。

3、以制作一个简单的网页为例（悠悠我心的个人网站），让学生认识Dreamweaver8的工作界面和工作过程。

4、通过PPT课件讲授基本知识。

5、让学生自己动手制作教学案例，来进一步巩固Dreamweaver8的使用。

作业布置

打开教师发布的悠悠我心个人网站，巩固Dreamweaver8的使用

教学反思

通过学习，大部分学生对网页制作这门课产生了浓厚的兴趣。

章节

项目一\2规划和创建站点课时；2课时

讲授主

要内容

1.创建站点的基本方法

2.管理站点的基本方法

3.设置首选参数的方法

4.创建文件夹和文件的基本方法

重点

难点

导入和导出站点的基本方法

设置首选参数的方法

要求掌握

的知识点和分析方法

要求掌握网站制作流程、网页布局的基本方式、定义站点、创建文件夹和文件、设置首选参数等知识点。

项目主要是让学生对使用Dreamweaver8定义、创建和发布站点有一个总体认识，并学会其基本操作方法。

在项目中，首先介绍做好一个网站必须经历的基本过程及网页布局和色彩搭配的基础知识，然后介绍服务器环境的配置以及在Dreamweaver8中定义和创建站点的基本方法，最后使用Dreamweaver8发布站点的方法。

授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等

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:

\mysite\images文件夹下。

３．使用文件面板插入图像

拖曳文件面板中的“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”，尝试使用Dreamweaver8的图像编辑功能修改图像的亮度并进行锐化设置。

插入后选中该图像并通过属性面板完成。

把不同层次的学生分在一组中，鼓励同学积极讨论完成任务的方法

组织不同组的同学互相评论对方完成任务的优缺点。

教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。

可以根据每组任务完成情况结合自评与互评情况给出每组的成绩。

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.教学重点

⑴C