網頁設計

關於網頁設計的技術或相關資訊分享

即時HTML/CSS預覽工具─Firebug

  今天來介紹一下Firefox的好用plugin-Firebug,他有好用的HTML/CSS的即時預覽功能,當你在設計網頁的時候,可以利用他直接修改參數,馬上在Firefox中看到修改後的結果,不用每次都要存檔、上傳,才能看到修改後的結果,可以省下大量的時間,準備好要安裝這個好用的工具了嗎?打開你的Firefox,點選下面的直接安裝吧!

 

Firebug的相關資訊:

 安裝完了以後,Firefox右下角工作列就會出現一隻蟑螂!用滑鼠點他,就會跑上來一個區塊,像下面這樣。

 

CSS realtime editor - firebug overview

 

  點一下蟑螂右邊的按鈕,再用滑鼠去指想要看的東西,會用藍色框框選起來,這時候點一下你要看的元件,他就會在下面顯示出這個元件的原始碼,包含HTML架構還有套用的CSS,

 

 firebug - how to start

 

CSS realtime editor - Firebug overview

 

  左邊的部分是HTML的部分,右邊是套用的CSS樣式表,HTML的部分都是一層一層的,你可以點選展開或是收起,來瞭解網頁的架構,在HTML的地方按右鍵,就可以編輯、複製HTML、刪除節點等功能,做了編輯的話網頁上可以即時看到效果。

 

Firebug - more useful function

 

  如果有套用CSS樣式的元件,在右邊的分頁會顯示他套用的樣式,在下面的部分點兩下要修改的樣示,修改完屬性後,上面的頁面會即時的顯示出修改後的效果,就像下面兩張圖,改了顏色代碼,上面畫面的顏色就馬上跟著改變了,如果想先暫時停用這個樣式,在那行的左邊按一下,會出現一個禁止的符號,就可以停止套用這個樣式,當然也是即時可以看到改變,如果想要新增某個屬性的話,就用滑鼠在右邊空白的地方點兩下,就可以新增屬性,在輸入的時候他還會貼心的幫你補完指令,這對每次都記錯一兩個字母的人真是一大福音!(在說你自己吧....)。

 

Firebug - change color demo

 

Firebug - change color example

 

  滑鼠停留在CSS屬性指定的顏色,他還會跳出一個小視窗,顯示這個色碼表示的顏色是哪種顏色。

 

Firebug - show color demo

 

  停在圖片的話,則會顯示出圖片,還順便告訴你這圖片是多大的,讓你方便去修改其他的屬性值。

 

Firebug - show background images demo

 

  在CSS分頁裡面屬性的繼承也都表示得很清楚,被刪除線劃掉的,表示這個屬性沒有被繼承到,因此改這個屬性不會對畫面造成影響,可以很明確的知道究竟影響畫面的是哪一行屬性造成的

 

CSS realtime editor - Firebug

 

  其他還有很多實用的功能,例如在載入網頁的時候,可以看出載入這個網頁需要多久時間,是哪個檔案花了比較久的時間等,可以用來找出網頁開啟速度緩慢的元兇在哪邊!不用再猜測了。當你修改完後,因為只是讓你檢視效果如何,因此你覺得這樣滿意後,還是要把在伺服器上的CSS樣式表修改完成,才會真的套用到網頁上,可別改完然後很高興的按F5重新整哩,然後就......,不過可以減少改一次屬性要上傳後才能夠看到改變的困擾了,你還在改完CSS存檔->重新整理->看效果->不滿意->再改CSS存檔->再重新整理->看效果->不滿意->再改->再看->再改->再看的迴圈裡嗎?趕快裝這個可以節省不少時間!

 

Please enable the javascript to submit this form