用户指南 取消(C)

使用可视化助理进行布局

搜索
  1. Dreamweaver 用户指南
  2. 简介
    1. 响应式网页设计基础知识
    2. Dreamweaver 中的新增功能
    3. 使用 Dreamweaver 进行 Web 开发 - 概述
    4. Dreamweaver/常见问题
    5. 键盘快捷键
    6. Dreamweaver 系统要求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 将 Dreamweaver 设置与 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 文件
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 从库提取 Web 优化的 SVG 文件
  4. Dreamweaver 工作区和视图
    1. Dreamweaver 工作区
    2. 为可视化开发优化 Dreamweaver 工作区
    3. 根据文件名或内容搜索文件 | Mac OS
  5. 设置站点
    1. 关于 Dreamweaver 站点
    2. 设置站点的本地版本
    3. 连接到发布服务器
    4. 设置测试服务器
    5. 导入和导出 Dreamweaver 站点设置
    6. 将现有网站从远程服务器下载到您的本地站点根目录
    7. Dreamweaver 中的辅助功能
    8. 高级设置
    9. 设置用于传输文件的站点偏好设置
    10. 在 Dreamweaver 中指定代理服务器设置
    11. 将 Dreamweaver 设置与 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理文件
    1. 创建和打开文件
    2. 管理文件和文件夹
    3. 从服务器获取文件和将文件上传到服务器
    4. 存回和取出文件
    5. 同步文件
    6. 比较文件的差别
    7. 遮盖 Dreamweaver 站点中的文件和文件夹
    8. 为 Dreamweaver 站点启用设计备注
    9. 防止潜在的 Gatekeeper 漏洞
  7. 布局和设计
    1. 使用可视化助理进行布局
    2. 关于使用 CSS 来设计页面布局
    3. 使用 Bootstrap 设计响应式网站
    4. 在 Dreamweaver 中创建和使用媒体查询
    5. 使用表格显示内容
    6. 颜色
    7. 使用流式网格布局的响应式设计
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解层叠样式表
    2. 使用 CSS Designer 进行页面布局
    3. 在 Dreamweaver 中使用 CSS 预处理器
    4. 如何在 Dreamweaver 中设置 CSS 样式偏好设置
    5. 在 Dreamweaver 中移动 CSS 规则
    6. 在 Dreamweaver 中将内联 CSS 转换为 CSS 规则
    7. 使用 div 标签
    8. 向背景应用渐变效果
    9. 在 Dreamweaver 中创建和编辑 CSS3 过渡效果
    10. 设置代码格式
  9. 页面内容和资源
    1. 设置页面属性
    2. 设置 CSS 标题属性和 CSS 链接属性
    3. 使用文本
    4. 查找和替换文本、标签和属性
    5. DOM 面板
    6. 在实时视图中编辑
    7. 在 Dreamweaver 中对文档编码
    8. 在“文档”窗口中选择和查看元素
    9. 在属性检查器中设置文本属性
    10. 对网页进行拼写检查
    11. 在 Dreamweaver 中使用水平线
    12. 在 Dreamweaver 中添加和修改字体组合
    13. 使用资源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中创建和管理收藏资源
    16. 在 Dreamweaver 中插入和编辑图像
    17. 添加媒体对象
    18. 在 Dreamweaver 中添加视频
    19. 插入 HTML5 视频
    20. 插入 SWF 文件
    21. 添加音频效果
    22. 在 Dreamweaver 中插入 HTML5 音频
    23. 使用库项目
    24. 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
  10. 链接与导航
    1. 关于链接与导航
    2. 链接
    3. 图像地图
    4. 链接疑难解答
  11. jQuery 构件和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和移动构件
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 对网站进行编码
    1. 关于在 Dreamweaver 中编码
    2. Dreamweaver 中的编码环境
    3. 设置编码偏好设置
    4. 自定义代码颜色
    5. 编写和编辑代码
    6. 代码提示和代码完成
    7. 折叠和展开代码
    8. 使用代码片段重用代码
    9. 使用 linting 检查代码
    10. 优化代码
    11. 在设计视图中编辑代码
    12. 使用页面的头内容
    13. 在 Dreamweaver 中插入服务器端包含
    14. 在 Dreamweaver 中使用标签库
    15. 将自定义标签导入 Dreamweaver
    16. 使用 JavaScript 行为（一般说明）
    17. 应用内置 JavaScript 行为
    18. 关于 XML 和 XSLT
    19. 在 Dreamweaver 中执行服务器端 XSL 转换
    20. 在 Dreamweaver 中执行客户端 XSL 转换
    21. 在 Dreamweaver 中为 XSLT 添加字符实体
    22. 设置代码格式
  13. 跨产品工作流
    1. 安装和使用 Dreamweaver 的扩展
    2. Dreamweaver 中的应用程序内更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文档（仅限 Windows）
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 编辑 Dreamweaver 站点中的内容
    6. Dreamweaver 和 Business Catalyst 集成
    7. 创建个性化的电子邮件营销活动
  14. 模板
    1. 关于 Dreamweaver 模板
    2. 识别模板和基于模板的文档
    3. 创建 Dreamweaver 模板
    4. 在模板中创建可编辑区域
    5. 在 Dreamweaver 中创建重复区域和表格
    6. 在模板中使用可选区域
    7. 在 Dreamweaver 中定义可编辑的标签属性
    8. 如何在 Dreamweaver 中创建嵌套模板
    9. 编辑、更新和删除模板
    10. 在 Dreamweaver 中导出和导入 xml 内容
    11. 在现有文档中应用或删除模板
    12. 在 Dreamweaver 模板中编辑内容
    13. Dreamweaver 中模板标签的语法规则
    14. 设置模板区域的高亮显示偏好设置
    15. 在 Dreamweaver 中使用模板的好处
  15. 移动设备和多屏幕
    1. 创建媒体查询
    2. 更改移动设备的页面方向
    3. 使用 Dreamweaver 创建适用于移动设备的 Web 应用程序
  16. 动态网站、页面和 Web 表单
    1. 了解 Web 应用程序
    2. 设置计算机以进行应用程序开发
    3. 数据库连接疑难解答
    4. 在 Dreamweaver 中删除连接脚本
    5. 设计动态页
    6. 动态内容源概述
    7. 定义动态内容源
    8. 向页面添加动态内容
    9. 在 Dreamweaver 中更改动态内容
    10. 显示数据库记录
    11. 在 Dreamweaver 中提供动态数据和进行疑难解答
    12. 在 Dreamweaver 中添加自定义服务器行为
    13. 使用 Dreamweaver 生成表单
    14. 使用表单从用户处收集信息
    15. 在 Dreamweaver 中创建和启用 ColdFusion 表单
    16. 创建 Web 表单
    17. 增强了对表单元素的 HTML5 支持
    18. 使用 Dreamweaver 开发表单
  17. 以可视化方式生成应用程序
    1. 在 Dreamweaver 中生成主页和详细页
    2. 生成搜索页和结果页
    3. 生成记录插入页
    4. 在 Dreamweaver 中生成更新记录页
    5. 在 Dreamweaver 中生成记录删除页
    6. 在 Dreamweaver 中使用 ASP 命令修改数据库
    7. 生成注册页
    8. 生成登录页
    9. 生成只有授权用户才能访问的页面
    10. 使用 Dreamweaver 保护 Coldfusion 中的文件夹
    11. 在 Dreamweaver 中使用 ColdFusion 组件
  18. 测试、预览和发布网站
    1. 预览页面
    2. 在多个设备上预览 Dreamweaver 网页
    3. 测试 Dreamweaver 站点

 

在 Dreamweaver 中使用可视化助理进行布局，包括设置标尺、设置版面辅助线、将辅助线用于模板、使用布局网格以及使用跟踪图像。

设置标尺

标尺可帮助您测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。

  • 要打开和关闭标尺，请选择“视图”>“设计视图选项”>“标尺”>“显示/隐藏”。
  • 若要更改原点，请将标尺原点图标 （在“文档”窗口的“设计”视图左上角）拖到页面上的任意位置。
  • 若要将原点重设到它的默认位置，请选择“视图”>“设计视图选项”>“标尺”>“重设原点”。
  • 要更改度量单位，请选择“查看”>“标尺”，然后选择“像素”、“英寸”或“厘米”。

设置布局辅助线

辅助线是您从标尺拖动到文档上的线条。它们有助于更加准确地放置和对齐对象。您还可以使用辅助线来测量页面元素的大小，或者模拟 Web 浏览器的重叠部分（可见区域）。

为了帮助您对齐元素，该应用程序还允许您将元素靠齐到辅助线，以及将辅助线靠齐到元素。（只有在将元素绝对定位的情况下，才可使用靠齐功能。） 您还可以锁定辅助线，以防止其他用户不小心移动它们。

创建水平辅助线或垂直辅助线

  1. 从相应的标尺拖动。
  2. 在“文档”窗口中定位辅助线，然后松开鼠标按钮（可通过再次拖动辅助线来重新定位它）。
    注意:

    默认情况下，以绝对像素度量值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。若要以百分比形式记录辅助线，可在创建或移动辅助线时按住 Shift。

显示或隐藏辅助线

  1. 选择“查看”>“辅助线”>“显示辅助线”。

将元素靠齐辅助线

  • 若要将元素靠齐辅助线，请选择“视图”>“设计视图选项”>“辅助线”>“靠齐辅助线”。
  • 若要将辅助线靠齐元素，请选择“视图”>“设计视图选项”>“辅助线”>“辅助线靠齐元素”。
注意:

调整元素（例如绝对定位的元素（AP 元素）、表格和图像）的大小时，所调整的元素会靠齐辅助线。

锁定或解锁所有辅助线

选择“视图”>“设计视图选项”>“辅助线”>“锁定辅助线”。

查看辅助线并将其移至特定位置

  1. 将鼠标指针停留在辅助线上以查看其位置。
  2. 双击该辅助线。
  3. 在“移动辅助线”对话框中输入新的位置，然后单击“确定”。

查看辅助线之间的距离

按下 Ctrl (Windows) 或 Command (Macintosh)，并将鼠标指针保持在两条辅助线之间的任何位置。
注意:

度量单位与用于标尺的度量单位相同。

模拟 Web 浏览器的重叠部分（可见区域）

选择“视图”>“设计视图选项”>“辅助线”，然后从菜单中选择一个预设的浏览器大小。

删除辅助线

将辅助线拖离文档。

更改辅助线设置

  1. 选择“视图”>“设计视图选项”>“辅助线”>“编辑辅助线”，设置以下选项，然后单击“确定”。

    辅助线颜色

    指定辅助线的颜色。请单击色样表并从拾色器中选择一种颜色，或者在文本框中键入一个十六进制数。

    距离颜色

    指定当您将鼠标指针保持在辅助线之间时，作为距离指示器出现的线条的颜色。请单击色样表并从拾色器中选择一种颜色，或者在文本框中键入一个十六进制数。

    显示辅助线

    使辅助线显示在“设计”视图中。

    靠齐辅助线

    使页面元素在页面中移动时靠齐辅助线。

    锁定辅助线

    将辅助线锁定在适当位置。

    辅助线靠齐元素

    在您拖动辅助线时将辅助线靠齐页面上的元素。

    清除全部

    从页面中清除所有辅助线。

将辅助线用于模板

将辅助线添加到 Dreamweaver 模板之后，模板的所有实例都会继承辅助线。不过，模板实例中的辅助线被视为可编辑区域，因此用户可以修改它们。当模板实例被主模板更新时，模板实例中经过修改的辅助线总会恢复到它们的原始位置。

还可以向模板实例中添加自己的辅助线。当模板实例被主模板更新时，不会覆盖以这种方式添加的辅助线。

使用布局网格

网格在“文档”窗口中显示一系列的水平线和垂直线。它对于精确地放置对象很有用。您可以让经过绝对定位的页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。

显示或隐藏网格

选择“视图”>“设计视图选项”>“网格”>“显示网格”。

启用或禁用靠齐

选择“视图”>“设计视图选项”>“网格”>“靠齐到网格”。

更改网格设置

  1. 选择“视图”>“设计视图选项”>“网格”>“网格设置”。

  2. 设置选项，然后单击“确定”应用更改。

    颜色

    指定网格线的颜色。请单击色样表并从拾色器中选择一种颜色，或者在文本框中键入一个十六进制数。

    显示网格

    使网格显示在“设计”视图中。

    靠齐到网格

    使页面元素靠齐到网格线。

    间距

    控制网格线的间距。输入一个数字并从菜单中选择“像素”、“英寸”或“厘米”。

    显示

    指定网格线是显示为线条还是显示为点。

    注意:

    如果未选择“显示网格”，将不会在文档中显示网格，并且看不到更改。

使用跟踪图像

可以使用跟踪图像作为重新创建已经使用图形应用程序（如 Adobe Freehand 或 Fireworks）创建的页面设计的指导。

跟踪图像是放在“文档”窗口背景中的 JPEG、GIF 或 PNG 图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。

跟踪图像仅在 Dreamweaver 中是可见的；当您在浏览器中查看页面时，将看不到跟踪图像。当跟踪图像可见时，“文档”窗口将不会显示页面的实际背景图像和颜色；但是，在浏览器中查看页面时，背景图像和颜色是可见的。

将跟踪图像放在文档窗口中

  1. 执行下列操作之一：

    • 选择“视图”>“设计视图选项”>“跟踪图像”>“载入”。

    • 选择“文件”>“页面属性”，然后在“跟踪图像”类别中单击“浏览”（在“跟踪图像”文本框旁边）。

  2. 导航到图像文件，然后单击“确定”。

  3. 在“页面属性”对话框中，拖动“图像透明度”滑块以指定图像的透明度，然后单击“确定”。

    若要随时切换到另一跟踪图像或更改当前跟踪图像的透明度，请选择“文件”>“页面属性”。

显示或隐藏跟踪图像

选择“视图”>“设计视图选项”>“跟踪图像”>“显示”。

更改跟踪图像的位置

  1. 选择“视图”>“设计视图选项”>“跟踪图像”>“调整位置”。

    • 若要准确地指定跟踪图像的位置，请在“X”和“Y”文本框中输入坐标值。

    • 若要逐个像素地移动图像，请使用箭头键。

    • 若要一次五个像素地移动图像，请按 Shift 和箭头键。

重设跟踪图像的位置

  1. 选择“视图”>“设计视图选项”>“跟踪图像”>“重设位置”。

    跟踪图像随即返回到“文档”窗口的左上角 (0,0)。

将跟踪图像与所选元素对齐

  1. 在“文档”窗口中选择一个元素。

  2. 选择“视图”>“设计视图选项”>“跟踪图像”>“对齐选定内容”。

    跟踪图像的左上角随即与所选元素的左上角对齐。

Adobe 徽标

登录到您的帐户

快速链接

查看您的所有计划 管理您的计划

法律声明    |    在线隐私策略