DreamWeaver CS5案例教程教案
第一章揭开Dreamweaver CS5的面纱
教学课题：Dreamweaver CS5简介及工作界面
教学目标：1、初识Dreamweaver CS5软件。
2、熟悉Dreamweaver CS5的窗口界面。
教学重点：Dreamweaver CS5的窗口界面。
教学难点：Dreamweaver CS5的窗口界面
教学方法：任务驱动法、小组合作学习法。
教学课时：1节
教学过程：
1、导入：略
2、讲解新课
Dreamweaver 最初是由美国的Macromedia公司推出的一个“所见即所得”的网站开发工具。2005年，Macromedia公司被Adobe公司收购，其软件的版本号也逐步和Adobe系列软件相统一。
Dreamweaver不仅仅是优秀的“所见即所得”的编辑软件，它还兼顾HTML源代码编辑，用户可以在两种不同的模式之间切换，满足初学者和开发者不同的需求。Dreamweaver还有许多出色的设计理念，如行为、时间轴和资源等，可以让用户无需编写复杂的代码，就能轻松地设计出各种动态效果。
Dreamweaver CS5是Dreamweaver的最新版本，作为业界领先的网页开发软件，其在Dreamweaver CS4的基础上增加了许多激动人心的新功能
l 支持HTML 5
l 检查浏览器兼容性
l 集成CMS支持
l 检查动态网页
l Widget插件支持
l 多屏幕预览
l PHP自定义代码提示
教学课题：Dreamweaver CS5的工作界面
教学目标：熟悉Dreamweaver CS5的窗口界面。
教学重点：Dreamweaver CS5的窗口界面
教学难点：属性面板和浮动面板组
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
在首次启动Dreamweaver CS5时，将显示【Dreamweaver 起始页】界面，帮助用户快速创建常用的项目文档，或者打开已有的文档等（如图1-1所示）。如果希望不再显示起始页，可选择“编辑”-“首选参数”命令，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框，单击“确定”按钮完成设置。再次启动Dreamweaver CS5后，将不再显示起始画画。勾选起始页上的“不再显示”选框，也可以不再显示起始画面。
Dreamweaver CS5的工作界面（如图1-2所示），包括标题栏、菜单栏、工具栏、插入栏、编辑窗口、属性面板和浮动面板组七个部分。
图1-1
图1-2
1.2.1 Dreamweaver CS5的标题栏（如图1-3所示）：
标题栏位于工作区的上部，包括软件的标识按钮、工作区布局选择菜单、搜索框、CS Live服务菜单以及窗口控制按钮（最大化、最小化和关闭按钮）。
图1-3
1.2.2 Dreamweaver CS5的菜单栏（如图1-4所示）：
菜单栏共有10个菜单，即“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”。
图1-4
1.2.3 Dreamweaver CS5的快捷工具栏（如图1-5所示）：
快捷工具栏位于菜单栏下面，包括“插入”、“文档”、和“标准”三项。
l “插入”快捷工具栏，共有8类对象控制工具，即：“常用”、“布局”、“表单”、“数据”、“Spy”、“InContext Editing”、“文本”、“收藏夹”。
l “文档”快捷工具栏，共有11个功能按钮，即：“代码”按钮、“拆分”按钮、“设计”按钮、“、实时代码”按钮、“检查浏览器兼容性”按钮、“实时视图”按钮、“检查”按钮、“在浏览器中预览/调试”按钮、“可视化助理”按钮、“刷新设计视图”按钮、“标题”文本框。
l “标准”快捷工具栏，包括一些常用的操作按钮，即：“新建”、“打开”、“浏览”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤销”、“重做”等按钮。
图1-5
1.2.4网页编辑区(如图1-6所示):
在快捷工具栏下面的区域就是网页编辑区，用户可以在此区域对网页内容进行编辑。如输入文字、插入表格、插入图片、插入动画等。
图1-6
1.2.5“属性”面板(如图1-7所示):
图1-7
属性面板位于网页编辑区的下方，网页中的不同对象有不同的属性，属性面板会随着网页编辑区内对象的不同而变化。如：文字有字体、字号、对齐方式等属性，图像有大小、链接、替换文字等属性，Flash动画也有相应的属性面板。
1.2.6浮动面板(如图1-8所示):
其他面板统称为浮动面板，它们浮动于编辑窗口之外，可以放置在屏幕的任何位置。按F4键可以将浮动面板隐藏，再按F4键，隐藏起来的浮动面板又会在原来的位置出现。
图1-8
3、作业：上机熟悉Dreamweaver CS5的工作界面。
第二章为我们的网站安家（构建站点）
教学课题：创建本地站点
教学目标：1、理解什么是站点。
2、学习创建本地站点的方法。
教学重点：创建本地站点的二种方法。
教学难点：创建本地站点的二种方法。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
站点简单的说就是一个文件夹，在这个文件夹里包含了网站中用到的所有文件，通过站点可以对网站的相关页面及各类素材进行统一管理，还可以使用站点管理实现将文件上传到网页服务器，测试网站。
演示案例1：创建一个本地站点
1、【需求分析】创建一个名称为“美丽的九寨沟”的本地站点/【完成效果】（如图2-1所示）
图2-1
2、【技能要点】
使用新建站点或管理站点向导搭建站点
3、【操作步骤】
步骤1：在D盘上新建一文件夹“jiuzhaigou”。
步骤2：启动Dreamweaver CS5程序，在菜单栏中，选择站点->新建站点或者选择站点->管理站点->新建。（如图2-2所示）
图2-2
步骤3：在“站点设置对象”对话框中，选择“站点”选项卡，在“站点名称”文本框中，输入“美丽的九寨沟”，单击“本地站点文件夹”右侧的“浏览文件夹”按钮，选择准备使用的站点文件夹D:\jiuzhaigou，单击“选择”按钮。（如图2-3所示）
图2-3
步骤5：在“管理站点”对话框中，显示刚刚新建的站点，单击“完成”按钮。在“文件”面板中，即可看到创建的站点文件，通过以上步骤即可完成本地站点的创建操作。（如图2-1所示）
教学课题：构建站点结构
教学目标：为站点添加相应的网页文件和存放编辑网页所需的各种图片、媒体、库以及样式表等的文件夹。
教学重点：构建站点结构的方法。
教学难点：构建站点结构的方法及各种文件夹的命名原则。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
一、构建站点结构
演示案例1：为本地站点添加首页和各种文件夹。
为“美丽的九寨沟”站点添加首页和各种文件夹/【完成效果】（如图2-4所示）
图2-4
1、【操作步骤】
步骤1：在文件面板中右击站点根目录，选择新建文件命令（如图2-5所示）。
图2-5
步骤2：将此网页文件改名为index.html，即为该网站的首页，也叫引导页。
步骤3：继续在文件面板中右击站点根目录，选择新建文件夹，将文件夹改名为images，此文件夹为图片文件夹。
步骤4：同步骤3，依次新建媒体文件夹media；库文件夹library和样式表文件夹css。（如图2-4所示）
说明：站点结构完成后，我们添加上的网页文件和各种文件夹显示在 D:\jiuzhaigou中（如图2-6所示）。
图2-6
教学课题：管理本地站点
教学目标：对多个网站进行管理，完成站点之间的切换、添加、删除等操作。
教学重点：站点之间的切换、添加、删除等操作。
教学难点：站点之间的切换、添加、删除。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
通常dreamweaver站点管理器需要对多个网站进行管理，完成站点之间的切换、添加、删除等操作。
单击文件面板中下拉菜单，选择管理站点（如图2-7所示）。在管理站点对话框中（如图2-8所示）可以对站点文件和文件夹进行管理，也可以增加、复制、删除站点。
1、打开站点：在运行Dreamweaver CS5之前，需要先打开新的站点，还可以单击文档窗口右边的【文件】面板中左边的下拉列表，在弹出的下拉列表中，选择准备打开的站点，单击即可打开相应的站点。
2、删除站点：在“管理站点”对话框中，选择需要删除的站点，在对话框中，单击“删除”按钮，即可站点删除。
3、复制站点：在“管理站点”对话框中，选择需要复制的站点，在对话框中，单击“复制”按钮，即可复制站点。
4、移动和复制文件：在“文件”面板中，使用鼠标右键单击，选择要移动和复制的文件，在弹出的快捷菜单中，选择“编辑”选项，在子菜单中，选择相应的菜单项进行设置。
图2-7 图2-8
网站已经搭建完成，下面我们就可以制作第一个网页了。
第三章制作第一个文本页面
教学课题：设置页面头内容
教学目标：掌握设置页面头内容的方法。
教学重点：1、页面头内容的含义。
2、设置页面头内容的方法。
教学难点：设置页面头内容的方法。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
演示案例1：设置页面头内容
1、【操作步骤】
步骤1：设置网页标题
（1）打开“美丽的九寨沟”网页。如图3-1所示。
图3-1
（2）在标题处将网页标题更改为“美丽的九寨沟”。如图3-2所示。
图3-2
说明：网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。当网页被添加入收藏夹时，网页标题又作为网页的名字出现在收藏夹中。
步骤2：插入作者和版权信息
（1）单击如图3-3所示列表中的“META”按钮，弹出“META”对话框。
（2）以定义作者信息为例，在“属性”栏中选择“名称”属性，在“值”文本框中输入值为author，在“内容”文本框中输入作者“张红”，即作者信息。如图3-4所示。
图3-3
图3-4
（3）如果希望设置版权声明，在“值”文本框中输入copyright，在“内容”文本框中输入版权声明，如图3-5如示。
图3-5
（4）如果希望设置网页编辑器的说明，在“值”文本框中输入Generator,在“内容”文本框中输入所用的网页编辑器，如图3-6所示。
图3-6
步骤3：插入关键字
（1）单击如图3-3所示列表中的“关键字”按钮，弹出“关键字”对话框。
（2）在“关键字”对话框中输入关键字即可。如图3-7所示。
图3-7
步骤4：插入说明
（1）单击如图3-3所示列表中的“说明”按钮，弹出“说明”对话框。
（2）在“说明”对话框中输入说明即可。如图3-8所示。
图3-8
步骤5：插入刷新时间
（1）单击如图3-3所示列表中的“刷新”按钮，弹出“刷新”对话框，刷新主要适用于两种情况。
（2）一种是网页地址发生变化，可以在原地址的网页上使用刷新功能，到设定时间后，浏览器自动跳转到新的网页。如图3-9所示，经过8秒后，浏览器自动跳转到指定的网页。
图3-9
（3）第二种网页经常更新，可以让浏览器在若干秒之后自动刷新网页。如图3-10所示，8秒后，网页自动刷新。
图3-10
步骤6：插入基准链接
（1）单击如图3-3所示列表中的“基础”按钮，弹出“基础”对话框。在Herf文本框中输入基础URL地址，在“目标”下拉列表中选择链接页面在哪个框架集中打开，其中包括5个选项，指定所有链接的文档应在哪个框架或窗口中打开。如图3-11所示。
图3-11
教学课题：网页中的文本与文档
教学目标：1、掌握页面中文本的输入和编辑方法
2、掌握设置有序列表和无序列表的方法
3、掌握插入日期和特殊字符的方法
教学重点：1、文本的输入和编辑方法。
2、设置有序列表和无序列表的方法。
3、插入日期和特殊字符的方法。
教学难点：文本的输入和编辑方法。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
演示案例1：制作文本页面，完成效果如图3-12如示。
图3-12
【操作步骤】
步骤1：建立网站站点。
（1）在本地硬盘上新建文件夹，名称为“wangye”，作为站点文件夹。
（2）启动Dreamweaver CS5，新建站点，名称为“wenben”。
步骤2：新建网页文件
（1）右击站点根目录通过新建文件添加网页文件，名称为“xingfu.html”。
步骤3．输入普通文本。
在文档窗口中输入“中国人幸福感的十大标准”，每输入一行，直接按回车键换行，输入文本后的效果如图3-13所示。
图3-13
说明：Dreamweaver中普通文本的输入与其他文字处理软件基本一样，有以下两种方式。
第一是在文档编辑窗口中直接由键盘输入。第二是复制已有的文本。
步骤4．设置文本属性。
图3-14是文本属性面板，文本的字体、字号、颜色等属性需要添加样式表来实现。
图3-14
（1）设置文本标题：
l 打开编辑字体列表对话框。
选择文本标题，右击，选择“字体”->“编辑字体列表”，如图3-15所示。
图3-15
l 添加中文字体。
从“可用字体”框中选择需要的字体，单击“左移”按钮将字体类型移动到“选择的字体”框后，单击字体列表的“加号”按钮，将选中的字体类型添加到字体列表中，如图3-16所示。同样可以单击“右移”按钮将已选择的字体类型删除。
图3-16
l 选择自己需要的字体后，会弹出新建CSS对话框，在该对话框中选择或输入选择器名称（如图3-17所示）。
图3-17
l 此时“ CSS样式”面板如图3-18所示。
图3-18
l 在“ CSS样式”中双击“.biaoti”样式，打“.biaoti的CSS规则定义”对话框，如图3-19所示。
图3-19
l 在此对话框中设置字体为黑体、字号为36像素、颜色为红色，此时网页标题如图3-20所示。
图3-20
（2）设置文本内容：同设置文本标题的方法，将文本内容设置为宋体、24像素、黑色。如图3-21所示。
图3-21
步骤5：设置文本的对齐方式
l 选中文本。
l 打开格式菜单，选择对齐，即可设置文本的对齐方式。
步骤6．插入水平线。
（1）将光标置于标题后面。
（2）选择“插入”→“HTML”→“水平线”命令，效果如图3-22所示。
图3-22
