网页制作教案.docx

网页制作教案.docx

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

网页制作教案

Dreamweavercs3授课教案

授课班级：

12微机（2、3）班授课教师：

李敏

（一）

学习领域

初识Dreamweavercs3

学习单元

第1章

学习课时

2课时

主要行为（重点）

操作界面

部分行为

开发工具多样性

目标群体

12微机（2、3）班

教学环境

多媒体机房

行为能力分析

专业能力

界面的认识

社会能力

新环境的适应能力

方法能力

对照法演示法

教学方法

演示法讨论法

教学活动

教学过程及时间分配

教学内容

师生活动

任务书

　在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。

注意难点：

设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。

我的第一张网页

　　我叫张三丰，性别男，我是05网络技术班的同学，我爱计算机专业，我最爱的课就是网页设计，噍，这就是我设计的第一张网页。

下达任务，分析任务书

组织教学（1分钟）

组织学生、清点人数

复习导课（4分钟）

同学们，网页设计是一门非常有意思的课，它简单易学，但要学好它，还需要花上许多课外时间去多上机练习，多看别人设计的优秀网页；网页设计是一项新兴的职业，现在许多单位、部门都有网站，如我校不但有校园网，还有部门网站、班级网站，学好了网页设计，就多了一项就业的重要本领。

告诉你，现在一名优秀的网页设计师，具有较高的待遇呢。

问答

讲授新课（20分）

Dreamweaver的基本概念

1、了解Dreamweaver与IE有什么区别？

　Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。

2、做网页只能使用Dreamweaver一种工具吗？

　常用的网页制作软件有Dreamweaver和FrontPage。

Dreamweaver由美国

Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。

Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。

3、Dreamweaver最新版是多少？

　Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。

可见计算机是多么的富有活力。

今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。

对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。

4、Dreamweaver与Firework、Flash有何关系？

　它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。

有人把这三个软件称作网页设计“三剑客”。

教师讲解演示、学生总结

项目准备（5分）

见第1章素材

制定实施方案（5分）

　Dreamweaver中的文字处理与Word中的相似，也有字体、字号等概念。

但有4点需要大家区别：

1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片

2、字体只有1号到7号，7号最大，默认即3号

3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替

4、需要换行时用+<回车>，这时只是换行并没换段

相互探讨，决定操作方法

项目实施（35分）

一、Dreamweaver的界面组成和基本使用

1、启动、保存、关闭

2、菜单与界面

3、面板的使用

　面板是对软件进行集中设置、制作的地方，最重要的面板是“属性”面板，如果不小心把它关闭了，单击菜单“窗口-属性”可以重新打开该面板。

插入面板的功能与插入菜单相同，通过“窗口”菜单可以进行面板的打开或关闭。

二、文字处理

　　Dreamweaver中的文字处理与Word中的相似，也有字体、字号等概念。

但有4点需要大家区别：

1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片

2、字体只有1号到7号，7号最大，默认即3号

3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替

4、需要换行时用+<回车>，这时只是换行并没换段

学生操作完成项目，教师巡回指导

项目评价（18）

评价标准（附表）

作业布置

（2）

1、Dreamweaver软件是干什么用的？

2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？

3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？

4、双击网页文件，会自动打开Dreamweaver软件吗？

这点上与Word软件相同吗？

学生评价、教师评价

练习制作第一张网页　作业1

书面作业：

要求：

第一行写上作业日期、第几次，每题之间要空行，字迹清楚，不涂改。

1、Dreamweaver与IE有什么区别？

2、常用的网页制作软件有哪些？

3、Dreamweaver最新版是多少？

4、Dreamweaver与Firework、Flash有什么关系？

5、抄写Dreamweaver共20遍，并能默写和熟读。

小组

科学性（20）

新颖性（20）

趣味性（20）

技巧性（20）

内容（20）

总分

1

2

3

4

（二）

学习领域

初识Dreamweavercs3

学习单元

第1章

学习课时

2课时

主要行为（重点）

1、掌握文字字体、大小、颜色、对齐、插入特殊字符等方面的设置

2、掌握项目列表和编号列表的使用

3、掌握设置网页的背景图像和在网页中插入图像

4、常见HTML代码的含义

部分行为

文字字体、大小、颜色、对齐、插入特殊字符等方面的设置

常见HTML代码的含义

目标群体

12微机（2、3）班

教学环境

多媒体机房

行为能力分析

专业能力

通过打开文件和调出属性面板命令，熟悉菜单栏的操作。

通过链接选项改变链接文字的状态，熟悉CSS功能的应用方法。

社会能力

掌握不同软件的能力

方法能力

对比法演示法

教学方法

任务驱动演示法

教学活动

教学过程及时间分配

教学内容

师生活动

任务书

下达任务，分析任务书

组织教学（1分钟）

清点人数，做好记录

复习导课（4分钟）

开始页面

启动DreamweaverCS3后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。

对于老用户可能不太习惯开始页面，可选择“编辑>首选参数”命令，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框，单击“确定”按钮完成设置。

当用户再次启动DreamweaverCS3后，将不再显示开始页面。

DreamweaverCS3的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口>工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器”或“设计器”命令，页面则会显示不同的界面风格。

问答

讲授新课（20分）

伸缩自如的功能面板

在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。

如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。

若用户需要更大的工作区，可以将面板隐藏。

教师讲解演示、学生总结

项目准备（5分）

见素材

制定实施方案（5分）

多文档的编辑界面

插入面板

更完整CSS功能

相互探讨，决定操作方法

项目实施（35分）

多文档的编辑界面

DreamweaverCS3提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。

用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。

通过多文档的编辑界面，用户可以同时编辑多个文档。

插入面板

DreamweaverCS3的“插入”面板在菜单栏的下方。

更完整CSS功能

传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。

而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。

DreamweaverCS3就提供了这种方便有效的CSS功能。

“属性”面板提供了CSS功能。

用户可以通过“属性”面板中“样式”选项的下拉列表对所选的对象应用样式或创建和编辑样式。

若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。

学生操作完成项目，教师巡回指导

项目评价（18）

评价标准（附表）

作业布置

（2）

练习文件

学生评价、教师评价

课后拓展

小组

科学性（20）

新颖性（20）

趣味性（20）

技巧性（20）

内容（20）

总分

1

2

3

4

（三）

学习领域

初识Dreamweavercs3

学习单元

第一单元

学习课时

2课时

主要行为（重点）

通过站点管理命令，熟练掌握创建站点的方法。

通过新建站点，熟练掌握创建站点根目录的过程。

部分行为

多站点管理

目标群体

12微机（2、3）班

教学环境

多媒体机房

行为能力分析

专业能力

1.站点管理器

2.创建文件夹

3.定义新站点

社会能力

创建本地站点的步骤

本地站点主要选项的作用

方法能力

演示法对比法

教学方法

项目教学、任务驱动

教学活动

教学过程及时间分配

教学内容

师生活动

任务书

下达任务，分析任务书

组织教学（1分钟）

清查人数，组织课堂

复习导课（4分钟）

如果某网页中用到图片a1.jpg，后来你把图片的名字改为a2.jpg了，这样打开网页时还能正确显示该图片吗？

　　如果我们在DW的站点管理器中更改图片文件名，则网页中有关该图片的文件名也为自动更新，这就是使用站点管理的最大好处。

问答

讲授新课（20分）

1、什么是站点？

　　站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。

建立站点时，我们一般在自已的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。

2、站点的典型文件结构

3、如何建立一个空站点

　　例：

在D盘上建立自己帐号为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”

操作步骤：

第一步：

在D盘上建立文件夹

第二步：

在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片

第三步：

在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录

4、如何把一个已有目录定义为一个站点

　例：

首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为“祖国腾飞”

5、什么叫首页（主页）

　　一个网站往往有许多网页组成，网页之间相互链接，其中第一页网页叫首页，也称主页。

首页的文件名一般为index.htm，部分系统规定首页为default.htm。

当首页命名符合系统要求时，在浏览网页时可以省略首页文件名，如

就表示

就表示

6、使用站点管理器

　　定义完站点后，就可以使用站点管理器来管理站点了。

显示站点面板：

单击菜单“窗口-站点”。

我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。

练习一：

下载“祖国腾飞”网站，解压缩，定义一个站点指向该目录。

在站点根目录中新建文件夹“files”和“other”，把根目录下除首页外的其他网页文件移动到“files”目录，其他文件移动到“other”目录。

教师讲解演示、学生总结

项目准备（5分）

PPT课件

制定实施方案（5分）

打开站点

编辑站点

复制站点

删除站点

导入和导出站点

相互探讨，决定操作方法

项目实施（35分）

1.站点管理器

站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。

2.创建文件夹

建立站点前，要先在站点管理器中创建站点文件夹。

（1）在站点管理器的右侧窗口中单击选择站点。

（2）通过以下两种方法新建文件夹。

①选择“文件>新建文件夹”命令。

②用鼠标右键单击站点，在弹出的快捷菜单中选择“新建文件夹”命令。

（3）输入新文件夹的名称。

3.定义新站点

建立好站点文件夹后用户就可定义新站点了。

在DreamweaverCS3中，站点通常包含两部分，即本地站点和远程站点。

本地站点是本地计算机上的一组文件，远程站点是远程Web服务器上的一个位置。

用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。

在DreamweaverCS3中创建Web站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程Web服务器上，使公众可以访问它们。

学生操作完成项目，教师巡回指导

项目评价（18）

评价标准（附表）

作业布置

（2）

学生评价、教师评价

小组

科学性（20）

新颖性（20）

趣味性（20）

技巧性（20）

内容（20）

总分

1

2

3

4

（四）

学习领域

初识Dreamweavercs3

学习单元

第一单元

学习课时

2课时

主要行为（重点）

网页文件头设置

部分行为

通过刷新命令，熟练掌握如何使用该命令制作网页自动刷新效果。

目标群体

12微机（2、3）班

教学环境

多媒体机房

行为能力分析

专业能力

网页文件头的相关工具和管理

社会能力

开发不同的网站

方法能力

对比法

教学方法

演示法讨论法

教学活动

教学过程及时间分配

教学内容

师生活动

任务书

下达任务，分析任务书

组织教学（1分钟）

清查人数，组织人数；

复习导课（4分钟）

今天，我们来学习网页文件头的相关工具，方便我们更好的管理网站。

问答

讲授新课（20分）

1.插入搜索关键字

2.插入作者和版权信息

3.设置刷新时间

4、设置描述信息

5、设置页面中所有链接的基准链接

6、设置当前文件与其他文件的关联性

教师讲解演示、学生总结

项目准备（5分）

教材中所有素材页面欣赏。

项目实施（35分）

1.插入搜索关键字

在万维网上通过搜索引擎查找资料时，搜索引擎自动读取网页中标签的内容，所以网页中的搜索关键字非常重要，它可以间接地宣传网站，提高访问量。

但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。

一般情况下，关键字是对网页的主题、内容、风格或作者等内容的概括。

2.插入作者和版权信息

要设置网页的作者和版权信息，可选择“插入记录>HTML>文件头标签>Meta”命令，启用“META”对话框。

3.设置刷新时间

要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录>HTML>文件头标签>刷新”命令，启用“刷新”对话框。

（2）在“刷新”对话框中设置刷新时间。

4.设置描述信息

搜索引擎也可通过读取标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。

设置网页说明信息的具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录>HTML>文件头标签>说明”命令，启用“说明”对话框。

（2）在“说明”对话框中设置说明信息。

5.设置页面中所有链接的基准链接

准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基准链接，但其他网页的链接与此页的基准链接无关。

设置基准链接的具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录>HTML>文件头标签>基础”命令，弹出“基础”对话框。

（2）在“基础”对话框中设置“Href”和“目标”两个选项。

6.设置当前文件与其他文件的关联性

部分的标签可以定义当前文档与其他文件之间的关系，它与部分中的文档之间的HTML链接是不一样的，其具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将光标放在标签中，选择“插入记录>HTML>文件头标签>链接”命令，弹出“链接”对话框。

（2）在“链接”对话框中设置相应的选项。

学生操作完成项目，教师巡回指导

项目评价（18）

评价标准（附表）

作业布置

（2）

课堂练习题

作业

学生评价、教师评价

课后拓展上机题

小组

科学性（20）

新颖性（20）

趣味性（20）

技巧性（20）

内容（20）

总分

1

2

3

4

（五）

学习领域

文本与文档

学习单元

第2章

学习课时

2课时

主要行为（重点）

网页中文本等元素对象

部分行为

网页中文本元素插入、项目列表创建

目标群体

12微机（2、3）班

教学环境

多媒体机房

行为能力分析

专业能力

1输入文本对象

2格式化文本

3创建项目列表

4列表的制作

社会能力

网页中文本格式

方法能力

学会文本属性的设置

教学方法

演示法讨论法

教学活动

教学过程及时间分配

教学内容

师生活动

任务书

“奥运页面”制作

“西湖页面”制作

下达任务，分析任务书

组织教学（1分钟）

组织学生、清点人数

复习导课（4分钟）

网页元素有哪些

二引入新课：

文本是网页元素一种，那么怎样实现文本元素插入

问答

讲授新课（20分）

第1节

一、特殊字符的输入

1、输入©®‰等特殊英文字符

　　单击“插入”工具栏上的“字符”面板。

2、输入★○■△※↑①等中文符号

　　采用输入法中的软键盘

3、输入空格（推荐使用全角空格）

　①单击“插入”菜单-“特殊符号”-“不换行空格”

　②按“Ctrl+Shift+Space”组合键

　③单击“插入”工具栏上的“字符”面板上的“不换行空格”按钮。

　④把中文输入法切换到全角模式，输入全角空格

4、插入日期和时间。

　　单击“插入”工具栏上的“常用”面板上的“日期”按钮。

练习一：

输入以下内容，以“1.htm”保存在桌面上。

特殊符号：

©®‰€™ ±

中文符号：

……℃◇△※◆▲

现在时间：

2006-02-22

第2节

二、列表的制作

　　列表分为无序列表（项目列表）和有序列表（编号列表）；

　　各个列表项之间没有顺序级别之分时选无序列表，否则选有序列表。

　　制作方法：

　　第一步：

先输入各个项目，每个项目成为一段（一个项目输入完成后，要按回车键，不能使用SHIFT＋回车）

　　第二步：

选中要转换为项目列表的所有段落

　　第　第四步：

如果要实现多级（嵌套）的项目列表，可单击“属性”面板上的“缩进”命令

练习二：

输入以下内容，以“2.htm”保存在桌面上。

∙电脑专业

o网络技术

1.网络1班

2.网络2班

o信息技术

3.信息1班

4.信息2班

o电脑维护

∙美术专业

∙工艺绘画

∙广告设计

　　操作提示：

　　第一步：

输入“电脑专业”等11行，每行按回车，不能用SHIFT+回车

　　第二步：

全部选中，单击“属性”面板中的无序列表按钮

　　第三步：

选中“网络技术……电脑维护”7个段落，选“属性”面板中的缩进按钮

　　第四步：

同样方法让“网络1班”等班级缩进

　　第五步：

选中“网络1班、网络2班”，单击“属性”面板中的有序列表按钮，使其变为有序列表

有时设置好项目符号后，再打进去的字也变成项目符号了，解决这个问题的方法是，在设置项目符号前，先把后面的字输入几字，再去设置项目符号。

教师讲解演示、学生总结

项目准备（5分）

见第3、4章素材

制定实施方案（5分）

1、导入文本

2、编辑文本

3、项目列表

4、网页编辑

相互探讨，决定操作方法

项目实施（35分）

输入以下内容，以“a.htm”保存在桌面上。

▪飘雨的季节

▪困惑的心情

▪羞涩的蓓蕾

▪年轻的你我

▪蓝色的小屋

i.飘雨的季节

ii.困惑的心情

iii.羞涩的蓓蕾

iv.年轻的你我

v.蓝色的小屋

a.飘雨的季节

b.困惑的心情

c.羞涩的蓓蕾

d.年轻的你我

e.蓝色的小屋

5.飘雨的季节

6.困惑的心情

7.羞涩的蓓蕾

8.年轻的你我

蓝色的小屋

学生操作完成项目，教师巡回指导

项目评价（18）

评价标准（附表）

作业布置

（2）

文字的属性设置合理。

学生