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