網(wǎng)頁制作中初學者該如何使用DW？

基于網(wǎng)頁內(nèi)容，網(wǎng)頁開發(fā)中使用的工具主要分為網(wǎng)頁制作、網(wǎng)頁圖像、動畫制作工具。網(wǎng)頁制作使用：Dreamweaver、FrontPage：圖像制作使用：Photoshop、Fireworks：動畫制作：imageready、flash。本節(jié)課就來講解一下Dreamweaver安裝之后如何使用。
雙擊運行桌面上的軟件圖標，進入軟件界面。這里建議用戶依次選擇菜單欄中的“窗口”→“工作區(qū)布局”→“經(jīng)典”選項，如圖1所示。 　　接下來，選擇菜單欄中的“文件”→“新建”選項，會出現(xiàn)“新建文檔”窗口。在“文檔類型”下拉選項中選擇“HTML5”，單擊“創(chuàng)建”按鈕，如圖2所示，即可創(chuàng)建一個空白的HTML5文檔，如圖3所示。 　　需要注意的是，如果是初次安裝使用Dreamweaver工具，創(chuàng)建空白HTML文檔時可能會出現(xiàn)如圖21所示的空白界面，此時單擊“代碼”選項即可出現(xiàn)圖4所示的界面效果。 　　圖4為軟件的操作界面，主要由六部分組成，包括菜單欄、插入欄、文檔工具欄、文檔窗口、屬性面板和常用面板，每個部分的具體位置如圖5所示。 　　接下來將對圖22中的每個部分進行詳細講解，具體如下。
　　1、 菜單欄
　　Dreamweaver菜單欄由各種菜單命令構成，包括文件、編輯、查看、插入、修改、格式、命令、站點、窗口、幫助10個菜單項，如圖6所示。 　　關于圖6所示的各個菜單選項介紹如下。
　　“文件(F)”菜單：包含文件操作的標準菜單項，如“新建”、“打開”、“保存”等。文件菜單還包括其它選項，用于查看當前文檔或?qū)Ξ斍拔臋n執(zhí)行操作，如“在瀏覽器中預覽”“多屏預覽”等。
　　“編輯(E)”菜單：包含文件編輯的標準菜單選項，如“剪切”、“拷貝”和“粘貼”等。此外“編輯”菜單還包括選擇和查找選項，并且提供軟件快捷鍵編輯器、標簽庫編輯器以及首選參數(shù)編輯器的訪問。
　　“查看(V)”菜單：用于選擇文檔的視圖方式(例如設計視圖、代碼視圖等)，并且可以用于顯示或隱藏不同類型的頁面元素和工具。
　圖11 表格屬性面板
　　“插入(I)”菜單：用于將各個對象插入文檔，例如插入圖像、Flash等。
　　“修改(M)”菜單：用于更改選定頁面元素的屬性，使用此菜單，可以編輯標簽屬性，更改表格和表格元素，并且為庫和模板執(zhí)行不同的操作。
　　“格式(O)”菜單：用于設置文本的各種格式和樣式。
　　“命令(C)”菜單：提供對各種命令的訪問，包括根據(jù)格式參數(shù)選擇設置代碼格式、優(yōu)化圖像、排序表格等命令。
　　“站點(S)”菜單：包括站點操作菜單項，這些菜單項可用于創(chuàng)建、打開和編輯站點，以及管理當前站點中的文件。
　　“窗口(W)”菜單：提供對Dreamweaver中的所有面板、檢查器和窗口的訪問。
　　“幫助(H)”菜單：提供對Dreamweaver幫助文檔的訪問，包括Dreamweaver使用幫助，Dreamweaver的支持系統(tǒng)、擴展管理以及包括各種語言的參考材料等。
　　2、 插入欄
　　在使用Dreamweaver建設網(wǎng)站時，對于一些經(jīng)常使用的標簽，可以直接選擇插入欄里的相關按鈕，這些按鈕一般都和菜單中的命令相對應。插入欄集成了多種網(wǎng)頁元素，包括超鏈接、圖像、表格、多媒體等，如圖7所示。 　　單擊插入欄上方相應的選項，如“布局”“表單”等，插入欄下方會出現(xiàn)不同的工具組。選擇工具組中不同的按鈕，可以創(chuàng)建不同的網(wǎng)頁元素。
　　3、 文檔工具欄
　　文檔工具欄提供了各種“文檔”視圖窗口，如代碼、拆分、設計視圖，還提供了各種查看選項和一些常用操作，如圖8所示。 　　接下來介紹其中幾個常用的功能按鈕，具體如下。
“顯示代碼視圖”：單擊代碼按鈕，文檔窗口中將只留下代碼視圖，收起設計視圖。
“顯示代碼和設計視圖”：單擊拆分按鈕，文檔窗口中將同時顯示代碼視圖和設計視圖，兩個視圖中間以一條間隔線分開，拖動間隔線可以改變兩者所占屏幕的比例。
“顯示設計視圖”：單擊設計按鈕，文檔窗口中收起代碼視圖只留下設計視圖。
“標題”：此處可以修改文檔的標題，也就是修改源代碼頭部 　　4、 文檔窗口
　　文檔窗口是Dreamweaver最常用到的區(qū)域之一，此處會顯示所有打開的文檔。單擊文檔工具欄里的“代碼”“拆分”“設計”三個選擇按鈕可變換區(qū)域的顯示狀態(tài)，如圖10所示，為“拆分”狀態(tài)下的結構，左方是代碼區(qū)，右方是視圖區(qū)。
　　5、 屬性面板
　　屬性面板主要用于設置文檔窗口中所選中元素的屬性。在Dreamweaver中允許用戶在屬性面板中直接對元素的屬性進行修改。選中的元素不同，屬性面板中內(nèi)容也不一樣。圖11和圖12分別為表格和圖像的屬性面板。
　　單擊屬性面板右上角的“
”圖標，可以打開選項菜單。如果不小心關閉屬性面板，可以從菜單欄選擇“窗口→屬性”選項重新打開，或者按“Ctrl+F3”組合鍵直接調(diào)出。
　　6、常用面板
　　常用面板中集合了網(wǎng)站編輯與建設過程中一些常用的工具。用戶可以根據(jù)需要自定義該區(qū)域的功能面板，通過這樣的方式既能夠很容易的使用所需面板，也不會使工作區(qū)域變得混亂。用戶可以通過“窗口”菜單選擇打開需要的功能面板，并且將光標置于面板名稱欄上(紅框標示位置)，拖拽這些面板，可使它們浮動在界面上，圖30所示即為文件面板浮動在代碼區(qū)域上面。


猜你喜歡：

HTML在網(wǎng)頁設計中是什么作用？

移動端touch事件解析判斷拖動方向

黑馬程序員web前端培訓課程 

傳智播客web前端培訓課程