1.5 創(chuàng)建HTML文件

一個(gè)網(wǎng)頁可以簡(jiǎn)單得只有幾個(gè)文字，也可以復(fù)雜得像一張或幾張海報(bào)。任意文本編輯器都可以用于編寫網(wǎng)頁源代碼，當(dāng)前比較流行的網(wǎng)頁編輯器是HBuilder。使用HBuilder編輯HTML文檔的操作非常簡(jiǎn)單。在HBuilder的代碼窗口中手工輸入代碼，有助于設(shè)計(jì)人員對(duì)網(wǎng)頁結(jié)構(gòu)和樣式有更深入的了解。

下面通過使用HBuilder網(wǎng)頁編輯器創(chuàng)建一個(gè)只有文本組成的簡(jiǎn)單頁面，來學(xué)習(xí)網(wǎng)頁的編輯、保存和瀏覽過程。

1.創(chuàng)建Web項(xiàng)目

①打開HBuilder，單擊工具欄中的按鈕，在彈出的下拉列表中選擇“Web項(xiàng)目”選項(xiàng)，如圖1-6所示，彈出“創(chuàng)建Web項(xiàng)目”對(duì)話框，如圖1-7所示。

②單擊對(duì)話框中的“瀏覽”按鈕，打開“瀏覽文件夾”對(duì)話框，選擇用于存放網(wǎng)站頁面的盤符或事先建立好的文件夾，例如，這里選擇D盤，如圖1-8所示。單擊“確定”按鈕后，返回“創(chuàng)建Web項(xiàng)目”對(duì)話框，在“項(xiàng)目名稱”文本框中輸入項(xiàng)目名稱，例如，輸入“web”，如圖1-9所示。單擊“完成”按鈕，Web項(xiàng)目“web”創(chuàng)建成功。

2.創(chuàng)建欄目目錄

當(dāng)一個(gè)Web項(xiàng)目創(chuàng)建成功后，會(huì)自動(dòng)生成一個(gè)默認(rèn)的主頁文件index.html和用于存放網(wǎng)站圖像、CSS樣式和JavaScript腳本的目錄，如圖1-10所示。

一個(gè)Web項(xiàng)目中可以包含多個(gè)應(yīng)用欄目目錄。例如，在上面建立的Web項(xiàng)目（其路徑為D:\web）中建立一個(gè)目錄ch1，其對(duì)應(yīng)的路徑為“D:\web\ch1”，專門用于存放本書中第1章的所有案例。

①在Web項(xiàng)目上單擊右鍵，在彈出的菜單中單擊“新建”菜單項(xiàng)，接著在彈出的子菜單中單擊“目錄”菜單項(xiàng)，如圖1-11所示。

②打開“新建文件夾”對(duì)話框，輸入要建立的文件夾名稱“ch1”，如圖1-12所示。單擊“完成”按鈕，生成的目錄如圖1-13所示。

以此類推，后面的章節(jié)也會(huì)建立用于存放該章節(jié)案例的目錄。

3.創(chuàng)建HTML文件

①在欄目目錄ch1上單擊右鍵，在彈出的菜單中單擊“新建”菜單項(xiàng)，接著在彈出的子菜單中單擊“HTML文件”菜單項(xiàng)，如圖1-14所示。打開“創(chuàng)建文件向?qū)А睂?duì)話框，在“文件名”文本框中輸入要建立的文件名，例如，“first.html”，如圖1-15所示。

②單擊“完成”按鈕，生成HTML文件first.html，代碼窗口中的默認(rèn)代碼如圖1-16所示。在代碼窗口中輸入簡(jiǎn)單的HTML代碼，內(nèi)容如圖1-17所示。

③單擊工具欄上的按鈕，保存網(wǎng)頁。

4.瀏覽網(wǎng)頁

單擊工具欄上的谷歌瀏覽器按鈕，啟動(dòng)瀏覽器，網(wǎng)頁的顯示結(jié)果如圖1-18所示。