很多中小企製作網站都視成本為重要的考慮因素，直接找網頁設計公司而非透過推廣和公關公司。而網頁設計公司多數強於製作和執行，在規劃網站和網上推廣策略方面都視乎客戶本身的要求，因此中小型公司和商店製作網站前，必須掌握更多相關知識和明白自己的需要。

Google 剛開了一個專為小企業而設的 Google Small Business Blog ，並聯同 U.S. Small Business Administration 推出了一個 Tools for Online Success 指南，為小企業提供善用互聯網的貼士，內容包括：

1. 利用 Google local listing 增加網上曝光機會，特別適合商店
2. 製作成功網站的要素
3. 利用 social media 加強和客戶的溝通
4. 善用各項免費的渠道做宣傳
5. 如何使用付費搜尋推廣
6. 量度網站流量及如何解讀數據

以上章節可能會涉及一些技術性的操作，你未必會自行處理，卻可讓你更懂得向網頁設計公司提出要求，令網站有更大成效。最可惜這份指南由 Google 製作，難免欠缺了專門講及 Facebook 和微博的章節，否則更適用於香港的環境。另外，大家應會留意到，網站只是整個網上推廣的一個環節，現今製作網站更應包含更多 social media 的元素，並憧得利用其他網上服務。

Permalinks:

做個精明的網頁設計客人

筆者嘗試用 Slickmap CSS 修改客戶的網站地圖，真的很客易，一般情況下製作網站地圖時都經已用了 unordered list，修改的不多。首先要數清楚在主頁之下有多少個大分類，然後修改 css 檔內 #primaryNav li { width: ; } 的數字，即 100% 除以分類數目，以示範的 sitemap 為例主頁之下有5大分類，因此 width 就是 20%。之後只需要把最外圍的 ul 加入 id 為 primaryNav，及用一個 div tag (class 為 sitemap) 把整個 list 放入就可以了。此外你可把不屬於 sitemap 結構的連結加入另一個 id 為 utilityNav 的unordered list 內，就會出現在頁面的右上角。香港網站常設有多語言版本，在這處加入其他語言版本的連結就很合適。

觀看示範 sitemap

在以上的示範中，由於不想加入不存在的連結，以 internal target (或稱為 bookmark) 取代，在實際製作時當然要加入正式連結。

Slickmap CSS 只可以處理多至3層的 sitemap 結構，而其亦不支援 IE，不過筆者試過 IE7 看，問題不是很大，只是沒有圓角及不能用文字顯示連結的 URL，大家要清楚這兩點。

不知道大家製作 sitemap 的用途是什麼，如果是用來和製作網站的各單位溝通，sitemap 當然是很有用的工具，令各部門對網站的結構有統一的概念。但如果依靠 sitemap 來幫助網站訪客尋找資料，則這想法我並不認同。個人認為網站的導航列，網頁的結構及提示，甚至時下很流行的 functional footer，對訪客的幫助更大。因此網站應該先考慮改善 / 增加使用以上的元素，令資料更易被訪客找得到，及增加 pageview per visit。

Permalinks:

用 Slickmap CSS 美化網站地圖

一個基本商業網站，全以手動方式更新，也有兩個地方需要使用 cgi / php，其一是訪客計數器，另一個是聯絡表格。前者意義不大，現時的網站已甚少安裝，可以刪除。後者則非常有用，但有沒有方法，可以在網存不支援程式編寫下，都可提供表格處理功能呢？

網上有不少表格處理服務，而且很多都是免費。這些服務可分為2大類，第一種是設定很簡單，申請後把代碼加入網頁就可以使用。隨便 google “free contact form” 就可以找到一大堆，但使用時要注意幾點：(1) 這類服務的聯絡表格一般都不能額外加入欄目，只可以讓使用者輸入姓名、電郵及問題；(2) 通常介面只有英文；(3) 表格中文支援問題。筆者沒有親自試用這些服務， mailjol.net 和 123 Contact Form 表明支援 UTF-8 編碼，可能較大機會支援中文，但大家使用前必須試用清楚。

新一代的表格處理服務功能加強了不少，例如有 WYSIWYG Form Builder、可轉發到 multiple recipients、提供 form-to-database 功能、和網站風格整合、甚至有 skipping logic 和 randomize items 功能，強到可用來製作問卷調查，當然功能越多，則越有機會要收費。以下為大家示範用 Google 文件，建立一張聯絡表格及把表格加在網站上。

首先登入 Google 文件，新增表格

輸入表格的標題及題目，題目的類型可以是文字、選項、文字段落，另外可設定是否必須填寫的項目，留意右面的小 icons 可加減題目，並可用 drag and drop 更改題目的次序

Google 表格有70款外觀選擇，完成後獲取內嵌的代碼，加入到自己的網站內

其實 Google 表格是 spreadsheet 功能之一，所以當訪客墳寫表格時，輸入內容會加入相對應的試算表。當回到 Google 文件主頁，就會看到這新增的試算表，當開啟這個檔案就會看到提交的資料，技術上是 form-to-database，好處是資料較少機會流失，不過要登入才能讀取資料。如果要修改表格，也要開啟試算表進行

表格的資料不會轉發到電郵，不過你可設定當有人提交表格時就以電郵通知你，讓你知道有需要登入讀取試算表資料

示範表格

坦白說 Google 表格的功能很陽春，例如連基本的資料驗證也沒有，又要多一步登入讀取提交的內容，大部分同類服務都比它強大。有些網站經常製作不同表格，如報名表、意見調查等。一般內容管理系統均沒有表格製作的功能，所以如果網站沒有技術人員管理，使用表格處理服務不失為一個省時間省錢的方法。有機會再為大家介紹。

Permalinks:

免cgi / php 聯絡表格

使用現成系統製作網站的其中一個好處是市場上有很多專門製作 Template 的公司，提供免費或者收費相宜的模版供用家購買使用。Joomla 1.5 版本已推出了一年多，如果大家新安裝 Joomla 系統，一定要用 1.5 版本，而選用的 Template 也是要選支援 1.5 的。其實 Joomla 系統自帶的模版相當不錯，不少網站都只用自帶的模版修改而成，因此我以下挑選的 Template 在排版上會較獨特，或者網頁效果較特別，貴精不貴多。

1. JS Optimus

JS Optimus

預設的 2 column 設計更適合一般香港公司網站，這 template 另有收費版本。

2. RedEvo FlexiNews

RedEvo FlexiNews

Red Evolution 製作的幾個 template 都很簡潔和實用，適合任何網站修改使用。

3. ThemZa Real Estate

ThemZa Real Estate

預設了很多位置放 banner，如果網站經常有活動 / 推廣就很合用。

4. JSN Epic

JSN Epic

一個很完整、每個 menu / module 都有多個設計選擇的模版，通常只有收費版本才會如此齊全，另有收費 Pro 版。

5. joomswanky

joomswanky

由 css template 更改而成的 Joomla template，大家可以下載回來學習更改的方法。

6. Joomlapanel Adventure

Joomlapanel Adventure

這模式把頁面的空間盡用，排版和自帶的模版很不同。

7. Jakartatime

Jakartatime

最近很流行的 Magazine Theme。

8. PJ Enchanted

PJ Enchanted

一個簡單，可只用 top menu bar 的設計。

個人認為使用 template 作基礎，根據自己的需要更改來製作網站，是一個省時又經濟的方法，很多 template 的設計已考慮了用家和訪客的需要，下次再和大家分享使用 template 建網站的心得。

Permalinks:

8個精選Joomla! 1.5 Template

本示範以 12-column 的 grid 製作，12-column 即表示每一行的寬度為 60 pixels，左右兩邊各有 10 pixels 的邊界。我先根據附上的圖檔作初步的規劃，把網頁上各部分內容佔據頁面的行數固定。

一個佔據版面 3 行的元素，例如 side bar 究竟的寬度是多少呢？只要把 80 x 3，減去左右 10 pixels 的邊界就是答案 (220 pixels)。有一點要注意，就算一個元素佔 12 格 (即 class grid_12)，其寬度也只是 940 pixels，而其 parent container div 才是 960 pixels，如果把背景設在 container div，可避免 container 和內部元素的背景圖連在一起，比較美觀，例如示範網頁中，主要內容的白色背景就是用上述方式設置，令其不會和包含在內的部分連在一起。當完成了規劃及製作了背景圖，就可以動手編碼。

大家可參看示範網頁的編碼，詳細使用方法請參看前文內的教學連結。

用 960 GS 另一個要注意的地方，是不可再設置 grid 和 container 的左右 margin 和 padding (上下的沒有問題)，否則會破壞了整個系統的結構。但在製作網頁時，往往希望內文不要和背景圖貼在一起，解決的方法是在 div 內再加多一個 div tag，為其加上 padding size，這可是一個較麻煩的地方。不過整體而言，使用起來也算容易，個人認為比使用現成的 css template 有更高靈活性。

960 Grid System 的限制

• 這 css framework 只處理網頁的排版，因此使用者仍需要懂得使用 css ，設置網頁的外觀，而且要懂得何時需要用 clear float
• 960 pixels 的寬度不能更改，如果你希望自設網頁的寬度，這 framework 不合用
• 960 GS 看似較為工整，限制了設計的變化，不過若不在網頁的每部分都設背景圖，則一格格的外觀不會很明顯，而且本示範也沒有使用界圖的方法製作背景。不過始終使用時有一些規律要遵守，例如邊界和格的寬度就不建議作出太大的調整，否則不如不用。

Sitepoint 的文章 What’s So Bad About CSS Frameworks? 討論了使用 css framework 的壞處，讀者可先去看看，再決定是否用 framework 製作網頁。

Permalinks:

使用 960 Grid System 製作網頁示範（下）

為什麼這套 css framework 叫 960？原因是其寬度是 960 pixels，為什麼要 960？因 960 很接近 1024，而最多人用 1024 x 768 pixels 來瀏覽網頁，雖然現在很多人都用 16:10 或 16:9 的 LCD，不過用 wide screen 也不一定會用整個螢幕開啟瀏覽器。另一方面，960 這個數字可被多個數字整除，換句話說，如果以 960 pixels 為基礎，可創製出多個不同的 grid size。

960 Grid System 提供了 12-column 和 16-column 兩個選擇，12-column 表示 grid size 為 60 pixels，另外左右 2 邊有 10 pixels  的邊界，而 16-column 的 grid size 為 40 pixels，另加左右 10 pixels 邊界。其實正如前述，960 可被多個數字整除，因此理論上你可自行製作一個 24-column，grid size 為 30 pixels 左右 2 邊 5 pixels 的一個 template。

作者認為 960 Grid System 也很適合用作設計初稿時使用，因此在下載的檔案中，提供了 photoshop、fireworks、visio 的 template，如果你習慣先利用繪圖軟件設計網頁，可參看 Photoshop Tutorials 網站的教學。容許我說幾句題外話，以上的教學被某網站翻譯成中文後，被多個國內網站「轉載」，全都沒有連去原創網站，可見為國內網站攪 SEO，製作原創內容希望做成 link baiting，談何容易呢！

我會為大家示範利用 960 Grid System，製作如下一個常見的網站主頁：

（可按上圖看示範網頁）

我不會詳細每一個步驟，因為大家可先去 net tut+ 看視頻教學。 視頻中你會發現這個 css framework 相當容易使用。下一次我會和大家分享使用心得和技巧。

請繼續閱讀使用 960 Grid System 製作網頁示範（下）

Permalinks:

使用 960 Grid System 製作網頁示範（上）

不過就算你做到以上幾點，如果宣傳推廣欠妥，潛在客戶根本不知你的存在，則生意從何而來呢？傳統的廣告媒介不可以深入介紹一項服務 / 產品的好處，建立消費者信心更要大使金錢。而很多行業亦沒有展銷會等推廣途徑，接觸到新客戶的機會不大，這類公司最依靠口啤，及需要提高客戶對其產品服務的信心。

網站和一般廣告最大的不同之處是可以向客戶提供更多資訊，但一個5分鐘可以看完，只提供最基本資料，久久不作更新的網站，是否就可以大大加強顧客的信心呢？公司網站已不是新鮮事物，不過很多網站的死症是資料不足，發揮不到網站的優點，收不到推廣之效。結果以後投入發展網站資源越少，做成一個惡性循環。

資訊不足是香港公司網站的普遍問題，當大家看得越多網站，對資訊的渴求越高，不會滿足於「小冊子式」的網站，就以報道中的搬運公司網站為例，他們會製作工作流程的視頻、提供專業的搬運技巧知識、把價格公開讓消費者自行計算費用都是值得參考的策略，個人認為可以再加強一點和網站訪客交流的方式。其實建立網站只是網上宣傳的其中一部分，當建立了公司網站，更可利用 social network 的渠道找尋商機。

總括而言，現今網站必須提供大量真實的資訊，懂得和訪客交流，當建了一個不錯的網站，就可利用強大的網上社交網絡，建立和管理公司形象。

題外話，搬運公司是 Comment Spam / Splog 的常客，我估是因為這行業對 web 的認識較少，較容易相信 SEO 公司，不會過問 SEO 是如何運作。事實上「搬屋」是一項地區性的服務，而且「搬屋」一詞只在香港地區使用，要在搜尋器排得較前並非太難。反而不斷在別人的網站胡亂留言，自私的行為隨時把辛苦建立的正面專業形象付之一炬。

相關報道

Permalinks:

一個可以增加消費者信心的網站

可惜搜尋器天生愛文字，內容太少，甚至只得 point form 幾十字，很難令網站有好的排名，換句話說減少了一個網站宣傳渠道。而且近年來，一些國內網站都增設繁體中文和英文版，希望更直接地找到客源。如果你的生意受到其他地區公司的競爭，又發現對手網站比你的豐富得多，我想這是一個警號，需要想想方法增加網站的內容了。

網上有一篇<如何創建內容豐富的企業網站的網頁>文章很值得讀一讀，原文作者不詳，為公平起見請自行在搜尋結果選一個。文中的幾個建議可作參考之用，括號內是我加入的意見：(1) 介紹公司背景時，不妨寫多一點有利於銷售自己產品/服務的因素  (不一定要 hard sell，視乎你的語調吧)；(2) 產品的規格要詳細書寫，如能提供用戶的評語，更有正面的影響 (產品/服務總有一些賣點，不應怕貨比貨)；(3) 增設 FAQ，解答訪客常見的問題，務求不要因為小問題而失去一個生意機會 (例如你經營購物網站，是否會接受海外顧客？)；(4) 嘗試撰寫行業相關的文章 (例如可開一個 company blog)。文中我唯一不同意的地方是在網站轉載別人的文章，個人認為只有國內的網民對這行為接受，香港和外國則極討厭這做法，尤其是把別人的文章用在商業網站上，肯定令網站的形象受損。

如果你仍覺得點子不足，不妨再參考這一篇長文： How to create good content for your Web site。個人認為，文中提及的公司參與的活動和回顧、教導客戶使用產品 / 服務的技巧、公司發表的新聞稿和推廣活動資料 (在報紙上看到某某公司的活動，在他們的網站卻沒有相關資料的情況真的屢見不鮮) ，都是一般公司網站也可以增加的內容。另外有一點非常重要，如果網站上的內容有時間性的，例如公司新聞和公司blog，則一定要定時更新，半年以上也不去更新就太不像話了。

一個網站除了文字內容外，多多少少也有相片，甚至視像短片。首先帶大家看一個日本的購物網站 Living Motif 。

這網站的設計很簡單，給人很清爽的感覺，不過若果產品的相片質素欠佳，又矇又暗又反光，則效果會大打折扣。題外話，這網站是用日本的 open source shopping cart 製作，誰說用 open source 製作的網站又醜又公式化？

數碼技術令攝影變得容易，如果你想DIY自己拍節省一些開支，就算是攝影的初哥，只要購買合適的器材拍到上述購物網站質素的相片並非不可能。台灣和外國都有書籍教授簡單的商品拍攝技巧，而國內生產的閃燈、射燈等器材亦不貴，如果公司常有大量產品需要拍攝，很值得投資。若果不想自己拍攝，或者拍攝的不是商品而是場地攝影或大型商品，找 freelancer 在香港亦相當容易。

其實我知道不少公司都有製作小冊子之類的商品說明，可惜以前製作時不懂得要求製作公司交一套原相來製作網站，結果網站上只好用印刷版本scan一次，效果想好也難吧。

Permalinks:

如何提高網站內容的質和量

不過對方並非嫌原設計太簡單，想弄得更美觀花巧，而是發覺很多訪客到過網站首頁便離開，根本沒有看到網站最想給訪客看的資料。而他們亦發現，外國同業的網站，都很懂得利用網站首頁的位置，先把重要的資訊、能夠吸引訪客繼續看，增加購買意欲的資訊帶出來。香港很多網頁設計廣告常常批評由外國公司製作的網頁樣版 (website template) 有多公式化，但這些 website template  最少都考慮到網站首頁的重要性，提供首頁和內頁不同的樣版。網站如果未能帶來預計的成效，除了因為網站沒有考慮 SEO 之外，亦可能是網站留不住訪客。

很多香港公司網站的首頁，往往用來放置一幅精心製作的圖片，或者一段聲色俱備的flash短片，提供的連結不是到公司的簡介頁，就是到產品內頁。這類設計的最大弊病是未能把重要的資訊表達。訪客找不到最吸引的資訊和優惠，自然不會看下去，結果把生意白白送給了競爭對手。要短道我們處於一個資訊量多得驚人的年代，只有最直接地傳達訊息，才有機會讓對方接收得到。

對於一般內容不多的公司網站，首頁就更加重要。因首頁很可能是唯一的 landing page (如果你的網站有一個blog，則可能有多個 landing pages，但還要參考網站的流量分析數據，因不知blog究竟有多少讀者)，一個和潛在客戶初次接觸的機會，你會白白浪費嗎？ 你知道應該說什麼嗎？

香港網站的另一特色是有多語言版本，首頁正好用來給訪客選擇那一個版本，其實只要寫一段小程式就可自動進入其瀏覽器設定的語言。

Permalinks:

網站首頁的重要性

這書推出後在網頁設計的圈子引發很大的討論，最大的爭論是究竟用 Table 這概念作為網頁排版是否一個好方法呢？

用 Table 的好處

用 Table 當作排版的好處是易學易明，小學生也可以很輕易地畫一個複雜的 Table，把內客排得好看。反觀使用一個一個 Block 來儲著內容，再任意地放在畫面的不同位置，看似彈性更大，不過礙於瀏覽器不相容，結果走位的情況很難避免，需要更高的技術。

用 Table Tags 和 display:table 之別

首先重溫一下用 HTML 的 Table Tags 來排版的種種問題，其中最為詬病之處是使用極多 Tags，令檔案變得不必要的大，而日後修改亦難。而更重要的一點是，很多時都會在 Table Tags 內直接設定屬性，例如使用 bgcolor、valign 等，設計和內容是分不開的，加重了修改大量相同網頁的工作。此外用 Table Tags 作排版亦不乎語義網的要求。

用 display:table 的方式創製 Table 作排版之用，其最大好處是可以令設計的元素用 css 設定，而亦不違反語義網的要求 (其實只不過是 Div Tag 是中立，實際上也不見得好很多)，可惜使用的 Tags 數目則不會減少很多，只是全用 Div Tag 取代 (不過有時某些網頁設計師為了做到一個效果，不自覺地用上大量的 nested table，理論上是可以避免的)。

用新方法好嗎？

使用上述的方法，可以用一個簡單的 Table 概念，又解決了傳統 Table Tags 的問題，實在是一個不錯的選擇… 如果有這一個選擇。要知道，IE 要到未推出市場的 IE8 才會支援 display:table 屬性，所以實際上來說，還是不要想吧。到今天我還常常收到客戶的要求，就是一定要 IE6、甚至是 IE5.5 看得到才收貨。

css3 和 HTML5 (全都是未來的技術) 都有涉及網頁排版的改變，然而所有的技術，最終都要各大瀏覽器品牌加快步伐配合，網頁設計軟件的加入，網頁設計師才會願意使用。

Permalinks:

重回用 Table 作網頁排版的舊路？