當開發ASP.NET專案要配合資料庫，除非是自行架設網站，否則在選擇虛擬主機時，一般都是預設Access。如果要使用MSSQL的話，以智邦為例，就必須選擇MSSQL虛擬主機服務，不過如此一來，就將從年費4,000元飆到12,000元。
因此就考慮改使用MySQL資料庫，後來查了一下有幾家支援MySQL，有的還支援Ajax等功能。如果考量價錢的話，可以選擇國外的主機代管商。
一般Visual Studio是微軟公司為.NET程式設計師所提供的IDE軟體，其還隨附SQL Server Express資料庫伺服器。因此要使用MySQL資料庫的話，可以到MySQL官方網站(
http://dev.mysql.com/downloads/)下載MySQL Community Server和MySQL Connector/Net，其步驟如下：
1.安裝MySQL Community Server
目前最新版本是mysql-5-1.47-win32.msi，而安裝時因考慮到以後中文資料輸入的問題，所以一開始先設定「Custom」安裝，然後在「Please select the default character set.」步驟的「Manual Selected Default Character Set/Collation」中從預設的「Latin1」改為「utf8」。
如果之前安裝沒有設定到的話，可以到My.ini設定如下：
[mysql]
default-character-set=utf8
…
# The default character set that will be used when a new schema or table is
# created and no character set is defined
default-character-set=utf8
2.安裝Connector/Net
下載Connector/Net組件，將mysql-connector-net-6.2.3.zip解壓縮後，執行mysql.data.msi程式即可。
3.Visual Studio連接MySQL
開啟「檢視/伺服器總管」，在「資料連接」上按一下滑鼠右鍵執行「加入資料連接…」，然後執行「變更資料來源」為「MySQL Database」。
Server name：localhost
User name：root
Password：XXX
Database name：test
4. C#程式碼
using MySql.Data.MySqlClient;
SqlClient相關語法前面加上My
MySqlDataAdapter
//SqlCommand
MySqlCommand
//連線字串設定如下
string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;
MySqlConnection conn = new MySqlConnection(conString);
在Web.config檔要有以下內容：
範例：登入檢查帳號是否存在與權限判斷
如果要運用到MySQL的預存程序，例如查詢某個帳號是否已經存在資料庫的話，首先在MySQL執行下列語法：
DROP PROCEDURE IF EXISTS CheckUserName;
CREATE PROCEDURE CheckUserName( User_Name VARCHAR(50) )
BEGIN
SELECT COUNT(*) FROM member WHERE Username = User_Name;
END;
C#程式碼
使用jquery用戶端檢查帳號是否已經有人註冊
參考：[MySQL] 如何接收 Store Procedure 的傳回值
閱讀全文...
自從蘋果執行長Steve Jobs表示Flash會耗用大量CPU資源，因此iPad不支援Flash，而支援HTML5後，Flash與HTML5的效能就成了大家關注的焦點。
事實經過分別在Mac與Windows系統上，測試Safari、Chrome、 Firefox、IE等主要瀏覽器透過Flash Player與HTML5播放YouTube影片時，各自的CPU負載之測試後的結果是：如果沒有硬體加速的話，Flash的CPU負載的確不低；但是在Windows系統上，支援使用顯示卡硬體加速的Flash Player 10.1可大幅降低CPU負載，表現比HTML5還好。
而今年的Google I/O大會上，重點就放在HTML5技術的應用：Google I/O大會報導。
話說到HTML5，在10年前，負責制定WWW網頁格式標準的W3C協會（World Wide Web Consortium）以為4.0版就可以滿足未來各種網頁內容的需求，再也不需要修改HTML格式標準，頂多進行細部規格的調整。但是隨著網路應用程式的發達，W3C協會發現，有越來越多的網站應用程式需求已超出HTML格式所能支援的範疇，甚至使用者需為特定功能額外安裝擴充元件，例如YouTube 採用了Flash格式來播放影音內容。
為了讓HTML語法更容易用來開發各種應用程式，W3C協會從2004年開始制定新的網頁格式標準，也就是HTML 5。在這個新版本中，W3C的制定工作小組大幅增修了多項網頁元素和控制器，於2008年釋出第一個HTML 5草案版本，預定2010年完成功能制定，不再增加新的語法元素，發布2年後若無嚴重問題，2012年再由W3C協會正式發布。
HTML 5旨在提高HTML的交互行，支持當前多樣的，複雜的Web內容。同時，它也會解決HTML 4 Web應用功能上的欠缺，例如：
- 一些幫助我們描述內容的新標籤
- 改進的Web Forms 2.0，為開發提供許多新選項和新功能，以更簡單更有效地處理表單的輸入與發佈。
- 為Web開發提供API，，如音頻和 視頻標籤可以讓開發者不借助第三方工具直接播放 Web 視頻和音頻。
- 標籤將允許直接在上面用腳本繪圖：
- 用戶可以編輯網頁的部分內容並實現同網頁的交互，，contenteditable屬性允許你設定網頁的哪一部分可以編輯。
不過，在HTML 5也移除了部分原本在HTML 4中的語法，例如Font、Center，開發者必須改用CSS指令來進行這類字體或排版功能的效果。
至於提到CSS，其最重要的目標是將文件的內容與它的顯示分隔開來。在CSS出現前，幾乎所有的HTML文件內都包含文件顯示的信息，比如字體的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在HTML文件內列出，有時重複列出。CSS使作者可以將這些信息中的大部分隔離出來，簡化HTML文件，這些信 息被放在一個輔助的，用CSS語言寫的文件中。HTML文件中只包含結構和內容的信息，CSS文件中只包含樣式的信息。
CSS 3語法中終於直接支援圓角、漸層、陰影等效果，不過很多效果在不同瀏覽器的語法與產生的效果卻不同。
從 HTML & CSS3 Readiness這份圖表可以很容易看出一些關鍵，它把 HTML5 與 CSS3 從 2008 年到 2010 年各個主流瀏覽器的支援情形以扇形區色塊圖的方式呈現，每個瀏覽器及渲染引擎都有自己的色系。
- 目前支援度最高的新特性為 Drag and Drop / @font-face / contenteditable 。
- 目前支援度最佳的瀏覽器為 Chrome 與 Safari。
- 目前支援度最差的瀏覽器為 IE 系列。
綜合來說，微軟還提供了一個網頁:Internet Explorer 9 Platform Demos讓我們體驗Web的未來趨勢。雖然這是微軟為了測試IE9所設計的網頁，但利用Firefox 3.6, Opera 10.1去看，也是玩的很愉快。畢竟Firefox, Opera瀏覽器跟隨HTML/CSS標準的起步，比IE9要早太多了。
對於一般人來說，可以在該網頁上看看未來的Web應用軟體的UI設計趨勢；對於網頁開發者，可以透過檢視網頁原始碼的功能，把那些新功能全都學起來。
由於各家瀏覽器全面支援還需一段時間，因此HTML 5的影響力得等到2011年後才會充分發酵。
http://www.w3.org/TR/html5/
http://www.w3.org/Style/CSS/
閱讀全文...
2010年5月6日台灣微軟上市發表了Visual Studio 2010，主軸放在「三螢一雲」(3 screens and 1 cloud)的開發應用，也就是協助你以熟悉的工具及技術，快速開發–電腦、手機與智慧型裝置上的軟體及雲端服務。
Microsoft Visual Studio 2010英文版已於4月13日正式推出，而中文版預計於6月1日該週開放下載。
ASP.NET的發展
ASP.NET 1.0透過Code-behind技術一舉推翻了過去ASP開發時代HTML與程式碼夾雜的狀況，同時把物件導向程式設計的精神與事件驅動(Event-Driven)帶入了Web應用程式開發的世界；ASP.NET 2.0則透過新的資料庫存取技術，讓Web資料庫應用程式的開發大幅簡化，並且透過新增的控制項有效地提高開發人員的產能。
緊接著ASP.NET 3.5則伴隨著.NET 3.5的推出，將微軟重要的查找技術LINQ以及LinqToSql加入了ASP.NET當中，並且把ASP.NET AJAX正式納入成為產品中重要的一環；而ASP.NET 3.5 SP1則宣示了透過Dynamic Data技術，建構高延展性的Web資料庫作業程式，並同時帶著ASP.NET MVC Framework 1.0打下高階商用Web應用程式的基礎。
而ASP.NET 4.0帶來了什麼樣的技術呢?
更完整的Web Forms技術
從ASP.NET誕生到現在接近10年的焠鍊，讓ASP.NET Web Forms各方面均已經相當成熟而穩定，如今在這方面，當取得Visual Studio 2010後，將發現有更豐富的專案範本，增加了Page.MetaKeywords以及Page.MetaDescription這2個搜尋引擎最佳化的屬性，讓開發人員可以輕鬆的在網頁中加入可供搜尋引擎檢索的訊息，另外針對Cache技術，除了可將Cache資料儲存在記憶體中，也可以針對不同情境下的需求，將Cache資料存放在不同的位置(例如硬碟、或資料庫)。
更聰明的方法製作動態網頁jQuery及Ajax
Visual Studio 2010對jQuery已全面支援，jQuery是一套跨平台的JavaScript函式庫，再加上ASP.NET Ajax Library與Ajax Control Toolkit的整併，並直接在CodePlex提供下載，可以想見未來在Client-Side技術上，開發人員將擁有更豐盛的資源，可更快速的開發出便捷好用的Web應用程式，同時也可兼顧用戶端UI呈現的即時性與精緻度。
MVC 2為大型開發案奠定基礎
對於一個ASP.NET開發人員，要同時熟悉HTML、CSS、JavaScript、SQL、VB或C#等，才能夠完成一個可上線的程式。因此越是在大型的Web應用程式開發案，或者在User Interface與Business Rule常常改變的網站，就越需要MVC這樣的架構，然後網頁的操作介面和程式可以分開由不同並學有專長的人負責開發。
然而這樣的開發方式對於過去ASP.NET應用程式的開發相當直覺，習慣於Web Forms的開發人員，一時之間要進入MVC世界，所需面對的挑戰和開發方式的改變，確實是令人感到有些困擾，因此新版ASP.NET MVC 2提供了讓開發更便利的擴充，例如Model Validation就是在ASP.NET MVC 2新加入的功能。
把Dynamic Data整合到Web Forms
Dynamic Data技術從.NET 3.5時代出現之後，其中DataAnnotations機制及相關的概念，也擴展應用到了MVC及Silverlight應用程式開發中，讓前端使用者介面與後端資料庫徹底隔離。最新的ASP.NET 4.0，Dynamic Data技術甚至可直接整合到傳統Web Forms中，對於需要設計大型資料庫應用系統的開發人員來說，將會有相當大的助益。
閱讀全文...
在製作網頁時，一般都會思考目標使用者是誰、這個網頁主要是給誰看的。「思考使用者」這件事可說就是在選擇網站上所要公開的內容種類。也就是說，如果是給不特定多數的使用者看的，最優先考量的就是內容要單純、確實、好操作等特點。如果針對的對象是對流行時尚有興趣的女性，就要優先考量高級品味、令人印象深刻等特點。目標對象不同，網頁樣式也就隨之不同。千萬記住網頁對象可說是決定網站設計方向的舵手。整合主題、目的、瀏覽對象、需要的功能等，就等於是在進行設計了。
選擇網站建構技巧
想做出不同樣式的網頁，有時候就必須選擇網頁建構技巧。本書當中將樣式設計與製作技巧完全切割開來，因此並不說明各種技巧。但是，了解網站的用途和技巧的選擇大有相關。例如像流行時尚的網頁和以最新話題為主的網站，就會需要大量運用視覺效果，如提供影片等嶄新的表現方式。這時，Flash這類聲光效果豐富的內容(rich contents)就會比較適合。此外，要讓任何人都能方便瀏覽操作的公眾網站，則需要以XHTML或XML來建構所要提供的資訊。在進行網站製作時，至少在主題、使用者、建構技巧這三項上必須要選對。
不要陷入形式化的設計模式
確立好上述三項後，網站樣式就能分出屬於那種題材。公眾網站就會做得像公眾網站、企業網站就做得像企業網站。但是要特別注意，在實際製作網頁時，一直想著要做出該主題的典型樣式，反而容易造成忽略使用者的觀點，落入千篇一律的巢臼。
地方政府單位、教育相關網站的設計
公眾性高的網站，重視使用方便性
公眾性高的網站首重資訊的結構、連結的方便性，最後才來講究樣式。「連結的方便性」對使用者最重要，對連接使用者與網站的瀏覽器等瀏覽工具也很重要。這種網站在建構時要確認標準語法(例如XHML等)，要求該加的標籤(tag)是否都正確加上去了、是否有多餘的裝飾會影響使用者操作等。這些都做到了，再來強調清楚易懂，讓網站更平易近人。
必須要有連結性(access ability)的網站
地方市政府、教育相關單位必須要讓使用者能連結取得公共資訊服務，這樣的考量是很重要的。現在越來越多各級縣市政府開設網站來介紹市政建設，與接受民眾諮詢，因此特別重視網站連結性。
Design Samples
http://www.pref.niigata.lg.jp/
新瀉縣
要連結到災害資訊中心，與使用搜尋工具都非常簡單容易。
http://www.pref.kumamoto.jp/
熊本縣
最新消息放在中間，優先順位很清楚。
http://www.jpo.go.jp/indexj.htm
特許廳
提供了相當清楚的全區導覽。
醫療、生活資訊網站的設計
簡單、一目瞭然最重要
談到疾病或醫療等總讓人覺得高深困難，但我們可以透過設計讓網站看起來單純、簡易，以改變這樣的印象。網頁內容較為困難時，可以適時加入圖片，這樣不但有助於理解，還能緩和文字給人的壓迫感。內容越是困難，就越需要大量使用簡單的圖像，或清楚易懂的插圖來解說。
MEDINE
MEDINE(MEDIars on LINE)是醫療資訊搜尋網站中全球知名的資料庫，由美國National Library of Medicine管理，裡面可以查到世界70個國家出版的最新醫學期刊，包括文章與重點集結。雖然幾乎都是英文，但長久以來一直都吸引很多人來瀏覽查詢。
Design Samples
http://www.ihealth.co.jp/index.html
ihealth☆健康線上網站
插圖與裝飾讓畫面更平易近人。
http://us.pampers.com/globalsplash/languagejump.jsp
pampers.com
採用品牌顏色，讓畫面呈現一種值得信賴的感覺。
http://www.bbc.co.uk/health/
BBC Health
用動脈和靜脈的配色將資訊分組。
一般企業網站的設計
定型化的設計能有效傳遞資訊
多數的企業網站都運用相同架構的設計，一般都是在網站LOGO及全區導覽的標頭下方，依序放入與該企業產品相關的關鍵影像，和最新資訊的主題區塊。這樣的樣式讓企業類型網站的操作性具有一慣性，使用者也可說相當熟悉。因此，只要在關鍵影像或網站LOGO、導覽樣式的設計上呈現自己的風格，就能輕易和其他公司做出區隔。
全區導覽的位置要放右邊
全區導覽一直以來總是被放在畫面左邊，現在有人開始反向操作，換到右邊來了。畫面左側在使用最小的瀏覽器時，由於能讓畫面左側的資訊完整呈現，一直以來都被視為是選單顯示的最佳位置。但顯示完整範圍的800×600像素顯示器，畫面右側幾乎不管出現資訊被切斷的情形，也許就是基於這樣的理由，他們覺得放在右邊(常用的捲軸都在右邊)會更好。另外，左側本來就有瀏覽器原有的操作功能，為了避免搞混，放在右邊才是更好的選擇。
Design Samples
http://www.lego.com/en-US/default.aspx
The Official Web Site of LEGO
關鍵影像下方有各個導覽詳細內容介紹。
http://canon.jp/
Canon
關鍵影像和小標題區分開，是很典型的樣式。
http://www.ford.com/
Ford Motor Company
這個設計樣式中導覽結構單純、且很有穩定感。
IT相關企業的網站設計
利用視覺元素轉變印象
提供IT服務或產品的網站，其中的內容大多都可分為針對法人與針對個人兩種。針對法人的網站，內容大多包含技術性等難度較高的資訊內容，及企業本身的公司資訊等。針對個人使用者的網站內容，則應該要稍微簡單易懂些。可是由於各個資訊的入口太多只有一個，所以要儘量用門檻較低的呈現方式，讓網站有自己的個性表情，打出企業的品牌印象。尤其如果能適當加入關建影像，會讓網站更具親和力。
表格設計已經過時了？
表格標籤本來是用來製作表格的，但是卻用網頁編排設計之用，但是這種情形聽說不久的將來就會消失，因為今後主要的網頁建構法，將是用CSS和XHTML來將資訊與樣式的定義分開。從重視資訊架構型態的網路架構來看，使用表格就好像是用麻將牌來蓋房子一樣，雖然沒有什麼做不到的，但就是沒什麼意義，因為別的方法更有效！看來，重新思考標籤本來用途的時期已經到來。
Design Samples
http://cybozu.co.jp/
Cybozu
一貫重視幽默的網站風格，已經昇華為品牌力量。
http://welcome.hp.com/country/jp/ja/cs/home.html
日本惠普株式會社
印表機和影像的質感完全統一。
http://www.siemens.com/entry/cc/en/
Siemens AG
該公司經營的產品項目雖多，卻不會給人繁雜的印象。
介紹產品的網站設計
重視樣式的高層次設計已成為主流
有特定主打商品的企業網站、或介紹新產品的商品活動網站，這類以傳達商品資訊為主要目的的網站，要求的重點不只要有資訊、還要有創意。商品能否讓瀏覽者印象深刻，決定了這個網站是否成功。在這種情況下，Web也被要求設計得要有CM或雜誌廣告等促銷活動的效果，所以這種網站的最優先課題就是保持視覺資訊的質感。不只要有質感愈高級愈好的產品照片，還要有不影響照片品質的文字設計。
Affordance
網站建構的技巧當中，對於滑鼠碰到選項按鈕時而引發的動作我們稱為Affordance。這是將研究生態心理學的James Jerome Gibson提出來的概念再重新給予詮釋的名詞。這個詞一般意指環境會影響人類的行為、行動的方向。下雨了就躲到石頭下，這種人類因自然現象發生的變化而採取的行動，才是原本Affordance的真意。
Design Samples
http://www.peugeot.co.jp/index.html
Peugeot Japan
網站風格統一為「和消費者談車」，相當簡單。
http://www.symantec.com/ja/jp/index.jsp
symantec
全部設定為企業形象的色彩，算是刺激性較強的設計。
http://www.fritzhansen.com/en/fritz-hansen.aspx
Fritz Hansen
整體的設計樣式，能讓人感受到產品的性能。
展出作品集的網站設計
做個讓作品看起來更具效果的網站
網站有時也會用來發表自己的照片或插圖、或是介紹創作者、製作公司的作品及工作。有的網站會用Flash將整個網站化成作品的展示間，有的則是以縮小的照片來陳列作品，方向可以有很多種。最近有些網站則是運用部落格的功能讓瀏覽者觀看之外，還能讓人閱讀文字內容。樣式種類雖然很多，但他們共通的特點就是主題性很強。製作東西本身的行為本來就需要有個主題，不然就無法進行下去。
部落格會對網站造成什麼改變？
現在大受歡迎的部落格不用軟體工具就能更新，其中又以管理容易、能及時提供新資訊給使用者的RSS技術最受矚目。RSS主要透過RSS READER軟體來將最新資訊提供給使用者，但是這個工具和技術其實有可能會改變網站的使用方式。過去，使用者都是從入口網站直接跳到其他網站，但有了RSS就可以直接跳到部落格。入門網站週邊的廣告可想而知，效益會越來越低，因此部落格可能會成為改變金錢流向的要素之一。
Design Samples
http://www.hi-res.net/
Hi-Res!
結構雖簡單，但是還是能讓人感覺到這是個作品集網站。
http://www.joshuadavis.com/
Joshua davis
呈現製作的介面(interface)。
流行時尚相關的網站
加入尖端的發想
要讓網頁呈現出流行感，就是不斷將發明的創意化為有形，表現方式往往都要著眼於未來性。這樣說來，好像流行時尚的網站就沒有樣式可言了，不過懷疑Web的既定常理，是不管什麼網站都是共通的。使用性、連結性、SEO等評量一個好網站的標準，都是因為使用者有這類的需求。在流行的領域所追求的是超越使用性、能刺激視覺與聽覺的要素。這種網站的企劃要展現出重視先進與自由的感受。
什麼是使用性？
方便使用的網站就稱為使用性好的網站，但使用性好不好還需要檢查操作步驟才知道。具代表性的評量方法為「專家評量(Heuristic evalutation)」以及「優使形測試(Usability Test)」兩種。前者是由學者專家評估，後者是由使用者實際使用過後寫下意見。沒有經過這些是無法定論使用性佳不佳的。所以這還真不是件簡單的事呢！
Design Samples
http://www.theapt.com/
The Apartment
強調理性和都會生活這樣的訴求。
http://nikerunning.nike.com/nikeos/p/nikeplus/language_tunnel/
Nike Free
商品的質感從照片和圖形之中就可感受到。
http://www.ikea.com/
IKEA
這個網站的發想是要顯現模特兒立體旋轉的空間。
食物相關的網站設計
傳達樂趣的顏色與形狀
以食物為主題的網站有食品業者、食譜網站等。即使是以資訊傳達為主的企業網站，也必須創造值得放心、很有樂趣的印象。這時可以大幅採用令人聯想到食物的顏色，以及讓人感覺很開心的插圖。這樣的樣式會受小細節影響，例如有的時候文字內容陳述很多，不如用簡單、但四個角落很穩的表現方法來呈現會更美，所以在處理時要儘量小心這些小細節的部份。
影像解析度
顯示器上看影像的最佳解析度為72~96 dpi。「dpi」是指一英吋內有幾個點的單位數。列印黑白影像或傳單只要144dpi，商業用的就要300dpi。有時候影像解析度很高，可是顯示器上顯示的大小可能較小；有時候即使只有72dpi，但是畫面大小高達1200像素，這樣還是可以列印出不錯的品質，所以不能光用看的來判斷解析度大小。
Design Samples
http://allrecipes.com/
All Resipes
畫面很平易近人，令人很安心。
http://www.marthastewart.com/
Matha Stewart Living
感覺這家餐廳有點知性，不喜歡和別人一樣。
http://www.betterhome.jp/index.php
Betterhome的料理教室
內容多但卻看起來很簡單，讓人感覺到行家在料理的世界裡自在遊走，游刃有餘。
design note
設計與品牌
企業或商品要用某種既定的圖形或顏色來表現，以擴大其圖形認知度，甚至要讓人們從該圖形輕鬆就能聯想到企業或商品。這一連串的行為就稱為「品牌戰略」。在品牌戰略中，Web或適合促銷的印刷媒體所被賦予的角色功能就很大。這些是除了商品本身以外，讓品牌直接讓客人看到的機會。當然這些成果一定得要能展現品牌印象才行。
那麼有方法能讓品牌反映在設計上嗎？有。不用說，基本上沿襲企業形象色彩或標誌即可。品牌戰略就是向企業形象這樣，先定下所有媒體都要呈現的元素，再來談及其他的。所以只要將這些元素反映出來，就可展現一貫的品牌印象。但如果以為這樣就可以放心的話，那又太早了些。Web網站的設計，有時候是很難如己願地呈現品牌印象的。即使是徹底遵照企業形象手冊來建構網站也一樣。原因就是樣式的持續時間不夠。也就是說，網站設計大幅更新，既定的印象也會隨之重新改變。
光是企業形象並不代表品牌印象。網頁設計整體給人的印象，有時是會超越企業形象等「零件」功能的。設計格式包含功能或品牌印象等看得見的要素，及需要操作的要素等所有要素。這在介面設計(interface design)用語中就稱為「外觀與感覺(look and feel)」。而這個外觀與感覺也是品牌印象。蘋果電腦從2000年到2006年，Web網站上的外觀與感覺都還沒改過。持續使用相同的設計及持續相同設計格式的開發，對品牌戰略而言實為重要。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
圖像設計(Graphic Design)的製作門檻高，需要兼具創意和製作技巧。不過在Web上除了從頭自己製作圖像之外，也可以將既有的影像直接放在網頁上。前者需要技術，後者則需要編修能力。尤其是近年來網頁設計者有豐富的圖庫可以運用，因此，取而代之的是圖像選擇與編修的能力就很重要。所以不會製作圖像沒關係，有優異的編修能力就行了。
圖像傳達抽象內容
能夠傳達服務內容氛圍的影像處理法
圖像和文字一樣都是視覺資訊的一種。其中以拍下某一瞬間的影像更能賦予網頁主題具體的印象。圖像比起需要慢慢細讀的文字，更能及時傳達內容概要，所以在進行處理時不是只要把有主題性的影像排在一起就好，而要讓影像具有抓住瀏覽者的眼與心的特質。在Web上主要是將影像與影像互相結合以強調意境，或是將影像適當裁切，以傳達某件事實或概念。
剪裁可以將焦點放在不同的主題上
「剪裁」是指重新定義影像的顯示範圍。全身影像可以改成大頭照、位於畫面旁邊的人可以移到中間等，讓我們可以只取得所需部分。這樣的加工動作不只是在修正影像，也有改變影像主題的作用。
著作權
圖庫是在製作時間與經費有限時的好幫手，您可以買圖庫光碟，或是從網路下載來使用。由於很多圖庫光碟都沒有著作權，沒有使用期間、次數、目的地限制，買了就可以自由使用。但也因取得容易，如果當競爭者的網站也使用到相同的圖片，那可就糗大了！！而要解決這樣的問題，您可以簽訂有著作權管理的圖像獨占使用合約。採用這種方式時，每幅影像的使用都要依照使用目的、區域、期間、大小等付費。這種合約條款複雜，比較不方便，但比起大費周章地自己拍攝，倒不失為一個值得考慮的選項。
Design Samples
http://www.billyharveymusic.com/
Billy Harvey Music
故意使用不很精緻的半身照，自己動手貼貼黏黏的感覺憑添一些去趣味。
http://www.au.kddi.com/au_design_project/index.html
KDDI au：au design project
呈現出由近而遠的深度的商品影像，架構頗有創意。
http://www.imperialhotel.co.jp/j/
東京帝國飯店
優雅的主題LOGO搭配上相得益彰的美圖影像。
商品影像的有效呈現方法
圖片的位置與大小
跟實體商店的商品陳列一樣，以商品介紹為主的網站商店等給人的印象，也受到商品影像的影響。商品的呈現方式會大大地影響集客量，所以除了單純排列各個產品影像外，還需要再花些心思。建議可以努力的方向有三種，包括在影像外框上做有特色的加工、在影像的背景加上顏色或漸層效果，以及將數張影像合成為一個影像等。這三種手法都是在拍完後的影像上後置處理加上去的，所以一般與攝影無關的製作公司也做得到。
向攝影名家學習
各個時代都有當代的優秀攝影家，我們也要對這些影響現代廣告表現方式甚鉅的名家多家接觸。例如攝影作品故事性濃厚的Elliott Erwitt、以固定的美學意識控制攝影對象的Bruce Weber、建立時尚攝影風格基礎的Pennlrvin，以及Robert Mapplethorpe等人的作品，至今仍給世人莫大的驚奇。
Design Samples
http://www.asahibeer.co.jp/hon-nama/
Asahi本生
層疊的設計架構和影像的風格有種統一感
http://www.barberosgerby.com/
Barber Osgerby
拍攝物體的構圖好像圖畫一樣，很有趣。
文字與圖形
在圖像中加入文字
企業品牌網站中，很多會使用傳達企業印象的關鍵影像。一般而言，關鍵影像都會搭配文字標題，也就是結合文字與圖像。文字放的位置不能放在影響圖像畫面的地方，要找個和圖像取得平衡的位置。如果找不到，就要進行影像的加工處理，安排出一個能放文字的地方。此外，為了要和影像取得平衡，在選擇影像時，就要選擇能安排文字進去的圖片，或是剪裁圖像來調整圖像要素(主要指拍攝對象)的位置。
JPEG中容易掉落的陷阱
顯示器的顯示效果各不相同。即使使用相同的作業系統，不同的顯示器顯示出來的影像也會不一樣。尤其以紅色、橘色、黃色等暖色系的顏色差異更大，其中對比強烈的暗色系暖色調，顏色差異更是大到以為看到的是不同的網站。若我們使用Flash的話，則因顯示器不同而產生的色差狀況比較不嚴重，但若使用的是JPEG格式，則產生色彩偏移的情況會比較多。一般說來，在網頁中使用JPEG格式的情況比GIF格式多，但若不注意配色的話，結果可能是難以愈想的。
Design Samples
http://www.subaru.com/
SUBARU All-Wheel Drive
大膽的文字配置，更襯托出圖像有強有弱的效果。
http://www.sum41.com/
sum41
文字風格和手繪風格的文字搭配在一起，很具相乘效果。
提高設計性的去背影像
使用的地方及其效果
影像去背是在雜誌設計上常見的技巧。包含背景的影像形狀通常是四角形，所以當幾張影像排在一起後的畫面，看起來就像是疊箱子似地會出現很多直線，實在不太好看。如果影像都已去背，則在設計上就可以自由運用。此外，影像的背景可能會有和所要設計網頁無關的雜物，所以必須將背景去掉。去掉影像上無關緊要的資訊，並讓編排設計時更好運用，而這正是去背景最大的兩個好處。
製作去背影像
一般做法都是以Photoshop來進行去背作業。先用筆刷做出遮色片(Mask)，再用向量工具在要去背的拍攝對象周圍畫出路徑，再予以分離。外面也有些業者專門負責幫人做去背路徑。用Photoshop則可以用簡單設定輕鬆完成去背工作；如果是高解析度影像需要去背去得很完美，也可以去買Photoshop專門的外掛程式來用。例如Corel公司的knockOut 2這軟體就是去背高手，不管是水滴還是頭髮都可以輕鬆地完成去背工作。
Design Samples
http://www.scope.ne.jp/
scope(スコープ) - インテリア家具・雑貨のオンラインショップ
徹底去背的影像用於商品介紹上，感覺很乾淨、清爽
http://jp.sun.com/
Sun Microsystems
Linktext配上去背影像當小圖示，網頁內容一目瞭然
由數張影像合成的影像
確定傳達的主題，選擇合適的種類
用圖像、文字、顏色來傳達網站內容或印象的關鍵影像，可以用影像或圖形加以合成來製作。合成手法大致可分兩種，一種是將數張影像重疊；另一種是將數張影像並排。前者可以用圖層的方式表現豐富的顏色，給人耳目一新的印象，但是由於使用影像素材數較多，製作時要更精緻細膩，所以難度較高；後者的類型則是在正正方方形狀下呈現出一種知性的氛圍，讓照片上的訊息更容易傳達給瀏覽者。
影像與隱喻(metaphor)
沒有隱喻的功能，影像就不可能乘載訊息。以顏色為例，人們常以青色代表冷靜、紅色代表熱情。以圓形為例，圓形代表圓融、方形代表知性，這些都是一種隱喻。設計者常常要做從言語的印象畫出圖形的訓練。但是，在正式設計時，就要注意不要侷限於毫無新意的隱喻。常說的俗語、諺語、歇後語等老生常談的東西已經算是「死喻」。設計者要多培養生動、且能獲得眾人共鳴的隱喻能力才好。
Design Samples
http://www.microsoft.com/en/us/default.aspx
Microsoft
雖然影像不大，單靠顏色和架構還是傳達了訊息和架構。
http://www.diesel.com/
diesel
影像呈現的力道和LOGO設計的質感難分上下、平分秋色，產生一種力感。
將文字資訊轉換成視覺資訊
便於資訊搜尋的網頁設計
Web網頁上使用的影像不只是裝飾，更被視為幫助理解文字的重要視覺資訊。尤其是現在的Web使用者幾乎都只瀏覽自己需要的資訊。因此影像可成為幫助使用者找到所需資訊的指引，也可以增加網頁易讀的效果。只要想想，如果有一點空間時間，你會看全是文字的雜誌，還是適度放些照片的雜誌？答案不就很明白了嗎？
國外的圖庫
照片是製作Web時不可或缺的要素。尤其是要表現人物或生活各面向的印象時，會需要使用國外拍到的照片。例如想使用人物表情的照片，但由於國人的表情太容易突顯個人特色，而不適合使用；又例如想使用商業街道的照片，可是又想找張一般人不知道在哪裡拍的照片時，就會需要用到國外的圖庫。在此介紹兩家您不可不知的國外圖庫廠商「Getty Images」和「Photodisc」。尤其在Getty Images收購了Photonica公司後，現在更提供了許多色彩感覺獨特、和國內風情大異其趣的照片。
Design Samples
http://dma.ucla.edu/
UCLA Design | Media Arts
快拍照片在傳達媒體藝術的氛圍的同時，也傳達了訊息。
http://www.nttchiba.com/
NTT 東日本 千葉分行
用有趣的圖片介紹網頁內容，讓網頁更活潑。
使用插圖的網頁設計
插圖會影響意境的傳達，該如何選擇？
網頁設計要使用人物時，插圖會比照片更好用。如果是照片的話，人物的五官、服裝、表情等都必須與設計主題一致才行。且攝影時很難控制和攝影無關的其他條件，而且還要花成本。而插圖就是這種情況下的替代方案。此外，有個性的插圖還可有效地突顯所要表現的主題。不管是「萌」系卡通漫畫人物的表現手法、或是具藝術氣息的簡約手繪風格等，都可以讓人從插圖中推想網站內容，也是一種不同的設計手法。
日本的圖畫文字(pictogram)
以前日本的識字率並不高，所以就有一種以圖畫文字傳達的「南部文盲曆」，岩手縣很流行製作這種文盲農民曆。在那個時代，常常用12支來表示日期或時間，所以常用動物的插圖來表現。驅邪避兇的日子就用鬼在哭的圖案來表現，朔日(農曆的初一為朔日，這一天整晚均看不到月亮)則用把東西藏起來的圖案來表現，非常有趣。
Design Samples
http://www.hybridworks.jp/
HYBRIDWORKS
精緻的插圖呈現精緻的風格，成為網站最吸引人的招牌。
http://www.themeatrix.com/
The Meatrix
老少咸宜，任誰看了都會露出會心一笑。
http://www.manneken.co.jp/index.html
Manneken比利時插畫
網站的介面和插圖風格相契。
以圖表方式傳達數據資訊
用心設計圖表以清楚傳達資訊
能夠視覺傳達數值差異大小的圖就是圖表。圖表的種類很多，例如各項資料獨立的直條圖、直條中又有各項資料的堆疊直條圖、資料明細很清楚的圓形圖、數據變化一目瞭然的曲線圖，也可以並用曲線和直條圖。想顯示的數值方式不同，可選擇的圖形也不同。數據的正確性當然很重要，但是能有助呈現效果的方法，或以不同顏色顯示不同資料等配色方式，也要懂得善加運用才好。
設計與畫草圖
很多專家都投入於將數據依時變化的情形，予於視覺化的資訊圖形領域上。這些專家們首先要做的就是用鉛筆在紙上打草稿。在必須思考圖與數據關聯性時，必須先直接用手將想法畫在紙上，還沒思考整理好的東西，先不要用電腦操作為宜。
內容參考網站：
Apple’s Tipping Point：Macs for the Masses(Nixlog)
http://www.nixing.com/apple/sketches.php
Design Samples
https://www.blogger.com/start
Blogger
一看就知道要怎麼做，充分發揮「圖解」的精神。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
數量以箭號的大小粗細來表現，所以不看數字也能理解其中的關係。
http://www.mitsue.co.jp/product/
Mitsue-Links
將公司服務的特色以雷達圖呈現，令人印象深刻。
流程圖
有助清楚說明處理程序的內容
能將整段文句的內容用圖來表現，資訊會更容易理解，瀏覽者也會對內容更有興趣。對Web而言，「是否清楚易懂」幾乎可左右Web本身的價值。說明性質的內容最好可以儘量清楚、短時間內就能了解為宜。流程圖能夠因應這樣需求，最好能夠多加運用。這樣的方式對於分成好幾個項目的服務內容、辦理手續的方法、產品優點等都很能發揮優點。
以圖代文
流程圖除了可以用來整理所要公開的資訊內容，也可以直接用來製作Web網頁。您可以用類似組織圖的流程圖的方式來製作。登入成功時與登入失敗時的面如果用圖形來表示，網站的架構看起來就會更簡單。本流程圖的格式也可用於中小規模的網站建議，建議大家都能精通這種作法。
內容參考網站：
資訊建築(information architecture)、互動設計(Interaction design)用的視覺詞彙
http://www.concentinc.jp/ja/visvocab
Design Samples
http://jp.sun.com/solutions/infra/software/webinfra/
Sun Microsystems
不管使用者是否具專業知識，都能感受到複雜產品的優點。
粗糙的背景呈現真實觸感
低真實性(low-fidelity)設計的重點
用Flash設計圖像配置自由度高的網站時，可以讓效果帶點粗糙、隨性的氣氛。如果要表現觸感，可以設定為低真實性(low-fidelity)，再做出有點髒髒的、不乾淨的感覺即可。不過這樣的表現方式只是一種效果而已，所以要適度運用，不要讓想傳達的資訊被效果吃掉了。另外，要表現「髒」也要善加控制，不要讓人覺得看起來很不舒服才好。
Point：自由配置組成要素有一點要注意，就是組成要素要能在畫面上形成一個三角形。將醒目顯眼的要素先安排做為三角形的頂點，注意不要某邊重、某邊輕，之後再放上其他要素。就算進行位置的微幅調整，也要注意這三者要保持平衡，這樣整個畫面會比較容易安排。
肌理(材質)
在知覺心理學中，肌理比覆蓋物品表面那層皮的定義還更深、更廣，例如樹木就是山的肌理、山又是山岳地帶的肌理。推到最後，整個土地就是地球的肌理。肌理似乎有著左右構造物順序的力量。而在設計上，也要認為肌理的概念，善加利用一小部分對整體的影響力量。
Design Samples
http://www.richapplefool.com/
Richapplefool
有墊布(mat)感的畫降低網頁的數位感
http://www.fmm.jp/
馬莉亞傳教士法蘭西斯可傳道會
不整齊、好像用手撕過的紙，讓主題更能傳達溫暖與溫和感。
使用小圖示讓內容更容易清楚呈現
以充分表現功能或內容的小圖示建構一個好用、順手的網站
Web網站用的小圖示可分為「表示操作後發生結果」與「表示內容種類」兩種。小圖示可表示登入、列印、寄信、開啟新視窗、連結到外部網站、確認購物卡等等。資料則可分為需要密碼的資料、聲音、動畫、文字、PDF等。FLASH比HTML格式的Web網頁操作方法變化更多，使用FLASH建構的網頁，會有更多使用小圖示的機會。
什麼是小圖示(icon)
在電腦的世界當中，圖像或繪畫符號等小圖示肩負著請使用者進行某些操作的使命。然而，小圖示的意義並不只如此。ICON這個詞原本是指宗教崇拜的偶像或聖像，後來成為一種象徵的意義。也就是說，任何人共通的感覺以圖像呈現的東西都統稱為「圖示」，意思頗深。
Design Samples
http://www.a-blog.jp/
a-blog
左邊選項的部分加上表示選項內容的小圖示，馬上就能看出內容不同。
http://www.whatdoiknow.org/
What Do I Know
本例全區導覽的小圖示配置得不著痕跡但又效果十足。
http://www.city.nagoya.jp/
名古屋市
各選項都有顯示內容為何的小圖示，讓人一目瞭然。
design note
傳達設計與照片
廣告宣傳等傳達設計上，照片往往是最重要的要素。不只是因為模特兒或風景引人注目，照片還有清楚傳達主題的「資訊」功能。瀏覽者看到照片傳達的訊息覺得很有興趣，再被附屬的文字資訊吸引。像這樣想讓消費者對特定主題有興趣的企業或團體所辦的活動，英文就稱為「campaign」，中文譯為「活動」。
說到最有名的「活動」，1994年起開始進行至今的「Got Milk」牛奶促銷活動可說是當仁不讓。這個活動的做法是拍下各界名人在嘴上留下牛奶鬍鬚的照片，登在上大做廣告，另外也做成高畫質的海報，展現名人個性的各個背景與牛奶鬍鬚的對比煞是有趣。直到現在還是有很多明星繼續代言這樣的平面廣告。這個活動可說是美國廣告界的名作，但是應要注意的還是視覺效果的品質。
臉上沾到牛奶雖是個讓人印象深刻的樣子，但若照片拍下的人物表情、選擇的背景情況、照明等沒有配合，還是很難傳達產品訊息。這個例子充分說明了視覺表現的力量。在Web上常常只將照片視為網頁素材而已，然而高品質的照片卻有可能是最有利的武器。同時也希望能有更多免費提供的照片可供使用。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(style)。當網站設計中用到文字時，文字的樣式就變得很重要。對網頁這樣以文字為重要資訊的媒體而言，字型並非只是裝飾而已，它最重要的使命就是傳達資訊內容，並要讓品質較低的顯示器也能清楚呈現。不了解這一點，就很難有效運用文字樣式。
字型、行距、字距、文字大小、文字顏色等相關設定都是樣式。一點小小的設定，就能時而展現歡樂的氣氛、時而呈現流行感。不過對一般網頁而言，最應優先處理的是「可讀性」。
一目瞭然的開頭
網頁標題適用的文字樣式
網頁標題的字體都會比較大，所以用的字型要像招牌一樣工整一點、穩一點。電腦分中、日文的全形字以及英數、符號的半形字兩種。在設計標題文字時就要注意這其中之不同，思考全形和半形字如何搭配。此外，中、日文字型和西歐字型不同，能否搭配得宜會影響標題效果。
設計性高的西歐字型
網頁設計上，光是標準西歐字型就非常好用了。如果您還是希望標題字再更有個姓一點，這時您可以買一些對設計很有用的西歐字型，而其中又以migre Font公司的字型以深具個性而聞名。此外，FontFont公司的字型產品、LucasFonts、T26等公司也很值得向各位推薦。至於你要問我哪種字型一定非有不可，那就是Linotype系列了。
Design Sample
http://www.kokuyo.co.jp/
KOKUYO
文字和上下保持夠寬的距離，看起來相當醒目。
http://www.inwei.jp/
廣方圓
從要素之間的間距、配色、設計架構等都要有其特色。
標題和內文的配置要注意不要頭重腳輕或腳重頭輕
掌握躍動率，就掌握了設計質感
在設計當中，影響文字可讀性的並非大小或粗細等單個文字樣式設定。對人而言，東西看起來如何，本來就是要有相對比較的對象才能決定。例如，小標字體雖小，但是和內文之間只要有足夠的間距，看起來還是醒目。運用這種相對比較對象的不同，感受隨即不同的特點，就能讓設計樣式更豐富多變。
何謂躍動率？
指內文字體大小、小標字體大小或是字體高度不同。內文字體大小12pt配小標字體大小16pt的躍動率很低。如果是內文字體12pt配小標字體26pt，躍動率就會很高。可見面積大的印刷品比較適合較高的躍動率，進而產生較好的對比效果。尤其是報紙的運動版更是需要有較高的躍動率。躍動率高除了給人強烈的印象外，也可以讓人便於從標題當中找到所要的內容。躍動率的概念不只可用於文字，也可用於圖片或視覺要素。
Design Sample
http://www.frogdesign.com/
Frog design
躍動率低，可是小標題字體夠粗、間距夠寬，整體設計不會造成瀏覽的負擔。
內文部份要能輕鬆瀏覽
配色和間距設定都要設定好
網頁中功能操作與文字內容常常會並列在一起。在追求網頁易讀性的同時，還要配合網頁目的來營造出包括設計風格等在內的整體樣式。尤其是提供新聞、生活資訊的網頁更要注意可讀性。設計重點在於配色要讓文字內容明顯，以及內文區塊和其他要素之間的距離，要設定得恰到好處。換句話說，最大的課題就是要讓文字與其他要素分清楚。
將視線集中於內文
如果想要強調內文部份與導覽部分間的反差對比，首先可以運用配色的技巧。內文部份的顏色如果想要設為黑色或深灰色，與背景成對比，以求畫面可讀性的話，附近的網頁組成要素的彩度就不宜太高，這樣可以避免搶過內文或畫面混亂的情形。如果再如之前所述在導覽部分與內文部份設定足夠的間距，畫面看起來就會更清爽。
文字安排要有足夠的空間
以下是要在800×600像素標準顯示器顯示時，設定三欄式樣式之各欄寬幅大小的標準數值。中間的文字資訊空間如果有左右兩欄的兩倍，瀏覽起來會比較沒有負擔。標準設定一般都是中間內文字體設為12pt(px)，每一行32個字左右，這樣會比較好看。
網站設計的死角
中文報紙都是由上到下，由右而左的編排方式，從讀者的視線移動方式我們可以推斷右上、左下的空間會形成死角。因為讀者看報會先從右上看起、看到中間再看到左下角。那麼網站又是如何呢？這就要看標題和導覽的位置而定了。在顯示範圍中，只要有一個醒目的標題，這個標題對角線上的空間就會相對地變得比較不醒目。如果設計的樣式是將導覽部分放在左邊，右下角就會形成死角；相反的，導覽部分安排在畫面上方，下面的內容再採兩欄的方式，就比較不會形成死角。
Design Sample
http://jvsc.jst.go.jp/universe/luna/
Japan Science and Technology Corporation! Return to the moon
以文字要素的易讀性為優先，採簡單的兩欄式設計。
網站LOGO設計樣式豐富多變
用堆積木的方式，架構重心很穩的網站
網站LOGO就像網站的招牌一樣，具有很大的存在意義。很多企業網站乾脆就用他們公司的LOGO來當網站LOGO，但有時也會碰到需要有網站本身標誌的情形，所以大致了解LOGO製作的秘訣還是很重要的。首先要注意的就是，幾乎所有用的徒刑都不出圓形、三角形、四角形這三種。對於這點，喜歡用圓形文字等做小圖的人要特別注意了。如何讓LOGO整體能穩穩地「頂天立地」，才是設計者該考量的重點。
「長體」和「平體」
在一定的空間範圍內，如果文字數多，就要把字體調窄調長，這種手法稱為「長體」，其祕訣就是將字型調得稍微窄一點，但是又不會太明顯。如果調得太窄，字體看起來太長，就會破壞字體本身的形式。如果是由上而下讀來，字體會看起來比較長。將字型調寬的這種技巧稱為「平體」。由左而右讀起來時，文字上方的空間較大，文字下方也會比較穩的感覺。
Design Sample
http://www.mediathatmattersfest.org/mtm04/
MEDIA THAT MATTERS 4
LOGO字型很穩，下方再加一行平體的副標題，感覺就很協調。
http://www.aromatiqueltd.com/
Aromatique
手寫字型和裝飾影像搭配得很協調，畫面感覺很乾淨。
有效運用各種字型效果
突顯大標題或小標題的基本技巧
改變文字樣式以呈現出文章重要性是大家都很熟悉的設計方式。現在我們再進一步將不同字體大小的字放在一起。為了讓人對內容的印象更為深刻，我們可加強大標題或小標題的質感。看看我們週遭的書籍或商品包裝，您一定不難發現很多商品名稱都是不同字型的組合。只要慎選合於網頁主題的字型，再注意大小設定，就可以呈現出文字的萬種風情。
全形字型呈現的風格差異
Gothic字型呈現的風格是簡單而又現代。它有個特點就是雖然字小，還是很容易辦認得，因此常用於內文或導覽標籤、圖片說明等。字體調粗時看起來就會很有力度，要強調的部分也會很清楚，調細時又給人中性的感受，不管和什麼網頁組成要素一起用，都很協調。比平面媒體更重機能性的Web網站上常常都會使用Gothic字型。
明體的字型在筆劃的結尾做了些像鬍子一樣的裝飾。正式且具知性的這種字型適合用於公文、報導等，例如平面媒體中就常使用這種字型。不過這種字型有個缺點，就是字體小一點時不易辦識，使用時要特別注意大小。另外，這種字型也不適合用在網站導覽文字。
西歐字型呈現的風格差異
Sans-serif字型相當於日文字型中的Gothic，由於沒有裝飾看起來很清爽，任何內容文字都可使用。
Serif字型相當於明體，和明體一樣給人正襟危坐的感覺。另外，明體古典的感覺也跟具現代感的serif系列字型不同。這種字型在英文報紙上很常見。
Script是指手寫字型。取自筆記書寫方式，又給人很正式的感覺，另外還有草寫的字型。
Design Sample
http://www.nttdata.co.jp/
NTT DATA-At the Forfront
分別使用了日文字型和西歐字型，感覺和印刷品一樣很有質感。
http://www.aoyagisikkiten.co.jp/
青柳漆器店
網站LOGO的手寫字型，和稍微拉長的標題明體搭配得可說是天衣無縫。
內容文字直寫
中文和英文直書的呈現法
在網路上有時候也需要表現中文情懷。而在進行這種網頁設計時，就會需要直書方式來呈現內容。電腦的世界一般都是以橫書為主，工具列的文字編排功能也是以橫書為設計基準，因此，除了改變方向外，也會需要做細微的調整，甚至還可以用適合直書的字型。了解了這些，就可以做出精緻、和影像相當協調的網頁設計。
不同的基準線設定
在電腦中輸入文字時都會有基準線來對齊文字，沒有特別設定的話那就是位於文字下方。這是根據西歐文字的特色而做的設定，只是中文也得套用一樣的設定。在直書時，如果完全不做任何調整，基準線會在文字左邊，整個文字看起來就會像是重心往左傾。如果直書的文字當中有英文或符號，基準線就會不同，這點要特別注意，看是要調整設定，或是將整段文字設定成對齊中間直線(置中對齊)。
英文的直書方式
如果是點綴性質的話，文字部分在畫面左邊時就由下而上，在畫面右邊時則是由上到下，這樣看起來比較自然。
Design Sample
http://www.busho-aichi.jp/japanese/index.html
武將的故鄉─愛知
扁長的內文和字型讓人想起古早的日本報紙。
清單選項方式的選單架構
有效運用設計空間的選單配置
畫面兩邊縱向的分區導覽，採列出數項連結文字(link text)的清單選項方式。清單的形式就是一條一條列出來，清單的區塊由標題、項目符號（如●◇★等）或數字、以及每項的文字三個要素所組成。只要依設計目的，調整這些要素的位置關係或邊距，就能有效運用設計空間。
三角形項目符號清單
標題的第一個字和三角形項目符號置左對齊。標題下方行距設為文字大小的1.5倍，三角形符號的大小要以標題首字的橫向中央位置為準。項目符號和文字之間要空一個字大小的空間。
圓形項目符號清單
如果是圓形項目符號，與項目文字之間的距離就可以比三角形項目符號和文字之間的距離窄一點。
Design Sample
http://www.hayonstudio.com/home.php
Hayon studio
上下都取很大的間距，感覺很簡單、無壓迫感。
http://www.intel.co.jp/
Intel
不同的選單用不同的項目符號，讓整體設計的外觀和感覺都很統一。
導覽的標籤和字型
兼顧網站樣式和操作簡易度的字型
Web的導覽也可以使用文字表示。導覽用的文字我們稱之為標籤(label)，標籤設計會影響到網站整體的設計質感。導覽按鈕(Navigation button)上的標籤位置稍微有點移動、或按鈕整體樣式和標籤樣式不協調等，都會降低網站設計的品質。此外，字型也會大大影響標籤醒目與否。在設計時要避開不易瀏覽、不醒目的表現方式。
標籤字小時
網路上可讀之最小文字大小為10pt，若要以此為導覽標籤文字時，那麼用對比色較強的Gothic字型比較不會受其影響。相反的，如果對比色不明顯，又使用明體字型，就會造成瀏覽上的負擔，也不好操作。
一般的標籤
若使用12pt大小的設定，則不管是使用Gothic、或明體都可以一目暸然。10pt的粗體Gothic還是很難讀，12pt的話就好讀多了。
適用明體的按鈕樣式
使用漸層或纖細的中間色時，就很適合使用明體。這時文字可以設大一點，以避免不易瀏覽的問題，並給人知性的印象。使用漸層的按鈕顏色較與眾不同，也能給人清爽的印象。
字型的種類
可以設定文字樣式的字型資料大致分為TrueType、NewCID和OpenType三種。TrueType是Windows系統用的字型，一般而言電腦中都會內建。NewCID則是專業人士使用的字型，多用於設計工作。而OpenType的使用者也有越來越多的趨勢。本來使用者需要配合作業系統購買的字型，可是OpenType在Windows、Mac兩種系統通用，並能安裝在伺服器上，不管在哪種作業系統環境下都可使用，因此漸受歡迎。
Design Sample
http://www.locksoflove.org/
Locks of Love
標籤文字和網站可愛的風格搭配得宜到好處。
http://www.uogashi-meicha.co.jp/
日文和英文並列，具知性美。
http://www.amazon.com/
Amazon
這裡用的字型很細，但卻不妨礙閱讀。
圖像與說明文字
有助理解圖片的設計要素
平面媒體上每個圖片一定都有其說明文字(caption)，以助瀏覽者了解該圖內容。雖然其屬輔助性質，但現在已經有越來越多使用者，會先透過圖片和其說明文字大致掌握訊息內容，再來閱讀內文以補充所需資訊。因為Web的設計空間有限，因此安排說明文字位置和採用的方法，都需要用點心思來設計。此外，像Flash這類設計自由度高的軟體，可以讓人做出和印刷品並無二致的說明文字設計，您不妨試試。
Web與Unicode
在做印刷品時，常需要自己造字(這些情況幾乎都是發生在人名上)，或是購買字型來使用。可是在網路上人名的顯示卻很容易發生問題，例如SMAP的「草彅剛」等就是很好的例子。由於這樣的字一般的文字碼無法顯示，所以常常都會用假名表示。可是，現在這個問題已獲得解決，因為Unicode這種字碼可以顯示全世界的文字。
Design Sample
http://www.manneken.co.jp/menu/stand.html
Manneken比利時鬆餅
包圍住文字的元件其大小關係保持絕佳的平衡。
http://www.toraya-group.co.jp/
虎屋株式會社
說明文字的位置關係呈現一種平面設計的協調。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
箭號的樣式等說明文字以外的網頁元件雖然小，但是看得很清楚。
種類眾多的表格樣式
表格的樣式種類
一件事情可分成好幾項的這種資訊，很適合用表格的方式呈現。表格名稱或分類條件可分別寫在行或列的儲存格上，再以顏色或框線來區別。這個樣式非常簡單，可是儲存格內各項對齊等需要注意的地方很多。這種樣式如果都是直線，看起來會很沒意思，所以不管是有色儲存格，或是表格中的內容都需要取足夠的間距，不要讓畫面看起來擠在一起。
XHTML和表格
現在製作Web網站的標準程式語言是XHTML。使用XHTML時，由於裝飾性的要素並不包含在標籤碼(tag code)裡，而要用CSS來指定。HTML將複雜的設計全部用table標籤來做，但是XHTML則是禁止在表格以外的部分使用table功能，而是先用標籤做出表格，再以CSS設定顏色或文字的位置。
Design Sample
http://www.thebodyshop.com.tw/
THE BODYSHOP
表格的設定讓商品看起來很美觀。
http://hmv.com/hmvweb/home.do
HMV UK
清楚區別開每一行，讓資訊更清楚易懂也更優美。
魅力無比的文字設計
運用文字獨特的外形，架構出整個畫面的方法
以字型的外型或位置配置引人注意的設計我們稱之為字型藝術(typography)。本來這個字的意思是包含文字本身的設計，但廣義而言，文字為主的設計樣式也可算在字型藝術的範疇。文字比圓形或方形等圖形要素的外形更複雜，且文字當中又有其意義，相當適合用來做知性的表現。不過，光是排列文字是無法表現出什麼風格出來的。因此我們就從「深度的表現方式」切入，說明如何用文字來做設計。
文字藝術
電腦問世之後，字型的表現更多樣了，但在此之前就有很多將文字外形提升到藝術層次的作品。尤其是20世紀前半的作品到現在仍很具影響力。俄羅斯結構主義藝術家Aleksandr Rodchenko以像建築物一樣，從紙面上立起的字型藝術給圖像設計界嶄新的衝擊。另外Bauhaus的Paul Klee也以TYPEFACE為主要結構的油彩畫，將文字的可能性更推廣了一步。這兩位都是大家需要認識的藝術家。
Design Sample
http://www.toraya-group.co.jp/history/his02_001_02.html
虎屋株式會社
嚴謹的格線架構讓僅有導覽部分的網頁設計很有力。
http://www.adametrope.com/
Adam et Rope
故意將設計放斜，讓四四方方的格線設計展現獨特的個性。
如何讓文字資訊的顏色和設計保持融洽的關係
對文字資訊而言，灰色比黑色更具功能性
有人說灰色是人類唯一不覺得刺激的顏色。內文字型顏色使用灰色最大的好處，就是較不易引起讀者眼睛疲勞吧！另外，對比的強弱也會影響可讀性。強烈的對比很醒目，清楚易讀；較弱的對比則較不醒目，不易閱讀。黑色很適合用來提供文字資訊之用，但和其他顏色仍差很多，也可能讓讀者眼睛疲累。所以在這裡，我們就來介紹如何發揮並利用灰色的優點。
Point1：在背景色明度高、彩度低的版本，可以加強文字的對比以讓整體有強弱變化。背景色、文字顏色的對比色若都很高，則整個畫面會感覺好像沒有整理好、很複雜的感覺。
Point2：中間灰色文字呈現的感覺。眼睛不易疲累的灰色最適合用來顯示文字。文字大小設為14pt，比黑色但設為12pt還更容易瀏覽。另外，以灰色為內文，以黑色的標題時，標題自然會更為明顯。
Point3：內文文字如為10pt，顏色設為黑色，行距空大一點，就會很清楚易懂。字體很小又使用灰色的話，文章整體看起來就會好像是配角一樣，這點要多加注意。
冷色系的配色與內文顏色
青色或綠色等冷色系的顏色會讓人覺得很遠、很深。背景為冷色系時內文就很適合用灰色。灰色也是讓人感到距離較遠、深度較深的顏色，所以背景和內文就會呈現一定的距離感，而這樣的距離感會讓設計很有一體感、很穩的感覺。和內文為黑色字型的版本相比，更為一目暸然。
暖色系的配色與內文顏色
背景顏色為暖色系時，內文顏色就很適合搭配用黑色字型。如果搭配灰色，看起來會很像被吸到裡面去，感覺很不協調。這時要用和暖色系一樣用很明顯的黑色，才會感覺平衡。
灰階70%是最易閱讀的文字顏色
物體存在的知覺是靠該物體及其背景亮度之差來識別。關於亮度的差或對比的區別能力，60歲的人只有20多歲的人的一半左右，所以不管哪個網站都需要很小心考量文字內容的可讀性。
亮度差在顯示器上就會變成是明度的差，所以可說文字和背景色的對比越高，便越適於所有人來瀏覽。亮度差最大的顏色搭配是文字為原色的綠(G)色、背景為黑色。這個灰度的差為了配合Web設計的目的將其轉為灰階，並將文字顏色與背景顏色反轉後，文字就變成70%的灰色。所以背景為白色的網頁搭配70%的灰色是最適合瀏覽的。
Design Sample
http://en.red-dot.org/
Red dot design
灰階設定在50%到60%的網站，灰階顏色差異不大，很易於瀏覽。
http://www.illums.co.jp/about/
ILLUMS Japan
內文部份為灰階50%、10pt的明體。整個架構看起來很舒適、很高雅。
http://www.misawa.co.jp/otikaku/index.html
MISAWA
灰階80%、亮度差恰到好處，易於閱讀。
design note
Web與字型
字型不光只是用來讀而已，還可以用形狀來表現。字體較粗的字型比字體較細的字型更醒目，感覺也較有份量。字型設計在電腦成為設計工具的90年代初期開始發展，有越來越多設計者投入數位字型的製作，字型可能的呈現方式更受到矚目。其中Neville Brody更是將字型可能性大為拓展的一位設計師，他追求的文字設計是不只要能讀，還要能讓人眼光久久不忍離去。在Neville Brody出現後，日本甚至還出現一種只有漫畫台詞的海報，只有字型樣式的表現方式蔚為流行。
然而，時序進入2000年，隨著資訊流通型態的Web網站和手機使用率增加，文字和文字表現開始被切割，原因也許是因為網路還可以有聲音、動作等過去平面影像所沒有的要素可以運用，所以很多人就朝著那些方向挑戰去了。於是，文字資訊的功能就只重視資訊取得的效率性和易讀性而已。過去有好幾度說要開發在HTML也可自由使用各種字型的技術，可是似乎又沒有使用明體(正式)或Gothic(休閒)以外字型的需求。重視字型的設計性而將部份標題影像化的做法又有很多人覺得不方便。不過，現在已經有一種可以讓文字兼具使用便利性與設計性的技術－sIFR(或是Scalable Inman Flash Replacement)問世了，樣式與功能再也不是魚與熊掌不可兼得的難題了。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
