微格教学教案-一Dreamweaver基础 课题：Dreamweaver基础 主讲人：卢曦 时间：2006年12月 一、教学目标 (知识目标 L.了解Dreamweaver: 2.掌握运用Dreamweaver的窗口控件： 3.学会设置Dreamweaver站点： 4.创建新的文档 二、教学重点 l、介绍Dreamweaver各工作区及各控件功能 2、设置Dreamweaver站点 三、教学难点 1、了解本地和远程文件夹的结构 2、Dreamweaver站点的设置 四、教学准备 1、多媒体教育网。（学生机要有网络） 2、课件一一Dreamweaver教程.ppt 五、教学用时 1课时 六、教学过程 教学过 教师活动 程
微格教学教案――Dreamweaver 基础 课题：Dreamweaver 基础 主讲人：卢曦 时间 ：2006 年 12 月 一、教学目标 ㈠知识目标 1.了解 Dreamweaver； 2. 掌握运用 Dreamweaver 的窗口控件； 3. 学会设置 Dreamweaver 站点； 4. 创建新的文档 二、教学重点 1、介绍 Dreamweaver 各工作区及各控件功能 2、设置 Dreamweaver 站点 三、教学难点 1、了解本地和远程文件夹的结构 2、 Dreamweaver 站点的设置 四、教学准备 1、多媒体教育网。 （学生机要有网络） 2 、课件——Dreamweaver 教程.ppt 五、教学用时 １课时 六、教学过程 教学过 程 教师活动
首先我们对Dreamweaver进行介绍 Dreamweaver MX2004是一款专业的HTML编辑器，用于对Web 站点、Web页和Web应用程序进行设计、编码和开发。 利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而 无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使 课程 用的面板直接拖到文档中。可以在Fireworks或其他图形应用程序中 导入 创建和编辑图像，然后将它们直接导入Dreamweaver,或者添加Flash 对象，从而优化开发工作流程。 Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑 工具（例如代码颜色和标签完成）；有关HTML、层叠样式表(CSS) JavaScript、.ColdFusion标记语言(CFML)、Microsoft Active Server Pages(ASP)和JavaServer Pages(JSP)的参考资料。Macromedia 的可自由导入导出T,技术可导入手工编码的TML文档而不会重 新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码 的格式。 Dreamweaver还可以使用服务器技术（例如CFML、ASP.NET、ASP JSP和PHP)生成由动态数据库支持的Web应用程序。 Dreamweaver可以完全自定义。可以创建自己的对象和命令，修 改快捷键，甚至编写JavaScript代码，用新的行为、属性检查器和 站点报告来扩展Dreamweaver的功能。 总而言之，Dreamweaver几乎可以满足用户对网页编辑及站点管 理所需要的各种功能，从而使该软件一面是就获得了大部分网页设计 师及业余爱好者的青睐
一、 课程 导入 首先我们对 Dreamweaver 进行介绍 Dreamweaver MX 2004 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。 利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而 无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使 用的面板直接拖到文档中。可以在 Fireworks 或其他图形应用程序中 创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加 Flash 对象，从而优化开发工作流程。 Dreamweaver 还提供了功能全面的编码环境，其中包括代码编辑 工具（例如代码颜色和标签完成）；有关 HTML、层叠样式表 (CSS)、 JavaScript、ColdFusion 标记语言 (CFML)、Microsoft Active Server Pages (ASP) 和 JavaServer Pages (JSP) 的参考资料。Macromedia 的可自由导入导出 HTML 技术可导入手工编码的 HTML 文档而不会重 新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码 的格式。 Dreamweaver 还可以使用服务器技术（例如 CFML、ASP.NET、ASP、 JSP 和 PHP）生成由动态数据库支持的 Web 应用程序。 Dreamweaver 可以完全自定义。可以创建自己的对象和命令，修 改快捷键，甚至编写 JavaScript 代码，用新的行为、属性检查器和 站点报告来扩展 Dreamweaver 的功能。 总而言之，Dreamweaver 几乎可以满足用户对网页编辑及站点管 理所需要的各种功能，从而使该软件一面是就获得了大部分网页设计 师及业余爱好者的青睐
Dreamweaver工作区 课 使用Dreamweaver工作区可以查看文档和对象属性。工作区还将 许多常用操作放置于工具栏中，使用它可以快速更改文档。 深 入 工作区布局 在Windows中，Dreamweaver提供了一个将全部元素置于一个 窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到 一个更大的应用程序窗口中。 材李通鲜 细州特春题 四/、1三5日」」1y口1天生山门A对趴 、秋四层 插入到文档中的按钮。每个对象都是一段TL代码，允许在插入它 时设置不同的属性。 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图 (如“设计”视图和“代码”视图)的选项、各种查看选项和一些常 用操作（如在浏览器中预览）。 “标准”工具栏（在默认工作区布局中不显示）包含来自“文 件”和“编辑”菜单中的一般操作的按钮。 “文档”窗口显示当前创建和编辑的文档
二、 课 程 深 入 Dreamweaver 工作区 使用 Dreamweaver 工作区可以查看文档和对象属性。工作区还将 许多常用操作放置于工具栏中，使用它可以快速更改文档。 工作区布局 在 Windows 中，Dreamweaver 提供了一个将全部元素置于一个 窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到 一个更大的应用程序窗口中。 Dreamweaver 工作区元素 “插入”栏包含用于将各种类型的“对象”（如图像、表格和层） 插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它 时设置不同的属性。 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图 （如“设计”视图和“代码”视图）的选项、各种查看选项和一些常 用操作（如在浏览器中预览）。 “标准”工具栏（在默认工作区布局中不显示）包含来自“文 件”和“编辑”菜单中的一般操作的按钮。 “文档”窗口显示当前创建和编辑的文档
属性检查器用于查看和更改所选对象或文本的各种属性。每种为 象都具有不同的属性。 课 标签选择器位于“文档”窗口底部的状态栏中，它显示环绕当前 程 选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择 深 该标签及其全部内容。 入 面板组是组合在一个标题下面的相关面板的集合。若要展开一个 面板组，应单击组名称左侧的展开箭头：若要取消停靠一个面板组， 应拖动该组标题栏左边缘的手柄。 “文件”面板可以管理文件和文件夹，无论它们属于 Dreamweaver站点的一部分还是位于远程服务器上。 关于Dreamweaver站点 Dreamweaver站点提供一种组织所有与Web站点关联的文档的 方法。通过在站点中组织文件，可以利用Dreamweaver将站点上传 到Wb服务器、自动跟踪和维护链接、管理文件以及共享文件。若 要充分利用Dreamweaver的功能，需要定义一个站点。 Dreamweaver站点由三部分（或文件夹）组成，具体取决于开发 环境和所开发的Wb站点类型： 本地文件夹是开发人员工作目录。Dreamweaver将该文件夹作为 “本地站点”，它可以放在本地计算机上，也可以放在网络服务器上。 这就是为Dreamweaver站点所处理的文件的存储位置。只需建立本 地文件夹即可定义Dreamweaver站点。若要向Web服务器传输文件 或开发Wb应用程序，还需添加远程站点和测试服务器信息。 远程文件夹是存储文件的位置，这些文件用于测试、生产、协作 等，具体取决于开发环境。Dreamweaver在“文件”面板中将该文件 夹称为“远程站点”。一般说来，远程文件夹位于运行Wb服务器 的计算机上。 本地文件夹和远程文件夹使开发人员能够在本地磁盘和Wb服
二、 课 程 深 入 属性检查器用于查看和更改所选对象或文本的各种属性。每种对 象都具有不同的属性。 标签选择器位于“文档”窗口底部的状态栏中，它显示环绕当前 选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择 该标签及其全部内容。 面板组是组合在一个标题下面的相关面板的集合。若要展开一个 面板组，应单击组名称左侧的展开箭头；若要取消停靠一个面板组， 应拖动该组标题栏左边缘的手柄。 “文件”面板可以管理文件和文件夹，无论它们属于 Dreamweaver 站点的一部分还是位于远程服务器上。 关于 Dreamweaver 站点 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的 方法。通过在站点中组织文件，可以利用 Dreamweaver 将站点上传 到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。若 要充分利用 Dreamweaver 的功能，需要定义一个站点。 Dreamweaver 站点由三部分（或文件夹）组成，具体取决于开发 环境和所开发的 Web 站点类型： 本地文件夹是开发人员工作目录。Dreamweaver 将该文件夹作为 “本地站点”，它可以放在本地计算机上，也可以放在网络服务器上。 这就是为 Dreamweaver 站点所处理的文件的存储位置。只需建立本 地文件夹即可定义 Dreamweaver 站点。若要向 Web 服务器传输文件 或开发 Web 应用程序，还需添加远程站点和测试服务器信息。 远程文件夹是存储文件的位置，这些文件用于测试、生产、协作 等，具体取决于开发环境。Dreamweaver 在“文件”面板中将该文件 夹称为“远程站点”。一般说来，远程文件夹位于运行 Web 服务器 的计算机上。 本地文件夹和远程文件夹使开发人员能够在本地磁盘和 Web 服
务器之间传输文件：这使开发人员可以轻松管理Dreamweaver站点 中的文件。 测试服务器文件夹是Dreamweaver处理动态页的文件夹。 了解本地和远程文件夹的结构 设置Dreamweaver站点远程文件夹访问权限时，必须确定远程 文件夹的主机目录。指定的主机目录应该对应于本地文件夹的根文件 夹。下面的示意图在左侧显示一个本地文件夹示例，在右侧显示一个 远程文件夹示例。 如果远程文件夹结构与本地文件夹的结构不匹Dreamweaver会 将文件上传到错误的位置，站点的访问者将无法看到这些文件。图像 和链接路径也可能被破坏。 远程根目录必须存在，Dreamweaver才能连接到它。如果远程文 件夹没有根目录，应创建一个根目录，或者应服务器管理员为用户创 建一个根目录。 即使只打算编辑远程站点的一部分，也必须在本地复制远程站点 相关分支的整个结构，即从远程站点的根文件夹直到要编辑的文件。 设置Dreamweaver站点 1选择“站点”〉“管理站点”。出现“管理站点”对话框。 注意：如果没有定义任何Dreamweaver站点，则会出现“站点 定义”对话框，此时可以跳过下一步。 2单击“新建”按钮。出现“站点定义”对话框。 3执行下列操作之一： ■单击“基本”选项卡以使用“站点定义向导”，它将引导用 户逐步完成设置过程。 注意：鼓励不熟悉Dreamweaver的用户使用“站点定义向导” 有经验的Dreamweaver用户可能更喜欢使用“高级”设置。 ■单击“高级”选项卡以使用“高级”设置，它可以根据需要 分别设置本地、远程和测试文件夹。 4完成Dreamweaver站点设置过程： ■在“站点定义向导”中，回答每一屏上出现的问题，然后单
务器之间传输文件；这使开发人员可以轻松管理 Dreamweaver 站点 中的文件。 测试服务器文件夹是 Dreamweaver 处理动态页的文件夹。 了解本地和远程文件夹的结构 设置 Dreamweaver 站点远程文件夹访问权限时，必须确定远程 文件夹的主机目录。指定的主机目录应该对应于本地文件夹的根文件 夹。下面的示意图在左侧显示一个本地文件夹示例，在右侧显示一个 远程文件夹示例。 如果远程文件夹结构与本地文件夹的结构不匹 Dreamweaver 会 将文件上传到错误的位置，站点的访问者将无法看到这些文件。图像 和链接路径也可能被破坏。 远程根目录必须存在，Dreamweaver 才能连接到它。如果远程文 件夹没有根目录，应创建一个根目录，或者应服务器管理员为用户创 建一个根目录。 即使只打算编辑远程站点的一部分，也必须在本地复制远程站点 相关分支的整个结构，即从远程站点的根文件夹直到要编辑的文件。 设置 Dreamweaver 站点 1 选择“站点” > “管理站点”。出现“管理站点”对话框。 注意：如果没有定义任何 Dreamweaver 站点，则会出现“站点 定义”对话框，此时可以跳过下一步。 2 单击“新建”按钮。出现“站点定义”对话框。 3 执行下列操作之一： ■ 单击“基本”选项卡以使用“站点定义向导”，它将引导用 户逐步完成设置过程。 注意：鼓励不熟悉 Dreamweaver 的用户使用“站点定义向导”； 有经验的 Dreamweaver 用户可能更喜欢使用“高级”设置。 ■ 单击“高级”选项卡以使用“高级”设置，它可以根据需要 分别设置本地、远程和测试文件夹。 4 完成 Dreamweaver 站点设置过程： ■ 在“站点定义向导”中，回答每一屏上出现的问题，然后单
击“下一步”继续进行设置，或者单击“上一步”返回到前一屏。 ■对于“高级”设置，根据需要完成“本地信息”类别、“远 程信息”类别和“测试服务器”类别 创建新文档 Dreamweaver为创建新文档提供了若干选项。可以创建以下任意 文档： >新的空白文档或模板 >基于Dreamweaver附带的某预定义页面布局的文档 >基于某现有模板的文档 另外还支持其它一些文档。例如，如果经常使用某种文档类型， 可以将其设置为创建的新页面的默认文档类型。 创建新的空白文档 1选择“文件”>“新建”。 即出现“新建文档”对话框。“常规”选项卡己被选定。 2从“类别”列表中选择“基本页”、“动态页”、“模板页” “其他”或“框架集”：然后从右侧的列表中选择要创建的文档的类 型。 例如，选择“基本页”创建TML文档，或选择“动态页”创建 ColdFusion或ASP文档，诸如此类。 3单击“创建”按钮。 新文档在“文档”窗口中打开。 三、 今天，大家都学得很好，回去在巩固一下今天的相关内容，自行 结 作 打开Dreamweaver熟悉reamweaver的操作环境，建立一个新的站点 实 进行设置操作 例
击“下一步”继续进行设置，或者单击“上一步”返回到前一屏。 ■ 对于“高级”设置，根据需要完成“本地信息”类别、“远 程信息”类别和“测试服务器”类别 创建新文档 Dreamweaver 为创建新文档提供了若干选项。可以创建以下任意 文档： ➢ 新的空白文档或模板 ➢ 基于 Dreamweaver 附带的某预定义页面布局的文档 ➢ 基于某现有模板的文档 另外还支持其它一些文档。例如，如果经常使用某种文档类型， 可以将其设置为创建的新页面的默认文档类型。 创建新的空白文档 1 选择“文件” > “新建”。 即出现“新建文档”对话框。“常规”选项卡已被选定。 2 从“类别”列表中选择“基本页”、“动态页”、“模板页”、 “其他”或“框架集”；然后从右侧的列表中选择要创建的文档的类 型。 例如，选择“基本页”创建 HTML 文档，或选择“动态页”创建 ColdFusion 或 ASP 文档，诸如此类。 3 单击“创建”按钮。 新文档在“文档”窗口中打开。 三、总 结 作 业 实 例 今天，大家都学得很好，回去在巩固一下今天的相关内容，自行 打开 Dreamweaver 熟悉 Dreamweaver 的操作环境，建立一个新的站点 进行设置操作