2017年2月28日 星期二

如何在個人電腦上執行 HTML5 應用程式


    原本與 HTML 有關的相關應用,我都是放在 DropBox 這個很方便的網路空間中,但在 2016年末,它取消了原本提供的網頁執行的功能,於是一些作品範例原本可以在瀏覽器中直接看到執行結果,現在都沒辦法看到了,所以在此我寫了建議的方法,希望大家可以簡單地在自己的電腦上執行 HTML 的相關應用。

 點我打開試用網頁


    首先要說明的是,HTML 是一種網頁語言,它正常應該在網站中被下載與執行,但基於開發階段或是個人使用的用途,多數人都不想為此去購買或架設一個對外開放的網站,於是就有一些變通的方法,例如:

  1. 在自己的電腦安裝網站伺服軟體(Apache 等)、多人連線伺服軟體(SmartFoxServer 等),這些伺服軟體都有能力在個人電腦架設一個簡單網站,優點是這類軟體比較能模擬出完整的網站功能,但難處就是操作上對新手比較不容易,使用者必須要知道放置網頁檔案的資料夾位置,才有辦法讓網站順利動起來。

  2. 利用 HTML5 的開發軟體 Brackets,這個軟體的主要用途是作為 HTML5 應用程式的開發工具,但它也提供一個簡單的 HTML5 應用的測試環境,功能雖然比不上一個完整的網站,但對於只想在個人電腦執行單純的 HTML5 應用來說,已是綽綽有餘。

Brackets 下載與安裝:
    請到官網 ( http://brackets.io/ ),選擇最新版本,安裝過程 (應該) 不會有太大的難度。


Brackets 執行:
    點擊 Brackets 的圖示就可以進入它的運作環境中,基本上速度很快,如果之前有開啟過 HTML5 的資料夾,下次進入時它也會同時開啟相同的資料夾(畫面左側),頗方便。



HTML5 載入與執行:
    這裡用 幸運轉盤 為例說明,將幸運轉盤的檔案下載之後,解壓縮得到一個資料夾 LuckyWheel。

    在 Brackets 中,用左上角的 File \ Open Folder 找到上一個步驟所解壓縮的 LuckyWheel 資料夾,用滑鼠點一下該資料夾,該資料夾名稱反白之後,按下對話視窗右下方的 [選擇資料夾]。


    畫面左上角會出現 LuckWheel 的資料夾名稱,而畫面左邊會出現 LuckWheel 資料夾的檔案列表,此時便可以確定 LuckyWheel 已經載入。

    接著只要點擊 Brackets 視窗右上角的閃電符號,Brackets 就會啟動 Chrome 瀏覽器,並顯示 幸運轉盤的執行內容。










沒有留言:

張貼留言