2022年网站设计电子教案 .pdf

2.1 课堂任务 1 DreamWeaver8 入门课程名称： 自定义工作界面课时数： 2 教学目标：知识与技能：了解DreamWeaver 8 相关知识。过程与方法：掌握DreamWeaver8 软件界面组成；掌握自定义DreamWeaver8 软件的工作区；掌握获取、安装网页制作软件的方法；掌握各网页制作软件的启动和退出的方法；情感与价值观：培养学生仔细的观察态度和积极动手探索的学习习惯。教学重点：自定义 DreamWeaver8 软件的工作区。教学难点：自定义 DreamWeaver8 软件的工作区教法：任务驱动法学法：阅读，记录要点，动手操作。课前准备：第二章第一节素材和实例。视频教程：自定义界面.wmv 教学过程设计：（一）导入设计：打开 Dreamweaver 8 这个软件。前面我们已经学习过了Dreamweaver 8 软件的获取与安装。这一节我们主要了解Dreamweaver 8 软件的界面和相关的一些基本操作。为今后的网页制作操作打好基础。（二）新课讲解设计：（1）请学生带着以下问题阅读P2327 知识预读1，并动手预习操作。问题如下：A. DreamWeaver8 软件界面由哪几部分组成？B. 在 DreamWeaver8 中对功能面板可以做哪些操作？C. 当网页编辑窗口太小的时候，如何扩大网页编辑窗口？（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）参考教材第28 页至第 29 页的任务实施步骤，点名请一个同学上来按要求完成。教师在一旁提示和总结方法。（5）请其他同学完成相同操作。可参考视频文件自定义界面.wmv 。教师巡逻指导。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - （6）学生完成任务一对照练习第1、2 两题。（7）抽取个别同学上台完成对照练习，检验教学成果。（三）小结和作业：小结：（1）DreamWeaver8 软件界面组成（2）DreamWeaver8 软件的工作区相关操作（3）网页制作软件的获取、安装、启动和退出。作业：（1）填写任务评价表并上交（2）预习任务二“我的个人工作室”。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 2.2 课堂任务 2 我的个人工作室课程名称： 我的个人工作室课时数： 2教学目标：知识与技能：了解DreamWeaver 8 相关知识过程与方法：掌握打开文件、格式化文字、预览网页等基本操作情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。教学重点：打开文件、格式化文字、预览网页等基本操作。教学难点：打开文件、格式化文字、预览网页等基本操作。教法：任务驱动法、演示法学法：阅读，记录要点，动手操作。课前准备：第二章第一节素材和实例。视频教程：我的个人工作室.wmv 。教学过程设计：（一）导入设计：提问： 1、网页元素有哪些？2、文字的属性有哪些，如何编辑？（二）新课讲解设计：（1）请学生打开 “素材和实例第二章 第一节 素材 mywork.html ”文件， 观察其与图2-1-18个人工作室页面的不同之处；（2）教师演示输入文字并格式化，保存文件并预览（详见教材第33 页） 。（3）学生完成相同操作。可参考视频文件教师巡逻指导。（4）教师总结评价并补充相关要点。（5）由学生完成任务二对照练习。（三）小结和作业：小结：（1）网页文件的打开、编辑与保存（2）网页文字的格式化（3）网页预览作业：（1）填写任务评价表并上交名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - （2）自学知识拓展：DreamWeaver8 的快捷键大全。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 2.2 课堂任务“企业简介”页面的制作课程名称： 美乐电器“企业简介”页面的制作课时数： 2 教学目标：知识与技能：了解常用的图像类型和格式、层叠样式表的概念和相关知识。过程与方法：掌握新建网页，设置网页页面属性的方法掌握在网页中插入文本，设置文本格式化的方法；掌握在网页中插入图片，设置图文混排效果的方法；掌握插入 Flash 动画，设置透明效果的方法；情感与价值观：培养学生仔细观察事物的习惯和主动学习的能力。教学重点：设置网页页面属性、插入文本，设置文本格式化、插入图片，设置图文混排效果、插入Flash 动画，设置透明效果。教学难点：设置网页页面属性、插入文本，设置文本格式化、插入图片，设置图文混排效果、插入Flash 动画，设置透明效果。教法：任务驱动法学法：阅读，记录要点，动手操作。课前准备：第二章第二节素材和实例。视频教程：美乐电器企业简介网页制作.WMV 。教学过程设计：（二）导入设计：上一节我们学习了DreamWeaver8 软件的基础操作，本节我们将开始学习如何用DreamWeaver8 这个软件来制作网页，从而学习网页中有关页面属性、文本格式、图像、动画的插入和层叠样式表的相关操作。（二）新课讲解设计：（1）请学生带着任务一对照练习第15 题阅读 P3647 知识预读，并动手预习操作。（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）打开“素材和实例第二章第二节素材课堂任务jianjie.html” ，请学生观察并回答该网页的组成元素有哪些？教师在一旁提示。（5）请学生上台演示新建网页并保存在相应的文件夹中。其他学生自己完成。可参考教材第 47 页内容。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - （6）教师演示设置网页页面属性，保存并预览（详见教材第48 页） 。请其他同学完成相同操作。教师巡逻指导。（7）教师演示文本格式化部分操作，（详见教材第4952 页） 。（8）学生完成相同操作，可参考视频文件美乐电器企业简介网页制作.WMV 。教师巡逻指导。（9）教师演示插入图片操作，（详见教材第52 页） 。学生完成相同操作，教师巡逻指导。操作要点及注意事项如下：先将要插入的图片文件复制到jianjie.html 网页文件所在的文件夹中，再进行插入图像操作。（10）请学生上台完成插入FLASH 动画的操作， （提示：方法和注意点与插入图像相似）。教师在一旁提示指导。（11）教师演示为FLASH动画设置透明效果， （详见教材第54 页） 。（12）学生完成相同操作，教师在旁指导。（13）由学生完成任务一对照练习第68 题。（三）小结和作业：小结：（4）设置网页页面属性；（5）插入文本，设置文本格式化；（6）插入图片，设置图文混排效果；（7）插入 Flash 动画，设置透明效果。作业：（1）填写任务评价表并上交（2）自学知识拓展：自定义CSS 样式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 2.3 课堂任务我的第一个网站课程名称： 美乐电器网站的创建课时数： 4 教学目标：知识与技能：了解超链接相关概念。过程与方法：掌握在DreamWeaver8 中创建站点的方法掌握在 DreamWeaver8 中管理站点的文件和文件夹的方法；掌握制作网页中各种超链接的方法；掌握制作 CSS 链接特效的方法。情感与价值观：培养学生主动思考问题和解决问题的能力。教学重点：在 DreamWeaver8 中创建站点、管理站点的文件和文件夹、制作网页中各种超链接。教学难点：在 DreamWeaver8 中创建站点、管理站点的文件和文件夹、制作网页中各种超链接、制作 CSS 链接特效。教法：任务驱动法学法：阅读，记录要点，动手操作。课前准备：第三章第三节素材和实例。视频教程：美乐电器网站制作.wmv 。教学过程设计：（三）导入设计：之前我们已经学习了单张网页的制作。一般我们所设计的，往往不是单张网页，而是多张有机联系在一起的网页，而对于这些网页和相关素材，一般都要求存放在同一个文件夹内，方便网站的维护和管理，特别是要将网站发布到服务器上时，这点尤为重要。我们建立站点的目的也在于此。因此，我们在用DreamWeaver8 软件设计制作网站，必须先建立站点，将网页全都保存在这一个站点内。DreamWeaver8 软件的站点管理功能非常强大，通过它，我们能很轻松的对网站进行管理。（二）新课讲解设计：（1）请学生带着任务一对照练习第1 3 题阅读 P6065 知识预读。（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）教师演示建立美乐电器网站站点的相关操作，（详见教材第6568 页） 。操作要点及注意事项如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 站点是一个文件夹，可以在本地计算机上选择一个已有的文件夹作为站点根目录，也可以新建一个文件夹建立一个空的站点。（5）请其他同学完成相同操作。可参考视频文件美乐电器网站制作.wmv 。教师巡逻指导。（6）请学生参考教材第69 页的内容，完成管理网站中文件和文件夹的创建文件夹操作。并叫1 位学生上台演示，以检验自学成果。教师在旁指导。（7）教师演示站点管理的时候文件的移动操作，（详见教材第69 页） 。操作要点及注意事项如下：在复制文件过程中，同类的连续文件可以按住Shift 键，同时用鼠标选择第一个文件后，再在最后的一个文件上单击即可。不连续的文件可以用Ctrl 键，再用鼠标选择。将其拖动到相应文件夹中。（8）请其他同学完成相同操作。教师总结并补充相关要点。（9）教师演示设置文本超链接的一种方法，（详见教材第6970 页） 。请学生找找还有哪些设置超链接的方法。（10）教师总结评价并补充相关要点。（11）展示设置了CSS 效果的超链接，激发学生学习兴趣。（12） 教师演示建立网页超链接特效相关操作，（详见教材第7173 页） 。 并解释 a:link、a:active、a:hover、 a:visited 分别代表的状态。（13）请其他同学完成相关操作。教师总结并补充相关要点。（14）展示网页导航，请学生分析该导航的组成和制作方法。由学生独立完成。参考教材第 74 页的内容。请一位同学上台演示导航的制作方法。教师在旁提示，并总结导航制作方法。操作要点及注意事项如下：每个页面都必须分别制作设置导航。（15）展示 chanpin.html 网页成品，介绍锚点链接的应用范围和作用。（16）教师演示制作锚点链接的相关操作，（详见教材第74 页） 。学生完成相同操作。（17）展示其他网站上E-mail 链接的效果。（18）教师演示制作E-mail 链接的相关操作， （详见教材第74 页） 。学生完成相关操作。操作要点及注意事项如下：设置超链接的时候冒号输入要半角。（19）学生将作品完善一下，并上交。（20）抽取个别同学的作品展示评价。（三）小结和作业：小结：（8）在 DreamWeaver8 中创建站点（9）管理站点的文件和文件夹（10） 制作网页中各种超链接（11） 制作 CSS 链接特效作业：（1）填写任务评价表并上交（2）自学知识拓展：多媒体文件插入。（3）完成任务一对照练习第4 题。（4）课外完成本章习题。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -