网站设计电子教案2

2020-03-02 20:09:36 来源：范文大全收藏下载本文

2.1 课堂任务1 DreamWeaver8入门

课程名称：自定义工作界面课时数：2 教学目标：

知识与技能：了解DreamWeaver 8相关知识。

过程与方法：掌握DreamWeaver8软件界面组成；

掌握自定义DreamWeaver8软件的工作区；

掌握获取、安装网页制作软件的方法；

掌握各网页制作软件的启动和退出的方法；

情感与价值观：培养学生仔细的观察态度和积极动手探索的学习习惯。教学重点：

自定义DreamWeaver8软件的工作区。教学难点：

自定义DreamWeaver8软件的工作区教法：

任务驱动法学法：

阅读，记录要点，动手操作。课前准备：

第二章第一节素材和实例。视频教程：自定义界面.wmv 教学过程设计：

（一）导入设计：

打开Dreamweaver 8这个软件。

前面我们已经学习过了Dreamweaver 8软件的获取与安装。这一节我们主要了解Dreamweaver 8软件的界面和相关的一些基本操作。为今后的网页制作操作打好基础。

（二）新课讲解设计：

（1）请学生带着以下问题阅读P23~27知识预读1，并动手预习操作。问题如下：

A.DreamWeaver8软件界面由哪几部分组成？

B.在DreamWeaver8中对功能面板可以做哪些操作？

C.当网页编辑窗口太小的时候，如何扩大网页编辑窗口？（2）请学生一一回答以上问题。

（3）教师总结评价并补充相关要点。

（4）参考教材第28页至第29页的任务实施步骤，点名请一个同学上来按要求完成。教师在一旁提示和总结方法。

（5）请其他同学完成相同操作。可参考视频文件自定义界面.wmv。教师巡逻指导。（6）学生完成任务一对照练习第

1、2两题。

（7）抽取个别同学上台完成对照练习，检验教学成果。

（三）小结和作业：小结：

（1） DreamWeaver8软件界面组成

（2） DreamWeaver8软件的工作区相关操作

（3）网页制作软件的获取、安装、启动和退出。作业：

（1）

（2）填写《任务评价表》并上交预习任务二“我的个人工作室”。

2.2 课堂任务2 我的个人工作室

课程名称：我的个人工作室课时数：2 教学目标：

知识与技能：了解DreamWeaver 8相关知识

过程与方法：掌握打开文件、格式化文字、预览网页等基本操作情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。教学重点：

打开文件、格式化文字、预览网页等基本操作。教学难点：

打开文件、格式化文字、预览网页等基本操作。教法：

任务驱动法、演示法学法：

阅读，记录要点，动手操作。课前准备：

第二章第一节素材和实例。视频教程：我的个人工作室.wmv。教学过程设计：

（一）导入设计：

提问：

1、网页元素有哪些？

2、文字的属性有哪些，如何编辑？

（二）新课讲解设计：

（1）请学生打开“素材和实例\\第二章\\第一节\\素材\\ mywork.html”文件，观察其与图2-1-18个人工作室页面的不同之处；

（2）教师演示输入文字并格式化，保存文件并预览（详见教材第33页）。（3）学生完成相同操作。可参考视频文件教师巡逻指导。（4）教师总结评价并补充相关要点。（5）由学生完成任务二对照练习。

（三）小结和作业：小结：

（1）网页文件的打开、编辑与保存（2）网页文字的格式化（3）网页预览

作业：

（1）填写《任务评价表》并上交（2）自学知识拓展： DreamWeaver8的快捷键大全。

2.2 课堂任务

“企业简介”页面的制作

课程名称：美乐电器“企业简介”页面的制作课时数：2 教学目标：

知识与技能：了解常用的图像类型和格式、层叠样式表的概念和相关知识。过程与方法：掌握新建网页，设置网页页面属性的方法

掌握在网页中插入文本，设置文本格式化的方法；

掌握在网页中插入图片，设置图文混排效果的方法；

掌握插入Flash动画，设置透明效果的方法；

情感与价值观：培养学生仔细观察事物的习惯和主动学习的能力。教学重点：

设置网页页面属性、插入文本，设置文本格式化、插入图片，设置图文混排效果、插入Flash动画，设置透明效果。教学难点：

设置网页页面属性、插入文本，设置文本格式化、插入图片，设置图文混排效果、插入Flash动画，设置透明效果。教法：

任务驱动法学法：

阅读，记录要点，动手操作。课前准备：

第二章第二节素材和实例。视频教程：美乐电器企业简介网页制作.WMV。教学过程设计：

（二）导入设计：

上一节我们学习了DreamWeaver8软件的基础操作，本节我们将开始学习如何用DreamWeaver8这个软件来制作网页，从而学习网页中有关页面属性、文本格式、图像、动画的插入和层叠样式表的相关操作。

（二）新课讲解设计：

（1）请学生带着任务一对照练习第1～5题阅读P36~47知识预读，并动手预习操作。（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。

（4）打开“素材和实例\\第二章\\第二节\\素材\\课堂任务\\ jianjie.html”，请学生观察并回答该网页的组成元素有哪些？教师在一旁提示。

（5）请学生上台演示新建网页并保存在相应的文件夹中。其他学生自己完成。可参考教材第47页内容。（6）教师演示设置网页页面属性，保存并预览（详见教材第48页）。请其他同学完成相同操作。教师巡逻指导。

（7）教师演示文本格式化部分操作，（详见教材第49～52页）。

（8）学生完成相同操作，可参考视频文件美乐电器企业简介网页制作.WMV。教师巡逻指导。

（9）教师演示插入图片操作，（详见教材第52页）。学生完成相同操作，教师巡逻指导。操作要点及注意事项如下：

先将要插入的图片文件复制到jianjie.html网页文件所在的文件夹中，再进行插入图像操作。（10）请学生上台完成插入FLASH动画的操作，（提示：方法和注意点与插入图像相似）。教师在一旁提示指导。

（11）教师演示为FLASH动画设置透明效果，（详见教材第54页）。（12）学生完成相同操作，教师在旁指导。（13）由学生完成任务一对照练习第6～8题。

（三）小结和作业：

小结：

（4）设置网页页面属性；

（5）插入文本，设置文本格式化；（6）插入图片，设置图文混排效果；（7）插入Flash动画，设置透明效果。作业：

（1）

（2）填写《任务评价表》并上交自学知识拓展：自定义CSS样式。

2.3 课堂任务

我的第一个网站

课程名称：美乐电器网站的创建课时数：4 教学目标：

知识与技能：了解超链接相关概念。

过程与方法：掌握在DreamWeaver8中创建站点的方法

掌握在DreamWeaver8中管理站点的文件和文件夹的方法；

掌握制作网页中各种超链接的方法；

掌握制作CSS链接特效的方法。

情感与价值观：培养学生主动思考问题和解决问题的能力。教学重点：

在DreamWeaver8中创建站点、管理站点的文件和文件夹、制作网页中各种超链接。教学难点：

在DreamWeaver8中创建站点、管理站点的文件和文件夹、制作网页中各种超链接、制作CSS链接特效。教法：

任务驱动法学法：

阅读，记录要点，动手操作。课前准备：

第三章第三节素材和实例。视频教程：美乐电器网站制作.wmv。教学过程设计：

（三）导入设计：

之前我们已经学习了单张网页的制作。一般我们所设计的，往往不是单张网页，而是多张有机联系在一起的网页，而对于这些网页和相关素材，一般都要求存放在同一个文件夹内，方便网站的维护和管理，特别是要将网站发布到服务器上时，这点尤为重要。我们建立站点的目的也在于此。因此，我们在用DreamWeaver8软件设计制作网站，必须先建立站点，将网页全都保存在这一个站点内。DreamWeaver8软件的站点管理功能非常强大，通过它，我们能很轻松的对网站进行管理。

（二）新课讲解设计：

（1）请学生带着任务一对照练习第1～3题阅读P60~65知识预读。（2）请学生一一回答以上问题。

（3）教师总结评价并补充相关要点。

（4）教师演示建立美乐电器网站站点的相关操作，（详见教材第65～68页）。操作要点及注意事项如下：站点是一个文件夹，可以在本地计算机上选择一个已有的文件夹作为站点根目录，也可以新建一个文件夹建立一个空的站点。

（5）请其他同学完成相同操作。可参考视频文件美乐电器网站制作.wmv。教师巡逻指导。

（6）请学生参考教材第69页的内容，完成管理网站中文件和文件夹的创建文件夹操作。并叫1位学生上台演示，以检验自学成果。教师在旁指导。

（7）教师演示站点管理的时候文件的移动操作，（详见教材第69页）。

操作要点及注意事项如下：在复制文件过程中，同类的连续文件可以按住Shift键，同时用鼠标选择第一个文件后，再在最后的一个文件上单击即可。不连续的文件可以用Ctrl键，再用鼠标选择。将其拖动到相应文件夹中。

（8）请其他同学完成相同操作。教师总结并补充相关要点。

（9）教师演示设置文本超链接的一种方法，（详见教材第69～70页）。请学生找找还有哪些设置超链接的方法。

（10）教师总结评价并补充相关要点。

（11）展示设置了CSS效果的超链接，激发学生学习兴趣。