網頁設計-蓋婭科技有限公司 -- 【 網頁設計 】即時HTML/CSS預覽工具─Firebug
正在加載......
X
 
會員帳號 :
會員密碼 :
忘記密碼    加入會員

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR

網頁設計 - 即時HTML/CSS預覽工具─Firebug

【 網頁設計 】即時HTML/CSS預覽工具─Firebug

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


Firebug的相關資訊:


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


CSS realtime editor - firebugCSS realtime editor - Firebug


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


CSS realtime editor - firebug


CSS realtime editor - Firebug


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


CSS realtime editor - Firebug


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


CSS realtime editor - Firebug


CSS realtime editor - Firebug


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


CSS realtime editor - Firebug


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


CSS realtime editor - Firebug


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


CSS realtime editor - Firebug


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


: NT 0
   

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR


站內搜尋

Loading

協力廠商

最後更新 : 01/19/2016

gotop