Dreamweaver屬性面板和常用功能介紹【web前端】

　　Dreamweaver是十分簡(jiǎn)單方便的網(wǎng)頁(yè)制作工具，軟件安裝后，雙擊運(yùn)行桌面上的軟件圖標(biāo)，進(jìn)入軟件界面。這里建議用戶依次選擇菜單欄中的“窗口”→“工作區(qū)布局”→“經(jīng)典”選項(xiàng)，如圖1所示。

　　圖1 Dreamweaver軟件打開(kāi)界面

　　接下來(lái)，選擇菜單欄中的“文件”→“新建”選項(xiàng)，會(huì)出現(xiàn)“新建文檔”窗口。在“文檔類(lèi)型”下拉選項(xiàng)中選擇“HTML5”，單擊“創(chuàng)建”按鈕，如圖2所示，即可創(chuàng)建一個(gè)空白的HTML5文檔，如圖3所示。

圖2 新建HTML文檔窗口

　　圖3 空白的HTML5文檔

　　需要注意的是，如果是初次安裝使用Dreamweaver工具，創(chuàng)建空白HTML文檔時(shí)可能會(huì)出現(xiàn)如圖21所示的空白界面，此時(shí)單擊“代碼”選項(xiàng)即可出現(xiàn)圖4所示的界面效果。

　　圖4 初次使用Dreamweaver新建HTML文檔

　　圖4為軟件的操作界面，主要由六部分組成，包括菜單欄、插入欄、文檔工具欄、文檔窗口、屬性面板和常用面板，每個(gè)部分的具體位置如圖5所示。

　　圖5 Dreamweaver操作界面

　　接下來(lái)將對(duì)圖22中的每個(gè)部分進(jìn)行詳細(xì)講解，具體如下。

　　1、 菜單欄

　　Dreamweaver菜單欄由各種菜單命令構(gòu)成，包括文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口、幫助10個(gè)菜單項(xiàng)，如圖6所示。

　　圖6 菜單欄

　　關(guān)于圖6所示的各個(gè)菜單選項(xiàng)介紹如下。

　　“文件(F)”菜單：包含文件操作的標(biāo)準(zhǔn)菜單項(xiàng)，如“新建”、“打開(kāi)”、“保存”等。文件菜單還包括其它選項(xiàng)，用于查看當(dāng)前文檔或?qū)Ξ?dāng)前文檔執(zhí)行操作，如“在瀏覽器中預(yù)覽”“多屏預(yù)覽”等。

　　“編輯(E)”菜單：包含文件編輯的標(biāo)準(zhǔn)菜單選項(xiàng)，如“剪切”、“拷貝”和“粘貼”等。此外“編輯”菜單還包括選擇和查找選項(xiàng)，并且提供軟件快捷鍵編輯器、標(biāo)簽庫(kù)編輯器以及首選參數(shù)編輯器的訪問(wèn)。

　　“查看(V)”菜單：用于選擇文檔的視圖方式(例如設(shè)計(jì)視圖、代碼視圖等)，并且可以用于顯示或隱藏不同類(lèi)型的頁(yè)面元素和工具。

　　“插入(I)”菜單：用于將各個(gè)對(duì)象插入文檔，例如插入圖像、Flash等。

　　“修改(M)”菜單：用于更改選定頁(yè)面元素的屬性，使用此菜單，可以編輯標(biāo)簽屬性，更改表格和表格元素，并且為庫(kù)和模板執(zhí)行不同的操作。

　　“格式(O)”菜單：用于設(shè)置文本的各種格式和樣式。

　　“命令(C)”菜單：提供對(duì)各種命令的訪問(wèn)，包括根據(jù)格式參數(shù)選擇設(shè)置代碼格式、優(yōu)化圖像、排序表格等命令。

　　“站點(diǎn)(S)”菜單：包括站點(diǎn)操作菜單項(xiàng)，這些菜單項(xiàng)可用于創(chuàng)建、打開(kāi)和編輯站點(diǎn)，以及管理當(dāng)前站點(diǎn)中的文件。

　　“窗口(W)”菜單：提供對(duì)Dreamweaver中的所有面板、檢查器和窗口的訪問(wèn)。

　　“幫助(H)”菜單：提供對(duì)Dreamweaver幫助文檔的訪問(wèn)，包括Dreamweaver使用幫助，Dreamweaver的支持系統(tǒng)、擴(kuò)展管理以及包括各種語(yǔ)言的參考材料等。

　　2、 插入欄

　　在使用Dreamweaver建設(shè)網(wǎng)站時(shí)，對(duì)于一些經(jīng)常使用的標(biāo)簽，可以直接選擇插入欄里的相關(guān)按鈕，這些按鈕一般都和菜單中的命令相對(duì)應(yīng)。插入欄集成了多種網(wǎng)頁(yè)元素，包括超鏈接、圖像、表格、多媒體等，如圖7所示。

圖7 插入欄

單擊插入欄上方相應(yīng)的選項(xiàng)，如“布局”“表單”等，插入欄下方會(huì)出現(xiàn)不同的工具組。選擇工具組中不同的按鈕，可以創(chuàng)建不同的網(wǎng)頁(yè)元素。

3、 文檔工具欄

文檔工具欄提供了各種“文檔”視圖窗口，如代碼、拆分、設(shè)計(jì)視圖，還提供了各種查看選項(xiàng)和一些常用操作，如圖8所示。

圖8 文檔工具欄

接下來(lái)介紹其中幾個(gè)常用的功能按鈕，具體如下。

“顯示代碼視圖”：?jiǎn)螕舸a按鈕，文檔窗口中將只留下代碼視圖，收起設(shè)計(jì)視圖。

“顯示代碼和設(shè)計(jì)視圖”：?jiǎn)螕舨鸱职粹o，文檔窗口中將同時(shí)顯示代碼視圖和設(shè)計(jì)視圖，兩個(gè)視圖中間以一條間隔線分開(kāi)，拖動(dòng)間隔線可以改變兩者所占屏幕的比例。
“顯示設(shè)計(jì)視圖”：?jiǎn)螕粼O(shè)計(jì)按鈕，文檔窗口中收起代碼視圖只留下設(shè)計(jì)視圖。
“標(biāo)題”：此處可以修改文檔的標(biāo)題，也就是修改源代碼頭部<title>標(biāo)簽中的內(nèi)容，默認(rèn)情況下為“無(wú)標(biāo)題文檔”。
“在瀏覽器中預(yù)覽/調(diào)試”：?jiǎn)螕艨蛇x擇瀏覽器對(duì)網(wǎng)頁(yè)進(jìn)行預(yù)覽或調(diào)試。
“刷新”：在“代碼”視圖中進(jìn)行更改后，單擊該按鈕可刷新文檔的“設(shè)計(jì)”視圖。

　　需要注意的是，在Dreamweaver工具中，文檔工具欄是可以隱藏的，選擇“查看→工具欄→文檔”命令，當(dāng)“文檔”為勾選狀態(tài)時(shí)(如圖9所示)，顯示“文檔工具欄”，取消勾選狀態(tài)則會(huì)隱藏“文檔工具欄”。

　　圖9 文檔菜單

　　4、 文檔窗口

　　文檔窗口是Dreamweaver最常用到的區(qū)域之一，此處會(huì)顯示所有打開(kāi)的文檔。單擊文檔工具欄里的“代碼”“拆分”“設(shè)計(jì)”三個(gè)選擇按鈕可變換區(qū)域的顯示狀態(tài)，如圖10所示，為“拆分”狀態(tài)下的結(jié)構(gòu)，左方是代碼區(qū)，右方是視圖區(qū)。

　　圖10 文檔窗口

　　5、 屬性面板

　　屬性面板主要用于設(shè)置文檔窗口中所選中元素的屬性。在Dreamweaver中允許用戶在屬性面板中直接對(duì)元素的屬性進(jìn)行修改。選中的元素不同，屬性面板中內(nèi)容也不一樣。圖11和圖12分別為表格和圖像的屬性面板。

　　圖11 表格屬性面板

　　圖12 圖像屬性面板

　　單擊屬性面板右上角的“”圖標(biāo)，可以打開(kāi)選項(xiàng)菜單。如果不小心關(guān)閉屬性面板，可以從菜單欄選擇“窗口→屬性”選項(xiàng)重新打開(kāi)，或者按“Ctrl+F3”組合鍵直接調(diào)出。

　　6、常用面板

　　常用面板中集合了網(wǎng)站編輯與建設(shè)過(guò)程中一些常用的工具。用戶可以根據(jù)需要自定義該區(qū)域的功能面板，通過(guò)這樣的方式既能夠很容易的使用所需面板，也不會(huì)使工作區(qū)域變得混亂。用戶可以通過(guò)“窗口”菜單選擇打開(kāi)需要的功能面板，并且將光標(biāo)置于面板名稱(chēng)欄上(紅框標(biāo)示位置)，拖拽這些面板，可使它們浮動(dòng)在界面上，圖30所示即為文件面板浮動(dòng)在代碼區(qū)域上面。

　　圖13 常用面板

什么是DOM？DOM樹(shù)關(guān)鍵名詞解釋

什么是less？如何通過(guò)Less變量來(lái)實(shí)現(xiàn)CSS樣式

頁(yè)面布局的排列規(guī)則是什么？怎樣清除浮動(dòng)標(biāo)簽

黑馬程序員web前端培訓(xùn)課程