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

基于網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)開(kāi)發(fā)中使用的工具主要分為網(wǎng)頁(yè)制作、網(wǎng)頁(yè)圖像、動(dòng)畫(huà)制作工具。網(wǎng)頁(yè)制作使用：Dreamweaver、FrontPage：圖像制作使用：Photoshop、Fireworks：動(dòng)畫(huà)制作：imageready、flash。本節(jié)課就來(lái)講解一下Dreamweaver安裝之后如何使用。
雙擊運(yùn)行桌面上的軟件圖標(biāo)，進(jìn)入軟件界面。這里建議用戶依次選擇菜單欄中的“窗口”→“工作區(qū)布局”→“經(jīng)典”選項(xiàng)，如圖1所示。 　　接下來(lái)，選擇菜單欄中的“文件”→“新建”選項(xiàng)，會(huì)出現(xiàn)“新建文檔”窗口。在“文檔類(lèi)型”下拉選項(xiàng)中選擇“HTML5”，單擊“創(chuàng)建”按鈕，如圖2所示，即可創(chuàng)建一個(gè)空白的HTML5文檔，如圖3所示。 　　需要注意的是，如果是初次安裝使用Dreamweaver工具，創(chuàng)建空白HTML文檔時(shí)可能會(huì)出現(xiàn)如圖21所示的空白界面，此時(shí)單擊“代碼”選項(xiàng)即可出現(xiàn)圖4所示的界面效果。 　　圖4為軟件的操作界面，主要由六部分組成，包括菜單欄、插入欄、文檔工具欄、文檔窗口、屬性面板和常用面板，每個(gè)部分的具體位置如圖5所示。 　　接下來(lái)將對(duì)圖22中的每個(gè)部分進(jìn)行詳細(xì)講解，具體如下。
　　1、 菜單欄
　　Dreamweaver菜單欄由各種菜單命令構(gòu)成，包括文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口、幫助10個(gè)菜單項(xiàng)，如圖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è)面元素和工具。
　圖11 表格屬性面板
　　“插入(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所示。 　　單擊插入欄上方相應(yīng)的選項(xiàng)，如“布局”“表單”等，插入欄下方會(huì)出現(xiàn)不同的工具組。選擇工具組中不同的按鈕，可以創(chuàng)建不同的網(wǎng)頁(yè)元素。
　　3、 文檔工具欄
　　文檔工具欄提供了各種“文檔”視圖窗口，如代碼、拆分、設(shè)計(jì)視圖，還提供了各種查看選項(xiàng)和一些常用操作，如圖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)題，也就是修改源代碼頭部 　　4、 文檔窗口
　　文檔窗口是Dreamweaver最常用到的區(qū)域之一，此處會(huì)顯示所有打開(kāi)的文檔。單擊文檔工具欄里的“代碼”“拆分”“設(shè)計(jì)”三個(gè)選擇按鈕可變換區(qū)域的顯示狀態(tài)，如圖10所示，為“拆分”狀態(tài)下的結(jié)構(gòu)，左方是代碼區(qū)，右方是視圖區(qū)。
　　5、 屬性面板
　　屬性面板主要用于設(shè)置文檔窗口中所選中元素的屬性。在Dreamweaver中允許用戶在屬性面板中直接對(duì)元素的屬性進(jìn)行修改。選中的元素不同，屬性面板中內(nèi)容也不一樣。圖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)置于面板名稱欄上(紅框標(biāo)示位置)，拖拽這些面板，可使它們浮動(dòng)在界面上，圖30所示即為文件面板浮動(dòng)在代碼區(qū)域上面。


猜你喜歡：

HTML在網(wǎng)頁(yè)設(shè)計(jì)中是什么作用？

移動(dòng)端touch事件解析判斷拖動(dòng)方向

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

傳智播客web前端培訓(xùn)課程