《网页设计与制作案例教程 》教案 第3课 站点的创建与管理(一)

课题

课时 2课时（180 min）

知识技能目标：

（1）认识Dreamweaver CC工作界面

第 课 站点的创建与管理（一）

站点的创建与管理( 一 ）

3

（2）了解Dreamweaver CC的初始化设置

教学目标 （3）掌握调整Dreamweaver CC工作界面的方法

思政育人目标：

（1）体验网页制作工具的使用方法，培养基本的工作能力

（2）练习创建站点，锻炼学生的实践能力，培养学生的探究精神。

教学重难点

教学方法 情景模拟法、问答法、讨论法、练习法

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

教学设计

教学重点：Dreamweaver CC工作界面

教学难点：调整Dreamweaver CC工作界面

第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（23 min）→课堂抢答（10 min）

第2节课：问题导入（5 min）→ 任务实施（25 min）→ 实践探究（10 min）→ 课堂小结（3 min）→ 作

业布置（2 min）

教学过程 主要教学内容及步骤 设计意图

第一节课

通过课前的预

热，让学生了解所

学软件，激发学生

的学习欲望

培养学生的组织

纪律性，掌握学生

的出勤情况

课前任务

 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP，

查阅资料，了解Dreamweaver CC软件

 【学生】按照教师要求完成课前任务

考勤

（2 min）

 【教师】使用APP进行签到

 【学生】按照老师要求签到

 【教师】提出以下问题：

问题导入

（10 min）

通过问题导入，

引导学生思考，调

动学生的主观能动

性，了解本节课要

学习的内容

阅读教材，说一说什么是Dreamweaver CC软件，它的主要作用是什么？

 【学生】思考、举手发言

Dreamweaver CC是一款集网页制作和网站管理于一身，所见即所得的可视化网

页编辑软件。

 【教师】通过学生的发言，引入新的知识点，介绍Dreamweaver CC

传授新知

（23 min）

通过讲解，让学

生了解

Dreamweaver CC

的工作界面，通过

讲解和对

Dreamweaver CC

一、Dreamweaver CC的工作界面

【教师】安装Dreamweaver CC，展示其工作界面，帮助学习理解

Dreamweaver 大榕树作文 CC的工作界面比较简洁，主要由应用程序栏、工具栏和文档标签栏

第 课 站点的创建与管理（一）

3

等组成。 的分析，掌握

（详见教材）

【教师】布置以下学习任务：

根据教材提示，安装软件，探索Dreamweaver CC软件应用程序栏、工具栏、

文档标签栏的功能

【学生】思考、实际操作

【教师】巡视课堂纪律，对学习有困难的学生进行帮助

1．应用程序栏

应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其

下拉列表中选择不同的工作区模式）和程序窗口控制（最小化、最大化及关闭）按钮

2．工具栏

工具栏用于放置一些常用按钮，如打开文档、文件管理等。此外，单击工具栏最

下方的自定义工具栏按钮可以打开“自定义工具栏”对话框，在该对话框中能够自由

设置工具栏中要显示的按钮。

3．文档标签栏

文档标签栏依次显示当前打开的所有网页文档的标签（标签上显示相应网页文档

的名称）及其关闭按钮；当某个文档链接了外部文档时，其文档标签下方将显示当前

文档源代码及其链接的文档名，单击对应的链接按钮，可打开其所链接的文档。

（详见教材）

【教师】展示Dreamweaver CC软件的界面，辅助学习理解Dreamweaver CC

界面的文档工具栏的功能

4．文档工具栏

文档工具栏位于文档标签栏上方，包括代码、拆分、设计等按钮，单击它们可切

换至对应的视图模式。

代码：在文档窗口中显示代码视图。代码视图是用于编写HTML、CSS、JavaScript，

以及其他任何类型代码的手工编码环境。

设计：在文档窗口中显示设计视图。设计视图中显示的效果类似于在浏览器中看

到的效果，用户可以在该视图中直接编辑网页中的各个对象，并且在对网页文档进行

操作之后，网页代码会自动更新。

实时视图：单击“设计”按钮右侧的三角按钮，在展开的下拉列表中选择“实时

视图”选项，文档窗口中即显示实时视图，其资产证券化什么意思 与设计视图类似，但能更逼真地显示文

档在浏览器中的效果，还可以与文档进行交互。

（详见教材）

【教师】展示Dreamweaver CC软件的界面，辅助学习理解Dreamweaver CC

界面的状态栏、“插入”面板、“文件”面板等菜单的功能

5．状态栏

状态栏位于文档窗口底部，它提供了当前文档的一些基本信息。

Dreamweaver CC

软件的初始化设置

2

（一）站点的创建与管理 第 课

6．“插入”面板

“插入”面板包含用于创建和插入对象（如表格、我的大学演讲稿 图像等）的按钮，在设计视

图或代码视图中定位插入点后单击某个按钮可插入对应的元素。例如，要在页面中

插入图像，可先定位插入点，然后单击“Image”按钮。

7．“文件”面板

使用“文件”面板可查看和管理站点中的所有文件与文件夹，包括网页文件中使

用的素材文件和网页文件

8．“CSS设计器”面板

使用“CSS设计器”面板能够非常方便地创建CSS样式。通过该面板设置属性

后，CSS文件将自动更新代码。

【教师】布置以下学习任务：

根据教材提示，自主探索“CSS设计器”面板的功能

【学生】思考、实际操作、探索

【教师】巡视课堂纪律，对学习有困难的学生进行帮助

“CSS设计器”面板由以下窗格组成。

源：列出与文档相关的所有CSS样式表。单击窗格左上方的 按钮，可以创建新

的CSS文件或将已有的CSS文件附加到文档，也可以直接在页面中定义样式。

媒体：显示在“源”窗格中所选样式文件中的全部媒体查询。如果不选择特定媒

体查询，则此窗格将显示与文档关联的所有媒体查询。

选择器：显示在“源”窗格中所选样式文件中的全部选择器。如果同时还选择了

某个媒体查询，则此窗格将只显示该媒体查询下的选择器。

属性：显示能够为指定选择器设置属性的列表。

（详见教材）

二、Dreamweaver CC的初始化设置

Dreamweaver CC中的一些属性设置可以根据个人的喜好及习惯进行调整，方法

为单击“编辑”菜单，在展开的下拉菜单中选择“首选项”选项，打开“首选项”对

话框，然后进行设置。下面介绍几个常用设置。

字体：在“分类”列表框中选择“字体”选项，对话框右侧显示字体设置区，在

其中可以设置代码的字体样式及字号等。

实时预览：在“分类”列表框中选择“实时预览”选项，对话框右侧显示实时预

览设置区，在界面上方的列表框中可以修改用于查看页面效果的默认浏览器，选择对

应浏览器选项后勾选“主浏览器”复选框，然后单击“应用”按钮即可

界面：在“分类”列表框中选择“界面”选项，对话框右侧显示界面设置区，单

击界面上方的正方形按钮即可切换Dreamweaver CC的主题颜色。

 【学生】聆听、思考、理解、记忆

3

3

第 课 站点的创建与管理（一）

3

 【教师】提出Dreamweaver CC工作界面不同组成部分的名称，让学生抢

答各组成部分的作用

 【学生】聆听、抢答、说出Dreamweaver CC工作界面不同组成部分的作

用

通过课堂抢答加

深学生对所学知识

的认识，活跃课堂

气氛

课堂抢答

（10 min）

第二节课

 【教师】提问引出新知识点

问题导入

（5 min）

用问题导入，

让自我心理暗示 学生主动探究

调整

Dreamweaver CC

工作界面谷雨时节

我们上节课已经了解了Dreamweaver CC工作界面，那么大家想一想如何调整

Dreamweaver CC工作界面呢？

 【学生】思考、发言

 【教师】演示调整Dreamweaver CC工作界面的操作，并对其进行分析

使用Dreamweaver CC制作或编辑网页时，经常需要打开、关闭某个面

板，或对其工作界面进行各种调整。下面学习调整Dreamweaver CC工作气冲斗牛造句 界

面的常见操作。

（1）快速打开与关闭面板组。默认状态下，文档窗口右侧为面板组。按“F4”键

可将其关闭；再次按“F4”键可恢复原来的状态。

（2儿童缺锌 ）折叠与扩展面板组。单击面板组右上角的控制按钮 ，即可将面板组折叠起

来，想要展开时再次单击该按钮 即可。

任务实施

（25 min） 板。

（3）添加面板。单击“窗口”→“行为”菜单，即可在工作区中添加“行为”面

（4）移动面板。鼠标左键按住“行为”面板的上方，向工作区右侧的面板组上方

靠近，面板组将显示蓝色边框，此时松开鼠标，即可将该面板合并到面板组中，如图

2-14所示。

（5）关闭面板。

（6）重置工作区。

（详见教材）

 【学生】观察、记录、理解，上机操作

 【教师】巡堂指导，及时解决学生的问题

实践探索

（10 min）

 【教师】组织学生阅读“高手点拨”中的内容，尝试在Dreamweaver CC中

通过实践探

索，使学生进一

通过任务实

施，让学生们主

动参与学习，对

调整

Dreamweaver CC

工作界面相关操

作留下印象，在

实践过程艺术节图片 中理

解、巩固知识点

4

（一）站点的创建与管理 第 课

进行更多操作 步巩固所学知

 【学生】自主学习、理解、上机操作

 【教师】巡堂指导，及时解决学生的问题

 【教师】简要总结本节课的要点

课堂小结 总结知识点，

（3 min） 巩固印象

识，了解更多关

于Dreamweaver

CC的知识

3

本节课了解了Dreamweaver CC的基本界面，Dreamweaver CC软件的初始化，通

过实践学习了如何调整Dreamweaver CC的工作界面。希望大家在课下多加复习，熟悉

Dreamweaver CC的基本界面的元素和调整方法。

 【学生】总结回顾知识点

 【教师】布置课后作业

作业布置 延展知识面，

（2 min） 巩固所学知识

（1）完成相关课后习题。

（2）找一找哪些网页能够利用Dreamweaver CC完成。

 【学生】完成课后任务

本节课教学整体效果不错，部分环节让学生自己阅读教材自主学习，或者通过动手操作学习

教学反思

Dreamweaver CC的界面组成和调整方法，学生积极性很强，上课配合度很高。在以后的学习中应该尽可能

的让学生参与学习过程，避免课堂成为教师的一言堂。

5