在 Dreamweaver 中使用可视化助理进行布局

优质
小牛编辑
126浏览
2023-12-01
在 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. 选择“视图”>“设计视图选项”>“跟踪图像”>“对齐选定内容”。

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