《dreamweaver使用教程》由会员分享，可在线阅读，更多相关《dreamweaver使用教程（164页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver基础,S,Dreamweaver简介Macromedia Dreamweaver 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。 利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在 MacromediaFireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加 Macromedia Flash 对象，从而优化开发工作流程。,Dreamweaver 还提供了
2、功能全面的编码环境，其中包括代码编辑工具（例如代码颜色和标签完成）；有关 HTML、层叠样式表 (CSS)、JavaScript、ColdFusion 标记语言 (CFML)、Microsoft Active Server Pages (ASP) 和 JavaServer Pages (JSP) 的参考资料。Macromedia 的可自由导入导出 HTML 技术可导入手工编码的 HTML 文档而不会重新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码的格式。 Dreamweaver 还可以使用服务器技术（例如 CFML、ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持
3、的 Web 应用程序。 Dreamweaver 可以完全自定义。可以创建自己的对象和命令，修改快捷键，甚至编写JavaScript 代码，用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。,Dreamweaver MX 2004 的新功能 Dreamweaver MX 2004 包含有一个崭新的、简洁高效的界面，且产品性能也得到了改进。此外，该产品还包含了众多新增的功能，这些新增功能改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地生成页面。 新功能包括： 简洁高效的设计和开发界面，Dreamweaver 的界面更易于使用，可使工作效率和工作质量均得到提高。 新
4、式的页面布局和设计环境，Dreamweaver 包含增强的 CSS 功能这些功能提供了一个更为精巧的方法来进行样式设计及提高设计交互性，此外，还包含了用于改进可视化编辑的反馈。 强大和开放的编码环境，Dreamweaver 为编码人员提供了新增功能，包括对“代码”视图的改进和无需创建Dreamweaver 站点即可编辑文件的功能。Dreamweaver 还包括当前对服务器技术的支持。,Dreamweaver 工作区 使用Dreamweaver 工作区可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使用它可以快速更改文档。工作区布局 在 Windows 中，Dreamweaver
5、提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。,Dreamweaver 工作区元素“插入”栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。 “标准”工具栏（在默认工作区布局中不显示）包含来自“文件”和“编辑”菜单中的一般操作的按钮。 “文档”窗口显示当前创建和编辑的文档。,属性检查器用于查看和更改所
6、选对象或文本的各种属性。每种对象都具有不同的属性。 标签选择器位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 面板组是组合在一个标题下面的相关面板的集合。若要展开一个面板组，应单击组名称左侧的展开箭头；若要取消停靠一个面板组，应拖动该组标题栏左边缘的手柄。 “文件”面板可以管理文件和文件夹，无论它们属于 Dreamweaver 站点的一部分还是位于远程服务器上。,设置 Dreamweaver 站点Web 站点是一组具有共享属性（如相关主题、类的设计或共同目的）的链接文档和资源。Macromedia Dreamwea
7、ver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。 创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。 下一步是设置 Dreamweaver 以使开发人员可以在站点的基本结构上工作。如果在 Web 服务器上已经具有一个站点，则可以使用 Dreamweaver 来编辑该站点。,关于 Dreamweaver 站点 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的方法。通过在站点中组织文件，可以利用 Dreamweaver 将站点上传到 Web
8、服务器、自动跟踪和维护链接、管理文件以及共享文件。若要充分利用 Dreamweaver 的功能，需要定义一个站点。 Dreamweaver 站点由三部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型： 本地文件夹是开发人员工作目录。Dreamweaver 将该文件夹作为 “本地站点”，它可以放在本地计算机上，也可以放在网络服务器上。这就是为 Dreamweaver 站点所处理的文件的存储位置。只需建立本地文件夹即可定义 Dreamweaver 站点。若要向 Web 服务器传输文件或开发 Web应用程序，还需添加远程站点和测试服务器信息。,远程文件夹是存储文件的位置，这些文件用
9、于测试、生产、协作等，具体取决于开发环境。Dreamweaver 在“文件”面板中将该文件夹称为“远程站点”。一般说来，远程文件夹位于运行 Web 服务器的计算机上。 本地文件夹和远程文件夹使开发人员能够在本地磁盘和 Web 服务器之间传输文件；这使开发人员可以轻松管理 Dreamweaver 站点中的文件。 测试服务器文件夹是 Dreamweaver 处理动态页的文件夹。,了解本地和远程文件夹的结构 设置 Dreamweaver 站点远程文件夹访问权限时，必须确定远程文件夹的主机目录。指定的主机目录应该对应于本地文件夹的根文件夹。下面的示意图在左侧显示一个本地文件夹示例，在右侧显示一个远程文
10、件夹示例。,如果远程文件夹结构与本地文件夹的结构不匹配Dreamweaver 会将文件上传到错误的位置，站点的访问者将无法看到这些文件。图像和链接路径也可能被破坏。 远程根目录必须存在，Dreamweaver 才能连接到它。如果远程文件夹没有根目录，应创建一个根目录，或者应服务器管理员为用户创建一个根目录。 即使只打算编辑远程站点的一部分，也必须在本地复制远程站点相关分支的整个结构，即从远程站点的根文件夹直到要编辑的文件。,设置 Dreamweaver 站点 1 选择“站点” “管理站点”。出现“管理站点”对话框。 注意：如果没有定义任何 Dreamweaver 站点，则会出现“站点定义”对话
11、框，此时可以跳过下一步。 2 单击“新建”按钮。出现“站点定义”对话框。 3 执行下列操作之一： 单击“基本”选项卡以使用“站点定义向导”，它将引导用户逐步完成设置过程。 注意：鼓励不熟悉 Dreamweaver 的用户使用“站点定义向导”；有经验的 Dreamweaver 用户可能更喜欢使用“高级”设置。 单击“高级”选项卡以使用“高级”设置，它可以根据需要分别设置本地、远程和测试文件夹。,4 完成 Dreamweaver 站点设置过程： 在“站点定义向导”中，回答每一屏上出现的问题，然后单击“下一步”继续进行设置，或者单击“上一步”返回到前一屏。 对于“高级”设置，根据需要完成“本地信息”
12、类别、“远程信息”类别和“测试服务器”类别,创建新文档,Dreamweaver 为创建新文档提供了若干选项。可以创建以下任意文档： 新的空白文档或模板 基于 Dreamweaver 附带的某预定义页面布局的文档 基于某现有模板的文档 另外还支持其它一些文档。例如，如果经常使用某种文档类型，可以将其设置为创建的新页面的默认文档类型。,创建新的空白文档 1 选择“文件” “新建”。 即出现“新建文档”对话框。“常规”选项卡已被选定。 2 从“类别”列表中选择“基本页”、“动态页”、“模板页”、“其他”或“框架集”；然后从右侧的列表中选择要创建的文档的类型。 例如，选择“基本页”创建 HTML 文档
13、，或选择“动态页”创建 ColdFusion 或 ASP 文档，诸如此类。 3 单击“创建”按钮。 新文档在“文档”窗口中打开。,创建基于 Dreamweaver 设计文件的文档 Dreamweaver附带了几种以专业水准开发的页面布局和设计元素文件。可以将这些设计文件作为设计站点页面的起点。当创建基于设计文件的文档时, Dreamweaver会创建文件的副本。 1 选择“文件” “新建”。 即出现“新建文档”对话框。“常规”选项卡已被选定。 2 在“类别”列表中，选择“CSS 样式表”、“基于表格的布局”、“页面设计 (CSS)”、“页面设计”或“页面设计（有辅助功能的）”，然后从右侧的列表
14、中选择一个设计文件。可以预览设计文件并阅读关于文档设计元素的简要说明。 3 单击“创建”按钮。 新文档在“文档”窗口中打开。如果选择了一个 CSS 样式表，则“文档”窗口会显示 CSS文档，而该 CSS 样式表会在“代码”视图中打开。,创建基于现存模板的文档 可以通过现有模板选择、预览和创建新文档。可以使用“新建文档”对话框从 Dreamweaver定义的任何站点中选择模板，也可以使用“资源”面板从现有模板创建新的文档。 1 选择“文件” “新建”。 “新建文档”对话框随即打开。 2 单击“模板”选项卡。 3 在“模板用于”列表中，选择包含要使用的模板的 Dreamweaver 站点，然后从右
15、侧的列表中选择一个模板。 4 单击“创建”。 新文档在“文档”窗口中打开。,设置默认的新文档类型 可以定义被 Dreamweaver 用作站点默认文档的文档类型。 1 选择“编辑” “首选参数” (Windows) 或 Dreamweaver “首选参数” (Macintosh)。“首选参数”对话框出现。 2 在左侧的类别列表中单击“新建文档”。 3 根据需要设置或更改首选参数。 4 单击“确定”。,插入文本和设置文本格式,Macromedia Dreamweaver MX 2004 提供了多种向文档中添加文本和设置文本格式的方法。 可以插入文本、设置字体类型、大小、颜色和对齐属性，以及使用层
16、叠样式表 (CSS) 样式创建和应用自己的自定义样式。 Dreamweaver 提供若干工具和命令，使用户可以使用 CSS 样式或 HTML 标签设置文本格式。 Dreamweaver 允许用户通过以下方式在 Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。Web 专业人员接受的、包含能够合并到Web 页的文本内容的常见文档类型有 ASCII 文本文件、RTF 文件和 MS Office 文档。Dreamweaver使用户可以从这些文档类型中的任何一种取出文本，然后将文本并入 Web 页中。,属性检查器和文本格式 文本属性检查器使用户可以设置当前所选文本的样式和格式。由于用户使用属性检查器设置文本样式和格式，Dreamweaver 将跟踪用户为每个文本元素指定的格式属性，并使用命名约定为每个元素指定一个标签：Style1、Style2、Style3、Stylen。如果将同一格式属性指定给两个或更多文本元素，Dreamweaver 将使用相同的标题标记这些元素，消除冗余的样式名称。,
