- Dreamweaver CC网页设计从入门到精通(微课精编版)
- 前端科技
- 1186字
- 2021-03-30 12:40:42
1.2 使用辅助工具
熟练使用Dreamweaver CC提供的各种辅助工具,能大大提高网页制作效率。辅助工具主要包括标尺、网格和辅助线。
1.2.1 标尺
使用标尺可以精确地计算所编辑网页的宽度和高度,同时可以比较页面中各个对象元素的大小。选择【查看】|【标尺】|【显示】命令,可以在编辑窗口中显示标尺,如图1.11所示。
图1.11 显示标尺
标尺原点的默认位置位于Dreamweaver CC编辑窗口的左上角。用鼠标拖动该点,可以设置标尺原点到编辑窗口任意点。若要将原点恢复到默认左上角顶点位置,选择【查看】|【标尺】|【重设原点】命令即可,或者双击左上角顶点默认位置。
提示:标尺的单位可以是像素、英寸或厘米,默认为像素。选择【查看】|【标尺】命令,可以在子菜单上选择。若要隐藏标尺,再次选择【查看】|【标尺】|【显示】命令即可。
1.2.2 网格
网格在Dreamweaver CC【设计】视图中主要是对绝对定位元素进行绘制、定位或大小调整的可视化操作工具。通过对网格的操作,可以使页面元素在被移动后自动靠齐到网格,并通过指定网格设置来更改网格或控制靠齐行为。
选择【查看】|【网格】|【显示网格】命令,将在编辑窗口中显示网格,如图1.12所示。若想使网页中的绝对定位元素自动靠齐到网格,方便绝对定位元素的定位,就应选择【查看】|【网格】|【靠齐到网格】命令。
图1.12 显示网格
选择【查看】|【网格】|【网格设置】命令,打开【网格设置】对话框,如图1.13所示。利用该对话框可以设置网格显示状态。
图1.13 【网格设置】对话框
(1)【颜色】选项:设置网格线的颜色。Dreamweaver CC默认网格线颜色为#CC9。
(2)【显示网格】复选框:选中该复选框在编辑窗口中将会显示网格。
(3)【靠齐到网格】复选框:选中该复选框将设置网页中的绝对定位元素自动靠齐到网格。
(4)【间隔】文本框:设置网格线的间距,在后面的下拉列表框中可以设置间距度量单位,包括像素、英寸和厘米。Dreamweaver CC默认的网格间距为50像素。
(5)【显示】选项:设置指定网格线是显示为线条还是显示为点。
设置完毕后,单击【应用】按钮可应用更改而不关闭对话框,而单击【确定】按钮可应用更改并关闭对话框。
1.2.3 辅助线
辅助线与网格功能相同,也是用来对齐绝对定位元素,不过使用辅助线比网格更加灵活方便。要绘制辅助线,首先应显示标尺,然后在编辑窗口左边或上顶部的标尺栏中拖出一条辅助线到窗口中即可,如图1.14所示。
图1.14 绘制辅助线
(1)选择【查看】|【辅助线】|【显示辅助线】命令,可以显示或隐藏已绘制好的辅助线。
(2)选择【查看】|【辅助线】|【锁定辅助线】命令,可以锁定已绘制好的辅助线,禁止任何人拖动。
(3)选择【查看】|【辅助线】|【对齐辅助线】命令,可以拖动对齐绝对定位元素到辅助线。
(4)选择【查看】|【辅助线】|【清除辅助线】命令,可以清除编辑窗口中所有的辅助线。
(5)选择【查看】|【辅助线】|【编辑辅助线】命令,打开【辅助线】对话框,如图1.15所示。利用该对话框可以设置辅助线的显示状态。
图1.15 设置辅助线