Fire.app 機能應用教學

此份教學應用許多 Fire.app 機能來建立一個網站原型,建議初學者可以參考說明並實際操作,藉此了解各機能的使用時機和應用方式。

觀看範例及準備實作

請先下載 參考範例檔案包
此資料夾內容為依照教學步驟操作後使用 Build project 輸出的檔案,請將檔案解壓縮後用 Fire.app Watch 此檔案資料夾並在瀏覽器中開啟 http://127.0.0.1:24681/index.html 瀏覽頁面以了解網站結構。

註:雖然此資料夾中的 HTML 檔案皆為靜態檔案,但由於檔案中所使用的連結為絕對連結,需要在 server 環境下才能正確取得檔案位置故使用 Fire.app 的 Web Server 功能。若要輸出相對連結的檔案可參考 Build Project 部分的說明。

此網站的頁面結構如下,分別是 Home(/index.html)、 Features 列表頁(/features/index.html)、 Features 內容頁(/features/detail.html)、 Documents(/documents.html)、 Screenshots(/screenshots.html)。

在此範例網站中可以看見各個頁面中有許多共通或重複的元件,包含內容、區塊或程式碼,這些共通的部份便是此教學中要使用 Fire.app 處理的主要目標。

熟悉網站結構後便可準備實作要使用的檔案,請下載 教材檔案包

註:此教材檔案包和前面下載的參考範例檔案包並不相同,為此份教學中要用來操作的專案基礎,請特別注意。

解壓縮教材檔案包後將 Fire.app Watch 的目標變更為此資料夾。此份教學接下來的步驟如下:

若暫時不需要了解進階教學的內容,也可略過進階部分至最後的 Build Project