1. 設計好你的頁面的粗略內容，結構化它們
你可能是在心里設計，也可能是在紙上設計，也可能在電腦里用PhotoShop設計。我強調，先有內容，再有表現。但是不是先有所有的內容然后再來設計表現，我認為內容因為占主導地位。將內容分類，也就是結構化。

2. 把內容的文本輸入HTML文件中，設計和收集將要使用的圖像
使用帶有語法著色功能的文本編輯器輸入文本，利用段落來結構化你的文本。

3. 用HTML/XHTML標簽括住內容的文本
因為你已經將文本結構化好了，那么輕易就可以用標簽將它們括住---主要使用div標簽，列表內容使用列表標簽。為重要的標簽(到底哪一些標簽是重要的，你在結構化的時候已經想好)分配id屬性和class屬性。創建一個空白的CSS文件，并在網頁中引用它。

4. 用Firefox瀏覽器打開HTML文件瀏覽器
現在，你已經寫好了一個純HTML的網頁。即使這樣，它在瀏覽器下也應該具有良好的顯示。否則說明你的結構化過程不夠成功，查看代碼，找出是否有需要改進的地方。

5. 應用Web Developer插件來設計完整的CSS樣式表，使用網頁的顯示更加完好
用鼠標右鍵單擊網頁，選擇菜單Web Developer-->CSS-->Edit Css，打開可編輯CSS的側欄。在里面輸入CSS代碼，你的代碼將立即作用于網頁。所以，這也是另一種意義上的可視化網頁制作方式。在調試定位的時候， 你可以為對象加上不同顏色的邊框，這樣可以使用對象間的位置關系更加顯然。
為了防止代碼丟失，經常把你的CSS代碼保存在你所創建的CSS文件中。

6. 收尾
當你對頁面的顯示已經相對滿意的時候，在IE，Opera和其它你所能弄到的瀏覽器里查看你的網頁的顯示效果。如果有差異，以Firefox為準，并利用hack消除在IE中的差異。

7. 結語
這里只不過給出了步驟性的教程，一個網頁是否顯示良好，更主要的是你的藝術感覺和你的經驗。 Firefox瀏覽器插件的中文網址是 http://addons.mozine.org/ Web Developer插件的下載地址是 http://addons.mozine.org/addon.php?id=32