1.1 操作界面

1.1.1 【操作目的】

通過打開文件和彈出屬性面板命令，熟悉菜單欄的操作。通過鏈接選項(xiàng)改變鏈接文字的狀態(tài)，熟悉CSS功能的應(yīng)用方法。

1.1.2 【操作步驟】

步驟① 選擇“文件 > 打開”命令，在彈出的“打開”對話框中選擇基礎(chǔ)素材中的“Ch01 > 1.1 > index.html”文件，單擊“打開”按鈕打開文件，如圖1-1所示。

步驟② 選擇“修改 > 頁面屬性”命令，彈出“頁面屬性”對話框。在對話框左側(cè)的“分類”列表框中選擇“鏈接（CSS）”選項(xiàng)，單擊“加粗”按鈕，將“鏈接顏色”選項(xiàng)設(shè)為白色（#FFF），在“下劃線樣式”下拉列表中選擇“始終無下劃線”選項(xiàng)，如圖1-2所示。

步驟③ 單擊“確定”按鈕，鏈接文字發(fā)生變化，效果如圖1-3所示。保存文檔，按F12鍵預(yù)覽效果，如圖1-4所示。

1.1.3 【相關(guān)工具】

1．開始頁面

啟動Dreamweaver CS6后首先看到的畫面是開始頁面，供用戶選擇新建文件的類型，或打開已有的文檔等，如圖1-5所示。

對于老用戶，如果不想顯示開始頁面，可選擇“編輯 > 首選參數(shù)”命令，或按Ctrl+U組合鍵，在彈出的“首選參數(shù)”對話框中取消選擇“顯示歡迎屏幕”復(fù)選框，如圖1-6所示。單擊“確定”按鈕完成設(shè)置。當(dāng)用戶再次啟動Dreamweaver CS6后，將不再顯示開始頁面。

2．不同風(fēng)格的界面

Dreamweaver CS6的操作界面新穎淡雅，布局緊湊，為用戶提供了一個(gè)輕松、愉悅的開發(fā)環(huán)境。

若用戶想修改操作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可選擇“窗口 > 工作區(qū)布局”命令，彈出其子菜單如圖1-7所示，在子菜單中選擇其中的一種界面風(fēng)格，頁面會發(fā)生相應(yīng)的改變。

3．伸縮自如的功能面板

在浮動面板的右上角單擊按鈕，可以隱藏或展開面板，如圖1-8所示。

如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)指針放在文檔編輯窗口右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)拖曳鼠標(biāo)指針，調(diào)整工作區(qū)的大小，如圖1-9所示。若用戶需要更大的工作區(qū)，可以將面板隱藏。

4．多文檔的編輯界面

Dreamweaver CS6提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換，如圖1-10所示。用戶可以單擊文檔編輯窗口上方的選項(xiàng)卡，切換到相應(yīng)的文檔。通過多文檔的編輯界面，用戶可以同時(shí)編輯多個(gè)文檔。

5．插入面板

Dreamweaver CS6“插入”面板在菜單欄的下方，如圖1-11所示。

6．更完整的CSS功能

傳統(tǒng)的HTML所提供的樣式及排版功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)頁版面主要靠CSS樣式來實(shí)現(xiàn)。而CSS樣式表的功能較多，語法比較復(fù)雜，需要一個(gè)很好的工具軟件有條不紊地整理復(fù)雜的CSS源代碼，并適時(shí)地提供輔助說明。Dreamweaver CS6就提供了這種方便有效的CSS功能。

“屬性”面板提供了CSS功能。用戶可以通過“屬性”面板中“類”選項(xiàng)的下拉列表對所選的對象應(yīng)用樣式或創(chuàng)建和編輯樣式，如圖1-12所示。若某些文字應(yīng)用了自定義樣式，當(dāng)用戶調(diào)整這些文字的屬性時(shí)，會自動生成新的CSS樣式。

“頁面屬性”按鈕也提供了CSS功能。單擊“頁面屬性”按鈕，彈出“頁面屬性”對話框，如圖1-13所示。用戶可以在“分類”列表框中選擇“鏈接（CSS）”選項(xiàng)，在“下劃線樣式”選項(xiàng)的下拉列表中設(shè)置超鏈接的樣式，這個(gè)設(shè)置會自動轉(zhuǎn)化成CSS樣式，如圖1-14所示。

Dreamweaver CS6除了提供如圖1-15所示的“CSS樣式”面板外，還提供如圖1-16所示的“CSS樣式”面板。在“CSS屬性”面板中，用戶可輕松地查看規(guī)則的屬性設(shè)置，并可快速修改嵌入在當(dāng)前文檔或通過附加的樣式表鏈接的CSS樣式。可編輯的網(wǎng)格使用戶可以更改顯示的屬性值，對所做的更改系統(tǒng)都將立即應(yīng)用，用戶可以在操作的同時(shí)預(yù)覽效果。