WIS匯智網路行銷講堂「一次徹底學會利用.TW與關鍵字廣告以及社群平台」台北免費研討會

想要了解如何利用 .TW域名與關鍵字廣告以及社群平台，輕鬆提升網路品牌力、銷售力、競爭力嗎？免費研討會來囉！2010/12/15(星期三)下午2點開始，一次講授三個重點，第3講的主講人「丟細哇本人啦！」，將會講述到站長即將出版新書裡的幾項重點內容分享，實機展示教您如何用部落格也能做到SEO自然搜尋排序優化的流程，以及簡易整合目前正夯的Facebook與噗浪進行免費資源的網路行銷，讓您在網路上也能低成本以小博大，目前本研討會已經正式開放線上報名，歡迎有興趣想要多了解網路最新動態的朋友們前往報名參加。

---

活動資訊：

• 活動時間：2010/12/15（星期三）PM13:30~17:00
• 活動地點：文化大學推廣教育部 9F 頂級教室（建國本部）
• 活動地址：台北市建國南路二段 231 號 看地圖
• 活動諮詢：02-2718-7200 #259 賴小姐
• 活動費用：匯智網路行銷講堂為免費課程

---

活動流程：

---

線上報名：
http://promote.wis.com.tw/201012/web/

---

主辦單位：

讓Blogger個別文章可以使用獨立的Facebook讚按鈕

若我們想要加強Blogger文章與Facebook的使用者關連性，讓有使用並登入Facebook的網友，來到您的Blogger後，可以對於個別欣賞的文章也像在Facebook塗鴉牆或網誌上給個「讚」，這就需要使用本次介紹的功能來達成了！


使用滑鼠左鍵選取底下程式碼後，按下滑鼠右鍵，選擇「複製」。

<script>

document.write(&#39;&lt;iframe src=&quot;https://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);

</script>

到Blogger後台的「設計＞修改HTML＞修改範本」裡，勾選「展開小裝置範本」，找到下述程式

<b:include data='post' name='post'/>

在此段程式的後面，輸入<br />這個強迫斷行的HTML標籤，並按下滑鼠右鍵，選擇「貼上」剛剛複製的程式碼，完成後請按下「儲存範本」鈕。

接著就是到前台去觀看確認是否正確無誤囉！

Twitter簡介

Twitter(非官方中文名稱：推特)是一個社交網路及微網誌服務，使用者可以經由SMS(簡訊)、即時通訊、電郵、Twitter網站或其它第三方廠商整合支援的服務，輸入最多140字的文字進行更新與交流，而「Twitter」這個單字，原意是「很弱的脈衝訊號」與「小鳥的啁啾」，這正符合這個服務的大致設計思路，也因此得名。

目前Twitter全球註冊會員已宣稱超過1億人次，是國外非常火紅的微網誌代表性服務，如果您希望做國外市場的網路行銷，Twitter可以說是很重要的網路工具之一，但在台灣可能因為沒有中文化介面(筆者本書截稿為止，目前只有英文版，不過Twitter裡可輸入和顯示中文字)，所以使用人數較少，但隨著Twitter已經已經宣布重視中文市場，已經開始研發設計中文版介面，筆者認為Twitter在台灣地區的市場會有突破性的成長。

想要知道台灣有哪些網路名人也有使用Twitter ，可以參考這個網站的統計http://twitaholic.com/top100/followers/bylocation/taiwan/ ，這份清單是直接從Twitter以地區為Taiwan為索引條件顯示出來的名單。

您可以參考這個影片，可以有助於您快速的了解什麼是Twitter：

 

 

影片網址超連結

推薦好用的智慧型手機Samsung GALAXY Note2

輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文輸入介紹圖文

PayPal線上付款測試

ezPay簡單付線上付款測試

內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述內容敘述

購買

部落格版面新改版囉！

最近在寫一本部落格+Facebook +微網誌主題的書，因為要介紹新功能，所以部落格也趁此做版面第一次改版了，主要是純利用範本設計工具來調整版面，再做上方視覺圖與背景圖就完成囉！新版面應該還不錯吧～！

開創新職力，學習新技術的喜悅

這是一篇因應台科大推廣教育中心網站的焦點話題，所邀稿的宣傳文章，雖然是一篇對課程的置入性行銷文，不過筆者真的是覺得在資訊業要維持這樣的心態才能長久與快樂，也轉貼原文如下....

很多人往往都稱羨走資訊的這一行，覺得好像專業高級，且有一定的薪資水平，但想轉入資訊業卻因非相關科系而遙不可及，其實走資訊這行是很辛苦的，更新變動非常快速，要能夠在這一行待得久，要能常保持有「學習新技術的喜悅」心態才行，若無時常學習新東西的動力，除了會失去競爭力淪為廉價人力之外，即使能勉強待著也是會過很痛苦的，最好要時時警覺提醒自己，要未雨稠繆搶在前頭保持競爭力甚至拉大領先距離，能學些新技術的技能在身，多投資自己總是不會錯的！

現在出現的新軟體與技術不勝枚舉，其中特別推薦由台科大推廣教育中心與台灣微軟共同設計的系列課程，可以從入門開始學習起。課程一「微軟 Expression Studio 很簡單」，適合網頁設計初學者、以及欲學習微軟多媒體互動設計工具者，讓學員一次上手，學會 Microsoft Expression Web、Design、Encoder、Blend、Deep Zoom Composer。課程二「網頁程式設計入門」，可以讓學員使用 Microsoft Expression Web，學習正確的網頁設計技術與觀念，打好網頁設計基礎，製作出符合標準的微軟網頁設計技術。

想要了解什麼是Expression Studio與Silverlight的技術概觀，可以到台灣微軟Expression官網查看。舉個簡單的例子來說，您可以到中華民國總統府網站上體驗一下，可以看到歷任總統與影音頻道就是使用Microsoft的Silverlight最新技術來製作的。

本系列課程與台灣微軟原廠合作，由台灣微軟研討會講師親自講授品質有保障，使用最新版Expression Studio系列軟體教學，讓您同步跟上微軟的設計新體驗，符合結訓資格後證書將會加蓋台灣微軟官章以資證明，想要有學習微軟網頁設計新技術的喜悅嗎？千萬不可錯過囉！

Facebook建立粉絲專頁與申請個人化網址

Facebook近來雖然火紅，但如果您想要做網路行銷，但卻又擔心個人隱私不願意使用Facebook個人頁面，其實有個更好的選擇，就是建立粉絲專頁，瀏覽者不需要跟您成為朋友，一樣可以達到宣傳行銷的效果，這樣您以及瀏覽者雙方都不用擔心資料被看光光(雖然個人頁面可以調整很多隱私設定，但畢竟麻煩以及可能會有疏漏)，且您還可以利用這個管道來經營會員，也可以觀看到相關行銷數據分析，這些都是個人頁面所沒辦法提供的，簡述如下：

申請 粉絲專頁 與 個人化 網址 ：

申請建立 Facebook 粉絲專頁的網址請參考：http://www.facebook.com/pages/create.php

建立完成後，建議您再申請粉絲專頁用戶名個人化網址：http://www.facebook.com/username，這個網址並非是完全獨立的專屬網址，只是您的粉絲專頁 網址會變成 http://www.facebook.com/您申請通過的名稱 ，不會後面跟著無意義的編號，這樣會有助於別人記憶與做行銷，建議您有興趣的話可以早些申請，以免好名稱都被別人申請走啦！

雖然每個人都可以開設粉絲專頁，但要設定個人化網址必須達到一個條件：「粉絲至少達25人」，我想這個門檻限制的用意，大概是避免被太浮濫申請，造成名稱被佔用的緣故，所以努力號招您週遭的親友來幫忙達成申請資格吧！

 

Facebook 粉絲專頁 精確行銷數據分析：

下圖是使用粉絲專頁後才會有的行銷數據分析，還蠻詳盡易於觀看的，自然對於您的行銷分析與策略調整會有不錯的幫助，還有提供將數據匯出的功能，之後您可以用Excel之類的軟體開啟，自行做其它條件篩選分析(例如樞紐分析表之類的)。


還可以看到粉絲裡的男女族群比例、互動的情況等數據分析，真是超棒的！
 

歡迎加入成為我的粉絲呦：

筆者的粉絲專頁 http://www.facebook.com/webokfans ，若不嫌棄的的話，您可以去瀏覽與加入我的粉絲呦！您必須加入與登入會員，然後點選上面的「讚」圖示就可以了，之後您登入Facebook後，就可以看到我發佈在粉絲專頁的消息。

看過關於介紹，您是不是也很心動了呢？趕快去申請一個有個人化網址的粉絲專頁吧！募集您的粉絲彙集成力量，持續朝向Facebook網路行銷之路努力邁進吧！

線上刷卡的特約商店與代收代付差異性

最近筆者遇到網友以及在教課上學員有關切提問到金流議題，有關於線上刷卡的特約商店與代收代付模式的差異性問題，所以簡單做個差異比較表供大家參考...

	線上刷卡-特約商店模式	線上刷卡-代收代付模式
優缺點說明：	消費者隔月收到信用卡帳單時，上面消費的單位會寫您公司名稱，比較清楚明確。 銀行是直接撥款到您公司帳戶，除了拿到款比較快之外，也比較安全(銀行比較不會有營運風險，作業也更嚴謹)。 申請門檻較高，例如公司需成立滿半年、資本額需滿幾百萬(較常見的是500萬元)、負責人信用狀況、公司近期財務報表或繳稅單、營運計劃書...，當然這些條件在不同銀行或金流公司裡規範會不同，但一定需要公司身分，且對於行業別與網站上販售的商品類型規範也比較嚴格。 需準備的文件與程序較為繁瑣。	消費者隔月收到信用卡帳單時，上面消費的單位會寫該金流的名稱，所以較容易引起消費者否認交易等糾紛，少部分金流廠商能在消費者帳單上除了顯示金流公司名稱之外，會以括號顯示商家名稱。 銀行是撥款到該金流公司帳戶(所以金流公司是做二房東)，請款與付款要依金流公司的付款週期(大部分是雙週或月結，甚至有可能更久)，比較慢之外，相形之下也比較不安全(萬一金流公司拖延款項或有問題....)，所以慎選好的金流公司就很重要。 申請門檻較低，有些業者接受個人身分就可以申請，對於行業別與網站販售商品規範也比較不嚴，因此無法達到特約商店門檻的商家往往轉申請代收代付，但您可以看到目前銀行或某些金流業者並沒有提供這個模式，因為其實在法律上這是比較屬於灰色模糊地帶，有些業者盡量避免這樣做，也比較不會有消費糾紛。
大致所需費用：	年費約1~3萬。 交易手續費約2~3%，通常看跟銀行談的結果。 第一年開通可能會收取閘道開通費(一次性的費用)。	年費約1~2萬元。 交易手續費約2.8~3.5%，視金流業者方案規定，通常不可議，且通常會比特約商店模式來得高。 可能需要收取保證金(視您申請的方案大小，可能保證金額度不同)，期滿無息退回。

普遍而言，雖然現在逐漸流行免年費線上金流，不過以台灣業者提供的線上刷卡來說，都仍是採用需要支付年費的模式，成交後還需抽手續費(少數廠商有提供交易量未滿多少萬元以上不收手續費的方案)，所以對微型、小型商家來說提供線上刷卡仍是個比較昂貴的負擔，因為即時您的購物網站沒有因為線上刷卡的支付方式帶來太多的獲利甚至沒有成交訂單，仍是得繳交年費給業者，筆者建議初期或許較小型的商家可以考慮用一些免年費只有成交抽取手續費的金流方式來嘗試看看(例如WEBATM)，雖然線上刷卡仍是目前最普遍的付款主流，但目前隨著台灣的銀行全面改成晶片金融卡的普及，加上一台讀卡機只要1百多到幾百元也不貴，所以WEBATM的線上轉帳方式也逐漸網友所利用成為另一大宗，其他如虛擬帳號、便利超商付款等方式也還蠻方便的。

當然以上只是列出目前台灣大部分線上刷卡的狀況，實際上詳細的規範與細節，由於不同家業者會有不同的規格規範，也有可能一段時端會有變動會調整，本敘述僅供參考，仍是建議您以該廠商提供的資料為準，並多詢問與貨比三家，祝您找到好的金流配合方式囉！

CSS觀念好文：CSS 團隊開發的最佳實踐

我一向很少轉貼文章，但這一篇國外作者Emily P. Lewis寫的CSS文章，講的相當精鍊實務，對於學習與釐清CSS觀念上真的是相當不錯，尤其在面對大型網站管理上，可算是深得我心，因此仍是貼來跟大家分享，原文出自於台灣微軟的MSDN網站 http://msdn.microsoft.com/zh-tw/scriptjunkie/ff679957.aspx


多少次你撿起一個別人啟動的專案，發現原始碼是一團混亂？或者是你和幾個團隊成員合作，每個人都有自己一套寫法？又或者你重新檢視幾年前自己建立的專案，而你記不起來那時究竟在想什麼？
這些都常發生在我身上。事實上，最近我花了近 300 個小時，修改一個廠商令人掩面的 CSS。這 300 個小時不僅讓我感到相當挫折，對我團隊中的其他人也一樣。它偷走了珍貴的時間和資源，這些本來可以更好地運用在新的開發工作上。
假如那個廠商只要在他的 CSS 中遵循簡單的原則，我的團隊就能節省下金錢和時間，更別說我自己的理智會保持在更好的狀態。在這篇文章中，你會學到撰寫 CSS 的最佳實踐，這可以幫助你避免不一致和冗贅；實際上，可以為簡化團隊開發設下標準。
無論你是和內部的團隊，或是面對廠商、外包商，甚至你自己就是一人團隊，這些 CSS 實踐會幫助你建立基礎規則，讓你成為一個好的 CSS 團隊的一員，進而節省時間和挫折感。
你需要做的，只要回想起小時候聽過的黃金法則，並牢牢地記住：善待你的 CSS，如同你希望別人怎麼對待它。

---

讓它組織起來！
好的組織是撰寫良好 CSS 的基礎。它幫助我－還有日後需要修改這個語法的人－可以更了解和掃讀 CSS，並快速跳到特定的樣式。
在我正式開始寫樣式之前，首先我定義 CSS 文件的組識，它是依據網頁不同內容的「段落」來定義。而且這些段落在不同的網站經常是一樣的：

• Header
• Navigation
• Main content
• Sidebar
• Footer

所以，在我的 CSS 檔案中，我加上一些註解，標示每個即將加上樣式的段落：

/*---GLOBAL---*/                 
/*---HEADER---*/                 
/*---NAV---*/                 
/*---CONTENT---*/                 
/*---SIDEBAR---*/                 
/*---FOOTER---*/                 

注意一開始的註解我加上了 GLOBAL 這個註解，這個段落不符合網站其他部分的內容，它用來處理我所謂的「全域」樣式。這些都是通用的樣式，而不是專指某部分的內容，像是外觀／結構、排版元素－標題、段落、清單和連結等－ 以及 <form> 和 <table＞ 等。
藉由保持全域狀態，通用樣式放置在 CSS 檔案頂端，它可以讓我運用串接的優勢。所有依循這些樣式宣告的 CSS，將會繼承這些屬性，因此在需要時，我可以更容易覆寫這些屬性。

---

更多的 CSS，更多的組識性
我在非常大型的網站工作，而它相當倚賴 CSS。在處理大量行數的樣式時，我喜歡在每個段落加上第二層註解。以 GLOBAL 為例，我會寫下將要維護的樣式類型：

/*---GLOBAL---*/                 
    /*--Structure--*/                 
    /*--Typographic--*/                 
    /*--Forms--*/                 
    /*--Tables--*/                 
/*---HEADER---*/                 
/*---NAV---*/                 
    /*--Primary--*/                       
    /*--Secondary--*/                  
    /*---CONTENT---*/                  
/*---SIDEBAR---*/                  
/*---FOOTER---*/                 

你會注意到我也在 NAV 加上了第二層註解，指出還有主要和次要的導覽列。
這也許對你的目的而言有點超過了。事實上，對於較小的網站、需要的 CSS 較少，通常我就不會用第二層註解了。不過在大型 CSS 檔案上，這個額外的細節對我的團隊帶來許多幫助。

---

自由的格式
這些為了組識結構的註解格式，可以由你自己決定。上面的範例只是我和我的團隊喜歡的方法。有些人喜歡他們的註解採兩行的方式：

/*   HEADER                      
------------------------------*/                 

有些人使用特殊的字元，像是等號，用作標示，以方便在文字編輯器協助搜尋：

/*   =Header                      
------------------------------*/                 

有些人不使用第二層註解。有些人使用完全不同的組識結構，不依賴頁面內容，而是透過元素型態：headers、images、lists 等。關鍵在於以你自己喜愛的格式定義，然後持續地使用它。
想要依照內容元素來組織？沒問題。如果你想將註解小寫，儘管去做。不想內縮第二層註解，那就別做。不想使用連字符號而想用句點？那就瘋狂一下吧。去做對你和你的團隊覺得合理的方法。

---

溝通用的註解
我們已經看了組識結構所用的註解，不過你也應該使用註解來和其他團隊成員溝通，甚至是跟未來的自己溝通。

---

何事、何人、何時
當以團隊的一份子在工作時，給與 CSS 檔案註解是誰撰寫，什麼時候最後更新，這些資訊對成員間溝通特別有用。在我的團隊上，我們在 CSS 檔案的上方加入了「摘要」註解，它提供了這些細節：

/*----TITLE: Main screen styles | AUTHOR: EPL | UPDATED: 03/23/10 by EPL----*/                

這個資訊在使用多個樣式時相當有用，例如一個用在螢幕上，一個用在列印上，另一個用在行動裝置上，甚至用於 IE hack 上。作者資訊可以讓所有團隊的成員知道，原始的 CSS 有問題時該去問誰，而更新資訊讓團隊知道最後在什麼時候，由誰更新了這個檔案。
至於你的摘要註解，只需保含對你的團隊有用的資訊。假如你不需要作者資訊，就略過它。假如你需要版權宣告，就加上它。我曾見過許多摘要註解，裡面加上了住址和聯絡方式：

/*---- IE6 screen styles (ie6.css)  Company ABC 1234 Avenue of the Americas New York, NY 10020 http://companyabc.com  Updated: 03/23/10 by EPL ----*/ 
      

---

色彩鍵值
我遇過最有用的 CSS 註解是加上色彩鍵值，它註解了網站使用的色盤：

/*---COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112---*/                

色彩值在開發階段特別有用，它可以節省你的時間去找色彩範例或從一些樣式指引中東翻西找。需要知道藍色連結的 16 進位值？捲動到定義鍵值的地方，然後剪下、貼上。
在我的團隊中，我們在 CSS 文件頂端維護了一個色彩鍵值，就在註解摘要的後面、樣式宣告之前，而和組織結構的註解在一起。不過它也取決於你想做到多複雜。
當然格式也由你決定。你可以讓所有的定義通通合在一行，如同上面的例子，或者將它們分開成多行：

/*---COLORS                      
Green #b3d88c                      
Blue #0075b2                      
Light Gray #eee                      
Dark Gray #9b9e9e                      
Orange #f26522                      
Teal #00a99d                      
Yellow #fbc112                 
---*/                 

再一次，目標是找出對符合團隊需求最合宜的格式，然後持續地使用那個格式。

---

開發與除錯
有時當開發工作進行到一半時，我必須將手邊的 CSS 交給其他的成員。有時候我會去撞牆，只為了想出為什麼IE破壞了我的 CSS，而我又必須走開。這些情況發生時，溝通是必要的手段。
寫下一個註解給自己或你的成員，指出一個樣式為什麼這樣或不這樣寫，能省下他們的時間，避免他們頭痛：

/*--//--連結狀態的樣式暫緩，等待設計師的新樣式，請不要編輯 | EPL 03/23/10--\\--*/                 
a, a:link, a:visited {                    
    color:#0075b2;                     
    text-decoration:none;                 
}                  
                  
a:hover, a:focus, a:active {                    
    color:#b3d88c;                 
}                 

通常我會使用有別於其他的不同註解方式，讓它們可以更為突顯。而且我會盡量寫清楚所需的細節。同樣的，用最適合你的方式。
不過記住，當你完成了開發／除錯之後，把這類型的註解移除是個好主意。假如這些不再和工作相關，它們也沒有理由留在 CSS 中。留著只是徒增檔案大小。

---

重設
CSS 重設已經蔚為流行。他們是加在 CSS 檔案上方的樣式風格，可以將 HTML 元素設定為基礎值，以避開瀏覽器之間外觀上的不一致 - margin、padding、line-height 等：

/*---RESET---*/                 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {                    
    margin: 0;                    
    padding: 0;                    
    border: 0;                    
    outline: 0;                    
    font-weight: inherit;                    
    font-style: inherit;                    
    font-size: 100%;                    
    font-family: inherit;                    
    vertical-align: baseline;                 
}                 

上面的例子是摘自 Eric Meyer 的 Reset Reloaded，而我常使用它。不過傾向於編輯他的重設檔，沒使用到的元素就不寫進去，我建議你也這樣做。例如，我的團隊建立的網站，幾乎從未使用過 <kbd>、 <iframe> 或 <applet> 元素，或是其他一些上面包含的少數元素。
所以我移掉了那些元素，它雖然只會影響到微不足道的頁面下載時間或頻寬，不過我覺得這對於一些從未用過這些元素的團隊成員而言，可以避免一些困擾。
我也會去編輯一些重設風格，如果我不希望覆寫瀏覽器預設的樣式，例如非循序清單的樣式。這種情況我會確保他們沒有被包含在重設清單中。
但我必須聲明，CSS 重設並不適合每一個人。有許多理由不該使用他們。我會說由你自己決定，假如你決定使用，讓你的重設樣式定義簡潔而且盡量適用於你的網站。

---

語義命名規範
和其他人一起開發 CSS 時，最令人感到挫折的事，莫過於為 class 或 id 使用毫無意義的名稱。想像一下下面的例子：

.f23 {                    
    background: #fff;                    
    border: 1px solid #ff0;                    
    font-weight: bold;                    
    padding: 10px;                 
}                 

我對 .f23 是什麼毫無頭緒。更糟的是，如果沒有組織過的註解，我不知道 .f23 指的內容究竟是什麼。它是標題嗎？主要的內容嗎？還是導覽列？
在這種情況下，尤其是大型網站，它可能需要浪費大量時間，荒謬地去找出這個 class 的值究竟對應到哪個標籤。假如作者改用語義命名規範—那些有意義、基於內容來做樣式的—我有一個情境可以說明這樣的 CSS：

.alert {                    
    background: #fff;                    
    border: 1px solid #ff0;                    
    font-weight: bold;                    
    padding: 10px;                 
}                 

如你所見，.alert 提供了更多的情境給 CSS，勝過於任意隨機的英數字組合。
不過不只是情境，語義命名規範對於節省時間也有幫助。試想一家公司經常改變品牌。假如你開發 CSS 使用外觀更勝於語義的 class 和 id 值，你會需要更多的 CSS－甚至更多的標籤－來維護。
例如，如果你指定 class="blueBox" 給一個網站的「跳出方塊」(call-out box)，它使用了公司的藍色色盤。之後公司為了重打品牌，換成紅色色盤。這時 blueBox 變得毫無意義。所以，這時不止要更新 CSS 樣式中顏色的 16 進位值，你也必須修改標籤中的所有參照。
假如你改成 class="callOut" 來代替（或其他相同意義的詞），你需要做的事就變少很多。

---

瘋狂 Class
撰寫 CSS 時，我同意「少就是多」的想法。雖然你可以在每個元素上加上 class，不代表你應該這樣做。
在我修改廠商品質糟糕的 CSS 的那 300 個小時裡，我發現許多不需要存在的 class。舉例來說，每一個 <label> 元素被指派「class="label"」，而每一個 <form> 元素上，也都有「class="form"」。然而我們的設計以及標籤，針對 <form> 元素其實只有一種樣式，<label> 的情況也一樣。

form.form {                    
    float: right;                    
    margin: 0;                    
    padding: 5px;                 
}                 
                  
label.label {                    
    clear: both;                    
    float: left;                    
    text-align: right;                    
    width: 145px;                 
}                 

這樣的 CSS 造成的結果雖然不恐怖（只是冗贅，但不恐怖），但卻造成困惑。身為繼承 CSS 的設計師，看到 .from 的 class 時，我就會假設一定有其他有別於 <form> 樣式的 class 值。而尋找這個不存在的樣式，只是虛耗我的時間。

---

大量 Class != 明確性
上面只是一個簡單的例子。一個我遇過更為詳細的例子，似乎是種渴求明確性的結果所造成：

<div id="feature" class="tabs">                    
 <ul class="tabs">                       
  <li class="tabs"><a href="#newServices">New Services</a></li>                       
  <li class="tabs"><a href="#newProducts">New Products</a></li>                    
 </ul>                 
</div>                 

注意「class="tabs"」是如何被套用在上的每一個元素上？而下面的 CSS 是用來鎖定清單元素的CSS：

div.tabs ul.tabs li.tabs {                    
    float: left;                    
    font-weight: bold;                    
    padding: 3px;                 
}                 

一個鎖定 <li> 更簡潔、輕量的方案如下：

#feature li {                    
    float: left;                    
    font-weight: bold;                    
    padding: 3px;                 
}                 

假如你的樣式不需要一個 class 值來鎖定元素，那就別用它。它們會增加你的標籤和 CSS 的體積，而且也大量降低了掃讀 CSS 的速度。
你也應該注意我在最後一個例子中，使用 #featurerather 而不是 div#feature 的 id 作為選取子。只有在有明確指定的必要時，才在選取子上加上 div。如果不這樣做，只是增加 CSS 無謂的內容，而造成你和你的成員必須看更多。此外，盡量使用最少量的明確宣告，它可以在後來需要覆寫樣式時發揮作用。

---

多重 class
經過一連串的介紹，你也許會有一個我不喜歡用太多 class 的印象。的確我不鼓勵不必要、冗贅的用法，不過在透過指定多重 class，讓 CSS 保持精簡以維持共通性這件事上，我可是個超級粉絲，只是可能需要一點不同的作法：

.announcement {                    
    background: #eee;                    
    border: 1px solid #007b52;                 
    color: #007b52;                    
    font-weight: bold;                    
    padding: 10px;                 
}                  
                  
.newsAnnouncement {                    
    background: #eee;                    
    border: 1px solid #007b52;                 
    color: #007b52;                    
    float: right;                    
    font-weight: bold;                    
    padding: 10px;                 
}                 

上面兩個宣告是類似的，除了 .newsAnnouncement 會往右飄移。與其重複所有共同的樣式資訊，我會改用下面的方式：

.announcement {                    
    background: #eee;                    
    border: 1px solid #007b52;                 
    color: #007b52;                    
    font-weight: bold;                    
    padding: 10px;                 
}                  
                  
.floatR {                    
    float:right;                 
}                 

然後在我的標籤上，替「news announcements」同時指派兩個 class：

<div class="announcement floatR">                

等一下，我自己不是說過採用語義命名規範而不是外觀命名嗎？沒錯。不過每一個規則總有例外的時候。
是的，.floatR 是描述外觀的。不過它應用在這種情況時相當自然，而且也適用於其他需要多重類別的情況，所以這個方法也常被我的團隊使用。

---

群組選取子
在 300 小時煎熬奮鬥史中，我遇到的另一個問題是，在多個樣式表中使用相同的樣式宣告。在宣告間唯一不同之處，就是它們分別套用在不同的選取子：

#productFeature {                    
    background: #fff;                    
    border: 1px solid #00752b;                    
    float: left;                    
    padding: 10px;                 
}                  
                
#contactFeature {                    
    background: #fff;                    
    border: 1px solid #00752b;                    
    float: left;                    
    padding: 10px;                 
}                 
                  
#serviceFeature {                    
    background: #fff;                    
    border: 1px solid #00752b;                    
    float: left;                    
    padding: 10px;                 
}                 

這不僅讓已嫌龐大的 CSS 文件更為臃腫，更讓維護工作陷入一場惡夢。解決方法應該是結合這些選取子到一個相同的樣式宣告：

#productFeature, #contactFeature, #serviceFeature {                    
    background: #fff;                    
    border: 1px solid #00752b;                    
    float: left;                    
    padding: 10px;                 
}                 

現在，樣子如果需要更新，只要改動一個地方即可，而不是到三處地方修改。

---

單行或多行？
這篇文章所有 CSS 的範例都寫成多行格式，每一對「屬性－值」的配對自成一行。這種寫法不僅在 CSS 檔案中廣泛使用，在關於 CSS 的書和文章中也是。多數人覺得這樣的可讀性比較好，這是我在這篇文章中也這樣用的原因。
然而，在我和我的團隊工作時－尤其是大型的 CSS 檔，我會使用單行的方式：

.alert {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}                

就我個人而言，我覺得這樣的可讀性更好。在處理大量行數的 CSS 時，多行格式就變得有點累贅，不易掃讀。把東西放在一行似乎比較容易做到。
對於你和你的團隊來說，專注在一致性。挑一個對你的團隊而言最舒服的做法，然後反覆持續地用它。

---

要不要依字母排序？
有些人建議在樣式宣告內，利用字母順序來排序樣式屬性，這樣可以更快、更容易找到屬性。這在過去我沒有特別的感覺，但在處理廠商混亂的 CSS 檔案後，我可以欣賞這種可以讓樣式宣告變得更有組織的好主意。
不過，我發現有比字母排序更為有效的方法，就是依照情境來編排屬性。舉例來說，我喜歡將所有區塊（box）屬性放在一起。或者，像是當我使用絕對定位（absolute postion）時，會將相關的屬性群組起來：

#logo {                    
    border: 1px solid #000;                    
    margin: 0;                    
    padding: 0;                    
    position: absolute;                    
    top: 5px;                    
    right: 3px;                 
}                 

再一次，這沒有對錯可言，只是決定一些屬性的順序，然後一致性地應用。

---

讓縮寫成為你的朋友
使用 CSS 縮寫是長久以來被認為可以保持 CSS 輕量、簡潔的方法。而且它對團隊開發也有巨大的幫助，它不但增加了可讀性，而且設定了讓人人可依循的標準語法。這減少了團隊成員去思考有關撰寫 CSS 的時間。 

---

零值
如果你指定一個屬性值為 0，那單位值如 pixel（或 em、百分比…）是不必要的：

margin: 2px 3px 0px 4p                
改為

margin: 2px 3px 0 4px             

---

16 進位色彩值
16 進行色彩值由三對數字組成，而它可以縮減成對的其中一個數字：

color: #ff0000                

變成

color: #f00             

---

區塊屬性
像是 margin 這樣的區塊屬性，padding 和 border 的值可以作結合，如果四個邊的值有相同之處的話：

padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px                

變成

padding: 5px                

另外使用區塊屬性時，如果上、下或是左、右的值一樣，你只需要宣告成兩組：

padding: 5px 10px 5px 10px                

變成

padding: 5px 10px             

---

Font 屬性
Font 屬性也可以作結合：

font-style:italic; font-weight:bold; font-size: 90%; font-family: Arial, Helvetica, sans-serif;                

變成

font: italic bold 90% Arial, Helvetica sans-serif          

---

Background 屬性
Background 屬性也是，在合併屬性值上可以做很多：

background-color:#fff; background-image: url(logo.png); background-repeat: no-repeat; background-position: 0 10%;                

變成

background: #f00 url(logo.png) no-repeat 0 10%                

注意：最後兩個縮寫範例，font 和 background 屬性，屬性宣告的順序是有意義的。可以參考 W3C 規則作確認。以參考 W3C 規則作確認。可以參考 W3C 規則作確認。

---

有效性、有效性、有效性
有些人的經驗法則認為驗證 CSS 的有效性是好作法，而我認為它應該是絕對必要。驗證讓你多一個機會確認，你的工作已經準備就緒，可以分享給其他團員，以及：

• 更簡單的開發和除錯
• 跨瀏覽器的一致性，同時著眼現在和未來
• 更快速的頁面載入
• 無障礙性的部分實質審查
• 正確地撰寫=只需寫一次

我推薦用 W3C CSS 驗證服務。

---

壓縮工具
假如你和你的團隊關心檔案大小、頁面下載時間和頻寬（誰不會呢？），那麼你可以考慮針對 CSS 使用壓縮工具。這些工具可以做許多事，從縮短 16 進位色彩值到移除註解。下面是一些值得考慮的方案：

• CSS Compressor
• CSS Optimizer
• Code Beautifer
• CSS Tidy

我不建議在開發階段的檔案使用壓縮工具，雖然它減少了檔案大小，但也減少你和團隊閱讀和處理 CSS 檔案。所有的註解都消失了。所有的空白都移除了。你再也有沒有方便工作的 CSS 檔案。讓使用壓縮工具成為上線前的最後一步。

---

冰山一角
這篇文章談論到的只是一些基礎的實踐，幫助你和你的團隊在處理 CSS 時可以更快樂、更有效率。還有許多文章你可以追讀，讓你日後 CSS 能更臻完美。假如你的好奇心被誘發了，那麼我建議你讀下面這些文章：

• Different Ways to Format CSS
• Unique Pages, Unique CSS Files
• Single-line vs. Multi-line CSS
• CSS Property Order Convention
• On HTTP: Page Load Times, Multiple File Requests and Deferred JavaScript
• http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
• Efficient CSS with shorthand properties
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• Object Oriented CSS

---

遵循黃金法則
無論你是和內部的團隊，或是面對廠商、外包商，甚至你自己就是一人團隊，這些 CSS 實踐會幫助你建立基礎規則，讓你成為一個好的 CSS 團隊的一員，進而節省時間和挫折感。
你需要做的，只要回想起小時候聽過的黃金法則，並牢牢地記住：善待你的 CSS，如同你希望別人怎麼對待它。

微軟Expression Studio很簡單多媒體網頁設計班

站長在秋季班的新課程已經推出了，本課程讓學員一次入門即可上手，學會Microsoft Expression Web、Design、Encoder、Blend、Deep Zoom Composer，跟上微軟的最新多媒體網頁設計技術，這班是微軟Expression Studio很簡單的多媒體網頁設計班(使用微軟最新版之Expression Studio)，有興趣的朋友可以參考台灣科技大學推廣教育中心網站上說明與相關報名訊息，總時數為24小時，特別值得一提的是符合結訓資格後，除了取得台科大推廣教育中心的證書之外，證書上也將會加蓋台灣微軟原廠官章以資證明(真是太棒囉！)。

本課程與台灣微軟合作，由台灣微軟研討會講師親自講授(就是站長我啦～！)，使用最新版Expression Studio系列軟體教學，並穿插軟體之間的整合運用，讓您同步跟上微軟的設計新體驗，想一次學習微軟多媒體網頁設計者不可錯過，學習本課程並可了解最新的Silverlight動畫製作技術。

本課程目標為熟悉Microsoft Expression Web、Design、Encoder、Blend、Deep Zoom Composer等軟體基礎運用，了解微軟最新網頁設計技術與架構，以利學員後續自行開發多媒體網站。擔心微軟研討會上講師講太快且無法同步練習的學員不用憂慮了，本課程將會有充裕的時間帶領您實作體驗，學習這些最新軟體的基礎操作與觀念！







授課大綱：

	課程進度/內容	使用軟體
1	網頁設計概況分析 Expression Web的優勢介紹 Expression Web基本環境介紹 HTML語法簡介、HTML標籤編輯 認識網頁圖檔格式與置入及圖片工具列的運用	Expression Web
2	表格網頁佈局編輯 基礎網頁圖文編排 超連結的運用 動態網站範本的運用 網站套件範本的下載、封裝與修改運用	Expression Web
3.	瀏覽器版本觀念 使用SuperPreview功能做網頁視覺診斷與相容性偵測調整 網站環境管理與報表查看 最佳化HTML、協助工具與相容性報表 申請免費網站空間與發佈網頁	Expression Web Expression Web SuperPreview Mozilla Firefox
4.	Expression Design環境介紹 選單圖示繪製 Banner繪製 GIF動畫製作 Expression Web與Design網頁美編整合製作	Expression Design Microsoft GIF Animator Expression Web
5.	什麼是Silverlight？ Deep Zoom動畫效果製作 Expression Blend環境介紹、物件與時間軸概念 使用Expression Blend設計Silverlight動畫初體驗	Silverlight Deep Zoom Composer
6.	使用Expression Design設計圖案並結合Blend製作Silverlight動畫 Expression Encoder Screen Capture錄製影音教學 Expression Encoder環境介紹與轉檔編碼	Expression Design Expression Encoder Screen Capture Expression Encoder
7.	網頁裡置入各類多媒體物件 使用Paint.NET輔助網頁圖形影像合成設計 網頁整合設計	Expression Web Paint.NET Expression Design Expression Blend
8.	重點複習 實做與成果驗收	Expression Web Expression Design Expression Blend

上課資訊：
起迄時間:2010/10/02-2010/11/06
上課時數:24小時
上課時段:週六13:30~17:30
報名費:NT$200
學費:NT$4,800
報名網址:http://cec.ntust.edu.tw/CourseInfo.aspx?id=963

網頁程式設計入門班

站長在秋季班的新課程已經推出了，很多學員對於程式設計總有莫名的恐懼，總學不好網頁標籤語言與程式，本課程讓學員使用Microsoft Expression Web，學習正確的網頁設計技術與觀念，打好網頁設計基礎，製作出符合標準的微軟網頁設計技術，這班是網頁程式設計入門班(使用微軟最新版之Expression Web)，有興趣的朋友可以參考台灣科技大學推廣教育中心網站上說明與相關報名訊息，總時數為24小時，特別值得一提的是符合結訓資格後，除了取得台科大推廣教育中心的證書之外，證書上也將會加蓋台灣微軟原廠官章以資證明(真是太棒囉！)。

本課程與台灣微軟合作，由台灣微軟研討會講師親自講授(就是站長我啦～！)，使用最新版Expression Web軟體，想學習微軟最新網頁設計工具以及踏入程式設計初學領域者不可錯過的課程，課程內除了導入網頁程式製作概念之外，還會帶領您實作出搜尋、最新消息發佈、通訊錄等簡易.NET網站系統的程式設計。


本課程目標為熟悉Microsoft Expression Web進階使用技巧，使用DIV標籤加CSS語法製作網頁，學會基礎的.NET網頁程式設計。擔心微軟研討會上講師講太快且無法同步練習的學員不用憂慮了，本課程將會有充裕的時間帶領您實作體驗，學習最新軟體的基礎操作與觀念！





授課大綱：

	課程進度/內容	使用軟體
1	HTML與XHTML標籤語法介紹 Expression Web環境介紹、HTML標籤編輯 Expression Web程式碼檢視內的工具，色彩編碼、IntelliSense 網頁編碼觀念 絕對路徑與相對路徑觀念	Aptana Studio Expression Web
2	CSS的觀念 CSS選取器與語法介紹	Internet Explorer8.0開發者工具 Expression Web
3.	CSS與DIV網頁的構成與建立 CSS進階設計運用與修正 Frame、Iframe網頁設計	Expression Web
4.	SEO網頁優化觀念與技巧Robots、PageRank、SiteMap 運用Expression Web的SEO工具 Javascript簡介	Google 工具列 Expression Web
5.	Expression Web的行為與圖層運用 ExpressionWeb增益集介紹-使用外掛加速網站開發 前後端的基本觀念 系統文件規劃分析 Access資料庫概念與開立Table與欄位 撰寫系統文件與使用手冊	Expression Web Microsoft Office Access Microsoft Office Visio
6.	ASP.NET的基本觀念 IIS的基本觀念與Development Server .NET Framework的基本觀念 程式與資料庫互動的四大步驟 程式碼撰寫的方式與VB及C#的區別設定 SQL語法簡介	Expression Web Microsoft Office Access
7.	ASP.NET控制項 資料與資料來源控制項 主版頁面的設定 最新消息系統設計 通訊錄系統設計與製作搜尋編修	Expression Web Microsoft Office Access
8.	程式前台使用CSS及DIV版面及主版頁面整合 程式後台使用Frame整合 實做與成果驗收	Expression Web

上課資訊：
起迄時間:2010/10/3-2010/11/28
上課時數:24小時
上課時段:週日9:30~12:30
報名費:NT$200
學費:NT$4,800
報名網址:http://cec.ntust.edu.tw/CourseInfo.aspx?id=964

網頁設計初階班

站長在秋季班的新課程已經推出了，很多人學習網頁設計一直有挫折或是總覺得網頁設計不美觀，其實多半是缺乏學習輔助搭配的網頁圖形設計工具與如何整合運用，學習完本課程，可以讓您做出有一定水準的網站，這班是網頁設計初階班(使用Dreamweaver&Fireworks)，有興趣的朋友可以參考台灣科技大學推廣教育中心網站上說明與相關報名訊息，總時數為12小時。

本課程將以範例實務設計為導向，同時帶領您使用Dreamweaver學會設計表格為版面編排的傳統網頁設計，以及用DIV加CSS的版面新型態網頁編排設計，以因應不同網頁設計環境之需求，並輔以同體系的Fireworks這套好用的網頁圖型設計工具，設計出LOGO、選單按鈕、背景圖等各類圖案，並帶領您切圖與設計GIF動畫圖檔，以美化裝飾您的網頁。


本課程目標為帶領參加的學員能在短時間內做出一定質感之網頁設計作品。適合無經驗的初學者、對網頁設計有興趣者參加。


授課大綱：

	課程進度/內容	使用軟體
1	簡易色彩學與色票 螢幕截圖 網頁設計概況分析與了解Adobe軟體間的相互關係 Dreamweaver基本環境操作與網站管理	色胚子 PicPick Dreamweaver
2	l表格式網頁設計 Frame與iFrame網頁設計 DIV與CSS網頁設計	Dreamweaver
3.	Fireworks基本環境操作 認識網頁圖檔格式 選單繪製 簡易影像處理 版型繪製與切割網站版型 GIF動畫製作	Dreamweaver Fireworks
4.	DWT網站範本 Dreamweaver與Fireworks整合運用 網站發佈 實做與成果驗收	Dreamweaver Fireworks

上課資訊：
起迄時間:2010/10/03-2010/10/31
上課時數:12小時
上課時段:週日13:30~16:30
報名費:NT$200
學費:NT$2,400
http://cec.ntust.edu.tw/CourseInfo.aspx?id=965

動態網頁設計培訓班課後花絮

這班的學員讓我很感動，常看到他們留下來練習或者是懂的同學會教不懂的，也讓講師教起來比較有成就感，課程總時數315小時裡，我就教了快要佔三分之一時數的99小時(不過總覺得還是有很多東西可以再補充告訴學員)，算是我帶的較久且較為有感情的一班，這篇好像也是目前我教過的班級裡面部落格內容最多的一班，趁最近有點空檔趕快寫點花絮…

學員們很有心，7月8日中午邀我來到台科大國際大樓612教室。


原本我以為只是單純再教室碰頭然後去學生餐廳大家吃個東西而已，沒想到學員們在教室早有安排咧！


這班的學員當初是40人滿班，快到要結訓前，還能有幾乎全員到齊，在這類較長期的訓班裡，也算是蠻難得的現象！


上這個課最累的居然是～～～：為了擔心學員們精神不濟(因為我的課常常是整天的)，所以要準備冷笑話，我兒子因此被我爆了不少料(抱歉啦！威威！)，讓我知道原來原來搞笑藝人也不好當咧！


到後面莫名變成每次都要準備冷笑話，還有同學mail給我冷笑話素材(怕我不好笑？)與抄我的冷笑話筆記，上正課好像都沒這樣認真說，改天來寫篇部落格文把冷笑話彙整一下好了～哈！


繼續回到現場報導…，現場還準備了很豐富的餐點！


大家都吃得不亦樂乎～！
 


要不是有參加這場同樂會，我還不知道鄧同學主持跟帶動現場地份的功力這樣棒說～！
 

足感心～！學員們還有對來參加的講師準備了每人一份感謝卡！


製作蠻精美的，也算是學以致用吧～！


每張卡片裡都寫滿了學員對講師的感謝，真是太讓人感動啦，咦！怎麼大家只記得我的冷笑話跟要買蝦仁羹呢？大驚～！ >_<|||
 

這是給玩子甘老師的感謝卡畫面！


這是給蔡老師的感謝卡畫面！


這張好像是大家要拱玩子老師唱歌！


啊～！我拿麥克風在幹嘛呢！
 

原來是還有準備卡拉OK可以唱，真是豐富的節目流程！


這位是校長同學，啥叫做校長同學呢？據說是本班到到校外參訪時，這位同學被廠商誤認為校長帶隊參觀…，同學，你的墊墊看尼姑的笑話，我會在上課同學精神不好時講給大家提神一下，我會把你的笑話傳承下去的！


這張是這我被偷拍時的回眸一笑(咦這應該是形容女生吧！)，好啦！是蠻噁的啦！


這組的學員們很用心呦！後面還有人想繼續學習其他他課程進修！這樣學然後知不足的精神是直達大家多學習的。


藉由這個機會，我也跟其他講師有所交流與認識，不然平常大家要碰得上面還蠻難的說！


感謝助教張小姐對本班這段時間以來各項瑣碎大小事的照顧！
 

猴珊同學為大家做了很多事情，有些圖我還是從他部落格上抓的，十分感謝他囉！他的部落格相關文章的網址是：http://blog.huayuworld.org/qiqi0408/20022/2010/07/11/67378


底下這個是當天播放的影片，是猴珊同學另外花時間製作的，講師的那一段還蠻幽默有趣的。


拜現代資訊科技的便利，我的碎碎念的一段話也被錄起來了！


趕快檢查一下我有無說啥不雅的話外流影響形象呢～！？尺度應該還OK啦！

部分組別結訓前專題製作關於網站的作品網址如下(專題是蔡老師指導的)：
●橘子新樂園 http://orangeland.byethost22.com/home.html
●七色鳥氣球 http://joan.byethost11.com/
●冰店 http://marco.byethost22.com/
●巧克力 http://darkchocolate.byethost12.com/
●i咖啡 http://charlesyin.byethost5.com/icafe/

玩子老師的部落格有關於本班更詳細的說明以及作品，這邊我就偷懶一下不打啦，詳情可參閱以下網址：
http://blog.huayuworld.org/garykan/8446/2010/07/14/61905
http://blog.huayuworld.org/garykan/8446/2010/07/14/67704

與本班學員的大合照，話說拍照當天由於把走廊堵起來了，我還記得旁邊電梯開門有人要出來時還嚇了一跳，沒辦法過的去咧！


最後來個合照10連拍～！


這是很棒的一班學員們，由衷的祝福他們未來不論是在職場工作或是創業或兼職，都能一切順遂與保持心情歡樂愉快～！