我們將在本文中介紹一些關(guān)于頁面構(gòu)建常用的一些小工具,大部分是基于firefox的插件,通過這些小工具可以讓我們在頁面構(gòu)建中事半功倍.

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、潛江網(wǎng)站維護、網(wǎng)站推廣。

一、頁面構(gòu)建必備工具—Firebug

相信每個頁面構(gòu)建的同學(xué)都有這個工具吧?如果沒有的話，你趕緊安裝(點擊此處安裝),Firebug就像它的名字一樣，幫你找到蟲子，燒掉它!同時有一些firefox的頁面調(diào)試工具也是基于Firebug的，比如Yslow,CSSUsage

二、網(wǎng)頁測量利器–MeasureIt

當我們拿到一個設(shè)計稿,寫完基本的結(jié)構(gòu)后,我們的測量工具可能就開始了,那些間距\高度\寬度\對齊,就需要一把好尺子來協(xié)助我們了,這里我像大家推薦MeasureItFirefox點擊安裝,通過這把尺子,我們就能很方便的進行一些測量對齊工作,但是這個工具的缺陷是由于那個尺子的邊框,我們不容易達到像素級的標準,那我們就需要下面將要介紹的工具Pixelperfect

三、實時顏色選取工具–Colorzilla

將版式調(diào)整好后的任務(wù)應(yīng)該就是處理顏色方面的問題，通常我們會將其放到ps等圖片編輯軟件中來查看相應(yīng)的色值，如果有了Colorzilla，我們就能更直觀的使用顏色，特別是有時候我們用文本編輯軟件編寫CSS色值的時候，我們甚至可以將設(shè)計稿直接拖到瀏覽器里面直接去想要位置的顏色,而且支持RGB，RGBa，HSL，十六進制，可以直接復(fù)制。同時這個軟件還提供了色板和漸變生成工具。點擊此處立刻體驗

四、檢查網(wǎng)頁的相關(guān)信息–WebDeveloper

一個頁面相關(guān)信息的集大成者，任何關(guān)于網(wǎng)頁前端的信息你都能從里面找到，我們可以很方便的查看網(wǎng)頁的大綱、無CSS，查看DOM節(jié)點等。只要你想，基本都有了。

五、讓你的CSS更瘦一些—CSSusage

隨著產(chǎn)品經(jīng)理一遍遍的調(diào)整產(chǎn)品，你是不是也感覺你的css文件慢慢變胖，但是又不敢輕易刪掉一些樣式，因為你不知道它們是不是被用到過，那就讓下面的CSSUsage來幫你。

通過檢查class名稱使用情況，來查看頁面中的CSS信息，從而方便開發(fā)者優(yōu)化CSS樣式表。

可顯示4類信息

Seencss中當頁所使用的class

Seenbefore此class曾經(jīng)出現(xiàn)在此網(wǎng)站的其他網(wǎng)頁，當然是在已經(jīng)瀏覽過其他網(wǎng)頁的情況下

Unseencss中的class，此頁面并未使用過

:hover偽類信息

我們以前曾稍微深入的探討,請移步至CSS減肥工具—CSSUsage

六、網(wǎng)頁評級工具–Yslow

Yslow是基于firebug的一個網(wǎng)頁評級工具,它根據(jù)Yahoo用戶體驗部門訂制的34條可能對網(wǎng)頁前段表現(xiàn)產(chǎn)生影響的規(guī)則,這些規(guī)則中有23條可以通過這個工具來測試.即使我們不使用這個工具,了解這些規(guī)則也是很不錯的.

1、減少Http請求

2、使用CDN

3、避免使用空SRC或者href

4、AddanExpiresoraCache-ControlHeader

5、壓縮組件

6、將樣式文件放在頁面的上面

7、將腳本文件放在頁面的下面

8、禁止使用樣式表達式

9、使用外鏈的css和js文件

10、減少DNS查找

11、減小CSS和JS文件

12、避免使用重定向

13、刪除重復(fù)內(nèi)容

14、ConfigureETags

15、是Ajax可以緩存

16、使用Get方法來處理Ajax請求UseGETforAJAXRequests

17、減少DOM節(jié)點的數(shù)量

18、不要有404頁面

19、減少Cookie文件的大小

20、UseCookie-FreeDomainsforComponents

21、避免使用濾鏡

22、不要在HTML中重定義文件的大小

23、favicon.ico小而且可以被緩存

以上內(nèi)容由創(chuàng)新互聯(lián)（成都網(wǎng)站建設(shè)）為您提供,更多精彩內(nèi)容：https://www.cdcxhl.com/