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 页中。,属性检查器和文本格式 文本属性检查器使用户可以设置当前所
17、选文本的样式和格式。由于用户使用属性检查器设置文本样式和格式，Dreamweaver 将跟踪用户为每个文本元素指定的格式属性，并使用命名约定为每个元素指定一个标签：Style1、Style2、Style3、Stylen。如果将同一格式属性指定给两个或更多文本元素，Dreamweaver 将使用相同的标题标记这些元素，消除冗余的样式名称。,设置段落格式 使用属性检查器中的“格式”弹出式菜单或“文本” “段落格式”子菜单可以应用标准段落和标题标签。 1 将插入点放在段落中，或者选择段落中的一些文本。 2 使用“文本”“段落格式”子菜单或属性检查器中的“格式”弹出式菜单，选择一个选项：选择段落格式（
18、例如，“标题 1”、“标题 2”、“已编排格式”等）。与所选样式关联的HTML 标签（例如，表示“标题 1”的 h1、表示“标题 2”的 h2、表示“已编排格式”文本的 pre 等）应用于整个段落。 选择“无”删除段落格式。 对段落应用标题标签时，Dreamweaver 自动添加下一行文本作为标准段落。若要更改此设置，选择“编辑”“首选参数”(Windows) 然后在“常规”类别中的“编辑选项”下确保取消选中“标题后切换到普通段落”。,对齐文本 使用属性检查器或“文本”“对齐”子菜单可以对齐页面上的文本。使用“文本”“对齐”“居中对齐”命令可以将页面元素居中对齐。 1 选择要对齐的文本，或者只
19、需将指针插到文本开头。 2 单击属性检查器中的对齐选项（“左对齐”、“右对齐”或“居中对齐”），或者选择“文本” “对齐”，然后选择对齐命令。,缩进文本 使用“缩进”命令可以将 blockquote HTML 标签应用于文本段落，缩进页面两侧的文本。 1 将插入点放在要缩进的段落中。 2 单击属性检查器中的“缩进”或“凸出”按钮，选择“文本” “缩进”或“凸出”，或从上下文菜单中选择“列表” “缩进”或“凸出”。,添加段落间距 Dreamweaver 的工作机制与许多字处理程序类似：按 Enter 键 可创建一个新段落，Web 浏览器在段落之间自动插入一个空白空格行。通过插入一个换行符，可以在
20、段落之间添加一个空格行。 若要添加换行符，应执行下列操作之一：按 Shift+Enter 键。在“插入”栏中的“文本”类别中，选择“字符”，然后单击“换行符”图标。选择“插入” “HTML” “特殊字符” “换行符”。,使用水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。 创建水平线： 1 在“文档”窗口中，将插入点放在要插入水平线的位置。 2 执行下列操作之一：选择“插入” “HTML” “水平线”。在“插入”栏的“HTML”类别中单击“水平线”按钮。,创建项目列表和编号列表 在“文档”窗口中键入时，可以用现有文本或新文本创建编号（排序）列表、项
21、目符号（不排序）列表和定义列表。 定义列表不使用项目符号点或数字这样的前导字符，通常用在词汇表或说明中。列表还可以嵌套。嵌套列表是包含其它列表的列表。例如，可能希望编号或项目符号列表嵌套在其他编号列表中。 若要创建新列表，执行以下操作： 1 在 Dreamweaver 文档中，将插入点放在要添加列表的位置，然后执行下列操作之一： 单击属性检查器中的“项目列表”或“编号列表”按钮。 选择“文本” “列表”，然后选择所需的列表类型：“不排序（项目）列表”、“排序（编号）列表”或“定义列表”。 2 键入列表项文本，然后按 Enter。 3 若要完成列表，按两次 Enter 键,使用现有文本创建列表：
22、 1 选择一系列段落组成一个列表。 2 单击属性检查器中的“项目列表”或“编号列表”按钮，或选择“文本” “列表”，然后选择所需的列表类型：“不排序列表”、“排序列表”或“定义列表”。 创建嵌套列表： 1 选择要嵌套的列表项。 2 单击属性检查器中的“缩进”按钮，或选择“文本” “缩进”。Dreamweaver 缩进文本并创建一个单独的列表，该列表具有原始列表的 HTML 属性。 3 按照以上使用的同一过程，对缩进的文本应用新的列表类型或样式。,设置和更改字体和样式 使用属性检查器或“文本”菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体类型、样式（如粗体或斜体）和大小。 若要设置或
23、更改字体特性，执行以下操作： 1 选择文本。如果未选择文本，更改将应用于随后键入的文本。 2 从以下选项中选择： 若要更改字体，从属性检查器或“文本” “字体”子菜单中选择字体组合。 若要更改字体样式，单击属性检查器中的“粗体”或“斜体”，或者从“文本” “样式”子菜单中选择字体样式（“粗体”、“斜体”、“下划线”等）。,若要更改字体大小，从属性检查器或“文本”“大小”子菜单中选择大小（从 1 到 7）。HTML 字体大小是相对而不是特定的点数。用户为他们的浏览器设置默认字体的点数；这是用户在属性检查器或“文本” “大小”子菜单中选择“默认”或“3”时所看到的字体大小。大小 1 和 2 显得比
24、默认字体小；大小 4 到 7 显得比默认字体大。 若要增加或减小所选文本的大小，从属性检查器或“文本” “改变大小”子菜单中选择相对大小（+1 或 -1 到 + 4 或 -3）。,更改文本颜色 可以更改所选文本的颜色，使新颜色覆盖“页面属性”中设置的文本颜色。（如果未在“页面属性”中设置任何文本颜色，则默认文本颜色为黑色。 若要更改文本颜色，执行以下操作： 1 选择文本。 2 执行下列操作之一： 单击属性检查器中的颜色选择器，从调色板中选择一种颜色。 选择“文本”“颜色”。出现系统颜色选择器对话框。选择一种颜色，然后单击“确定”。 直接在属性检查器域中输入颜色名称或十六进制数字。 若要定义默认
25、文本颜色，使用“修改” “页面属性”命令,插入日期 Dreamweaver 提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），用户可以选择在每次保存文件时都自动更新该日期。 将当前日期插入到文档中： 1 在“文档”窗口中，将插入点放在要插入日期的位置。 2 执行下列操作之一：选择“插入” “日期”。在“插入”栏的“常用”类别中，单击“日期”按钮。 3 在出现的对话框中，选择星期格式、日期格式和时间格式。 4 如果希望在每次保存文档时都更新插入的日期，应选择“储存时自动更新” 。如果希望日期在插入后变成纯文本并永远不自动更新，取消选择该选项。 5
26、单击“确定”插入日期。,插入特殊字符 某些特殊字符在 HTML 中以名称或数字的形式表示，它们被称为实体。HTML 包含版权符号(）。 将特殊字符插入到文档中： 1 在“文档”窗口中，将插入点放在要插入特殊字符的位置。 2 执行下列操作之一：从“插入” “HTML” “特殊字符”子菜单中选择字符名称。在“插入”栏中的“文本”类别中，单击“字符”按钮选择需要的字符。,在字符之间添加空格 HTML 只允许字符之间包含一个空格；若要在文档中添加其他空格，必须插入连续空格。可以设置一个在文档中自动添加连续空格的参数选择。 若要插入连续空格，执行下列操作之一：在“插入”栏中的“文本”类别中，单击“字符”
27、按钮选择“插入连续空格”。选择“插入” “HTML” “特殊字符” “连续空格”。按 Control+Shift+ 空格键。 若要设置添加连续空格的参数，执行以下操作： 1 选择“编辑”“首选参数”(Windows) 2 在“常规”类别中确保选中“允许多个连续的空格”。,插入图像,关于图像虽然存在很多种图形文件格式，但 Web 页中通常使用的只有三种，即 GIF、JPEG 和 PNG。目前， GIF 和 JPEG 文件格式的支持情况最好，大多数浏览器都可以查看它们。 由于 PNG 文件具有较大的灵活性并且文件大小较小，所以它对于几乎任何类型的 Web 图形都是最适合的；但是，Microsoft
28、 Internet Explorer （4.0 和更高版本）和 Netscape Navigator（4.04 和更高版本）只能部分支持 PNG 图像的显示。因此，除非用户正在为使用支持 PNG 格式的浏览器的特定目标用户进行设计，否则应使用 GIF 或 JPEG 以迎合更多人的需求。,GIF （图形交换格式）文件最多使用 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。 JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为 JPEG文件可以包含数百万种颜色。随着 JPEG 文件品质的提高
29、，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。 PNG （可移植网络图形）文件格式是一种替代 GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明的支持。PNG 是 Macromedia Fireworks 固有的文件格式。PNG 文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有 .png 文件扩展名才能被 Dreamweaver 识别为PNG 文件。,在 Dreamweaver 中编辑图像 Dreamweaver 提供基本图像编辑
30、功能，使用户无需使用外部图像编辑应用程序（例如Macromedia Fireworks）即可修改图像。Dreamweaver 图像编辑工具旨在使用户能与内容设计者（负责创建 Web 站点上使用的图像文件）轻松地协作。 注意：用户无需在计算机上安装 Macromedia Fireworks，即可使用 Dreamweaver 图像编辑功能。,Dreamweaver 具有以下图像编辑功能： 图像重新取样添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小图像文件的大小，其结果是下载性能的提高。重新取样图像以取得更高的分辨率一般不会导
31、致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。 裁剪可让用户通过减小图像区域编辑图像。通常，用户可能需要裁剪图像以强调图像的主题，并删除图像中强调部分周围不需要的部分。 “亮度/ 对比度”修改图像中像素的亮度或对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/ 对比度”。 锐化可通过增加图像中边缘的对比度来调整图像的焦点。扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这可以防止特别精细的细节从组成数码图像的像素中丢失。不过，要显示数码图像文件中的细节，经常需要锐化图像，从而提高边缘的对比度，
32、使图像更清晰。,若要插入图像，执行以下操作： 1 在“文档”窗口中，将插入点放置在用户要显示图像的地方，然后执行以下操作之一： 在“插入”栏的“常用”类别中，单击“图像”图标。 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果用户正处理代码，则拖入“代码”视图窗口中）。 选择“插入” “图像”。 将图像从“资源”面板（“窗口” “资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 2 选择“文件系统”以选择一个图形文件。,3
33、浏览以选择用户要插入的图像或内容源。 如果用户正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:/ 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。 4 单击“确定”。 5 在“替换文本”和“长描述”文本框中输入值，然后单击“确定”。 注意：根据用户的需要，可以在其中一个或两个文本框中输入信息。 若要编辑图像的辅助功能值，执行以下操作： 1 在“文档”窗口中，选择图像。 2 执行下列操作之一：在“代码”视图中编辑适当的图像属性。右键单击 (Windows) 然后选择“编辑标签代码”。编辑属性检查器中的 Alt 值。
34、,插入图像占位符 图像占位符是在准备好将最终图形添加到 Web 页之前使用替最终图像保留位置的图形。 若要插入图像占位符，执行以下操作： 1 在“文档”窗口中，将插入点放置在要插入占位符图形的位置。 2 执行下列操作之一：在“常用”插入栏中，单击“图像占位符”图标。选择“插入” “图像占位符”。 “图像占位符”对话框随即显示。 3 在该对话框中，为图像占位符选择选项。 用户可以设置占位符的大小和颜色，并为占位符提供文本标签。 4 单击“确定”。,替换图像占位符 图像占位符不是在浏览器中显示的图形图像。在用户发布站点之前，应该用适用于 Web 的图形文件（例如 GIF 或 JPEG）替换所有添加
35、的图像占位符。 若要更新图像源文件，执行以下操作： 1 在“文档”窗口中执行下列操作之一：双击图像占位符。单击图像占位符将其选中，然后在属性检查器（“窗口” “属性”）中单击“源文件”文本框旁的文件夹图标。即会出现“图像源文件”对话框。 2 在此对话框中，导航到要使用它替换图像占位符的图像。 3 单击“确定”。 选定图像即出现在文档中。,对齐图像 用户可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。还可以设置图像的水平对齐方式。 若要对齐图像，执行以下操作： 1 在“设计”视图中选择该图像。 2 在属性检查器中设置该图像的对齐属性。 对齐选项如下： “默认值”通常指定基线对齐。（根
36、据站点访问者的浏览器的不同，默认值也会有所不同。） “基线和底部”将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 “顶端”将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。,“居中”将图像的中部与当前行的基线对齐。 “文本上方”将图像的顶端与文本行中最高字符的顶端对齐。 “绝对居中”将图像的中部与当前行中文本的中部对齐。 “绝对底部”将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。 “左对齐”将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。 “右对齐”将图像放置在右边，文本在对象的左侧换行。
37、如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。,调整图像大小 在Dreamweaver 中以可视方式调整图像大小有助于用户看到不同尺寸的图像对布局的影响情况。以可视方式调整图像大小不会将图像文件缩放用户指定的比例。如果用户确实在 Dreamweaver中以可视方式调整了图像的大小，但是没有使用图像编辑应用程序（例如 MacromediaFireworks）将图像文件缩放到所需大小，则在载入页面时用户的浏览器必须缩放图像。这可能会导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示，需使用图像编辑应用程序缩放图像。,若要以可视方式调
38、整元素的大小，执行以下操作： 1 在“文档”窗口中选择该元素（例如，一个图像或 SWF 文件）。元素的底部、右侧及右下角出现调整大小手柄。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。 2 执行下列操作之一，调整元素的大小：若要调整元素的宽度，拖动右侧的选择控制点。若要调整元素的高度，拖动底部的选择控制点。若要同时调整元素的宽度和高度，拖动顶角的选择控制点。若要在调整元素尺寸时保持元素的比例（其宽高比），在按住 Shift 键的同时拖动顶角的选择控制点。,裁剪图像 Dreamweaver 支持裁剪（或修剪）位图文件图像。
39、注意：使用 Dreamweaver 裁剪时，会更改磁盘上的源图像文件，因此，用户可能需要备份图像文件，以在需要回复到原始图像时使用。 若要裁剪图像文件，执行以下操作： 1 打开包含要裁剪的图像的页面，选择图像，并执行下列操作之一：单击图像属性检查器中的“裁减工具”。选择“修改” “图像” “裁剪”。 所选图像周围会出现裁剪控制点。 2 调整裁剪控制点直到边界框包含的图像区域符合所需大小。 3 在边界框内部双击或按 Enter 键裁剪所选区域。将显示一个对话框通知用户正在裁剪的图像文件将在磁盘上更改。单击“确定”。所选位图的边界框外的所有像素都将被删除，但将保留图像中的其它对象。 4 预览该图像
40、并确保它满足用户的要求。,调整图像的亮度和对比度 “亮度/ 对比度”修改图像中像素的亮度或对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/ 对比度”。 若要调整图像的亮度和对比度，执行以下操作： 1 打开包含要调整的图像的页面，选择图像，并执行下列操作之一：单击图像属性检查器中的“亮度/ 对比度”按钮。选择“修改” “图像” “亮度/ 对比度” 将显示“亮度/ 对比度”对话框。 2 拖动亮度和对比度滑动块调整设置。值的范围从 -100 到 100。 3 单击“确定”。,锐化图像 锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。 若要锐化图像，执
41、行以下操作： 1 打开包含要锐化的图像的页面，选择图像，并执行下列操作之一：单击图像属性检查器中的“锐化”按钮。选择“修改” “图像” “锐化”。 将显示“锐化”对话框。 2 可以通过拖动滑块控件或在文本框中输入一个 0 到 10 之间的值，来指定 Dreamweaver 应用于图像的锐化程度。在使用“清晰度”对话框调整图像的清晰度时，可以预览对该图像所做的更改。 3 单击“确定”。 4 选择“文件” “保存”以保存更改，或选择“编辑” “撤消锐化”回复到原始图像。,创建鼠标经过图像 用户可以在页面中插入鼠标经过图像。鼠标经过图像 是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。开始
42、前，选用一对或多对图像用于鼠标经过图像。用户将使用两个图像文件创建鼠标经过图像：主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。,若要创建鼠标经过图像，执行以下操作： 1 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 2 使用以下方法之一插入鼠标经过图像：在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标。在“插入”栏中，选择“常用” ，然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。选择“插入”
43、“图像对象” “鼠标经过图像”。 随即显示“插入鼠标经过图像”对话框。 3 完成对话框。 4 单击“确定”。 5 选择“文件” “在浏览器中预览”，或按 F12 键。不能在“设计”视图中看到鼠标经过图像的效果。 6 在浏览器中，将鼠标指针移过原始图像。显示应切换到鼠标经过图像。,链接与导航,了解文档位置和路径 了解从作为链接起点的文档到作为链接目标的文档之间的文件路径对于创建链接至关重要。每个网页都有一个唯一的地址，称作统一资源定位器 (URL)。不过，当创建本地链接（即从一个文档到同一站点上另一个文档的链接）时，通常不指定要链接到的文档的完整 URL，而是指定一个起自当前文档或站点根文件夹的
44、相对路径。 绝对路径（例如 http:/ 文档相对路径（例如 dreamweaver/contents.html） 。 站点根目录相对路径（例如 /support/dreamweaver/contents.html）。,绝对路径 绝对路径提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web 页，通常使用http:/）。例如，http:/ 就是一个绝对路径。 必须使用绝对路径，才能链接到其它服务器上的文档。尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它域，则所有本地绝对路径链接都将断开。对本地链接使用相对路径还能在需
45、要在站点内移动文件时，提供更大的灵活性。,文档相对路径 文档相对路径对于大多数 Web 站点的本地链接来说，是最适用的路径。在当前文档与所链接的文档处于同一文件夹内，而且可能保持这种状态的情况下，文档相对路径特别有用。文档相对路径还可用来链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接的文档的路径。 文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对 URL 部分，而只提供不同的路径部分。,例如，假设一个站点的结构如下：,创建从 contents.html 到其它文件的链接，如下所示： 若要从 contents.html 链接到 hours.html
46、 （两个文件在同一文件夹中），文件名就是相对路径：hours.html。 若要链接到 tips.html（在名为 resources 的子文件夹中），可使用相对路径 resources/tips.html。每个正斜杠 (/) 表示在文件夹层次结构中下移一级。 若要链接到 index.html （在父文件夹中， contents.html 向上一级），可使用相对路径/index.html。每个 / 表示在文件夹层次结构中上移一级。 若要链接到 catalog.html （在父文件夹的其它子文件夹中），可使用相对路径/products/catalog.html。其中 / 向上移至父文件夹； pro
47、ducts/ 向下移至 products 子文件夹中。,站点根目录相对路径 站点根目录相对路径提供从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型Web 站点，或者在使用承载有多个不同站点的服务器，则可能需要使用这些类型的路径。不过，如果用户不熟悉此类型的路径，最好坚持使用文档相对路径。 站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如， /support/tips.html 是文件 (tips.html) 的站点根目录相对路径，该文件位于站点根文件夹的 support 子文件夹中。在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下
48、，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接；例如，如果 HTML 文件对相关文件（如图像）使用根目录相对链接，则移动 HTML 文件后，其相关文件链接依然有效。,导航条 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。 一般：用户尚未单击或尚未与此项目交互时所显示的图像。 滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化（例如变得更亮），以便让用户知道可与这个项目进行交互。 按下：指项目被单击后所显示的图像。例如，用户单击某项目后，载入一个新的页面，
49、而导航条仍然显示，只是被单击的项目变暗，表示它曾被选择过。 按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。例如，项目变淡或变灰。此状态可作为一个给用户的可视提示，告诉他们在站点的这一部分，此项目不能再被单击。 不必包含所有这四种状态的导航条图像；例如，可以只选用“一般”和“按下”这两种状态。,图像地图 图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。 客户端图像地图将超文本链接信息存储在 HTML 文档中，而不是像服务器端图像地图那样，存储在单独的地图文件中。当站点访问者单击图像中的热点时，相关 URL 被直接发送到服务器。这样使得客户端图像地图比服务器端图像地图要快，因为服务器不必解释访问者的单击位置。,创建链接 在一个文档中可以创建几种类型的链接：链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。命名锚记链接，此类链接跳转至文档内的特定位置。电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。空链接和脚本链接，此类链接使用户能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。,
