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

更新時間:2020-12-07 來源:黑馬程序員瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

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

　　圖1 Dreamweaver軟件打開界面

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

圖2 新建HTML文檔窗口

　　圖3 空白的HTML5文檔

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

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

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

　　圖5 Dreamweaver操作界面

　　接下來將對圖22中的每個部分進行詳細講解，具體如下。

　　1、菜單欄

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

　　圖6 菜單欄

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

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

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

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

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

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

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

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

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

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

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

　　2、插入欄

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

圖7 插入欄

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

3、文檔工具欄

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

圖8 文檔工具欄

接下來介紹其中幾個常用的功能按鈕，具體如下。

“顯示代碼視圖”：單擊代碼按鈕，文檔窗口中將只留下代碼視圖，收起設(shè)計視圖。

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

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

　　圖9 文檔菜單

　　4、文檔窗口

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

　　圖10 文檔窗口

　　5、屬性面板

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

　　圖11 表格屬性面板

　　圖12 圖像屬性面板

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

　　6、常用面板

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