Firefox瀏覽器是一個良好支持W3C標(biāo)準(zhǔn)的開放源代碼的瀏覽器，擁有Linux/Windows/Mac版本。因為Firefox瀏覽器良好支持W3C標(biāo)準(zhǔn)，所以使用Firefox來調(diào)試網(wǎng)頁是非常好的。

Firefox瀏覽器是一個良好支持W3C標(biāo)準(zhǔn)的開放源代碼的瀏覽器，擁有Linux/Windows/Mac版本。因為Firefox瀏覽器良好支持W3C標(biāo)準(zhǔn)，所以使用Firefox來調(diào)試網(wǎng)頁是非常好的。

Firefox默認(rèn)安裝包只有8M(Linux版)和5M(Win版)，安裝后功能較少。為了能制作網(wǎng)頁，我們需要安裝Web Developer插件。下面我就介紹一下我使用使用Firefox Web Developer插件制作網(wǎng)頁的簡單過程。

1. 設(shè)計好你的頁面的粗略內(nèi)容，結(jié)構(gòu)化它們

你可能是在心里設(shè)計，也可能是在紙上設(shè)計，也可能在電腦里用PhotoShop設(shè)計。我強(qiáng)調(diào)，先有內(nèi)容，再有表現(xiàn)。但是不是先有所有的內(nèi)容然后再來設(shè)計表現(xiàn)，我認(rèn)為內(nèi)容因為占主導(dǎo)地位。將內(nèi)容分類，也就是結(jié)構(gòu)化。

2. 把內(nèi)容的文本輸入HTML文件中，設(shè)計和收集將要使用的圖像

使用帶有語法著色功能的文本編輯器輸入文本，利用段落來結(jié)構(gòu)化你的文本。

3. 用HTML/XHTML標(biāo)簽括住內(nèi)容的文本

因為你已經(jīng)將文本結(jié)構(gòu)化好了，那么輕易就可以用標(biāo)簽將它們括住—主要使用div標(biāo)簽，列表內(nèi)容使用列表標(biāo)簽。為重要的標(biāo)簽(到底哪一些標(biāo)簽是重要的，你在結(jié)構(gòu)化的時候已經(jīng)想好)分配id屬性和class屬性。創(chuàng)建一個空白的CSS文件，并在網(wǎng)頁中引用它。

4. 用Firefox瀏覽器打開HTML文件瀏覽器

現(xiàn)在，你已經(jīng)寫好了一個純HTML的網(wǎng)頁。即使這樣，它在瀏覽器下也應(yīng)該具有良好的顯示。否則說明你的結(jié)構(gòu)化過程不夠成功，查看代碼，找出是否有需要改進(jìn)的地方。

5. 應(yīng)用Web Developer插件來設(shè)計完整的CSS樣式表，使用網(wǎng)頁的顯示更加完好

用鼠標(biāo)右鍵單擊網(wǎng)頁，選擇菜單Web Developer–>CSS–>Edit Css，打開可編輯CSS的側(cè)欄。在里面輸入CSS代碼，你的代碼將立即作用于網(wǎng)頁。所以，這也是另一種意義上的可視化網(wǎng)頁制作方式。在調(diào)試定位的時候， 你可以為對象加上不同顏色的邊框，這樣可以使用對象間的位置關(guān)系更加顯然。

為了防止代碼丟失，經(jīng)常把你的CSS代碼保存在你所創(chuàng)建的CSS文件中。

6. 收尾

當(dāng)你對頁面的顯示已經(jīng)相對滿意的時候，在IE，Opera和其它你所能弄到的瀏覽器里查看你的網(wǎng)頁的顯示效果。如果有差異，以Firefox為準(zhǔn)，并利用hack消除在IE中的差異。

7. 結(jié)語

這里只不過給出了步驟性的教程，一個網(wǎng)頁是否顯示良好，更主要的是你的藝術(shù)感覺和你的經(jīng)驗。

Firefox瀏覽器插件的中文網(wǎng)址是 http://addons.mozine.org/

Web Developer插件的下載地址是 http://addons.mozine.org/addon.php?id=32