Dreamweaver
打开应用程序
Dreamweaver 用户指南
简介
响应式网页设计基础知识
Dreamweaver 中的新增功能
使用 Dreamweaver 进行 Web 开发 - 概述
Dreamweaver/常见问题
键盘快捷键
Dreamweaver 系统要求
功能摘要
Dreamweaver 和 Creative Cloud
将 Dreamweaver 设置与 Creative Cloud 同步
Dreamweaver 中的 Creative Cloud Libraries
在 Dreamweaver 中使用 Photoshop 文件
使用 Adobe Animate 和 Dreamweaver
从库提取 Web 优化的 SVG 文件
Dreamweaver 工作区和视图
Dreamweaver 工作区
为可视化开发优化 Dreamweaver 工作区
根据文件名或内容搜索文件 | Mac OS
设置站点
关于 Dreamweaver 站点
设置站点的本地版本
连接到发布服务器
设置测试服务器
导入和导出 Dreamweaver 站点设置
将现有网站从远程服务器下载到您的本地站点根目录
Dreamweaver 中的辅助功能
高级设置
设置用于传输文件的站点偏好设置
在 Dreamweaver 中指定代理服务器设置
将 Dreamweaver 设置与 Creative Cloud 同步
在 Dreamweaver 中使用 Git
管理文件
创建和打开文件
管理文件和文件夹
从服务器获取文件和将文件上传到服务器
存回和取出文件
同步文件
比较文件的差别
遮盖 Dreamweaver 站点中的文件和文件夹
为 Dreamweaver 站点启用设计备注
防止潜在的 Gatekeeper 漏洞
布局和设计
使用可视化助理进行布局
关于使用 CSS 来设计页面布局
使用 Bootstrap 设计响应式网站
在 Dreamweaver 中创建和使用媒体查询
使用表格显示内容
颜色
使用流式网格布局的响应式设计
Dreamweaver 中的 Extract
CSS
了解层叠样式表
使用 CSS Designer 进行页面布局
在 Dreamweaver 中使用 CSS 预处理器
如何在 Dreamweaver 中设置 CSS 样式偏好设置
在 Dreamweaver 中移动 CSS 规则
在 Dreamweaver 中将内联 CSS 转换为 CSS 规则
使用 div 标签
向背景应用渐变效果
在 Dreamweaver 中创建和编辑 CSS3 过渡效果
设置代码格式
页面内容和资源
设置页面属性
设置 CSS 标题属性和 CSS 链接属性
使用文本
查找和替换文本、标签和属性
DOM 面板
在实时视图中编辑
在 Dreamweaver 中对文档编码
在“文档”窗口中选择和查看元素
在属性检查器中设置文本属性
对网页进行拼写检查
在 Dreamweaver 中使用水平线
在 Dreamweaver 中添加和修改字体组合
使用资源
在 Dreamweaver 中插入和更新日期
在 Dreamweaver 中创建和管理收藏资源
在 Dreamweaver 中插入和编辑图像
添加媒体对象
在 Dreamweaver 中添加视频
插入 HTML5 视频
插入 SWF 文件
添加音频效果
在 Dreamweaver 中插入 HTML5 音频
使用库项目
在 Dreamweaver 中使用阿拉伯语和希伯来语文本
链接与导航
关于链接与导航
链接
图像地图
链接疑难解答
jQuery 构件和效果
在 Dreamweaver 中使用 jQuery UI 和移动构件
在 Dreamweaver 中使用 jQuery 效果
对网站进行编码
关于在 Dreamweaver 中编码
Dreamweaver 中的编码环境
设置编码偏好设置
自定义代码颜色
编写和编辑代码
代码提示和代码完成
折叠和展开代码
使用代码片段重用代码
使用 linting 检查代码
优化代码
在设计视图中编辑代码
使用页面的头内容
在 Dreamweaver 中插入服务器端包含
在 Dreamweaver 中使用标签库
将自定义标签导入 Dreamweaver
使用 JavaScript 行为（一般说明）
应用内置 JavaScript 行为
关于 XML 和 XSLT
在 Dreamweaver 中执行服务器端 XSL 转换
在 Dreamweaver 中执行客户端 XSL 转换
在 Dreamweaver 中为 XSLT 添加字符实体
设置代码格式
跨产品工作流
安装和使用 Dreamweaver 的扩展
Dreamweaver 中的应用程序内更新
在 Dreamweaver 中插入 Microsoft Office 文档（仅限 Windows）
使用 Fireworks 和 Dreamweaver
使用 Contribute 编辑 Dreamweaver 站点中的内容
Dreamweaver 和 Business Catalyst 集成
创建个性化的电子邮件营销活动
模板
关于 Dreamweaver 模板
识别模板和基于模板的文档
创建 Dreamweaver 模板
在模板中创建可编辑区域
在 Dreamweaver 中创建重复区域和表格
在模板中使用可选区域
在 Dreamweaver 中定义可编辑的标签属性
如何在 Dreamweaver 中创建嵌套模板
编辑、更新和删除模板
在 Dreamweaver 中导出和导入 xml 内容
在现有文档中应用或删除模板
在 Dreamweaver 模板中编辑内容
Dreamweaver 中模板标签的语法规则
设置模板区域的高亮显示偏好设置
在 Dreamweaver 中使用模板的好处
移动设备和多屏幕
创建媒体查询
更改移动设备的页面方向
使用 Dreamweaver 创建适用于移动设备的 Web 应用程序
动态网站、页面和 Web 表单
了解 Web 应用程序
设置计算机以进行应用程序开发
数据库连接疑难解答
在 Dreamweaver 中删除连接脚本
设计动态页
动态内容源概述
定义动态内容源
向页面添加动态内容
在 Dreamweaver 中更改动态内容
显示数据库记录
在 Dreamweaver 中提供动态数据和进行疑难解答
在 Dreamweaver 中添加自定义服务器行为
使用 Dreamweaver 生成表单
使用表单从用户处收集信息
在 Dreamweaver 中创建和启用 ColdFusion 表单
创建 Web 表单
增强了对表单元素的 HTML5 支持
使用 Dreamweaver 开发表单
以可视化方式生成应用程序
在 Dreamweaver 中生成主页和详细页
生成搜索页和结果页
生成记录插入页
在 Dreamweaver 中生成更新记录页
在 Dreamweaver 中生成记录删除页
在 Dreamweaver 中使用 ASP 命令修改数据库
生成注册页
生成登录页
生成只有授权用户才能访问的页面
使用 Dreamweaver 保护 Coldfusion 中的文件夹
在 Dreamweaver 中使用 ColdFusion 组件
测试、预览和发布网站
预览页面
在多个设备上预览 Dreamweaver 网页
测试 Dreamweaver 站点
疑难解答
已修复的问题
已知问题
在 Dreamweaver 中、浏览器中预览您的网页。
通过实时预览，可在浏览器中预览您的页面，并随着您编码在浏览器中实时查看更改。
可通过“实时”视图了解页面在 Web 上的显示效果，还可在“代码”视图中编辑各项。
也可通过“设计”视图了解页面在 Web 上的显示效果，但该视图呈现页面的方式并非与浏览器完全相同。
通过“在浏览器中打开”功能，可了解页面在浏览器中的显示效果。此功能最适合从数据库使用动态数据的页面，因为这并非实时。
请继续阅读以详细了解 Dreamweaver 中不同类型的预览选项。
在浏览器中实时预览
在 Dreamweaver 中编写或设计网页时即可实时预览这些网页。通过此功能，可在多个浏览器上同时编写和预览网页。
在浏览器中实时预览更改
在浏览器中实时预览更改
在 Dreamweaver 状态栏中单击“实时预览”。
实时预览
实时预览
有多个选项可在浏览器中实时预览网页。
要在浏览器中预览网页，请单击任意可用的浏览器选项。
可编辑在此列表中显示的浏览器。要将浏览器添加到此列表或从中删除浏览器，请参阅设置浏览器首选项。
如果有测试服务器，请务必在设置该测试服务器时启用“将文件自动推送到测试服务器”。
实时预览将文件推送到测试服务器中。启用“自动推送到测试服务器”确保您可实时看到更改。
如果出现提示，请保存该网页及其相关文档。
随后将打开一个浏览器，其中显示该网页。
继续编写页面，并在编写时查看浏览器中的变化。
设置浏览器预览首选项
可在实时预览与在浏览器中预览之间切换。请设置在预览网站时浏览器要使用的首选项，并定义默认的主浏览器和辅助浏览器。
随后，无论是用实时预览功能实时预览您的网站，还是在浏览器中打开页面，都将使用这些浏览器首选项。
选择“文件”>“实时预览”>“编辑浏览器列表”。
默认为静态浏览器中预览
默认为静态浏览器中预览
如果取消选中“默认为静态浏览器中预览”选项，则将禁用实时预览。可使用主浏览器和辅助浏览器的快捷键在浏览器中打开预览。或者，还可使用“文件”菜单或单击状态栏上的“设备预览”图标。
要将浏览器添加到列表，请单击加号 (+) 按钮，完成“添加浏览器”对话框，然后单击“确定”。
要从列表中删除浏览器，请选择该浏览器，然后单击减号 (-) 按钮。
要更改所选浏览器的设置，请单击“编辑”按钮，在“编辑浏览器”对话框中作出更改，然后单击“确定”。
选择“主浏览器”或“辅助浏览器”选项以指定所选浏览器是主浏览器还是辅助浏览器。
按 F12 (Windows) 或 Option+F12 (Macintosh) 将打开主浏览器，按 Ctrl+F12 (Windows) 或 Command+F12 (Macintosh) 将打开辅助浏览器。
选择“使用临时文件预览”选项以创建一个临时副本，供预览和服务器调试。（如果要直接更新文档，可取消选择此选项。）
默认为静态浏览器中预览：通过此项，用户可选择在浏览器中预览其文件的模式。选中该复选框后，用户可使用菜单中的“在浏览器中打开”和使用快捷键预览文件。未选中此项时，将使用“实时预览”在浏览器中预览文件。默认不选中该复选框，并将使用“实时预览”在浏览器中预览文件。
在“实时”视图中预览页面
“实时”视图与传统 Dreamweaver“设计”视图的区别在于前者更真实地呈现页面在浏览器中的显示效果，而该效果也是可以编辑的。
在“设计”视图中随时可以切换到“实时”视图。但切换到“实时”视图与在 Dreamweaver 中的任何其他传统视图（代码/拆分/设计）之间进行切换无关。在从“设计”视图切换到“实时”视图时，只是在可编辑和“实时”之间切换“设计”视图。
进入“实时”视图后“设计”视图保持冻结的同时，“代码”视图保持可编辑状态，因此您可以更改代码，然后刷新“实时”视图以查看所进行的更改是否生效。在处于“实时”视图时，可以使用其他用于查看实时代码的选项。“实时代码”视图类似于“实时”视图，前者显示浏览器为呈现页面而执行的代码版本。与“实时”视图类似，“实时代码”视图是非可编辑视图。
“实时”视图的另一优势是能够冻结 JavaScript。例如，您可以切换到“实时”视图并悬停在由于用户交互而更改颜色的基于 jQuery 的表格行上。冻结 JavaScript 时，“实时”视图会将页面冻结在其当前状态。然后，您可以编辑 CSS 或 JavaScript 并刷新页面以查看更改是否生效。如果要查看并更改无法在传统“设计”视图中看到的弹出菜单或其他交互元素的不同状态，则在“实时”视图中冻结 JavaScript 很有用。
要在“实时”视图中预览页面，请执行以下操作：
确保在“设计”视图（“视图”>“设计”）或“代码和设计”视图（“视图”>“代码和设计”）中。
单击“实时”视图按钮。
（可选）在“代码”视图、“CSS 样式”面板、外部 CSS 样式表或另一相关文件中作出更改。
虽然无法在“实时”视图中进行编辑，但随着在“实时”视图中单击，用于在其他区域中（例如在“CSS 样式”面板或在“代码”视图中）进行编辑的选项发生变化。
在保持“实时”视图具有焦点的同时，通过从文档顶部的“相关文件”工具栏中打开相关文件（例如 CSS 样式表），您可以使用这些相关文件。
如果已在“代码”视图或相关文件中作出了更改，请通过单击“文档”工具栏中的“刷新”按钮或通过按 F5 而刷新“实时”视图。
要返回可编辑的“设计”视图，请再次单击“实时”视图按钮。
预览实时代码
“实时代码”视图中显示的代码类似于从浏览器中查看页面源代码时看到的代码。虽然此类页面的源代码是静态的，仅提供该页面在浏览器中的源代码，但“实时代码”视图是动态的，随着您在“实时”视图中与页面交互而更新。
确保您位于“实时”视图中。
单击“实时代码”按钮。
Dreamweaver 显示浏览器用于执行该页面的实时代码。此代码以黄色突出显示并且是不可编辑的。
当您与页面上的交互元素进行交互时，实时代码高亮显示代码中的动态更改。
要取消高亮显示实时“代码”视图中的更改，请选择“视图”>““实时”视图选项”>“高亮显示实时代码中的更改”。
若要返回到可编辑的“代码”视图，请再次单击“实时代码”按钮。
要更改实时代码偏好设置，请选择“编辑”>“偏好设置”(Windows) 或“Dreamweaver”>“偏好设置”(Macintosh OS)，然后选择“代码颜色”类别。
冻结 JavaScript
执行下列操作之一：
按 F6
从““实时”视图”按钮的弹出菜单中选择“冻结 JavaScript”。
文档顶部的信息栏会告诉您 JavaScript 已冻结。若要关闭信息栏，请单击关闭链接。
“实时”视图选项
除了“冻结 JavaScript”选项外，“实时”视图按钮的弹出菜单或“视图”>“实时视图选项”菜单项中还有其他一些可用选项。
冻结 JavaScript 将受 JavaScript 影响的元素冻结在其当前状态。
禁用 JavaScript 禁用 JavaScript 并重新呈现页面，就像浏览器未启用 JavaScript 一样。
禁用插件 禁用插件并重新呈现页面，就像浏览器未启用插件一样。
高亮显示实时代码中的更改 关闭或开启高亮显示实时代码中的更改。
在新选项卡中编辑“实时”视图页面 让您可以使用“浏览器导航”工具栏或“跟踪链接”功能为您浏览到的站点文档打开新选项卡。首先必须浏览到该文档，然后选择“在新选项卡中编辑“实时”视图页面”为其创建新的选项卡。
跟踪链接 使您单击的下一个链接在“实时”视图中变为活动状态。或者，可以按住 Ctrl 单击“实时”视图中的链接以使其变为活动状态。
持续跟踪链接 使链接在“实时”视图中持续处于活动状态，直到再次将其禁用或关闭页面为止。
自动同步远程文件 单击“浏览器导航”工具栏中的“刷新”图标时自动同步本地和远程文件。Dreamweaver 将这些文件放置在服务器上，然后刷新，以使这两个文件保持同步。
将测试服务器用于文档源 主要由动态页面（例如 ColdFusion 页面）使用，并在默认情况下为动态页面进行选择。选择此选项后，Dreamweaver 将使用站点的测试服务器上的文件版本作为“实时”视图显示的源。
将本地文件用于文档链接 非动态站点的默认设置。为使用测试服务器的动态站点选择此选项后，Dreamweaver 将使用链接到文档的本地文件版本（例如 CSS 和 JavaScript 文件），而不使用测试服务器上的文件。然后，您可以对相关文件进行本地更改，以便可以在将这些文件放到测试服务器之前查看它们的外观。如果取消选择此选项，Dreamweaver 将使用相关文件的测试服务器版本。
HTTP 请求设置 进入高级设置对话框，您可以在此处输入用于显示动态数据的值。有关详细信息，请单击对话框中的“帮助”按钮。
在浏览器中打开
您可以随时在浏览器中打开页面；您无需首先将其上载至网页服务器。当您预览页面时，所有浏览器相关的功能都会运行，包括 JavaScript 活动、文件‑相关和绝对链接、ActiveX® 控件、浏览器插件，只要您在浏览器中安装了所需的插件‑或 ActiveX 控件。
在浏览器中打开文件之前，保存文件；否则，浏览器不会展示您的最近变更。
右键单击“文档”工具栏中的文件名，并单击“在浏览器中打开”。
注意:
如果未列出任何浏览器，请选择“编辑”>“偏好设置”或“Dreamweaver”>“偏好设置”(Macintosh)，然后选择左侧的“在浏览器中预览”类别以选择一个浏览器。有关详细信息，请参阅设置浏览器预览偏好设置。
单击链接然后测试页面内容。
注意:
使用本地浏览器预览文档时，除非指定了测试服务器，或在“编辑”>“偏好设置”>“在浏览器中预览”中选择“使用临时文件预览”选项，否则文档中用站点根目录相对路径链接的内容将不会显示。这是因为浏览器不能识别站点根目录，而服务器能够识别。
注意:
若要预览用根目录相对路径链接的内容，请将文件上传到远程服务器，然后选择“文件”>“在浏览器中预览”进行查看。
完成测试后请在浏览器中关闭该页面。
更多相似内容 使用“实时预览”解决问题 在“实时”视图中编辑 “浏览器导航”工具栏概述 打开相关文件 查看动态数据 站点根目录相对路径