有時候我們做網頁設計,最麻煩的莫過於HTML原始碼的部分,雖然我相信高手應該相當的多,打這些原始碼產生速度都相當的快,不過如果有好的工具可以使用,用了可以增加效率,那就可以用用看,這邊介紹的是一個CHROME擴充功能,可以幫助大家在升成HTML原始碼更加快速,一起來看看!

Editor Lite

  • CHROME擴充功能名稱:Editor Lite
  • 語言:英文
  • 版本:0.9.7
  • 下載位置:按這裡

第一步 先來到所在位置,我們先按右上方加到CHROME,

第二步 接著右上方就會產生小圖示,按下去後,就會出現一些編輯畫面,這邊我是按一個"new tab"的選項,所以畫面會變大,下一步我們按一個板手的圖案,

第三步 就會出現class name的空格,這時輸入你想要的名稱,我輸入"測試用"方便大家了解,

第四步 就會快速出現<div>的區塊了,是不是很方便呢,如果有時我們需要div,用這個編輯很快就會出現了,如果按下面圖背景的圖示,

第五步 就會出現背景顏色,而且margin語法也幫你寫好了,接著我們按一個齒輪的選項,

最後 就會發現整個會出現HTML5整個架構原始碼都會出來喔,以後要寫HTML5網頁,可以先用這個產生一下,是不是很方便呢??趕快來用看看這個好用的功能吧!

 

熱門相關文章

CHROME擴充功能好用系列-用FIREBUGLITE來知道別人如何設計網頁
DOUBLE冠因為最近去忙公事、所以最近有幾天沒有發文,跟大家 說聲抱歉,這邊今天要分享的文章是關於設計網頁這部分,有時候 我們自己去摸索網頁、設計CSS等等,會發現有時候會花很多時間 在這上面,如果有一個好用的工具可以幫你了解別人怎麼設計網頁 ,如何運用CSS,我想設計網頁會更加的得心應手! CHROME瀏覽器 瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡 Firebug Lite for Google Chrome 擴充功能名稱:Firebug Lite for Google Chrome 語言:英文 版本:1.4 下載位置:按這裡 我想FIREBUG這款工具,應該是相當網頁設計的人在用,不過因為本身愛用CHROEM的關係, 所以去找了一款可以用的工具,就像現在看到的FIREBUGLITE, 第一步,我們先來到擴充功能所在位置、並且按下安裝到CHROME, 第二步 我拿自己網站來做測試,然後我按下很像昆蟲的圖示,就會出現一個空白的畫面, 這邊需要按下INSPECT,然後我選擇DOUBLE就是要升級的LOGO做測試, 第三步 ...
繼續閱讀
CHROME擴充功能好用系列-用FIREBUGLITE來知道別人如何設計網頁

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本