Q：
如何用GMAIL來發信？
A：
假設GMAIL的帳號是account，密碼是password
Q：
如何用超連接傳送變數？
A：
如在任一頁中建超連接:< a href=Edit.aspx?fbid=23>點擊< /a>
在Edit.aspx頁中取值：String str=Request.QueryString["fbid"];
Q：
承上題，當從電子信箱點擊帳號開通信件的網址時，出現「剖析器錯誤訊息 無法辨認的屬性 'type'。」錯誤訊息。
A：
將IIS中ASP.NET版本的組態設定從1.1改成2.0即可。
Q：
如何在SQL語法處理變數？
A：
(a).SQL修改『某紀錄』語法
Update 1a set name = ‘jack’, chi = 90 where id_no=’90001’
(b).當有變數時的SQL修改語法（C＃）
”Update 1a set name = '" + textBoxName.Text + "', chi = " + Int32.Parse(textBoxChi.Text) + " where id_no=' " + textBoxNo.Text + "'";
注意：什麼時候要用單引號『’』，什麼時候不用加呢？
字串：字串前後要加上 ‘ 單引號
Values('" & txt_5_PrjCode.Text & "')”
數值：數值前後要不用加，但是所引用的textbox.text要先用Int32.Parse轉換成數值格式
Values(" & Int32.Parse (txt_5_Period.Text) & "')”
日期：字串前後要加上 ‘ 單引號，所引用的textbox.text要先用DateTime.Parse轉換成日期格式
Values('" & DateTime.Parse(txt_5_BeginDay.Text) & "')”
Q：
網頁之間如何傳接值？
A：
1. 使用QueryString變量
QueryString是一種非常簡單的傳值方式，他可以將傳送的值顯示在瀏覽器的地址欄中。如果是傳遞一個或多個安全性要求不高或是結構簡單的數值時，可以使用這個方法。但是對於傳遞數組或對象的話，就不能用這個方法了。下面是一個例子：
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
string s_url;
s_url = "b.aspx?name=" + Label1.Text;
Response.Redirect(s_url);
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
Label2.Text = Request.QueryString["name"];
}
2. 使用Application 對象變量
Application對象的作用範圍是整個全局，也就是說對所有用戶都有效。其常用的方法用Lock和UnLock。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Application["name"] = Label1.Text;
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
Application.Lock();
name = Application["name"].ToString();
Application.UnLock();
}
3. 使用Session變量
想必這個肯定是大家使用中最常見的用法了，其操作與Application類似，作用於用戶個人，所以，過量的存儲會導致服務器內存資源的耗盡。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Session["name"] = Label.Text;
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
name = Session["name"].ToString();
}
4. 使用Cookie對象變量
這個也是大家常使用的方法，與Session一樣，但Cookie是存放在客戶端，而session是存放在服務器端。而且Cookie的使用要配合ASP.NET內置對象Request來使用。
a.aspx的C#代碼
private void Button1_Click(object sender, System.EventArgs e)
{
HttpCookie cookie_name = new HttpCookie("name");
cookie_name.Value = Label1.Text;
Response.AppendCookie(cookie_name);
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
string name;
name = Request.Cookies["name"].Value.ToString();
}
5. 使用Server.Transfer方法
這個才可以說是面象對象開發所使用的方法，其使用Server.Transfer方法把流程從當前頁面引導到另一個頁面中，新的頁面使用前一個頁面的應答流，所以這個方法是完全面象對象的，簡潔有效。
a.aspx的C#代碼
public string Name
{
get{ return Label1.Text;}
}
private void Button1_Click(object sender, System.EventArgs e)
{
Server.Transfer("b.aspx");
}
b.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
a newWeb; //實例a窗體
newWeb = (source)Context.Handler;
string name;
name = newWeb.Name;
}
Q：
在.NET 3.0下Web Form如何與Dynamic實體網站結合？
A：
必須先建立Dynamic實體網站，然後再將做好的Web Form程式從「我的電腦」拖拉到Visual Studio的「方案總管」，唯專案名稱要ㄧ樣，同時Web.config的SQL連接字串設定要注意，不要覆蓋到Dynamic實體網站的Web.config，例如：
另外注意當SQL的資料表、某資料表的欄位，或者其他有新增、刪除等異動時，只要從"實體資料模型"中按右鍵執行"從資料庫更新模型"即可！
閱讀全文...
微軟正黑體是Vista之後版本的字型，或者若已經安裝了Office 2007或Visual Studio 2008等微軟軟體的話也會有正黑體。因此Windows XP的使用者，或者沒有安裝提供微軟正黑體的軟體，勢必繼續忍受細明體的"醜"。
當在設計網頁時，為了美化版面，會在CSS設定一些預設字型，微軟正黑體就是首選，然後才是為了以防萬一的新細明體或細明體。因此若沒有微軟正黑體的使用者，將看不到視覺設計師的用心良苦，以下就提供微軟正黑體的下載點：
微軟正黑體下載點
下載後，安裝即可馬上感受到微軟新的改變。不過，對於某些液晶顯示器等的使用者，會發現這個字體卻變得模糊不清，越看越不舒服，其實這要到控制台去設定Clear Type Tuning，提高文字的清晰度。如果控制台沒有Clear Type Tuning工具的話，可以到這個地方下載：
Clear Type Tuning工具
下載完安裝後會直接進入設定步驟，也可以由「開始→設定→控制台→ClearType Tuning」進入，勾選 Introduction 標籤中的「Turn On ClearType」後，點選「Start Wizard」一步一步依序點選最喜歡的顯示字體即可。
安裝以後，工具會協助調整 ClearType 顯示以達到最佳效果，讓使用者更輕鬆舒暢的閱讀螢幕上的文字。另外，安裝後，系統控制面板中會增加一項 ClearType Tuning 配置面板。如果用不習慣亦可從新增移除將之移除。
閱讀全文...
一個Ajax互動過程是從一個被稱為XMLHttpRequest的JavaScript物件開始的，再透過JavaScript使用者端腳本，以非同步互動的方式來執行HTTP請求，並對伺服器回應的XML資料進行解析，然後轉換為HTML格式並輔以CSS來呈現在使用者端瀏覽器中。Spry組件(widget)：這是一些預設的常用使用者介面元件，可以使用CSS來自訂這些組件，然後將其新增到網頁中。使用Dreamweaver CS4就可以將多個Spry組件新增到頁面中，而這些組件包括XML驅動的清單和表格、折疊式組件、索引標籤式介面，以及具有驗證功能的表單元素。
在Ajax互動過程中，主要包含以下這幾個處理步驟：
- 使用者透過使用者端瀏覽器在網頁上執行某個操作，例如單擊按鈕、移動滑鼠或從鍵盤上按下某個按鍵等。
- 由於使用者的操作，網頁上發生相對應的DHTML事件。
- 透過回應這個DHTML事件，執行相對應的使用者端JavaScript函數，在執行過程中建立一個XMLHttpRequest物件實體，並註冊一個回呼函數，再透過使用XMLHttpRequest物件，以非同步的方式向伺服器端發送HTTP請求，此時可以透過Web頁面繼續與使用者的介面互動，而避免瀏覽器暫停並等待伺服器的回應。
- 當伺服器端收到XMLHttpRequest物件的請求時，便可透過ASP、JSP、PHP、ASP.NET等伺服器端技術，對使用者端請求的參數進行解析，然後執行適當的應用邏輯並將回應序列化到XML資料中。
- Web伺服器會以標準的XML格式，將回應的資料傳遞給Ajax。
- 當伺服器之回應到達使用者端時，JavaScript的回呼函數會被呼叫，並對XML資料進行解析和處理，再透過CSS和DOM實現頁面的局部更新。
- 使用者將透過使用者端瀏覽器看到頁面更新。
流行的Ajax框架
JavaScript是Ajax技術的一個主要組成部分，在開發Ajax應用程式的過程中，往往需要編寫大量的JavaScript程式碼。為了減少JavaScript編碼量，並簡化Ajax應用程式的開發任務，目前出現了許多出色的Ajax開發框架。
1.Dojo框架
Dojo是麻省理工學院(Massachusetts institute of Technology，MIT)許可下的一個開發原始碼專案，由Alex Russell和Dylan Schiemann等人在2004年發起，其設計目標是解決DHTML開發中長期困擾人們的一些問題。Dojo是一個JavaScript使用者介面開發工具包，使得編寫JavaScript程式碼更容易，構建大型介面更快速，部署動態的使用者介面更方便。Dojo的基礎是一個小型的函式庫檔案，該檔案包括了Ajax、事件處理、頁面特效及語言工具等。在這個基礎上，在Dojo核心中還新增了一些高品質的工具，例如拖放工具、Ajax擴展表單工具、I/O工具、Json-RPC、國際化及回呼方法等。
可以從http://www.dojotoolkit.org/下載
2.Prototype框架
Prototype是一個基礎性的Ajax開發框架，其檔案尺寸小，但功能很實用，適合用於開發中小型Web應用程式。Prototype提供了跨瀏覽器的相容性支援，對一些JavaScript內建物件進行了擴展，還新增了許多自訂物件，Ajax支援功能也是自訂物件中實現的。
可以從http://www.prototypejs.org/下載
3.script.aculo.us框架
script.aculo.us也是麻省理工學院許可下的一個開發原始碼專案，構建於Prototype框架之上的JavaScript函式庫。script.aculo.us框架的設計目標是幫助開發人員快速建立可展示和操作頁面的各種特效。該框架擁有強大的動畫功能，並且支援各種DOM操作和拖放操作，也提供了一些控制項和小元件，例如自動完成、滑動方塊和原地編輯等。
由於script.aculo.us是一個基於Prototype的框架，因此，使用script.aculo.us框架之前，必須先導入Prototype框架的JavaScript函式庫，然後再導入script.aculo.us的JavaScript函式庫。
可以從http://script.aculo.us/downloads/下載
4.Spry框架
Spry框架是Adobe公司開發，該框架實際上是一個JavaScript和CSS函式庫，可用來建構向網站存取者提供更豐富體驗的Ajax網頁。使用Spry框架就可以顯示XML資料，並建立用來顯示動態資料的互動式頁面元素，而無需更新整個頁面。只要有了Spry框架，就可以使用HTML、CSS和極少量的JavaScript程式碼，把XML資料合併到HTML文件中，也可以建立組件(例如折疊組件和選單欄位)或者在各種頁面元素中新增不同種類的效果。
Spry在設計上與其他的Ajax框架不同，Spry框架的標籤非常簡單，便於那些具有HTML、CSS和JavaScript基礎知識的使用者使用，而且也可以為設計人員和開發人員使用，因為實際上它有99%的部份都是HTML。更為可喜的是，在Dreamweaver CS3之後就提供了對Spry框架的支援。透過Dreamweaver CS3/CS4，就可以使用Spry框架進行動態使用者介面的視覺化設計、開發和部署。
Spry框架主要是透過以下這三種方式來提供對Ajax技術的支援。
- Spry資料：Spry資料集是透過JavaScript建立的一個物件。只需要在網頁中編寫幾行程式碼，就可以建立一個Spry資料集物件並從指定的資料來源(例如XML文件、HTML表格及JSON物件等)非同步載入資料，然後在網頁上透過Spry區域來顯示資料。
- Spry組件(widget)：這是一些預設的常用使用者介面元件，可以使用CSS來自訂這些組件，然後將其新增到網頁中。使用Dreamweaver CS4就可以將多個Spry組件新增到頁面中，而這些組件包括XML驅動的清單和表格、折疊式組件、索引標籤式介面，以及具有驗證功能的表單元素。
- Spry效果：這是一種提高網站外觀吸引力的簡單方法，這種效果幾乎可以套用於HTML頁面上的所有元素。透過新增Spry效果就可以放大、縮小、漸隱和反白顯示元素，並在一段時間內已可視方式更改頁面元素，以及執行更多的操作。
5.ASP.NET Ajax框架
ASP.NET Ajax框架是由Microsoft公司所開發，其主要設計目標是對現有的ASP.NET伺服器端模型進行擴展，讓它可以產生實現豐富使用者端的JavaScript程式碼，並透過對ASP.NET增加使用者端程式設計模型來簡化使用者端程式設計。
可以從http://www.asp.net/ajax/downloads/下載。
閱讀全文...
當開發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 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
