[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的好工具,免重新整理直接預覽網頁!

如何使用[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的程式,或者是WordPressDiscuz等等,在本機上只要是非純網頁(HTML)的話,通通無法進行即時的預覽效果,這是比較可惜的部分,未來若可以支援,那就很棒了。另外,關於儲存檔案網頁就會自動重刷這部分,我發現到他似乎會有連線到「heapr.com」這部分,不知道這邊的作用是什麼?還頗令人好奇的…