網頁設計教學系列-用Editor Lite快速產生HTML原始碼!

有時候我們做網頁設計,最麻煩的莫過於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來知道別人如何設計網頁

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>