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...

26,002 Responses

  1. 5 Killer Quora Answers On Glass Doctor Near Me glass doctor Near me
    (https://securityholes.science)

  2. DichaelDax表示:

    Wow that was odd. I just wrote an incredibly long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!
    https://xn—–7kcgiiy1bf2ancu8h.xn--p1ai

  3. What Is Asbestos Attorney Lawyer Mesothelioma And Why Is Everyone Talking About It?

    Mesothelioma lawyers (https://Trade-Britanica.trade/)

  4. Waltererync表示:

    SemaPharm24: SemaPharm24 – Sema Pharm 24

  5. AlbertNer表示:

    http://kamapharm.com/# Kamagra Oral Jelly
    prednisone 40 mg tablet

  6. пропуск для грузового транспорта в москву пропуск для грузового транспорта в москву .

  7. DanielZek表示:

    https://cytpharm.shop/# CytPharm
    sildenafil oral jelly 100mg kamagra

  8. Brianlit表示:

    CytPharm buy cytotec over the counter buy cytotec online

  9. AlbertNer表示:

    http://kamapharm.com/# Kamagra Oral Jelly
    prednisone 20mg prices

  10. Waltererync表示:

    dapoxetine online: buy priligy – cheap priligy

  11. DanielZek表示:

    http://predpharm.com/# PredPharm
    Kamagra tablets

  12. LarryLog表示:

    Kamagra 100mg: Kama Pharm – Kamagra 100mg price

  13. 9 Lessons Your Parents Teach You About What Causes Mesothelioma Other Than Asbestos
    Mesothelioma Lawyers

  14. Guide To Upvc Doors Repair: The Intermediate Guide Towards Upvc Doors Repair
    Upvc Doors repair

  15. DichaelDax表示:

    Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!
    https://xn--b1adgjdbhc1aebbqccldhhe2a7a.xn--p1ai/

  16. LarryLog表示:

    PredPharm: Pred Pharm – PredPharm

  17. Brianlit表示:

    Priligy tablets dapoxetine price dap pharm

  18. AlbertNer表示:

    http://dappharm.com/# dapoxetine price
    order prednisone 100g online without prescription

  19. yerliakor.Com表示:

    Best ADHD Medication For Adults With Anxiety Tools To
    Ease Your Daily Lifethe One Best ADHD Medication For Adults With Anxiety Trick Every Person Should
    Be Able To best Adhd medication for adults with anxiety – yerliakor.Com,

  20. Waltererync表示:

    cheap kamagra: Kamagra 100mg – Kama Pharm

  21. AlbertNer表示:

    http://cytpharm.com/# CytPharm
    prednisone over the counter cost

  22. пропуск в москву на грузовой автомобиль [url=urilin.ru ]пропуск в москву на грузовой автомобиль[/url] .

  23. AlbertNer表示:

    https://predpharm.com/# PredPharm
    prednisone canada pharmacy

  24. DanielZek表示:

    http://dappharm.com/# Priligy tablets
    Kamagra Oral Jelly

  25. пропуск для грузового транспорта в москву пропуск для грузового транспорта в москву .

  26. Waltererync表示:

    priligy: dap pharm – cheap priligy

  27. LarryLog表示:

    cytotec buy online usa: Cyt Pharm – cytotec buy online usa

  28. DanielZek表示:

    http://cytpharm.com/# buy cytotec pills
    Kamagra 100mg price

  29. AlbertNer表示:

    http://predpharm.com/# buy prednisone from canada
    prednisone

  30. AlbertNer表示:

    http://dappharm.com/# cheap priligy
    prednisone oral

發佈留言

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