Zen Coding – 快速生成HTML與CSS的好幫手

Zen Coding是一款支援多種文字編輯軟體的外掛,可以讓HTML開發人員快速生成HTML和CSS

例如我今天想要產生一組id為test的ul清單,並包含3個li標籤,每個元素裡面要放一個span標籤且該span標籤的class都是test2

那麼可以在裝好Zen Coding的文字編輯器輸入

按下tab鍵之後就會自動產生這樣的HTML代碼

非常簡單吧!這種開發好處是可以節省大量的HTML撰寫時間,不過對於習慣自己撰寫HTML的開發人員來說會需要一段適應期,從想到就寫變成想好再寫,不過當習慣之後就會有一種回不去的感覺了XD

至於CSS產生我就沒有特別研究了,因為我大部分時間都在Visual Studio 2013中開發,對於CSS的auto complete支援非常完整,Zen Coding相對就不是那麼重要了。

Zen Coding的語法其實非常簡單,只是基本HTML思維加一點轉換而已,相關語法可以參考以下網頁:

Zen Coding官網: https://code.google.com/p/zen-coding/

基本語法說明(非常清楚易懂): http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Zen Coding Cheat Sheet: https://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf

Placehold.It 做網頁雛型時暫放圖片的小工具

在設計前端網頁的雛型時,往往會預留一些空間是用來置放圖片的,通常都會規畫空間的大小,然後塞個暫存的圖片進去,Placehold.It就是一個省時間的工具。

在設計時只需要加入類似以下的code

就能立刻顯示一張像下圖一樣指定大小的圖片

除了指定大小外,也可以指定圖片格式、文字(不支援中文)、顏色等等,非常的方便

Placehold.It網站上說明的都很詳細了,有興趣的可以參考看看。

另外還有一個分流站Quickimage.It可以交替使用。

[Jquery.Unobtrusive]動態增加驗證資訊

在使用jquery.unobtrusive時,可以在html表單欄位標籤中加入特殊屬性,讓表單在送出時自動驗證欄位而不必額外撰寫javascript就可以達到client端的驗證。

最近遇到一種狀況是,當某個下拉選單選到1時,另一欄位須為必填,否則非必填,原本是這樣寫

不過當表單送出時,依然沒有正確檢查,上網查了一下,必須讓validator重新處理過相關欄位,才會正常檢查

如此就能正常運作了。

用Webnode架網站超簡單

之前介紹過一篇Weebly 自己做網頁超簡單後,好風又發現了另外一個網站Webnode,比較不同的是,Webnode提供繁體中文版,操作上雖然跟Weebly不太一樣,但是都很容易上手,也是完全免費,提供100MB空間以及每月1GB的流量,當然也可以選擇付費獲取更好的服務。

這試用Webnode做出來的網站,參考看看吧http://wstudio.webnode.tw/

Weebly 自己做網頁超簡單

如果你不懂HTML,不會用Dreamweaver這些不雜的網頁設計軟體,那你一定要考慮用Weebly,用Weebly作網頁很簡單,只要會拖拉元件就可以了,內建多種樣版挑選,也可以上傳自訂的圖形,還有屬不清的元件像是Google AdSence, Youtube, 聯絡表單等等,真的是非常方便^^

這是我用Weebly做出來的網頁,是不是很精美呢? http://wtest.weebly.com/index.html

這是Weebly製作網頁的樣子

文章分類

全部展開 | 全部收合