網(wǎng)頁制作一般使用哪些工具？DW使用方法教學(xué)？

　　基于網(wǎng)頁內(nèi)容，網(wǎng)頁開發(fā)中使用的工具主要分為網(wǎng)頁制作、網(wǎng)頁圖像、動(dòng)畫制作工具。網(wǎng)頁制作使用：Dreamweaver、FrontPage：圖像制作使用：Photoshop、Fireworks：動(dòng)畫制作：imageready、flash。本節(jié)課就來講解一下Dreamweaver安裝之后如何使用。

　　雙擊運(yùn)行桌面上的軟件圖標(biāo)，進(jìn)入軟件界面。這里建議用戶依次選擇菜單欄中的“窗口”→“工作區(qū)布局”→“經(jīng)典”選項(xiàng)，如圖1所示。

圖1 Dreamweaver軟件打開界面

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

圖2 新建HTML文檔窗口

　圖3 空白的HTML5文檔

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

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

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

圖5 Dreamweaver操作界面

　　接下來將對圖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)，如“新建”、“打開”、“保存”等。文件菜單還包括其它選項(xiàng)，用于查看當(dāng)前文檔或?qū)Ξ?dāng)前文檔執(zhí)行操作，如“在瀏覽器中預(yù)覽”“多屏預(yù)覽”等。

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

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

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

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

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

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

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

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

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

　　2、 插入欄

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

圖7 插入欄

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

　3、 文檔工具欄

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

圖8 文檔工具欄

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

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

“顯示代碼和設(shè)計(jì)視圖”：單擊拆分按鈕，文檔窗口中將同時(shí)顯示代碼視圖和設(shè)計(jì)視圖，兩個(gè)視圖中間以一條間隔線分開，拖動(dòng)間隔線可以改變兩者所占屏幕的比例。

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

"標(biāo)題”：此處可以修改文檔的標(biāo)題，也就是修改源代碼頭部

　
圖9 文檔菜單

　　4、 文檔窗口

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

　
圖10 文檔窗口

　　5、 屬性面板

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

　
圖11 表格屬性面板

圖12 圖像屬性面板

　　單擊屬性面板右上角的“

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

　　6、常用面板

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



圖13 常用面板