【文章內(nèi)容簡介】 對象的屬性。制作網(wǎng)頁時，可以根據(jù)需要隨時打開或關(guān)閉“屬性”面板，或者通過拖動屬性面板的標(biāo)題欄將其移到合適的位置。選定頁面元素后系統(tǒng)會顯示相應(yīng)的“屬性”面板(見圖123)。例如，圖像“屬性”面板、表格“屬性”面板、框架“屬性”面板、Flash影片“屬性”面板、表單元素“屬性”面板等。圖123 “屬性”面板2. “CSS樣式”面板使用“CSS樣式”面板可以跟蹤影響當(dāng)前所選頁面元素的CSS規(guī)則和屬性(“當(dāng)前”模式)，或影響整個文檔的規(guī)則和屬性(“全部”模式)。單擊“CSS樣式”面板頂部的相應(yīng)按鈕可以在兩種模式之間切換，在“全部”和“當(dāng)前”模式下還可以修改 CSS屬性，如圖124所示。在“當(dāng)前”模式下，“CSS樣式”面板包括三個窗格：“所選內(nèi)容的摘要”窗格，顯示文檔中當(dāng)前所選內(nèi)容的CSS屬性；“規(guī)則”窗格，顯示所選屬性的位置(或所選標(biāo)簽的層疊規(guī)則)；“屬性”窗格，允許用戶編輯、定義所選內(nèi)容的規(guī)則的 CSS屬性。在“全部”模式下， “CSS樣式”面板包括兩個窗格：“所有規(guī)則”窗格(頂部)和“屬性”窗格(底部)?！八幸?guī)則”窗格顯示當(dāng)前文檔中定義的規(guī)則以及附加到當(dāng)前文檔的樣式表中定義的所有規(guī)則的列表。使用“屬性”窗格可以編輯“所有規(guī)則”窗格中任一所選規(guī)則的 CSS屬性。對“屬性”窗格所作的任何更改都將立即應(yīng)用，用戶在操作的同時便可預(yù)覽效果。圖124 “CSS樣式”面板3. “應(yīng)用程序”面板“應(yīng)用程序”面板包含了數(shù)據(jù)綁定、數(shù)據(jù)庫和服務(wù)器行為，是制作網(wǎng)頁數(shù)據(jù)庫時的重要面板，如圖125所示。4. “文件”面板使用“文件”面板可查看和管理 Dreamweaver站點中的文件，如圖126所示。圖125 “應(yīng)用程序”面板 圖126 “文件”面板在“文件”面板中查看站點、文件或文件夾時，可以查看區(qū)域的大小，還可以展開或折疊“文件”面板。當(dāng)“文件”面板折疊時，它以文件列表的形式顯示本地站點、遠(yuǎn)程站點或測試服務(wù)器的內(nèi)容。在展開時，它顯示本地站點和遠(yuǎn)程站點或者顯示本地站點和測試服務(wù)器。“文件”面板還可以顯示本地站點的視覺站點地圖。對于 Dreamweaver站點來說，用戶還可以通過更改折疊面板中默認(rèn)顯示的視圖(本地站點或遠(yuǎn)程站點視圖)來對“文件”面板進(jìn)行自定義。 Dreamweaver CS6的參數(shù)設(shè)置本節(jié)介紹Dreamweaver CS6的參數(shù)設(shè)置。在Dreamweaver CS6中通過設(shè)置相關(guān)參數(shù)，可以改變操作環(huán)境，從而使其更加符合設(shè)計者的設(shè)計需要。常見的設(shè)置有“預(yù)覽設(shè)置”、“設(shè)置外部編輯器”、“編輯快捷鍵”、“設(shè)置頁面屬性”等，其他的參數(shù)設(shè)置和這些方法相同，用戶可以根據(jù)需要自行設(shè)置。 預(yù)覽設(shè)置在設(shè)計過程中，用戶需要隨時在瀏覽器中打開設(shè)計的文檔，以便查看其設(shè)計效果和及時進(jìn)行更改和完善。Dreamweaver CS6提供了在設(shè)計過程中預(yù)覽的功能，用戶只需使用菜單命令或快捷鍵就可以在瀏覽器中打開設(shè)計中的文檔。依次選擇“編輯”|“首選參數(shù)”菜單命令，打開“首選參數(shù)”對話框，在“分類”列表框中選擇“在瀏覽器中預(yù)覽”選項，右側(cè)即出現(xiàn)相關(guān)界面，如圖127所示。圖127 “首選參數(shù)”對話框?qū)υ捒蛑懈鬟x項的含義如下。l ：單擊該按鈕，可向列表中添加新的瀏覽器。l ：單擊該按鈕，可刪除列表中選擇的瀏覽器。l ：單擊該按鈕，彈出“編輯瀏覽器”對話框，從中可修改選定的瀏覽器參數(shù)，如圖128所示。圖128 “編輯瀏覽器”對話框l 默認(rèn)：選中“主瀏覽器”或“次瀏覽器”復(fù)選框，可設(shè)定選擇的瀏覽器是否為主瀏覽器。l 選項：選中“使用臨時文件預(yù)覽”復(fù)選框，可使用臨時文件預(yù)覽。將Internet Explorer(簡稱IE)設(shè)置為默認(rèn)瀏覽器的快捷鍵為F12。在設(shè)計過程中，如果想預(yù)覽頁面效果，可選擇“文件”|“在瀏覽器中預(yù)覽”命令或按快捷鍵F12。 設(shè)置外部編輯器Dreamweaver CS6具有良好的外部程序接口，可以與各種頁面元素相關(guān)的外部編輯器相連接，在設(shè)計過程中可以及時調(diào)用這些外部程序并編輯頁面元素，完成后還可以將編輯好的元素直接應(yīng)用在設(shè)計中，十分便捷。設(shè)置外部編輯器示例：將Photoshop CS6設(shè)置為Dreamweaver 、.jpe、.jpeg等文件的外部編輯器。設(shè)置外部編輯器的具體操作步驟如下。(1) 依次選擇“編輯”|“首選參數(shù)”菜單命令，打開“首選參數(shù)”對話框，在“分類”列表框中選擇“文件類型/編輯器”選項，如圖129所示。圖129 選擇“文件類型/編輯器”選項(2) 在“擴(kuò)展名” .jpe .jpeg選項，然后單擊“編輯器”列表框上方的按鈕，打開“選擇外部編輯器”對話框，如圖130所示。圖130 “選擇外部編輯器”對話框(3) 選擇Photoshop程序文件，然后單擊“打開”按鈕退出對話框，此時在“編輯器”列表框中出現(xiàn)所加載的Photoshop程序。(4) 選擇Photoshop程序名稱，單擊“編輯器”列表框上方的“設(shè)為主要”按鈕，將Photoshop設(shè)置為默認(rèn)的主要編輯器。完成后，在Photoshop名稱后面出現(xiàn)“主要”字樣。(5) 如果要刪除“編輯器”列表框中沒用的編輯器，則選擇編輯器名稱后，單擊“編輯器”列表上方的按鈕即可。 編輯快捷鍵Dreamweaver CS6為菜單命令、文檔編輯、代碼編輯、站點管理等操作設(shè)置了易用的快捷鍵。如果用戶需要，則可以更改或添加自己的快捷鍵。編輯快捷鍵示例：為“查看”|“代碼”菜單命令添加快捷鍵，即按Backspace鍵，將Dreamweaver切換到“代碼”視圖。編輯快捷鍵的具體操作步驟如下。(1) 依次選擇“編輯”|“快捷鍵”菜單命令，打開“快捷鍵”對話框，如圖131所示。圖131 “快捷鍵”對話框(2) 在“當(dāng)前設(shè)置”下拉列表框中選擇默認(rèn)的Dreamweaver Standard選項，然后在“命令”下拉列表框中選擇“菜單命令”選項。(3) 在列表框中展開“查看”選項，選擇其中的“代碼”選項。(4) 單擊“快捷鍵”選項右側(cè)的按鈕，然后按Backspace鍵。此時在“按鍵”文本框中出現(xiàn)自動加載的快捷鍵符號BkSp。(5) 單擊“確定”按鈕退出對話框，快捷鍵設(shè)置完畢。同理，可以為切換設(shè)計視圖添加快捷鍵，以便在兩種視圖間進(jìn)行切換。 設(shè)置頁面屬性對于頁面的基本屬性，例如標(biāo)題、背景顏色和圖像、文本及鏈接的顏色、邊距等，在“頁面屬性”對話框中均可以設(shè)置。依次選擇“修改”|“頁面屬性”菜單命令，打開“頁面屬性”對話框，如圖132所示。圖132 “頁面屬性”對話框在此對話框中主要可以進(jìn)行以下設(shè)置。1. 更改頁面標(biāo)題 在“標(biāo)題/編碼”選項界面中可以更改標(biāo)題、文檔類型、編碼等。2. 設(shè)置背景圖像或顏色如果要設(shè)置背景圖像，則可單擊“背景圖像”文本框右側(cè)的“瀏覽”按鈕，查找并選擇背景圖像文件，或在其文本框中輸入圖像文件的路徑及名稱；如果要設(shè)置背景顏色，則可單擊“背景顏色”色盤按鈕，在彈出的色盤中選擇背景顏色，或者在其右側(cè)的文本框中輸入顏色的十六進(jìn)制代碼。 提示：可以同時設(shè)置“背景顏色”和“背景圖像”，當(dāng)頁面下載時，首先顯示背景色，然后被背景圖像所覆蓋，背景顏色可以透過背景圖像的透明像素部分顯示出來。3. 設(shè)置文本或鏈接顏色在“外觀”和“鏈接”選項界面中可分別通過使用CSS樣式表定義顏色。 Dreamweaver CS6的文件操作在Dreamweaver CS6中，用戶不僅可以創(chuàng)建基本的HTML頁面和動態(tài)的ASP、JSP頁面，還可以創(chuàng)建模板頁、CSS樣式表、XSLT、庫項目、JavaScript、XML以及多種專業(yè)水準(zhǔn)的頁面設(shè)計。 新建文檔在Dreamweaver CS6中新建文檔的具體操作步驟如下。(1) 依次選擇“文件”|“新建”菜單命令，打開“新建文檔”對話框，如圖133所示。(2) 在“空白頁”選項卡內(nèi)的“頁面類型”列表框中選擇所要創(chuàng)建的文檔類型，然后在“布局”列表框中選擇想要創(chuàng)建的樣式，然后單擊“創(chuàng)建”按鈕即可。圖133 “新建文檔”對話框 保存文檔在Dreamweaver CS6中保存文檔的方法大致和其他應(yīng)用程序相同，如果要將設(shè)計好的文檔保存為模板，則依次選擇“文件”|“另存為模板”菜單命令，打開如圖134所示的“另存模板”對話框，進(jìn)行相應(yīng)的設(shè)置后，單擊“保存”按鈕即可將模板保存在所選擇的站點內(nèi)。圖134 “另存模板”對話框 注意：模板文件應(yīng)保存在站點內(nèi)，因此應(yīng)首先創(chuàng)建一個站點。 打開現(xiàn)有文檔Dreamweaver CS6可以打開HTML文件或任何支持的動態(tài)文檔類型。依次選擇“文件”|“打開”菜單命令，在“打開”對話框中選擇想要打開的文件，然后單擊“打開”按鈕即可。有些保存為HTML格式的文件類型，諸如Microsoft Word文檔，則需將其導(dǎo)入Dreamweaver CS6中，而不是打開該文檔。導(dǎo)入后需使用Dreamweaver的相關(guān)命令清除無用的標(biāo)簽。 課 后 習(xí) 題一、選擇題1. 下列( )是Dreamweaver CS6的新增功能。A. 可響應(yīng)的自適應(yīng)網(wǎng)格版面 B.Adobe Business Catalyst 集成C. 更新的 PhoneGap 支持 D. 以上都是2. 以下( )不屬于功能菜單。A. 文件 B. 插入 C. 站點 D. 視圖3. 插入表格屬于插入欄中的( )選項卡。A. 常用 B. 布局 C. 表單 D. 文本4. 在設(shè)計過程中，按(