使用可视化助理进行布局

上次更新日期: 2021年4月27日

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

设置标尺

标尺\n可帮助您衡量、组织和计划布局。它们可以显示在页面的左侧和顶部边框上,以像素、英寸或厘米为单位标记。

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

设置布局辅助线

指南\n是您从标尺拖拽到文档上的线条。它们\n可帮助您更精确地放置和对齐对象。您还可以使用\n指南来衡量页面元素的大小,或模拟 web 浏览器的 折叠(可见\n区域)。

为帮助您对齐元素,可以\n将元素捕捉到指南,以及将指南捕捉到元素。(元素必须使用绝对定位才能使捕捉功能正常工作。)您还可以锁定 Guides,防止其他用户意外移动它们。

创建水平或垂直\n指南

从相应的标尺拖动。
在"文档"窗口中定位指南并释放\n鼠标按钮(通过再次拖拽来重新定位指南)。
注释

默认情况下,参考线记录为从文档顶部或左侧开始的绝对像素值,并相对于标尺原点显示。要将指南记录为百分比,\n请在创建或移动指南时按住 Shift 键。

显示或隐藏辅助线

选择"视图">"指南">\n"显示指南"。

将元素靠齐辅助线

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

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

锁定或解锁所有辅助线

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

查看指南并将其移动到特定\n位置

将鼠标指针悬停在指南上\n可查看其位置。
双击该辅助线。
在"移动指南"对话框中输入新位置,然后\n单击"确定"。

查看辅助线之间的距离

按住 Control(Windows)或 Command (Macintosh)\n并将鼠标指针放在两条指南之间的任何位置。
注释

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

模拟 web 浏览器的折叠(可见区域)\n

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

删除辅助线

将辅助线拖离文档。

更改辅助线设置

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

辅助线颜色

指定辅助线的颜色。 单击颜色\n色板,然后从拾色器中选择颜色,或在文本框中键入十六进制\n数字。

距离颜色

指定当您将鼠标指针放在指南之间时显示为距离\n指示器的线条颜色。单击\n颜色色板,然后从拾色器中选择颜色,或在\n文本框中键入十六进制数字。

显示辅助线

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

靠齐辅助线

使页面元素在您移动元素\n时捕捉到指南。

锁定辅助线

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

辅助线靠齐元素

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

清除全部

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

将辅助线用于模板

当\n将指南添加到 Dreamweaver 模板时,\n该模板的所有实例都会继承指南。但是,模板实例中的 Guides 被视为可编辑区域,因此用户可以修改它们。每当使用主模板更新实例时,模板实例中修改的指南都会还原到其原始位置。

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

使用布局网格

网格在"文档"窗口中显示水平和垂直线系统。它有助于精确放置对象。您可以让绝对定位的页面元素在移动时自动捕捉到网格,并通过指定网格设置来更改网格或控制捕捉行为。无论网格是否可见,对齐功能都有效。

显示或隐藏网格

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

启用或禁用靠齐

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

更改网格设置

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

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

颜色

指定网格线的颜色。 单击色板并从拾色器中选择颜色,或在文本框中输入十六进制数值。

显示网格

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

靠齐到网格

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

间距

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

显示

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

注释

如果未选择"显示网格",网格不会显示\n在文档中,也不会看到任何更改。

使用跟踪图像

您\n可以使用跟踪图像作为指南来重新创建在图形应用程序(如 Adobe Freehand 或\nFireworks)中创建的页面设计。

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

跟踪图像仅在 Dreamweaver 中\n可见;在浏览器中查看页面时不可见。当跟踪图像\n可见时,页面的真实背景图像和颜色\n在文档窗口中不可见;但是,在浏览器中查看页面时\n背景图像和颜色将可见。

在文档\n窗口中放置跟踪图像

执行下列操作之一:
  • 选择“视图”>“设计视图选项”>“跟踪图像”>“载入”。

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

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

在"页面属性"对话框中,通过拖动"图像透明度"滑块来指定\n图像的透明度,然后单击\n"确定"。

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

显示或隐藏跟踪图像

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

更改跟踪图像的位置

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

  • 要精确指定跟踪图像的位置,请在 X 和 Y 文本框中输入坐标值。

  • 要每次移动图像 1 个像素,请使用箭头键。

  • 要每次移动图像 5 个像素,请按住 Shift 键并按箭头键。

重置跟踪图像的位置

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

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

将跟踪图像与选定的元素对齐

在文档窗口中选择一个元素。

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

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

设置跟踪图像属性

为跟踪图像设置属性(跟踪图像是用作设计页面指南的图像文件)。

执行下列操作之一:

  • 单击“文件”>“页面属性”
  • 单击“窗口”>“属性”,然后单击文本属性检查器中的“页面属性”。

从“页面属性”对话框中选择“跟踪图像”。 可在此面板中配置以下选项:

  • 跟踪图像:指定用作复制设计的参考图像。该图像只供参考,当文档在浏览器中显示时并不出现。
  • 透明度:确定跟踪图像的不透明度,从完全透明到完全不透明。