網(wǎng)頁(yè)編輯器是書寫HTML、CSS等代碼的工具軟件。一般常用的網(wǎng)頁(yè)編輯器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如圖1.8所示為常用的網(wǎng)頁(yè)編輯器的圖標(biāo)。本教材采用Dreamweaver網(wǎng)頁(yè)編輯器 版本為CS6。Dreamweaver簡(jiǎn)稱“DW”，具備完美的代碼提示功能和強(qiáng)大的輔助操作，因此它非常容易上手，是一款適合初學(xué)者學(xué)習(xí)和使用的網(wǎng)頁(yè)編輯器。下面和千鋒廣州HTML5小編一起來(lái)看看吧！

圖1.1 常用網(wǎng)頁(yè)編輯器

接下來(lái)講解如何使用Dreamweaver網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)編程，軟件的安裝不再介紹，直接講解軟件安裝后如何使用。

運(yùn)行DW軟件，進(jìn)入軟件界面， 選擇菜單欄中【文件】→【新建】，打開新建文檔窗口，在【文檔類型】下拉列表中選擇HTML5，單擊【創(chuàng)建】按鈕，如圖所示，即可創(chuàng)建一個(gè)空白的HTML文檔。

新建文檔窗口

空白HTML文檔

為了讓初學(xué)者更好的使用DW工具，需要對(duì)DW進(jìn)行一些初始化的設(shè)置，具體如下：

a) 工作區(qū)布局設(shè)置

運(yùn)行DW軟件，進(jìn)入軟件界面，將布局設(shè)置成統(tǒng)一的模式，選擇菜單欄中選擇【窗口】→【工作區(qū)布局(w)】→【經(jīng)典】，如圖。

初始化工作區(qū)布局

2. 必備面板

設(shè)置經(jīng)典模式后，需要調(diào)出三個(gè)常用的面板，分別選擇菜單欄【窗口】菜單下的【插入】、【屬性】、【文件】3個(gè)命令，如圖所示。

初始化必備面板

3. 新建默認(rèn)文檔設(shè)置

選擇菜單欄中【編輯】→【首選參數(shù)】(Ctrl U)，選中左側(cè)【分類】中的【新建文檔】，右邊就會(huì)出現(xiàn)相應(yīng)的設(shè)置，選擇最常用的HTML文檔類型和編碼類型，本書設(shè)置為HTML5，如圖所示。

默認(rèn)文檔設(shè)置

新建文檔的首選參數(shù)設(shè)置后，新建HTML文檔時(shí)，DW就會(huì)按照默認(rèn)文檔設(shè)置直接生成所需的代碼。

4. 瀏覽器設(shè)置

初學(xué)者計(jì)算機(jī)必備IE瀏覽器和Chrome瀏覽器，建議講DW的默認(rèn)預(yù)覽瀏覽器設(shè)置為“Chrome瀏覽器”，快捷鍵F12是使用主瀏覽器預(yù)覽網(wǎng)頁(yè)，一般把IE瀏覽器設(shè)為次瀏覽器，快捷鍵Ctrl F12，如圖所示。

默認(rèn)瀏覽器設(shè)置

5. 代碼提示

?為了加快寫代碼的速度，會(huì)用到代碼提示，DW中就有強(qiáng)大的代碼提示的功能，只需在【首選參數(shù)】對(duì)話框中設(shè)置代碼提示，選擇【代碼提示】選項(xiàng)，然后選中【結(jié)束標(biāo)簽】選項(xiàng)中的第二項(xiàng)，單擊【確定】按鈕即可，如圖所示。