[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

發表時間：

每次在電腦內寫個網頁，改個小地方就要重新整理，真的很費時。如果可以直接在存檔時，網頁就重新整理，是不是很棒呢？[F5]這個工具剛好就符合我們所需，在撰寫網頁時，順手按個存檔快捷鍵，瀏覽器上的網頁就會自動重新整理，是不是可以解省儲存→重新整理→看網頁這樣繁瑣的步驟呢？對於網頁設計師來講，這樣的工具可以有效的縮短網頁撰寫時間。

雖然說寫網頁跟寫軟體相比，寫網頁確實門檻比較低、比較簡單，也不需要使用compile(編譯器)編譯之後才可以看到成效，只要儲存檔案然後瀏覽器刷新，就可以看到成效了。但是網頁寫久了，其實會嫌棄這樣的方式不夠快，對於很多網頁設計師來講，每次都要多一個重新整理步驟真的很麻煩，有時候瀏覽器快取清理不乾淨，也會很Orz。

以香腸自己來說，每次對網站改個HTML、CSS的小部分，就會存檔然後網頁重刷看看效果如何？說真的，這樣的作業方式真的很沒有效率，步驟也很多。為了解決這樣的問題，大陸那邊有一個很神奇的工具，可以把存檔和重新整理這兩個步驟結合的軟體[F5]。這個軟體架構是採用Adobe AIR技術，目前軟體已經是可以開放免費下載，安裝後只要把檔案拖曳到框框內，根據下方的網址拜訪檔案位置，然後我們可以開著編輯器、瀏覽器，編寫網頁→存檔→即可看畫面。如果有雙螢幕，更可以左邊程式碼，右邊瀏覽器，完美搭配唷！

第1步  如果電腦內沒有安裝Adobe AIR，可以先下載安裝。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

第2步  如果電腦內本身已經有Adobe AIR，跟著軟體進行更新即可。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

第3步  接著來到F5官方網站，點擊﹝下載﹞，然後再點﹝點擊開始安裝[F5]﹞。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

第4步  安裝時，請直接點﹝開啟﹞。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

第5步  等待下載完成後，再點﹝安裝﹞。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

文章目錄
  1. 如何使用[F5]來加速網頁開發？
  2. 為什我的F5不能應用在PHP、WordPress或Discuz上？

如何使用[F5]來加速網頁開發？

當我們安裝好[F5]之後，請把想要修改的檔案直接拖曳到軟體框框之中，接著在框框中我們可以看到目前目錄有哪些檔案，最下方會有檔案的本機伺服器環境的網址，請利用該網址拜訪瀏覽器，通常網址都會是「http://127.0.0.1」，將網址丟到瀏覽器之後，我們可以看到網頁目錄(如果沒有index.htm的話)，點擊該檔案就可以開啟畫面預覽。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

這時我們可以把瀏覽器和網頁編輯器同時開啟，這個軟體不限制您所使用的開發軟體或者是瀏覽器，而且還跨平台的支援。所以香腸使用Windows搭配Google Chrome瀏覽器以及NotePad++編輯器進行網頁的撰寫，下方是網頁編輯器，上方是瀏覽器，當網頁編輯器寫好後，按下﹝Ctrl﹞+﹝S﹞時，神氣的事情發生了，網頁的內容被更改了？沒錯！別懷疑你的眼睛，因為這就是[F5]這軟體的應用，儲存即可預覽，讓你免去重新整理的麻煩，如果有雙螢幕，撰寫上應該會更方便。

[F5]撰寫HTML+CSS的好工具，免重新整理直接預覽網頁！

為什我的F5不能應用在PHP、WordPress或Discuz上？

一開始香腸也有相同的疑問，剛開始電腦開著TWMP的狀況下時，[F5]分配給我的網址是使用81port，所以就猜想是不是這樣和阿帕契沒對到，所以我先開F5並把檔案拖曳進去，然後再開阿帕契，結果依樣沒有效果。到了官方網站上一看，發現他都沒有提到Apache、IIS這類的伺服器，又加上檔案丟進去竟然可以自動變成本機電腦IP的路徑，所以應該是軟體目前不支援。

所以說，需要跑PHP的程式，或者是WordPress、Discuz等等，在本機上只要是非純網頁(HTML)的話，通通無法進行即時的預覽效果，這是比較可惜的部分，未來若可以支援，那就很棒了。另外，關於儲存檔案網頁就會自動重刷這部分，我發現到他似乎會有連線到「heapr.com」這部分，不知道這邊的作用是什麼？還頗令人好奇的…

在Google News上追蹤我們最新文章