1.2 使用輔助工具

熟練使用Dreamweaver CC提供的各種輔助工具，能大大提高網(wǎng)頁制作效率。輔助工具主要包括標尺、網(wǎng)格和輔助線。

1.2.1 標尺

使用標尺可以精確地計算所編輯網(wǎng)頁的寬度和高度，同時可以比較頁面中各個對象元素的大小。選擇【查看】｜【標尺】｜【顯示】命令，可以在編輯窗口中顯示標尺，如圖1.11所示。

標尺原點的默認位置位于Dreamweaver CC編輯窗口的左上角。用鼠標拖動該點，可以設(shè)置標尺原點到編輯窗口任意點。若要將原點恢復到默認左上角頂點位置，選擇【查看】｜【標尺】｜【重設(shè)原點】命令即可，或者雙擊左上角頂點默認位置。

1.2.2 網(wǎng)格

網(wǎng)格在Dreamweaver CC【設(shè)計】視圖中主要是對絕對定位元素進行繪制、定位或大小調(diào)整的可視化操作工具。通過對網(wǎng)格的操作，可以使頁面元素在被移動后自動靠齊到網(wǎng)格，并通過指定網(wǎng)格設(shè)置來更改網(wǎng)格或控制靠齊行為。

選擇【查看】｜【網(wǎng)格】｜【顯示網(wǎng)格】命令，將在編輯窗口中顯示網(wǎng)格，如圖1.12所示。若想使網(wǎng)頁中的絕對定位元素自動靠齊到網(wǎng)格，方便絕對定位元素的定位，就應(yīng)選擇【查看】｜【網(wǎng)格】｜【靠齊到網(wǎng)格】命令。

選擇【查看】｜【網(wǎng)格】｜【網(wǎng)格設(shè)置】命令，打開【網(wǎng)格設(shè)置】對話框，如圖1.13所示。利用該對話框可以設(shè)置網(wǎng)格顯示狀態(tài)。

（1）【顏色】選項：設(shè)置網(wǎng)格線的顏色。Dreamweaver CC默認網(wǎng)格線顏色為#CC9。

（2）【顯示網(wǎng)格】復選框：選中該復選框在編輯窗口中將會顯示網(wǎng)格。

（3）【靠齊到網(wǎng)格】復選框：選中該復選框?qū)⒃O(shè)置網(wǎng)頁中的絕對定位元素自動靠齊到網(wǎng)格。

（4）【間隔】文本框：設(shè)置網(wǎng)格線的間距，在后面的下拉列表框中可以設(shè)置間距度量單位，包括像素、英寸和厘米。Dreamweaver CC默認的網(wǎng)格間距為50像素。

（5）【顯示】選項：設(shè)置指定網(wǎng)格線是顯示為線條還是顯示為點。

設(shè)置完畢后，單擊【應(yīng)用】按鈕可應(yīng)用更改而不關(guān)閉對話框，而單擊【確定】按鈕可應(yīng)用更改并關(guān)閉對話框。

1.2.3 輔助線

輔助線與網(wǎng)格功能相同，也是用來對齊絕對定位元素，不過使用輔助線比網(wǎng)格更加靈活方便。要繪制輔助線，首先應(yīng)顯示標尺，然后在編輯窗口左邊或上頂部的標尺欄中拖出一條輔助線到窗口中即可，如圖1.14所示。

（1）選擇【查看】｜【輔助線】｜【顯示輔助線】命令，可以顯示或隱藏已繪制好的輔助線。

（2）選擇【查看】｜【輔助線】｜【鎖定輔助線】命令，可以鎖定已繪制好的輔助線，禁止任何人拖動。

（3）選擇【查看】｜【輔助線】｜【對齊輔助線】命令，可以拖動對齊絕對定位元素到輔助線。

（4）選擇【查看】｜【輔助線】｜【清除輔助線】命令，可以清除編輯窗口中所有的輔助線。

（5）選擇【查看】｜【輔助線】｜【編輯輔助線】命令，打開【輔助線】對話框，如圖1.15所示。利用該對話框可以設(shè)置輔助線的顯示狀態(tài)。