由於HTML網(wǎng)頁設(shè)計的檔案是標(biāo)準(zhǔn)的ASCII文字檔，因此可以使用任意一個文字編輯器來打開并設(shè)計HTML檔。例如Windows系統(tǒng)中內(nèi)建的記事本．如果使用Dreamweaver等設(shè)計軟體，則能以視覺化的方式進(jìn)行網(wǎng)頁的設(shè)計製作。
實例一：使用記事本編寫HTML頁面
操作步驟：
１.按一下＂開始>所有程式>附屬應(yīng)用程式>記事本＂命令，打開＂記事本＂。
２.在記事本中直接輸入下面的HTML程式碼：
<html>
<!--聲明HTML頁面開始-->
<head><!--聲明HTML頭部開始--></head><!--聲明HTML頭部結(jié)束-->
<body><!--聲明HTML主體開始-->
第一個HTML文件
</body><!--聲明HTML主體結(jié)束-->
</html>
<!--聲明HTML頁面結(jié)束-->
３.按一下記事本功能表列中的＂檔案 > 儲存檔案＂命令，彈出＂另存為＂對話方塊．
４.在＂保存類型＂中選擇＂所有檔＂，＂編碼＂為ANSI，＂檔案名＂為1-end.htm，按一下＂保存＂按鈕．
５.關(guān)閉記事本，回到存檔的資料夾，按兩下1-end.htm檔，可以在流覽器中看見最終的頁面效果．
實例二：使用Dreamweaver製作頁面
操作步驟：
１.按一下＂開始＞所有程式＞Macromedia＞Macromedia Dreamweaver＂命令，啟動軟體的主程序．
２.按一下＂建立新檔案＂中的HTML，進(jìn)入頁面編輯視窗．
在 Dreamweaver CS5 軟體的主編輯環(huán)境中，視窗分為「程式碼」、「分割」「設(shè)計」3種．
Dreamweaver默認(rèn)進(jìn)入的是程式碼和設(shè)計檢視，可以看到，軟體上半部分的程式碼視圖和下半部分的設(shè)計檢視是互相聯(lián)繫密不可分的，在程式碼視圖中所做的任何修改都會影響到設(shè)計檢視，反之亦然．
程式碼：在視覺化網(wǎng)頁的背后可以控制網(wǎng)頁的原始程式碼，如果想查看或編輯原始程式碼，可以進(jìn)入該視圖．
設(shè)計：Dreamweaver是視覺化的網(wǎng)頁編輯軟體，所以設(shè)計檢視是最常用的．設(shè)計檢視中看到的網(wǎng)頁外觀和流覽器中看到的基本上是一致的．
分割：在這種視圖下，編輯視窗被分割成了上下兩部分，上面顯示的是原始程式碼視圖，下面是視覺化視圖，這樣就可以在選擇和編輯原始程式碼時即時地在視覺化視圖中看到結(jié)構(gòu)．
３.在空白的位置輸入"Dreamweaver製作的最簡單的頁面＂文字，以此作為頁面的正文．
４.按一下＂檔案＂功能表下的＂儲存＂命令，在對話方塊中選擇存檔的位置，按照前面介紹的方法將檔命名為 end.htm，然后按一下＂保存＂按鈕，這樣就又製作完成了一個頁面．
５.關(guān)閉 Dreamweaver，回到存檔的資料夾，按兩下 end.htm 檔，可以在流覽器中看到最終的頁面效果．
.png)