Mozilla Thimble 在網頁上做網頁

做網頁的工具很多,舉凡以圖形介面為主的Dreamweaver或以文字編輯器為主的Brackets、Sublime Text…等等,但都必須要額外安裝才能使用,本篇文章介紹的Mozilla Thimble是一個線上編輯器,名符其實的是「在網頁上做網頁」、「網頁上的網頁編輯器」、「取之於網頁用之於網頁」,這樣的繞口令就別再說下去了,來看看他的介面吧!

進入官網之後,可以選擇點選「Start a project from scratch」來開始一個新的專案,或是透過下方已有的專案範本來編輯網頁。

Mozilla Thimble 網站截圖
Mozilla Thimble 網站截圖

而網頁編輯的介面如下,比較偏文字編輯器的介面。

Mozilla Thimble 編輯器介面
Mozilla Thimble 編輯器介面

當然在網頁編輯的部分就是利用大家所熟悉的HTML、CSS、javascript語法來進行,編輯器與Brackets的使用方式差不多(感覺有技術合作),例如:快速編輯是Ctrl+E;新增註解是Ctrl+/,基本的使用方式可以參考這篇文章,介面中的右側是Live Preview視窗,也可以直接切換成手機版面預覽,若是有需要在頁面中放入自己電腦裡面的檔案,可以利用左上角的「+」上傳,單檔容量限制為3MB。

比較特別的是若你有登入會員(免費),在網頁開發完成之後,可以透過右上角的Publish來公開自己的網頁,確定公開後會提供一個你專屬的網址,可以把網頁公開給大家瀏覽。

在Mozilla Thimble的網站上也有此款編輯器的教學:

不過大家要注意的是,目前此編輯器的網頁編輯功能僅有HTML、CSS、Javascript,不包含PHP、ASP…等動態網頁語法,希望未來真的可以進化到這種地步,那以後我們電腦裡面就不必安裝網頁設計軟體了!

You may also like...

3,717 Responses

  1. pricel_iapa表示:

    обзор
    8. Прицелы для карабина: особенности выбора и установки
    оптический прицел цена opticheskiy-pricel-odessa.co.ua .

  2. pricel_zmpa表示:

    рекомендации
    15. Легкие прицелы для дальнобойной стрельбы
    оптический прицел украина https://www.opticheskiy-pricel-odessa.co.ua .

  3. AnthonyPreep表示:

    prednisone tablets canada prednisone 21 pack prednisone 20mg nz

  4. Williamces表示:

    can you buy clomid without dr prescription: does clomid help erectile dysfunction – can you buy generic clomid online

  5. Danieliteds表示:

    prednisone over the counter: solumedrol to prednisone – prednisone best price

  6. BrianGub表示:

    http://clomidst.pro/# clomid price

  7. BrianGub表示:

    https://clomidst.pro/# how can i get cheap clomid for sale

  8. Williamces表示:

    prednisone 60 mg price: prednisone dosage for poison ivy – prednisone 5 mg tablet

  9. IrwinGlync表示:

    buying cheap clomid without insurance: online doctor to prescribe clomid – can you get cheap clomid without rx

  10. air_rdsn表示:

    air cargo charter broker https://www.aircgc-lux.com .

  11. Waynerat表示:

    prednisone 20mg online: 100 mg prednisone daily – buy prednisone canada

  12. BrianGub表示:

    http://amoxilst.pro/# amoxicillin 200 mg tablet

  13. Williamces表示:

    generic clomid without prescription: clomid ovulation calculator – cost cheap clomid price

  14. BrianGub表示:

    https://clomidst.pro/# can you buy cheap clomid no prescription

  15. AnthonyPreep表示:

    prednisone 50 mg price 10 mg prednisone prednisone over the counter

  16. Danieliteds表示:

    buy prednisone canada: prednisone online india – prednisone purchase online

  17. Waynerat表示:

    prednisone prices: how to purchase prednisone online – prednisone 1 mg daily

  18. IrwinGlync表示:

    buy amoxicillin without prescription: amoxicillin dose for strep throat – order amoxicillin online

  19. AnthonyPreep表示:

    generic amoxicillin online amoxicillin tablet 500mg purchase amoxicillin online

  20. BrianGub表示:

    http://prednisonest.pro/# prednisone 20 mg tablets coupon

  21. Williamces表示:

    where to get clomid without dr prescription: clomiphene vs clomid – cheap clomid without prescription

  22. BrianGub表示:

    http://prednisonest.pro/# prednisone pills cost

  23. Danieliteds表示:

    amoxicillin no prescipion: cephalexin vs amoxicillin – amoxicillin 250 mg capsule

  24. Продвижение сайта на международном рынке: особенности и трудности
    17
    услуги сео https://seo-prodvizhenie-sayta.co.ua/ .

  25. Увеличение конверсии на сайте: как добиться результата
    9
    seo продвижение http://seo-prodvizhenie-sayta.co.ua/ .

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。