《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目八 制作 “爱学精品课”网站.docx

PAGE2

PAGE2

PAGE9

PAGE9

课题

项目八实战案例——制作“爱学精品课”网站

课时

4课时（180min）、

教学目标

知识技能目标：

（1）熟悉制作网站的具体流程

（2）能够使用Dreamweaver2021制作网站

素质目标：

（1）勤思考，加强大局意识，培养良好的思维方式

（2）多动手，锻炼实践能力，提升工作竞争力

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请大家预习本节课内容。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

任务描述

【教师】简单介绍如何规划“爱学精品课”网站

本任务将对“爱学精品课”网站进行前期规划，确定网站的发展战略、设计网站的内容、确定网站开发的流程等，为制作网站奠定基础。

……（详见教材）

【学生】聆听、思考

任务实施

【教师】讲解并演示规划步骤，然后要求学生规划网站

步骤1确定网站的发展战略。“爱学精品课”网站属于学习类网站，主要用户为学生、教师等。本网站的主要发展战略为提供优质的教学资源，同时与相关领域专家合作，共同打造个性化的学习体验，使网站成为功能强大的教学平台。

步骤2设计与规划网站的内容。“爱学精品课”网站的主要内容为课程与图书，将网站内容划分为课程、图书、师资力量等栏目，并确定本网站整体采用鲜艳醒目的设计风格与配色方案。

步骤3确定网站开发的流程。网站开发工作大致分为前期规划、创建网站站点、制作网站主页、制作网站次级页面、测试与发布网站等。

步骤4确定网站开发的资源分配计划。网站开发过程共安排5名开发人员，使用Dreamweaver2021软件与相关制图软件进行开发工作，预计30天内完成。

……（详见教材）

【学生】观看、聆听、理解、按要求进行规划，如遇问题可询问教师

【教师】巡堂辅导，及时解决学生遇到的问题

效果展示

【教师】简单介绍创建“爱学精品课”网站站点的思路

本任务将创建“爱学精品课”网站站点，并在其中添加网站的文件。

……（详见教材）

【学生】聆听、思考

任务实施

【教师】讲解并演示创建“爱学精品课”网站站点的步骤，然后要求学生进行操作

步骤1在本地磁盘的合适位置创建“AXcourse”文件夹，然后将本书配套素材“项目八”文件夹中的“img”文件夹复制并粘贴至“AXcourse”文件夹中。

步骤2创建站点。启动Dreamweaver2021，选择“站点”/“新建站点”选项，打开“站点设置对象”对话框，在“站点名称”编辑框中输入“AXcourse”（对话框名称自动变为“站点设置对象AXcourse”），并将本地站点文件夹设置为创建好的“AXcourse”文件夹，单击“保存”按钮。

步骤3创建文件。打开“文件”面板，利用快捷菜单在站点中创建“index.html”文件，然后创建一个“css”文件夹，并在“css”文件夹中创建“common.css”“course.css”“index.css”文件。

……（详见教材）

【学生】观看、聆听、理解、按要求进行操作，如遇问题可询问教师

【教师】巡堂辅导，及时解决学生遇到的问题

效果展示

【教师】利用多媒体展示“爱学精品课”主页的页面效果，并对其进行简单介绍

本任务将制作“爱学精品课”主页，页面效果如图所示。

“爱学精品课”主页共包含7个部分，分别为页眉、课程特色模块、课程分类模块、课程介绍模块、热销图书模块、拓展链接模块、页脚。

（1）页眉。页眉中含有网站Logo和导航栏，为浏览者提供便捷服务。

（2）课程特色模块。该模块主要用于展示网站主要产品的核心卖点。

（3）课程分类模块。该模块主要用于展示网站课程的分类，单击分类按钮能够切换课程介绍模块的内容。

（4）课程介绍模块。该模块主要用于展示不同分类的课程的介绍。

……（详见教材）

【学生】聆听、思考

任务实施

【教师】讲解并演示制作“爱学精品课”主页的步骤，然后要求学生进行操作

1．设置主页头部信息并构建页面整体结构

步骤1打开“AXcourse”站点，在“文件”面板中双击打开“index.html”文件。

步骤2修改head标签的内容，设置主页头部信息。具体可参照以下代码。

metacharset=utf-8

title爱学精品课/title

!--通用样式文件--

linkhref=css/common.cssrel=stylesheettype=text/css

!--主页样式文件--

linkhref=css/index.cssrel=s