|
絕大多數(shù)站長在平時的網(wǎng)頁設(shè)計與優(yōu)化過程中，都喜歡直接編寫或修改代碼，比如在Dreamweaver里逐個去寫HTML標(biāo)簽或樣式。但無論你對代 碼有多么熟悉，我還是會推薦你使用工具來簡化工作，提高效率。這些網(wǎng)絡(luò)上各式各樣輔助工具的出現(xiàn)，無非是為了讓我們的工作生活變得簡便，找到合適的工具加 以利用，往往能節(jié)省我們大量寶貴的時間。 下面桶哥為您介紹幾款在網(wǎng)頁設(shè)計制作中經(jīng)常使用到的火狐瀏覽器插件—— 1）HTML Validator 網(wǎng)頁符合W3C標(biāo)準(zhǔn)十分重要，一方面是為了讓頁面能夠跨瀏覽器兼容，另一方面也是為了讓搜索引擎能順利地抓取和理解你的頁面。所以讓頁面通過W3C校驗是 網(wǎng)頁優(yōu)化工作很重要的一方面，使用火狐HTML Validator插件能夠高效地檢測出頁面中HTML代碼的有效性，不僅如此，它還能顯示出錯的代碼位置，并給出錯誤說明和修改建議，是一個非常不錯的 網(wǎng)站優(yōu)化工具。 安裝完成后，在火狐瀏覽器右下角會出現(xiàn)一個紅色的“叉”或者一個綠色的“勾”（如下圖），分別表示頁面有錯誤和無錯誤。如果在你的頁面顯示的是綠勾，那么 恭喜你，你的代碼非常規(guī)范，已經(jīng)通過了W3C相關(guān)標(biāo)準(zhǔn)驗證。如果有錯也不用著急，雙擊紅叉標(biāo)志能夠顯示出錯誤的詳細(xì)信息，你可以根據(jù)提示逐個修改規(guī)范。
另外值得注意的是，HTML代碼的有效性還是要以W3C官方的校驗為準(zhǔn)，桶哥在使用此工具過程中發(fā)現(xiàn)它的校驗規(guī)則與W3C標(biāo)準(zhǔn)還是有一些非常細(xì)微的差別， 不過大部分情況下還是一致的，如果你不放心，修改完以后可以使用W3C Markup Validation Service再驗證一下。 2）Web Developer 從這個工具名稱應(yīng)該能夠大概猜到它的用途了。沒錯！這是一個集眾多頁面測試功能于一身的強(qiáng)大的火狐插件，能夠查看CSS錯誤和Cookies 信息，設(shè)置突出顯示表格、Heading、圖片URL等幾乎所有的頁面元素，這個插件對調(diào)試頁面非常有用，尤其當(dāng)頁面結(jié)構(gòu)很復(fù)雜的時候，這些工具能夠讓你 快速找到特定元素的分布。 桶哥平時喜歡用這個工具來查找頁面的實效圖片，因為在火狐里，實效圖片不會像IE那樣顯示小紅叉。 安裝以后該插件將作為一個工具欄出現(xiàn)在瀏覽器中（如下圖）
3）Firebug Firebug是設(shè)計開發(fā)人員鐘愛火狐瀏覽器的一個重要原因，F(xiàn)irebug是火狐瀏覽器上一個集成式的強(qiáng)大調(diào)試環(huán)境，很多調(diào)試應(yīng)用插件都必須基于Firebug平臺，F(xiàn)irebug可以說是每一個Web設(shè)計開發(fā)人員必備的工具。 按照提示安裝到Firefox中后，在瀏覽器底部狀態(tài)欄就可以看到Firebug的圖標(biāo)了，點擊之后彈出firebug調(diào)試窗口，這里面除了Firebug自身的工具外，還可能有其他選擇性安裝的Firebug平臺插件的調(diào)試入口，比如Page Speed等。 4）Page Speed Google于今年4月確認(rèn)將網(wǎng)頁加載速度作為關(guān)鍵詞排名因素后，站長們對頁面性能更加重視了。其實無論是對SEO，還是對用戶體驗而言，提高頁面的加載速度都相當(dāng)重要。Google同時也提供了這款檢測頁面加載速度的工具。 Page Speed插件是基于Firebug平臺的火狐插件，它為每一個頁面進(jìn)行加載速度評分，不僅如此，更提供了優(yōu)化建議。因此，對改進(jìn)網(wǎng)頁加載性能的頁面優(yōu)化人員來說，這個工具是非常的必須。 Page Speed for firefox– Google官方插件安裝 安裝以后，Page Speed就會出現(xiàn)在Firebug窗口中，可以為瀏覽器的當(dāng)前頁面檢測加載性能，點擊Page Speed界面中的“Analyze Performance”按鈕執(zhí)行分析，Page Speed會為分析的頁面進(jìn)行評分，滿分是100分，評分自然是越高越好，但是不可能每個都是100分吧，所以優(yōu)化的目標(biāo)應(yīng)該是定在85分上下為佳。 5）X-Ray 如果能在瀏覽器里看到頁面內(nèi)容是被哪些HTML標(biāo)簽所包含，是不是很直觀呢？X-Ray就是這樣的一款工具。普通的一個網(wǎng)頁在前端設(shè)計師們眼中，不僅是單 純的文字圖片，而是各種網(wǎng)頁標(biāo)簽組成的結(jié)構(gòu)圖，但這些畫面純粹存在于設(shè)計師們的大腦中，X-Ray提供了一個讓它視覺化的方案，尤其是在瀏覽別人的網(wǎng)站時 尤其實用。 安裝以后，瀏覽器郵件菜單就多了一個“X-Ray”選項。這個工具的缺點是會讓頁面變得很亂，不過只要研究的頁面對象不是太多，還是能夠應(yīng)付得來的。 6）YSlow 這是一個比Google Page Speed更強(qiáng)大的網(wǎng)頁性能優(yōu)化工具，由Yahoo提供。YSlow也有頁面性能評分，有趣的是，YSlow評分接近的兩個頁面，Page Speed評分卻相去甚遠(yuǎn)，在實際的頁面優(yōu)化過程中，YSlow的評分并不作為重要參考，因為YSlow提供了其他更多有用的信息。它能夠統(tǒng)計一個網(wǎng)頁中 包含的所有元素，包括圖片文件、CSS文件、JS文件等，而且顯示了頁面的HTTP請求數(shù)，桶哥認(rèn)為這是頁面性能優(yōu)化最重要的指標(biāo)之一，所以根據(jù) YSlow提供的信息進(jìn)行針對性的優(yōu)化，能夠產(chǎn)生非常明顯的效果。 YSlow同樣是一個基于Firebug平臺的插件，需要在Firebug里運(yùn)行。 7）MeasureIt 在網(wǎng)頁設(shè)計中，精確度量頁面元素尺寸也是非常重要的一個操作，尤其是對像桶哥這樣的頁面設(shè)計“像素派”。并且很多時候我們在頁面調(diào)試的時候，也需要知道某 些元素的尺寸，以確定是否符合預(yù)留的空間。MeasureIt是一個很方便的頁面測量工具，只需要拖動鼠標(biāo)就能完成度量，是不是很直觀呢？ 8）Colorzilla 回憶一下我們是如何給網(wǎng)頁配色的？首先打開圖形軟件（比如Photoshop或者Fireworks等），導(dǎo)入頁面效果圖，使用軟件中的拾色器取得圖片上 某個位置的顏色，然后將顏色的RGB或者十六進(jìn)制值復(fù)制到Dreamweaver中，如果沒有效果圖的時候，我們還要先去截圖……額，這樣實在太浪費時間 了。 除了一些常用的顏色之外，很少有人能在看到顏色時立刻準(zhǔn)確地說出它的顏色值。不過別擔(dān)心，現(xiàn)在有一款火狐插件能夠幫你“說出來”了—— Colorzilla。Colorzilla能夠取得瀏覽器中任何一點的顏色值，并且表示為RGB和十六進(jìn)制值，可以非常方便地復(fù)制使用，在制作和修改頁 面時大大提高了我們的工作效率。 9）Simple Links Counter 在進(jìn)行網(wǎng)站維護(hù)時，鏈接的有效性檢測是一個很讓人頭疼的工作，頁面中繁多的鏈接著實讓維護(hù)難度倍增，可能一次不嚴(yán)謹(jǐn)?shù)呐坎檎姨鎿Q讓很多鏈接出錯，這個錯 誤是老板和用戶都無法容忍的，所以對這個問題，尤其要加倍小心。SLC（Simple Links Counter）能夠自動檢測頁面中的鏈接是否有效，你可能會說Dreamweaver里也有鏈接檢查，沒錯，DW自帶了鏈接檢查功能，不過DW的檢測僅 限于站內(nèi)鏈接，對站外鏈接是無能為力的。 除了檢測鏈接的有效性，SLC還能顯示頁面分別有多少站外鏈接，多少站內(nèi)鏈接，以及具體的鏈接URL地址，對網(wǎng)站不良外鏈檢查也是非常方便。 |
|
|
