周季賢 精誠資訊 恆逸教育訓練中心 資深講師
當我們在設計網頁時，經常需要輸入各式各樣的Html標籤(如<div>、<ul>與<a>等)，Visual Studio 2013的網頁編輯器其實有內建簡易的標籤片段產生功能，但是還是不足以應付大量或複雜Html標籤輸入時的需求，在這裡跟各位介紹一個好幫手：「ZenCoding」。
「ZenCoding」是一種語法，它能夠使用簡短的語意來快速輸入大量且複雜的Html標籤，而該語法需要安裝Web Essentials 2013，開啟Visual Studio 2013開發工具，從「Tools」-「Extensions and Updates」，開啟「Extensions and Updates」對話盒，然後選取左方「Online」項目，在右上方的文字方塊中輸入一些查詢關鍵字，找尋到Web Essentials 2013，然後點選「Download」按鈕下載並進行安裝
而安裝完成之後就必須重開，重開之後就會生效，也就是可以使用「ZenCoding」語法來開發網頁了。接著我們來介紹「ZenCoding」語法。「ZenCoding」語法基本上分為：
- Element運算子
該運算子能夠提供Html Elememt的建立，如使用「>」運算子，就能夠產生巢狀式的Html標籤，例如撰寫以下標籤：
完成後按下鍵盤Tab鍵，「ZenCoding」就能夠為您產生以下的標籤：
- Attribute運算子
Attribute運算子能夠在產生Element的同時，順便替該Html Element加入Attribute，例如「#」運算子，就能夠產生ID屬性，如下：
完成後按下鍵盤Tab鍵，「ZenCoding」就能夠為您產生以下的標籤：
- 數量運算子
數量運算子能夠在產生Html Element時，順便指定該Html Element產生的數量，例如「*」運算子搭配數字，就能產生符合該數字數量的Html Element，如下：
完成後按下鍵盤Tab鍵，「ZenCoding」就能夠為您產生以下的標籤：
- 成員運算子
成員運算子能夠在產生Html Element的同時，順便指定該Html Element產生的內容，例如「lorem」運算子，就能夠在產生Html Element時，順便為該Html Element加入一段亂數假文，而「lorem」運算子後如果加入數字，便可以決定產生的亂數假文的字數，如下：
完成後按下鍵盤Tab鍵，「ZenCoding」就能夠為您三個字數的亂數假文，並且放置在每一個<li>清單標籤內：
沒有留言:
張貼留言