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