dreamweaver使用教程 (1).ppt

基于Dreamweaver的3527789488 ，Dreamweaver简介MacromediaDreamweaver是设计、编码和开发网站、网页和web应用程序的专业HTML编辑器。Dreamweaver的可视化编辑功能使您可以快速创建页面，而无需编写代码。您可以查看任何站点元素或资源，然后将它们从易于使用的面板直接拖动到文档中。您可以在MacromediaFireworks或其它图形应用程序中创建和编辑图像，然后直接导入Dreamweaver或添加MacromediaFlash对象以优化开发工作流程。Dreamweaver还提供全面的编码环境，包括代码编辑工具(如代码颜色和标签完成)。HTML、层叠样式表(CSS)、JavaScript、ColdFusion标记语言(CFML)和microsoftactiveserverrpages)Macromedia的自由导入导出HTML技术使您可以导入手动编码的HTML文档，而无需重新格式化代码。然后，可以使用所需的格式样式重新格式化代码。Dreamweaver妇漪CFMLASP .您还可以使用服务器技术(如NET、ASP、JSP和PHP)创建动态数据库支持的web应用程序，Dreamweaver是完全可自定义的。您可以创建自己的对象和命令，修改快捷键，编写JavaScript代码，以及使用新行为、属性检查器和站点报告扩展Dreamweaver功能。DreamweaverMX2004的新功能DreamweaverMX2004包含了新的简洁高效的界面，并提高了产品性能。此产品还包括许多新功能，这些功能增强了软件的易用性，使页面的生成更加容易，而不管设计环境或编码环境如何。新功能包括简单高效的设计和开发界面，以及更易于使用的Dreamweaver界面，可提高工作效率和工作质量。新的页面布局和设计环境Dreamweaver包含增强的CSS功能，可提供更完善的方法来改进样式设计和设计交互，还包含用于改进视觉编辑的反馈。Dreamweaver为编码工作人员提供了新功能，其中包括代码视图的改进以及无需创建Dreamweaver站点即可编辑文件的功能。Dreamweaver还包括对当前服务器技术的支持。Dreamweaver工作区Dreamweaver工作区使您可以查看文档和对象属性。工作区还将许多常用操作放置在工具栏中，您可以使用它们快速变更文档。工作区布局在Windows中，Dreamweaver提供了将所有元素放在一个窗口中的统一布局。在合并的工作区中，所有窗口和面板都合并到一个较大的应用程序窗口中。Dreamweaver工作区元素“插入”栏包含用于将各种类型的“对象”(如图像、表格和图层)插入到文档中的按钮。每个对象都是HTML代码，插入时可以设置不同的属性。“文档”工具栏包含用于不同“文档”窗口视图(如“设计”视图和“代码”视图)的选项、不同的查看选项以及提供一些常见操作(如在浏览器中预览)的不同按钮，标准工具栏未显示在默认工作区布局中，它包含用于文件和编辑菜单中常见操作的按钮。“文档”窗口显示当前正在创建和编辑的文档。使用属性检查器查看和更改选定对象或文本的各种属性。每个物件都有不同的属性。“文档”窗口底部状态栏中的标签选择器显示包围当前选定内容的标签的层次结构。您可以单击分层结构中的任何选项卡以选择该标签及其所有内容。面板组是在一个标题下分组的相关面板的集合。要展开面板组，请单击组名称左侧的展开箭头。要取消停放面板组，请拖动组标题栏的左边缘手柄。“文件”面板使您可以管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。Dreamweaver站点web站点设置是具有共享属性(如相关项目、类的设计或公用目的)的链接文档和资源的集合。MacromediaDreamweaverMX2004是站点创建和管理工具，因此您不仅可以创建单独的文档，还可以创建整个网站。创建网站的第一步是制定计划。为了获得最佳效果，在创建网站页面之前，应设计和计划网站的结构。下一步是设置Dreamweaver，以便开发人员可以在站点的基本结构中工作。如果web服务器上已存在站点，则可以使用Dreamweaver编辑该站点。关于Dreamweaver站点Dreamweaver站点提供了组织与网站关联的所有文档的方法。在站点中组织文件后，您可以利用Dreamweaver将站点上传到web服务器，自动跟踪和维护链接，管理文件以及共享文件。若要充分利用Dreamweaver功能，必须定义站点。Dreamweaver站点由三部分(或文件夹)组成，具体取决于开发环境和正在开发的网站类型。本地文件夹是开发人员工作目录。Dreamweaver将此文件夹用作可以放置在本地站点或网络服务器上的“本地站点”。这是Dreamweaver站点的工作文件的存储位置。您可以只创建本地文件夹来定义Dreamweaver站点。要将文件传输到web服务器或开发web应用程序，还必须添加远程站点和测试服务器信息。远程文件夹是存储用于测试、生产、协作等的文件的位置，具体取决于开发环境。在Dreamweaver中，此文件夹在“文件”面板中称为“远程站点”。远程文件夹通常位于运行web服务器的计算机上。本地文件夹和远程文件夹允许开发人员在本地磁盘和web服务器之间传输文件。这使开发人员可以轻松地管理Dreamweaver站点中的文件。测试服务器文件夹是Dreamweaver处理动态页的文件夹。了解本地和远程文件夹的结构设置Dreamweaver站点远程文件夹访问权限时，必须确定远程文件夹的主机目录。指定的主机目录必须与本地文件夹的根文件夹相对应。下图在左侧显示本地文件夹示例，在右侧显示远程文件夹示例。如果远程文件夹结构与本地文件夹的结构不匹配，Dreamweaver会将文件上传到错误的位置，站点访问者无法查看这些文件。图像和链接路径也可能损坏。Dreamweaver需要远程根目录才能连接。如果远程文件夹不包含根目录，则必须创建根目录，或者服务器管理员必须创建用户的根目录。如果只编辑远程站点的一部分，则还必须本地复制远程站点相关分支的完整结构(即，从远程站点的根文件夹到要编辑的文件)，然后选择“Dreamweaver站点1设置”“站点管理”。将显示“站点管理”对话框。秘诀：如果未定义Dreamweaver网站，则会出现网站定义对话方块，让您略过下一个步骤。2单击“新建”按钮。出现“站点定义”对话框。3执行以下操作之一：单击“基本”选项卡，使用站点定义向导。这将引导您逐步完成设置过程。注意：对于不熟悉Dreamweaver的用户，建议使用“站点定义向导”。有经验的Dreamweaver用户可能更喜欢“高级”设置。单击“高级”选项卡使用高级设置，您可以根据需要分别设置本地、远程和测试文件夹。4完成Dreamweaver站点设置过程：在站点定义向导中，回答每个屏幕上出现的问题，然后单击“下一步”继续设置，或单击“上一步”返回到上一屏幕。对于高级设置，Dreamweaver提供了一些选项，用于根据需要完成“本地信息”类别、“远程信息”类别和“测试服务器”类别，创建新文档，以及创建新文档。您可以在新建空白文档或基于模板Dreamweaver附带的预定义页面布局之一的文档基于现有模板的文档中创建其他支持的文档。例如，如果经常使用文档类型，则可以将其设置为新建页面的默认文档类型。建立新空白文件1档案选取新建。此时将显示“新建文档”对话框。已选择“常规”选项卡。2在“类别”列表中，选择“主页”、“动态页”、“模板页”、“其他”或“框架集”。然后从右侧列表中选择要创建的文档类型。例如，选择“主页”创建HTML文档，或选择“动态页”创建ColdFusion或ASP文档。3单击“创建”按钮。新文档将在“文档”窗口中打开。创建基于Dreamweaver设计文件的文档Dreamweaver附带了专业级别的页面布局和设计元素文件。您可以使用这些设计文件作为设计站点页面的起点。创建基于设计文件的文档时，Dreamweaver会创建文件的副本。1选择“文件”“新建”。此时将显示“新建文档”对话框。已选择“常规”选项卡。2在“类别”列表中选择“CSS样式表”、“基于表格的布局”、“页面设计(CSS)”、“页面设计”或“页面设计(具有辅助功能)”，然后从右侧列表中选择设计文件。您可以预览设计文件并阅读文档设计元素的简要说明。3单击“创建”按钮。新文档将在“文档”窗口中打开。如果选择了CSS样式表，则CSS文档将显示在“文档”窗口中，并且该CSS样式表将在“代码”视图中打开。基于现有模板创建文档您可以通过现有模板选择、预览和创建新文档。使用“新建文档”对话框从Dreamweaver中定义的所有站点中选择模板，或者使用“资源”面板从现有模板创建新文档，方法是选择文件新建。此时将打开“新建文档”对话框。2单击“模板”选项卡。3在“模板目标”列表中，选择包含要使用的模板的Dreamweaver站点，然后从右侧列表中选择模板。4单击“创建”。新文档将在“文档”窗口中打开。设置默认的新文档类型使您可以定义Dreamweaver用作站点默认文档的文档类型。1选择“编辑”首选参数(Windows)或Dreamweaver首选参数(Macintosh)。此时将显示“首选项”对话框。2在左侧的类别列表中，单击“新建文档”。3根据需要设置或更改环境设置。4单击“确定”。插入和设置文本格式，MacromediaDreamweaverMX2004提供了多种向文档中添加文本和设置文本格式的方法。您可以插入文本，设置字体类型、大小、颜色和对齐属性，使用层叠样式表(CSS)样式创建和应用自定义样式，Dreamweaver还提供了多种工具和命令，用于使用CSS样式或HTML标签设置文本格式。在Dreamweaver中，用户可以直接在页面中键入文本、从其它文档中复制并粘贴文本或从其它应用程序中拖动文本，从而将文本添加到网页中。典型的文档类型包括ASCII文本文件、RTF文件和MSOffice文档，它们包含web专家接受的文本内容，可以合并到网页中。在Dreamweaver中，您可以从其中一种文档类型中取出文本，然后将其嵌入到网页中。属性检查器和文本格式文本属性检查器使您可以设置当前选定文本的样式和格式。由于用户使用属性检查器设置文本样式和格式，Dreamweaver会跟踪用户为每个文本元素指定的格式属性，并使用命名规则为每个元素添加标签(如Stylee1、Style2、Style3、Style等)。如果为多个文本元素指定相同的格式属性，Dreamweaver将使用相同的标题标记这些元素，以删除重复的样式名称。您可以使用段落格式属性检查器中的“格式”弹出菜单或“文本”段落格式子菜单应用标准段落和标题标签。将插入点放在段落1中，或选择段落中的一些文本。2使用文本段落格式子菜单或属性检查器中的“格式”弹出菜单选择用于选择段落格式(如“标题1”、“标题2”、“格式”等)的选项。与选定样式关联的HTML标签(例如，表示“标题1”的h1、表示“标题2”的H2、表示“格式化文本”的pre等)应用于整个段落。要删除段落格式，请选择“无”。对段落应用标题标签时，Dreamweaver会自动将下一行文本添加为标准段落。要更改此设置，请选择“编辑”首选参数(Windows)，然后在“常规”类别的“编辑选项”下确保取消选择了“标题后切换到普通段落”。对齐文本属性检查器或对齐文本子菜单可以对齐页面上的文本。您可以使用文字对齐置中对齐指令将页面元素置中对齐。1只需选择要对齐的文本，或将指针插入文本的开头即可。2在属性检查器中，单击对齐选项(左、右或居中)，或选择文本对齐，然后选择对齐命令。使用缩进文本“缩进”命令将blockquoteHTML标签应用于文本段落，并缩进页面两侧的文本。在要缩进1的段落中置入插入点。2在属性检查器中，单击“缩进”或“凸出”按钮，然后选择“文本”、“缩进”或“凸出”，或者从上下文菜单中选择“列表”、“缩进”或“凸出”。添加段落间距Dreamweaver的工作方式与许多文字处理器类似。按压Enter可建立新段落，web浏览器会自动在段落之间插入空白空格行。可以插入换行符，以便在段落之间添加一个空格行。要添加换行符，请按Shift Enter键。在“插入”栏的“文本”类别中，选择“字符”，然后单击“换行”图标。选择插入HTML特殊字符换行。使用水平线对于组织信息很有用。您可以在页面上使用一条或多条水平线以可视方式分隔文本和对象。在“创建水平线：1文档”窗口中，将插入点放置在要插入水平线的位置。2执行以下操作之一：选择插入HTML水平线。在“插入”栏的“HTML”类别中，单击“水平线”按钮。以建立项目清单和编号清单在文件视窗中输入时，您可以使用现有文字或新文字建立编号(排序)清单、项目符