firefox默認(rèn)安裝包只有8m(linux版)和5m(win版)，安裝后功能較少。為了能制作網(wǎng)頁，我們需要安裝web developer插件。下面我就介紹一下我使用使用firefox + web developer插件制作網(wǎng)頁的簡單過程。

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

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

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

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

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

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

4. 用firefox瀏覽器打開html文件瀏覽器

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

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

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

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

6. 收尾

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

7. 結(jié)語

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

• firefox瀏覽器插件的中文網(wǎng)址是 http://addons.mozine.org/
• web developer插件的下載地址是 http://addons.mozine.org/addon.php?id=32