動態網頁好好玩

申請免費的網址

2011-02-28T21:19:00.021+08:00

免費的網址：http://www.co.cc/
co.cc是免費域名，也是熱門域名之一。

先點選「中文(繁體)」

接著輸入想要註冊的網域名稱，並按一下「檢查是否可用」，比較熱門的通常都已經有人註冊或是需要不等的費用。

找到適合的網域名稱之後，就按一下「繼續進行以註冊」。

接著填寫一些資料，然後按一下「登入」。

出現註冊成功的畫面，按一下「設定」，並且會寄一封電子郵件給您，提醒您如果不在48小時以內去設定的話，將會被取消剛才的註冊動作。

這時將會看到設定的內容，如果要更改設定的話，按一下「設定」。

這邊的網域設定，主要為第一項或第三項功能。
(1)Name Server 填寫網頁空間或虛擬主機的名稱伺服器 DNS ,如 Freehostia.com 的要填 dns1.freehostia.com 及 dns2.freehostia.com ,其他家的就要自己查了
(3)URL Forwarding 設定轉址:只要填入您要轉的網址即可,如填上您的 Yahoo 部落格網址,再填寫 Page Title (網站名稱) Description (網站說明,描述),及 Keywords (網站關鍵字) 即可.
註：(1)與(3)只能二選一喔,不是兩個都填,功用不一樣(提醒初學者)

C#.NET筆記

2011-01-20T16:59:00.011+08:00

.NET Framework概觀
簡單地講.NET Framework就是建置、部署及執行.NET應用程式及XML Web服務的環境。只要安裝VS 2008開發工具之後，所有相關的.NET開發環境自然具備，此時才能做.NET應用程式的開發與執行，下圖是.NET Framework基本的組成元件架構。

.NET Framework與ASP.NET有何不同？

.NET Framework主要包含兩大部分，第一部分是CLR(Common Language Runtime)，它是.NET程式執行環境及引擎；第二部分是Class Library類別庫。
ASP.NET是眾多.NET應用程式類型的一種，它的用途是專注於網頁程式設計。ASP.NET會使用.NET Framework所提供的類別庫，因為.NET Framework類別庫是所有類型應用程式所共用的基礎設施。

所以.NET Framework是所有程式的基礎設施，而ASP.NET則是一種網頁開發的技術，只不過ASP.NET會使用.NET Framework所提供的類別庫，呼叫使用一堆現成的程式功能。

VS 2008偵錯工具

設定程式偵錯之中斷點
加入監看式視窗
以DataTip檢視

物件導向程式
類別(class)與物件(Object)二者實為一體兩面的東西，類別是程式的設計藍圖，而物件則是將此藍圖具體化，轉變成真正能夠執行的程式單位實體，這個實體就叫做物件。

此外，類別是物件導向程式中的最小單位。

方法(Method)就是由一些C#程式碼所組成的區塊(Block)，並賦予這個程式區塊一個名稱，這樣日後用名稱便可呼叫這個程式區塊，且可重複呼叫使用此方法。而事實上方法並不是什麼新鮮的概念，在許多程式語言中早就存在了相似的概念，如函式(function)、副程式(subroutine)、程序(procedure)、子程式(subprogram)等等，它們扮演的角色及功能其實是差不多的，只不過稱呼的方式有所差異罷了。

參數傳遞的三種類型

傳值參數(By Value)
傳值參數是將參數值傳入方法之中，而沒有傳出的動作。傳值參數有時也稱為輸入(in)參數，這是C#語言預設的參數傳遞機制。傳值參數的宣告語法如下：
修飾詞方法名稱(參數型別參數名詞1，參數型別參數名詞2…)
{
…
}

使用傳值參數的語法：
方法(參數)；

傳址參數(By Reference)
傳址參數是將參數的記憶體位址傳入方法之中，讓方法來做運算處理，傳址參數的宣告語法如下：
方法(ref 參數型別參數名稱1，ref 參數型別參數名稱2…)
{
…
}

使用傳址參數的語法如下：
方法(ref 參數)；

傳出參數(By Output)
傳出參數指的是從方法傳出參數，並讓外部的變數來做接收這參數。宣告傳出參數的語法如下：
方法(out參數型別參數名稱1，out參數型別參數名稱2…)
{
…
}

使用傳出參數的語法如下：
方法(out 參數)；

微軟T-SQL三大類的陳述式(Statement)功能

資料定義語言(Data Definition Language，DDL)
可用來建立或刪除資料庫中的物件，主要是指Create、Drop與Alter三大類的指令。
資料控制語言(Data Control Language，DCL)
可用來改變user或role對資料庫的存取權限(Permission)，主要的指令有Grant、Deny與Revoke三類。
資料操作語言(Data Manipulation Language，DML)
可用來進行資料的查詢與修改，其實就是指Select、Insert、Update與Delete四大類的指令。

多個資料表的SQL查詢語法

Inner Join(內部聯結)
Outer Join(外部聯結)。還可進一步細分為Left Outer Join、Right Outer Join、Full Outer Join三種。
Cross Join(交叉聯結)。
Self Join(自我聯結)。

Pages頁面之間的切換移轉技巧

Client端的頁面切換類型
完全是在Client端進行，不必提交回伺服器處理，直接在前端就能進行網頁的切換移轉，常見的程式指令有：Location.href、Window.navigate()、Window.open()與四種。
Server端的頁面切換類型
是依賴後端伺服器的指令來處理，通常由ASP.NET控制項所引發，進而將Request提交回伺服端，再由伺服端產生網頁切換移轉的指令，常見的程式指令有：Response.Redirect()、Server.Transfer()與跨網頁公佈(Cross-Page Posting)三種。

Web的狀態管理
因為以HTTP技術為基礎的Web Form網頁本身是無狀態(Stateless)的，意思是Web伺服器不會刻意去保留任何的連線或使用者資訊，所以必須隨時視需要，採用不同的狀態管理技術保存網頁資料，以便下次可以將資料再行取出運用，以下介紹四種較為常用的狀態管理技術：

Application應用程式狀態管理(Server端)，其最大特色是儲存的狀態資料屬於全域的(Global)。因此可以在專案中加入一個Global.asax全域應用程式類別(Global Application Class)，在Global之中可以設定整個Web專案層級的事件程式，故可在其中設定Application狀態值，供整個專案程式讀取使用Application狀態資料。
Session工作階段狀態管理(Server端)，也是屬於可全域存取的，但與Application應用程式狀態最大不同處，在於Application是所有人共享同一份狀態資料，但Session則是每個使用者獨立使用一份Session狀態設定，不同使用者之Session狀態彼此不會互相干擾，並且還會進一步依附在單一的瀏覽器視窗畫面。因此Session狀態是以「單一使用者＋單一瀏覽器視窗」為管理單位。
View State檢視狀態管理(Client端)，以隱藏欄位(Hidden Field)形式，伴隨著網頁HTML碼一併傳送到使用者瀏覽器之中，故使用的是Client端的電腦資源。
常用於Page或控制項保存狀態值資料，當然它也可以保存一般值，且是每個使用者皆有獨立的View State檢視狀態，不同使用者間彼此不共用View State檢視狀態資料。但必須注意只能在同一個Page頁面中儲存與讀取狀態資料，一旦有任何的網頁導向切換，或者是按下瀏覽器的上一頁/下一頁按鈕時，View State檢視狀態資料便會消失，在新的Page頁面亦不認得原本的View State檢視狀態設定值。
Cookie狀態管理(Client端)，是用來儲存使用者瀏覽網站的一些資訊，其格式為純文字檔。而Cookie的作用在於可儲存使用者喜好等資訊，待下次使用者再次造訪時，就可以直接讀取其電腦中的Cookie檔設定值。不過，絕對不要在Cookie中儲存重要的敏感資料，例如使用者帳號、密碼、信用卡號碼等。

交易(Transaction)
若能於ADO.NET程式中加入資料庫交易的機制，補強數行交易程式碼，則可確保資料交易安全性可達100%保障，即便中間發生任何錯誤，都可以回復至交易前的資料狀態。

所謂的交易是指將一連串的工作視為個邏輯單元(Login Unit)，而交易本身必定具備ACID的特性，所謂的ACID是指：

不可部份完成性(Atomicity)
交易必須將交易程式中所有的工作項目全部完成才算是一個完整交易。
一致性(Consistency)
交易完成時，全部的資料必須維持一致性的狀態。在關聯式資料庫(Relation Database)中，必須將所有的規則(Rule)套用於交易的修改，以維護所有的資料整合性(Integrity)。所有的內部資料結構，例如B型樹狀結構索引(B-tree Index)或是雙向連結串列(Doubly-Linked List)，在交易終止時必須是正確的。
隔離性(Isolation)
並行的交易所作的修改，必須與其他任何並行的交易所做的修改隔離。交易所辨識的資料不是處於另一筆並行的交易修改資料之前的狀態，就是處於第二筆交易完成後的狀態，但是卻無法辨識中繼狀態，這稱為序列化能力(Serializability)，因為這樣可以產生重新載入起始資料並重新執行一系列的交易，以便讓資料最終能夠與原始交易執行後的狀態相同的能力。
耐久性(Durability)
交易完成之後，其作用便永遠存在於系統之中。即使系統發生失敗的事件，但修改仍會保存。

<節錄 ASP.NET 3.5完美入門(使用C#) >

ASP.NET專案開發問題集之二

2010-12-28T21:00:00.011+08:00

Q：
Cookie與中文亂碼的問題？
A：
中文字的編碼與Cookie預設的編碼方式不同，因此必須先行在URL傳輸過程中經過一道編碼、解碼的程序，才不會發生中文字在Cookie中讀取出來為亂碼的情況。

編碼
HttpCookie cookie_name = new HttpCookie("name");
cookie_name.Value = HttpUtility.UrlEncode(txtUsername.Text);
Response.AppendCookie(cookie_name);

解碼
String Username = HttpUtility.UrlDecode(Request.Cookies["name"].Value.ToString());

Q：
讓firefox支援text-overflow: ellipsis
A：
萬萬沒想到ie有一個css的屬性text-overflow，設定後可以讓文字產下截字效果，超出的文字用省略符號(…)來代替；而更萬萬沒想到firefox居然完全不支援此一屬性…
https://bugzilla.mozilla.org/show_bug.cgi?id=312156

網路上有人分享了很多解決方案，不過以這篇
溢出文本顯示省略號,關於text-overflow:ellipsis的那些事 - Leeiio Chaos Made.
http://leeiio.me/text-overflow-ellipsis/
的第二種方法利用jQuery完美地解決這個問題，不過奇怪的是，請注意必須將有應用到解決方案的網頁跟這個.js和.css(包括jquery-1.4.2.js)等檔案都放在同一個資料夾才會有作用!!

http://plugins.jquery.com/project/textOverflow

Q：
在GridView控制項中以DropDownList分頁
A：
參考http://www.dotblogs.com.tw/poto/archive/2009/01/14/6798.aspx
然後在後製程式碼中加入…
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.DataBind(); //為了自訂分頁數字按鈕的繫結
}
}

Q：
ASP.NET如何用Button打開新視窗?
A：
可以參考這個網址的程式寫法：http://yukisan.pixnet.net/blog/post/26796800
或者也可以使用ASP.NET AJAX Control Toolkit ModalPopup，這就像是以前JavaScript用的showModalDialog。
不過如果有參數要傳值到後置程式碼(Code Behide)的話，這個方法就不行了，必須還是使用傳統的方法!!

參考範例：
.aspx

.cs

關於Android

2010-11-27T04:28:00.002+08:00

根據WIKI，Android是基於Linux核心的軟體平台，是Google在2007年11月5日公佈的行動電話系統平台，早期由Google開發，後由開放手機聯盟（Open Handset Alliance）開發，這個組織是Google和其他幾十個手機公司為了推廣此技術所成立的。它採用了軟體堆疊（software stack）的架構，主要分為三部分：

低層以Linux核心為基礎，只提供基本功能。
其他的應用軟體則由各公司自行開發。
以Java作為編寫程式的一部分。

Android應用程式是用JAVA程式語言來編寫，並且運作在一個虛擬機器(VM)中，其中VM不等於JVM，而是Dalvik Virtual Machine。除此之外，還包括Android SDK、APT(Android Development Tools)、Eclipse IDE和JDK。因此要開發Android應用程式，最好是在Linux環境之下，尤其是Ubuntu，當然如果要在Windows環境下開發也可以。

如果要移植Android至Embedded System的產品開發，就必須理解Android系統內部的函式庫、Android執行環境與Linux核心的細節。而就最重要的是開發者不用花費到一毛錢，便可以建構一個很完整且便利的Android應用程式開發環境，並發展屬於自己的應用程式

Android內建的網頁瀏覽器(Web Browser)的名稱叫做Google Chrome Lite，與iOS當中內建的Safari網頁瀏覽器一樣是採用Webkit網頁引擎(Web browser engine)。Webkit是目前最多知名智慧型手機作業系統採用的網頁引擎。這些作業系統包括了Symbian OS、iOS、Palm webOD與Android等。

Webkit可以讓正常網頁(非手機版本)自動調整成頁寬(auto fit page)的方式完整縮小呈現在手機的小螢幕中，如此可以方便使用者立即在手機上看到正常網頁的全觀，如果要近看某區塊之內容時，只要將該區塊放大即可。

另外Android內建了SQLite的關聯式資料庫引擎(Relational database engine)式的設定資料或者上一次遊戲關卡的資料等。在應用程式當中，如果使用了SQLite，則手機用戶可將相關資料儲存在手機儲存設備中，無需再以網路連線方式存取遠端的資料庫。

Android在未公開之前大多傳聞認為Google開發的是自己的手機電話產品，而不是一套軟體平台。到了2010年1月，Google開始發表自家品牌手機電話的Nexus One。

對於使用者而言，只要先申請一個免費的Google帳戶，當想換一台手機時，就可以在不同廠牌，同樣使用Android作業系統平台的手機之間選擇，簡單地將如聯絡簿等個人資料轉換到新手機上。

Android Market是一個由Google為Android所創建的線上應用程式服務，允許用戶瀏覽和下載一些由第三方開發商為Android開發的應用程式。用戶可以購買或免費試用，讓該應用程式直接下載到Android的手機中。上傳應用程式到Android Market需要20元美金的帳號註冊費，而下載付費軟體需1元美金。

目前應用程式的數量已經突破10萬組以上，不過整體僅為蘋果App Store約1/3的比例，而且Google線上評審似乎顯得「寬鬆」許多，也因此不少應用程式的品質參差不齊，甚至還有人刻意透過撰寫 Android應用程式竊取使用者個人資訊。不過隨著目前Android平台市占率逐漸提昇，數量和品質是後勢看漲！

關於嵌入式系統

2010-10-31T22:55:00.004+08:00

剛接觸嵌入式系統時，直覺聯想到20年前接觸的「單晶片微電腦」(Single-Chip Microcomputer)。同樣是把中央處理器、記憶體、定時/計數器（Timer/Counter）、各種輸出入介面等都整合在一塊積體電路晶片上的微型電腦。當時所用的開發工具是Z84C01微電腦電路模擬板，開發的語言是Z80組合語言。

當時的Z80與Intel 8080、Motorola 6800等都屬於8位元微處理器，而之所以會選擇Z80是因為I/O中斷控制和抗雜訊的能力很強，因此適用於工廠、電梯等工控系統。

Z80是由Zilog公司於1976年製造，後來由Intel公司於1981年製造的8051也是8位元單晶片微電腦，屬於MCS-51單晶片的一種。近年來由於功能不斷加強，價格愈加便宜，傳統的8051已經成為學校的教材。開發的語言除了8051組合語言之外，也可以搭配C語言來縮短開發的時程。

另外美國Microchip公司於1989年開發的PIC(Peripheral Interface Controller)，也是8位元微處理器。PIC由於採用RISC架構，快速的運算、簡單易用、價格便宜、低耗電，高速，高輸出驅動電流、豐富多樣化的週邊界面提供選擇等優點，目前廣為業界採用，尤其是大量應用在消耗性電子裝置、家電、玩具等產品上。

其實4位元微處理器多用於冰箱、洗衣機、微波爐等家電控制中；8位元、16位元微處理器主要用於一般的控制領域，一般不使用作業系統；32位元則用於網路操作、多媒體處理等複雜處理的場合，一般要使用嵌入式作業系統。

所謂的嵌入式系統簡而言之是一種『執行部份特定功能』的系統實作上並不限定技術範疇，只要能將特定的功能(function）『嵌入』到目標裝置（target device）裡，包含這些功能的整體系統（或平臺）即是『嵌入式系統』。

常見的嵌入式系統有：DOS、Windows CE、Palm、EPOC、Linux等，而Embedded Linux其實並不是一個作業系統，而是代表應用Linux系統於embedded system 的名詞。Embedded Linux是Linux for devices 的意思。

根據「Building Embedded Linux Systems」ㄧ書指出，近來以8051微控制器開發新設計的經濟效益似乎已經不高了，其中所隱含的小筆額外費用，已經能擁有整個Linux系統的所有能力。…當然，微波爐中並不需要使用32位元的微處理器，但如果使用它沒有比較貴，而且可以有一個內建的Web伺服器，使其能夠到遠端更新自己的功能，何樂不為呢?

用 Linux 來發展嵌入式系統有以下的優點：
• 開放原始碼、模組化設計
• 穩定性夠
• 網路功能強大
• 跨平台
• 應用軟體眾多
• 選擇多樣

一般用來開發嵌入式系統的 CPU 有：X86、ARM、MIPS、PowerPC等，例如Samsung S3C6410 BOARD。

關於jQuery.ajax

2010-09-27T02:56:00.017+08:00

Ajax基本上是一種技術，一改過去web前端和後端採用的同步溝通方式，而是使用非同步來溝通。而JavaScript是Ajax技術的一個主要組成部分，在開發Ajax應用程式的過程中，往往需要編寫大量的JavaScript程式碼，同時也會遇到瀏覽器相容性的問題。

因此為了減少JavaScript編碼量，並簡化Ajax應用程式的開發任務，目前出現了許多出色的Ajax開發框架，例如jQuery和Ext JS等。其中jQuery是比較輕量級的框架，而Ext JS則包含了許多精美的UI工具，但是相應的檔案大，載入速度並不理想，而且在低版本的瀏覽器上顯示效果不佳。

另外由於jQuery和Ext JS等都是Web前端的JavaScript框架，基本上後端程式是PHP、.NET、JAVA、Ruby或Python等都沒有影響。

jQuery - write less, do more
jQuery是John Resig在2006/01/14於BarCamp NYC首次發表，在jQuery的官方網站可以看到這句「write less, do more」的口號，同時也進一步簡述了jQuery是一個快速又簡潔的JavaScript程式庫，簡化了在HTML文件裡面尋找DOM物件、處理事件、製作動畫和處理Ajax互動的過程。由於jQuery語法簡潔，有時短短的一行程式，卻可以做很多事情。

網路上有很多先進、前輩們無私分享了jQuery的研究與心得，讓我在專案開發上獲益良多，所以在此也分享ㄧ個.NET專案應用jQuery.Ajax的範例。

通常在會員註冊時，總是希望能夠馬上知道會員帳號是否已經被人取用，因此jQuery.Ajax就可以派上用場了。

假設表單有一個填寫會員帳號的textBox，其ID是txtUserID，資料庫是使用MySQL，資料表的欄位是UserID。首先建立一個預存程序CheckUserID：
DROP PROCEDURE IF EXISTS CheckUserID;
CREATE PROCEDURE CheckUserID( User_ID VARCHAR(10) )
BEGIN
SELECT COUNT(*) FROM member WHERE UserID = User_ID;
END;

在Register.aspx的程式碼如下：

在Register.aspx.cs

在web.config已經有加入SQL連接字串：

以此類推，如果ㄧ次要判斷兩個欄位條件成立，例如我有一個簡訊通知的程式，在傳簡訊之前要馬上知道某個帳號在某個日期是否已經發送過。假設帳號和發送日期的欄位分別為txtUserID和txtPrescriptionOpen，當這兩個欄位其中之ㄧ”失去焦點”之後，分別會去執行以下兩個JQuery.ajax相對應的程式之ㄧ；而資料表message的欄位分別是UserID和Prescription_open。首先也是建立一個預存程序CheckDoubleMessage：
DROP PROCEDURE IF EXISTS CheckDoubleMessage;
CREATE PROCEDURE CheckDoubleMessage( User_ID VARCHAR(10), Prescriptionopen VARCHAR(10))
BEGIN
SELECT COUNT(*) FROM message WHERE UserID = User_ID AND Prescription_open = Prescriptionopen;
END;

在Message.aspx的程式碼如下：

在Message.aspx.cs下

後記：
1.程式中我只加success的處理方式，如果在開發過程中有必要的話也可以加入error的處理方式，一般來說當傳送的參數不正確等情況時就會進入error的。
2.在VS2008開發環境下外掛入jquery-1.4.2.js，IntelliSense會出現錯誤訊息，請也一起下載jquery-1.4.2-vsdoc.js(請下載jquery-1.4.1-vsdoc.js並改名之)到同一個資料夾下，並且再下載安裝VS90SP1-KB958502-x86.exe。

參考網址：
http://jquery.com/
學習 jQuery 從入門到精通只要兩小時！

Acer Aspire 8930G 多重開機製作

2010-08-30T21:31:00.004+08:00

客戶的這台Aspire 8930G有2顆320G的硬碟，所以將原來的系統碟拆下來保留不動，利用另一顆硬碟來做Vista和XP的多重開機。

利用SPFDISK分割為2個磁區。
將Vista還原光碟(有3片DVD)安裝到第一個磁區(C:)。
再利用SPFDISK將第2個磁區設定為開機磁區。
安裝Windows XP到第2個磁區。
安裝XP的驅動程式。
最後利用SPFDISK製作多重開機。

說明：

利用SPFDISK分割磁區，可以分割2個磁區分別給不同的作業系統，或者也可以再多分割1個以上的邏輯磁區做為資料碟。
Acer的還原光碟會進行磁區分割並還原至C磁碟，但不會產生隱藏磁區，所以還原後開機時無法以Alt+F10呼叫還原程式，更不用說想備份還原光碟。
因此可以將整個C磁碟以Ghost將整個磁碟備份下來存成image檔，如此就可以將原來的系統碟重新磁區分割製作多重開機了，而當想回復到出廠預設的環境就不用花800元送回維修中心重灌。
接下來安裝XP時，因為Aspire 8930G是Intel(R) ICH9M-E/M SATA AHCI Controller，所以一開始要先按F6去進行SATA驅動程式的安裝，而此時就必須要有一台軟式磁碟機（USB介面）將剛才的SATA驅動程式安裝進來，否則XP會找不到硬碟而出現藍底白字的畫面。
要不然就要到BIOS將AHCI模式改成IDE模式囉，不過如此一來，以後進入XP之前都要先設定IDE模式了!!
如果沒有軟式磁碟機的話，可以利用nLite(http://www.nliteos.com/download.html)將下載的SATA驅動程式整合到XP安裝程式並製作新的安裝光碟，當安裝XP時不用按F6就會自動安裝此SATA驅動程式了。
再來就是安裝XP的驅動程式，以下連接可找到大部分的驅動程式：http://komku.blogspot.com/2008/11/acer-aspire-8930-windows-xp-drivers.html
其中如果讀卡機有問題，可以試試下載下列連接點來安裝看看：http://www.downv.com/Windows/install-Z01-cardreader-XP-Vista-v351whql-rar-10180701.htm

ASP.NET專案開發問題集

2010-07-31T21:25:00.016+08:00

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的資料表、某資料表的欄位，或者其他有新增、刪除等異動時，只要從"實體資料模型"中按右鍵執行"從資料庫更新模型"即可！

關於「微軟正黑體」

2010-06-17T01:14:00.004+08:00

微軟正黑體是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

2010-06-06T09:29:00.009+08:00

一個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遇上MySQL

2010-05-30T10:10:00.011+08:00

當開發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 的傳回值

HTML 5與CSS 3

2010-05-21T09:42:00.009+08:00

自從蘋果執行長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/

.NET Framework 4.0簡介

2010-05-10T13:18:00.003+08:00

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中，對於需要設計大型資料庫應用系統的開發人員來說，將會有相當大的助益。

(轉載)設計與風格

2010-04-15T08:16:00.005+08:00

在製作網頁時，一般都會思考目標使用者是誰、這個網頁主要是給誰看的。「思考使用者」這件事可說就是在選擇網站上所要公開的內容種類。也就是說，如果是給不特定多數的使用者看的，最優先考量的就是內容要單純、確實、好操作等特點。如果針對的對象是對流行時尚有興趣的女性，就要優先考量高級品味、令人印象深刻等特點。目標對象不同，網頁樣式也就隨之不同。千萬記住網頁對象可說是決定網站設計方向的舵手。整合主題、目的、瀏覽對象、需要的功能等，就等於是在進行設計了。

選擇網站建構技巧
想做出不同樣式的網頁，有時候就必須選擇網頁建構技巧。本書當中將樣式設計與製作技巧完全切割開來，因此並不說明各種技巧。但是，了解網站的用途和技巧的選擇大有相關。例如像流行時尚的網頁和以最新話題為主的網站，就會需要大量運用視覺效果，如提供影片等嶄新的表現方式。這時，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 設計的美學" 旗標出版股份有限公司 ---

(轉載)配色概念

2010-04-12T22:51:00.007+08:00

Web設計所需顏色的概念可大致分為三種。一是根據Johannes Itten(1888 ~ 1968)提出的色彩學來理解色彩的性質。色彩學談的是相異顏色間調和的情形，以及顏色面積會影響看起來的感覺等現象。不管是影像處理、編修或從事繪畫等和顏色相關的人，至今都很重視其中的理論，可說是設計的基本概念。不過，色彩學的內容只針對印刷顏色、油墨、畫具顏色。像Web這樣顯示在顯示器上的作品，還需要了解顏色在顯示器或電腦上會如何呈現相同顏色這樣的媒體特性才行。

不可不知的色彩顯示媒體特性
媒體特色與顏色，是第二個必備的概念。顯示器是以讓紅、綠、藍三種光線的點出現不同強弱的光來呈現顏色的媒體。這和雜誌或海報這種經由油墨或塗料反射光的機制完全不同。因此，了解「光的顏色」到了人的眼睛會變成什麼就變得很重要了。此外，除了顯示器、電腦、瀏覽器、與影像編輯軟體等對顏色的解釋方式，也會影響顏色呈現出來的效果。再補充一點，網頁安全色(Web Safe Color)也算是顯示媒體特性的一種。

顏色也會影響操作性
第三個要了解的概念是，將Web網站做為提供資訊或服務的介面時，所需了解之「操作與顏色之間的關係」。我們以車站等公共場所中，讓人群移動更順暢的標誌系統為例，一個空間當中，標示為廁所或出口等的標誌都使用相同顏色。走到一半顏色突然改變的話，看的人很快就會找不到目標。

顏色也是一種符號，可用來突顯畫面上最重要的資訊。此外，還可讓使用者了解操作順序、優先順序或操作後的處理狀況等。也就是說，顏色的使用會大大改變Web使用的便利性。

關於色彩的兩三事

了解色彩表現的限制和特性，適當使用顏色。
網頁安全色(Web Safe Color)是指相異瀏覽器均可呈現的216個顏色。這是考量到要讓使用者在不同的操作環境下得到一樣的資訊，所以在顏色上也訂好標準以防問題發生。網頁安全色是為了顏色重現性低的操作環境而設計的，但由於現在使用者的配備環境都明顯提升了，所以無需考慮那麼多，但大部份的製作工具還是備有類似的配色功能。

Flash與顏色
Flash和JPEG同樣可呈現24位元的色彩效果。而透明或漸層效果必需要在24位元色彩中才得以呈現。由於Flash的色彩引擎使用了獨家技術，所以不論使用哪種瀏覽器，都能保證一定的品質。因此，如果我們希望網頁有好的功能或效果，或希望要有好的色彩表現，都可以選擇使用Flash。

Design Samples
http://www.dexigner.com/
DEXIGNER Design Portal
關鍵顏色使用7色色環。可閱讀的部分採用較低的彩度，對眼睛較無負擔。

http://www.cmykmag.com/site.cfm?CFID=540993&CFTOKEN=34835363
CMYK Magazine
呈現印刷的CMYK基本顏色。在顯示器上看的話，CMYK是相當醒目的顏色。

善用色票

色票提供更多配色方法
色票是由油墨製作公司或顏色研究單位製作用來展現顏色效果的道具。主要用途是讓使用者看看在電腦上設定的顏色到印刷時會呈現出什麼感覺。粉彩的high tone、固體、金屬等顏色、以及各國傳統的顏色也都包含在其中。顏色可以有無限的組合，對經驗不足的人來說，要從零開始找到適合使用的顏色很困難。現在有了可以確認Web用色的色票做參考，讓佩色、用色更方便。

關於設定顏色的幾個方法
在製作影像或網頁的工具中，一般主要都是使用RGB(color slider)來設定顏色。只要用光的三原色紅、藍、綠的色域各自調和即可。對於了解RGB特性的使用者可能很好用，但是只要各設定值一變，顏色就會大不相同，不易尋找搭配的顏色。要搭配顏色，最好使用可在同一色相調整亮度與彩度的HSB(HSL)。依據不同使用目的，使用不同的選色方法，設計出來的效果也會有所不同。

Design Samples
http://www.also-online.com/
ALSO Online
使用色票中冷色系設計而成的網站。

配色的概念

了解顏色就會知道如何恰當用色
顯示器看到的Web網站基本上是光的三原色(RGB)。這個三原色可以呈現出光的波長所含的12個主要的顏色。由紅到紫的12色所組成的圓就稱為「色相環」。R(紅)和G(綠)混合就會成為中間色黃色(二次色)，黃色再和紅色相混，就會形成中間的橘色(三次色)，色相環有著這樣的三色關係。而兩個相鄰的顏色有著類似自然界顏色那樣調和關係的，則稱為類似色。補色則是指位於色相環斜對角上，對比最強的顏色。「三角形配色」意指色相環上，構成三角形的顏色關係，是種很有色彩張力效果的顏色搭配。這個色相環產生的三相就是配色的基礎。

Johannes Itten
Johannes Itten是瑞士的造型專家，德國包浩斯(Bauhaus)藝術造型學院早期的院長，他因將顏色置換成12環的圖，讓色彩學自成一家而聲名大噪。他提出顏色有互補關係，且配色會因不同亮度或彩度，而給人不同印象之顏色性質理論，讓原本以繪畫為主的色彩探求領域也延伸到家具或建築等所有的商品上。至今對於利用顏色提高商品價值的現代產品設計仍有很大的影響。

Design Samples
http://www.r-sumai.jp/
R-System株式會社
將相同色相、不同色調的顏色一起搭配使用的例子。

http://www.ebis.ne.jp/
廣告效果測試系統「AD EBIS」
明度低的幾個不同色相的顏色，以灰色來做整合。

配色時要考慮顏色性質

不同配色方式，呈現出不同的顏色印象與效果
顏色給人的印象，會隨使用者操作環境或使用方法等條件而異。就像我們可能認為同個顏色、不同色調應該很好搭配才是，但也會因使用方法不對，而出現跌破眼鏡的效果。沒有實際用用看，是很難掌握會呈現什麼顏色效果的。配色之所以比想像中還難掌握，就是因為不了解顏色的特性與本質所致。本章介紹的顏色對比性質，是根據印刷品或圖畫等情況提出的見解，但以光來顯示顏色的Web媒體上同樣也適用。

Point1：一樣是橘色，背景為紅色時，橘色就會看起來比較黃；以黃色為背景時，橘色看起來就會比較紅。這是因為中心顏色受背景顏色影響之心理補色之故。所謂心理補色是指一直看著相同顏色時，眼睛就會自然看到互補色。紅色的互補色是綠色而言，綠色就會加在橘色上而看起來比較黃。就算是相同顏色，也會因為背景色之不同，給人的印象也會有所不同。

Point2：受到背景色等周圍附近鮮豔顏色的影響，顏色會看起來比實際顏色還暗；被較暗的顏色包圍時，顏色就會看起來很鮮豔。

Point3：本例為顏色的對比。被暗的顏色包圍時，顏色看起來比較亮；被亮的顏色包圍時，顏色看起來比較暗。背景為黑色的網頁上，淡灰色的文字看起來不容易閱覽，背景為白色時，由於看起來比實際還暗，因此看起來很清楚，也很輕鬆。當顏色為彩色時也是一樣的情況。

面積對比：面積不同，看起來感覺也不同
即使是相同顏色，面積大看起來就比較亮，面積小看起來就比較暗(明度變低)。在處理Web網頁中背景色這樣大範圍的用色時，如不降低彩度，就會看起來比想像中還亮。另外，文字等小範圍內使用的顏色即使很鮮豔，也會因為面積小而看起來沒那麼亮。

膨脹：讓面積看起來會變大的顏色搭配
明亮的暖色系，尤其是對比色強的配色會讓面積看起來比較大。中間為橘色的圖對比較強，看起來會比藍色的圖還要大。有時設計還會因配色效果的關係，而需要再稍微調整大小。尤其是文字大小也會因標題和背景色的關係，而看起來不一樣。

冷色系和暖色系
暖色的圖形看起來比冷色的圖形還要近。從這個特性我們可以想到，只用暖色系的配色架構會對使用者造成壓迫感。因此在想要呈現畫面深度時，也可以使用暖色系的顏色。

彩度和明度的不同
彩度和明度都被視為是「顏色的亮度」，所以兩者很容易搞混。明度高的顏色對光的反射率也高。明亮的顏色反射率大，暗的顏色反射率小。明度高的顏色在畫面上只是看起來比較突出而已。另一方面，彩度高的顏色會吸引收掉所有其他成分，只反射自己的顏色，彩度低的顏色則會讓周圍的顏色進行反射(襯托其他顏色)。也就是說，彩度高的顏色彼此之間不容易取得平衡，彩度低的顏色則會影響配色時的銳利度。

Design Samples
http://adam1.szinhaz.org/
Adam1
明度和彩度都低，配色很容易。攝影作品集等就很適合使用此種方式。

http://www.jrobertscott.com/
J. Robert Schott
背景、文字、網站LOGO都統一為無色彩。無色彩當中黑色是最強烈的顏色。

冷色系和暖色系性質不同，需視情況來使用

聰明用色，讓影像和文字資訊更清晰
藍色或綠色等冷色系可以用來呈現畫面深度，而紅色或橘色等暖色系則適合用於平面的表現。尤其是藍色和紅色的對比，可以強調出深淺遠近的感覺。在藍色背景上加上紅色的影像就會產生心理補色，而讓紅色的周圍看起來好像灰色，這種圖形配色的架構相當有名。此外，如果一張照片想要讓人感覺到深淺遠近的效果時，可以加上藍色漸層的模式來強調立體感，這也是一種方法。

色彩給人的印象
藍色代表信賴感、綠色代表安全感、紫色代表很有靈性…，顏色給人的印象各不相同。現在坊間有很多教人以想要的印象為關鍵字，進行配色的書籍，您不妨將這些書當成決定設計方向的指導手冊。然而「水能載舟，亦能覆舟」，這樣既有的色彩印像有可能成為瞬間縮小配色可能性的兩面刃。執色彩理論牛耳的Johannes Itten就警告說，用色過度制式化，可能會抹煞顏色的本質。

Design Samples
http://www.infusion.com/
infusion
背景為冷色系，內容部分看起來好像往前突出。

用關鍵字找出所需配色

將關鍵字轉換為顏色的秘訣
在流行時尚業界，像「清爽」這類抽象關鍵字可搭配的具體顏色其實都是規範好了的。尤其是一年春、夏、秋、冬的流行顏色，都是由1963年成立的國際流行色委員會，每兩年召開一次的會議中由各國協調決定的。日本流行色協會亦為該會議之一員，會配合國內民情或過去發生的情況等提出日本自己的流行色。各單位所訂的流行色，會左右該年關鍵字所引導出的顏色印象。不過一般而言，顏色會分為三群，冷色系代表冷酷、冷靜，暖色系代表溫暖、充滿活力，中性色系代表中性、少有主張的，這些都是既定的、自然感受到的印象。

Point1：彩度低的冷色系是一般商務網站慣用的配色。因為主動提供參考的內容很多，因此適合讓人沉靜下來，或感覺有深度的冷色系。另外，低彩度也有助於烘扥其他顏色，每天都更新照片或影像的新聞網站等亦適用。

Point2：用色以清爽、彩度高的配色為主，搭配上以白色為基調的底色，這樣的設計很適合國家行政單位、各縣市政府網站之用。彩度高又鮮豔的顏色可以給人容易親近、產品容易使用的感覺，而這個概念一樣也適用於公家機構。要注意的重點是，顏色不要用太多種，選出要用的幾種就好了。

Point3：Outdoor & fishing Nature(自然、運動類) http://www.naturum.co.jp/
本例是以天空、海、山等自然界的顏色來展現自然或運動等主題。另外也可加上充滿活力的暖色系，以呈現戶外的感覺。大地的綠色在螢幕上看起來會太刺眼，因此要記得，如果用色面積大時，要儘量壓低彩度。

花蕊、嫩芽、可愛
時尚的領域流行表示花蕊、嫩芽概念的顏色。以明度不同的粉紅色為主的顏色，和淡灰色或綠色等重點顏色很搭。商品設計業界的表現主要是以呈現膚色為主，但由於Web上較難呈現這樣的效果，因此改用能穩定顯示的粉紅色，就比較沒有問題。

高齡者、生活
以綠色或象牙色等明度不同的顏色來呈現高齡者、生活概念。尤其是高齡者常患的「白內障」症狀會讓看到的東西偏黃色，顏色的感受方式和一般人不太相同。因此在設計時希望不要過度依賴顏色，而是改用對比方式讓使用者接收資訊。

設計、創造
無色彩和中性色為主的設計很適合公家單位的配色。無色彩不管對任何顏色親和力都高，又能襯托其他顏色，因此很適合使用在介紹設計、或本身就充滿色彩的網站。此外，中性色的紫色則有獨立性、創造性的感覺。

Web網頁上顏色的角色
代表某抽象概念的關鍵字的流行色會反映在流行服裝業界上，而汽車等工業設計也會在商品上呈現這樣的顏色流行趨勢。看得到、摸得到的實體商品，其顏色會受到形狀或環境之影響而有微妙差異。然而在Web上由於看起來觸感和質感都一樣，我們並無法期待顏色本身還能帶出什麼附加效果。在Web上，有的顏色所扮演的角色應該先重視像道路交通號誌似的功能性，才來追求新的附加價值。當然，我們可以透過顏色、移動性、功能等網站整體的架構來提高網站附加價值。但在此之前，網頁用色的基本原則，就是要讓畫面更易讀、更好用才是。

Design Samples
http://www.vodafone.com/index.VF.html
Vodafone
展現出企業形象色彩，是網頁必備的重要功能。

善用漸層效果

用數種顏色營造出一種質感
漸層可說是讓Web呈現質感的唯一方法。3D動畫就是利用模擬環境的光或打光等，讓物體看起來很立體以呈現質感。Web用圖也常以漸層來製作光或影效果，讓設計產生遠近深淺感，使網頁呈現更佳的效果。由於Web是以光來呈現色彩，和印刷品不同，因此在做漸層效果時，如能掌握RGB的特性，就能達到很好的顏色設定效果。好好控制光的混色，重現光影效果吧！

配色關鍵為HSB，調色則要用RGB
電腦上調整顏色的方法有RGB、CMYK、HSB等種類。要對色相設定不同明度或彩度，以呈現微妙顏色的這種配色作業，最適合用HSB。如果想要調色，就要用RGB。顯示器上的光就相當於紙上的顏料。您可以用RGB調整，看光怎麼樣最能清晰結合。建議您可以先將三原色彼此相混，做出12色的色相環。這個動作可以訓練您對光的敏感度。

Design Samples
http://thesims2.ea.com/
The Sims2.com
這個配色方式讓網站呈現3D電玩的感覺。

http://www.apple.com/quicktime/
Apple Quick Time
這個漸層效果呈現一種電影院黑漆漆的感覺。

利用配色讓畫面看起來更簡單

以藍色為基調的配色實例
灰色可以讓鮮豔華麗的色彩趨於沉靜，讓畫面整體呈現統一感，可說是相當方便使用的顏色。使用灰色的重點在於，只能搭配一、兩個有色彩的顏色，因為灰色會受到附近色彩的影響而看起來有點糊糊的。因此，為了有效呈現整體感，只好搭配單色。選擇一個色相之後，接下來再選類似色，並調整不同的色調來用即可。不刺眼、沒有太強烈特色主張的灰色，在Web上也扮演著重要的角色。

關於原色
三原色相混會變成白色，這就稱為「加法混色」；三原色相混會變成黑色，就稱為「減法混色」。將白色視為加、將黑色視為減，這樣哪個顏色要用哪個方法就會很好記。但是「原色」的英文為Primary Color。一般人看到「原」就以為應該是「original」，但代表「原始」、「根本」含意的英文應該是「Primal」才是。另外，很多的鳥類、有袋目的動物，及人類女性都覺得光除了三原色外，還有一個黃色，也就是四原色。

Design Samples
http://www.vancouverplayhouse.com/
PLAYHOUSE
深灰與白色的高度對比中，再加上黃色的重點文字，讓畫面保持著一種平衡感。

http://www.apple.com/
Apple.com
導覽設計用灰色來統一，避免視覺上顏色的衝突。

http://www.muthesius-kunsthochschule.de/de/
Muthesius Kunsthochschule
深灰色的內文比黑色看起來沉靜、易讀。

配色以三色為限

Web網站的配色最好只用三色
使用三種顏色的3-color-design網站已經快要另成流派了，這種配色方法從Web的角色來思考非常合情合理。Web主要的用途就是要將資訊傳達給非特定的使用者。有的使用者的閱覽方式不依靠視覺，有的人則是要黑白列印出來閱讀才行。事實上，對於Web而言，用不同顏色來做資訊整理沒有什麼意義。當然配色華麗以求各個部分明顯區別，或是觀照使用者閱覽上的感覺也很重要，所以要讓網站適合所有人都來瀏覽，才需要採用這項建議。

顏色的名稱
橘色或黃色這樣主要色相，與萊姆綠色、米色等中間色都有顏色名稱。各國顏色名稱數都不同，日本工業規格則是規定了168色的顏色名稱。日本人平均能分辨的既有顏色數，據說有400色左右。在嚴格要求顯示器顏色顯示效果的現代，人類能接受的範圍卻意外地小。

Design Samples
http://www.albertocerriteno.com/
Alberto Cerrite
以略為帶黃色的灰色為基調，讓整體不至於看起來太暗。

http://www.adaptivepath.com/
Adaptive Path
這裡用的是在顯示器上，最不會造成眼睛負擔的綠色三色樣式。

左右網站操作簡易性的配色方式

利用對比關係，讓導覽更一目暸然
要讓畫面上可以點選的地方看得很清楚，可以使用ROLLOVER的效果。一般都採用讓滑鼠滑過和遠離時採用不同色相的顏色，但是運用色彩的明度差呈現對比，也是頗具效果的方法。使用者的視力情況各不相同，有的人可能會將設定的顏色看成別的顏色也不一定。如果碰上這種情況，想光靠顏色來清楚顯示操作情況是很難達到效果的。用RGB來顯示顏色時，明度的調整會比色相的選擇，更能讓人看清楚各個個體的顏色。按鈕動作(Button action)、與畫面閱覽後的顏色變化，可以用調整明度等配色技巧，來讓網站更易操作與閱覽。

高齡者與配色
公共建築物中標誌的設計，往往都會考量到高齡者視覺上的感受。最明顯的例子就是白內障會導致老人眼前所見都有點黃黃的。這種情況下，以黑色為背景之藍色字體，或是黃色的設計等，就會不容易看清楚，因此，在設計時都要考量到如果在網站現在的設計蒙上一層黃色時，會產生什麼變化。

Design Samples
http://www.adobe.com/
Adobe
連結文字與一般文字的明度不同。

http://www.leapfrog.com/en/shop.html
LEAP FROG
採用色相相同、明度不同的配色，讓畫面兼具美觀與使用簡易性。

和風配色法

使用日本傳統的配色
採用的直向標題，以和風為主題的照片素材等，都可以表現日本味道。但是最能明確讓人感覺到「日本」的，就要靠顏色了。日本傳統色很多，市面上也有賣介紹顏色名稱和顏色設定的色樣。取材自自然界的花草、石頭、作物等的日本傳統顏色，其色彩變化也很多，非常適合用以表現日本的文化或四季。再加上條紋或格子等日本特有小圖案，即時是時尚的畫面架構也能呈現出日本的印象。

其他國家的傳統顏色
除了日本傳統色外，其他如法國、中國的傳統顏色也很值得參考。尤其是法國的顏色和日本一樣，很多都是來自自然界花朵或石頭等的要素。亞洲圈中有些傳統色是可以轉而代表宗教或思想的，光是根據色樣來使用顏色，就能呈現各國給人的既有印象，這點真是不可思議。

Design Samples
http://www.edo-tokyo-museum.or.jp/
江戶東京博物館
造型和配色都呈現出高格調的日本氛圍。

http://www.nakaya.co.jp/
淺草中屋
如果不是對祭典氣氛顏色印象十分深刻，很難表現出這樣的主題。

design note
製作Web網頁也會出現「顏色統一的問題」
色彩管理是指在運用數位技術的過程中追求顏色表現的統一性，這在進行印刷工作時更是一件大事。數位創作會用到掃描器、顯示器、印表機等各種顯示顏色的數位工具，可是顯示出來的顏色卻會因為印表機用不同的墨水、顯示器的光不同、以及呈現顯示器或掃描器機種構造不同，造成無法呈現相同的顏色。因此印刷作業上都會以軟體做為中間媒體，透過色彩管理系統來解決問題。

在Web上也是一樣，瀏覽用的顯示器或影像編輯工具不同，呈現出的顏色也會有所差異。最常出問題的就是畫面在Windows和在Mac上出現的顏色不一樣。這是因為支援兩種作業系統的顯示器，出廠時預設的模式不同所致。就瀏覽Web而言，Windows的使用者較多，所以如果是用Mac來製作網頁時，可以將顯示器的設定調整為和Windows的標準設定一樣，盡量讓製作和操作瀏覽的環境一樣，再來進行作業。

另外影像製作工具間顏色不同，也是一個問題。用Photoshop製作的資料用Fireworks打開來看，顏色變得不一樣。這是因為這兩者之間使用的顏色表現方法不同之故。Photoshop標準使用的是Adobe RGB，而Fireworks等一般工具則是以合於Web用的影像標準sRGB為主流。可是，sRGB在綠色或黃色的表現上卻比Adobe RGB略遜一籌，因此用Photoshop製作的檔案(尤其是植物影像)使用其他軟體開啟時，色彩就顯得沒有強弱變化。這就是工具間會產生的色差問題。因此建議，在製作網頁的過程中，使用的工具品牌最好能全程統一，以便讓想要的效果如預期中呈現。

--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---

(轉載)圖像版面設計概念

2010-04-07T22:16:00.005+08:00

圖像設計(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 設計的美學" 旗標出版股份有限公司 ---

(轉載)文字設計概念

2010-04-06T23:21:00.011+08:00

電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(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 設計的美學" 旗標出版股份有限公司 ---

(轉載)版面設計概念

2010-03-30T09:34:00.018+08:00

網頁的基本結構可大致分為三類，一是跳到各小項目首頁的全區導覽列(global navigation)，二是在各個小項目中移動的區域導覽列(local navigation)，三是各個小項目中的文字、圖案等內容。這些全部清楚區分後，再依各個區塊設計不同的樣式，就完成了最基本的架構。

介紹完基本畫面結構之後，就要設計網頁的內部組成要素，我們稱之為「標誌系統設計」。將網頁中各種按鈕、清單、標籤的樣式，以及字體與擺放的位置，做統一的設計，是掌握網站設計的基礎，如此才能讓整個網站的設計愈有整體感。

在設計網頁時，從整體版面的結構規劃，到細部組成的製作與排列，都有許多重要的技巧。只要牢記這些原則，並時時注意細節與整體的一致性，就能設計出好的網頁版面。

倒L字型的版面設計類型

所有網站都適用的設計基本型
導覽的部分位於畫面上方以及左方，將資訊有效地索引化的這種形式，是最多人採用的設計基本型。由於這種方式可以容納很多連結按鈕，因此很適合用於設計滑鼠按鈕次數少的網站，只要將設計性的重點運用在網站LOGO、全區導覽、或是左邊的導覽部分，就可以拉大和其他網站的差距。此外，這種設計的L字型大小設定，也會影響到網站的樣式。

標準倒L字型：倒L字型的畫面結構是將網站整體共用的全區導覽放在上方，從全區導覽選擇之各選單的子導覽放在畫面的左邊，子導覽和內容會隨網頁更動。這種類型適合提供分類項目多、內容豐富的網站。

分類項目少、實體內容較少的網站適合的類型：從首頁點選全區導覽時會出現各個小項目的這種選單類型，就很適合分類項目少或實體內容較少的網站。左邊這欄出現的是展開資訊各層內容的導覽。

另外，在同一個階層內的導覽則安排放在實體內容的上方。如果要提供的資訊內容較少，也可以將網站整個資訊用此結構來呈現於畫面上。

更簡單的倒L字型：直向導覽的結構，一次所能列出的選單比橫向導覽的更多。例如流行服飾用品等網站，提供的就是一個商品項目的網站。而整體選項較少的網站，就可以將選項統一在畫面左右兩邊，這種導覽方式使用起來會比較方便。

小心!!不要塞太多資訊
像入口網站等專門提供資訊的網站，就要儘量減少使用者一層層找到資料的點擊次數。減少點擊次數一般認為是可以透過導覽或網站設計來解決的。

此外，一般企業的網站則會希望一次提供的資訊少一點，改成讓瀏覽者一層一層地找到自己所需的資訊。因此，設計的主流也從「資訊量大型」慢慢變成「資訊量少型」。在思考設計架構時，希望可以先考慮到如上的現狀，再決定是否要採用倒L字型這種可以加入很多介紹內容的樣式。

Design Sample
http://www.fmworld.net/fmv/
富士通FMWORLD.NET
全區導覽和分類導覽的關係一目了然的樣式。

http://cweb.canon.jp/co-profile/company/index.html
Canon網站
網站LOGO和分類瀏覽列都有的標準型。

上方選單型的版面設計類型

公司網站最常見的瀏覽架構
上方選單型適合可將資訊單純地依項目分類的網站。所有的網頁共同使用的選單稱為全區導覽(Global Navigation)。首頁只有全區導覽，可以將操作性能最簡化，而各網頁的首頁則是安排用以連結到各小項目的子選單(區域導覽：Local Navigation)。這種方式充分考量到顯示器可顯示的範圍。全區導覽顯示出提供哪些資訊，並利用關鍵影像(key visual)打造企業的形象，這樣的網站設計方式可加深瀏覽者對企業的印象。

Above-the-fold(可顯示範圍)
指網站的目標顯示器(target monitor)一次可顯示的最大範圍。這本來是報紙或標題呈現方式的用詞。報紙在送到家家戶戶時一般都是折成四分之一大小，重要的頭版消息的排版，都要安排得讓讀者很快就能看到標題或掌握其中內容。而這個折成四折的一面就是above-the-fold。不管是報紙或網站，版面編排或設計都要注意，讓閱覽者在閱覽的瞬間，就能掌握到最重要的資訊。

Design Sample
http://nagafuji.jp/
長藤寬和設計室
讓版面呈現「破格」的效果，故意要讓讀者大吃一驚。

善用格線系統

所有版面設計都可運用的基本技巧
「格線系統」(grid system)是用來調整本文區和圖片位置的基本排版技巧。除了處理文字外，也可以運用於安排圖像素材的平面結構，可說是設計技巧的「王道」。基本的做法是在整個畫面上拉出導引線，沿著線安排各個素材，但格線的基準值會影響到畫面整體的平衡感，因此開始設計前必須要先訂出這個基準，而如果設計的是網站，基準則是網站LOGO的大小。

拿掉格線吧!
格線系統可以讓網頁設計的各個要項正確對齊，整體印象讓人感覺次序井然，然而這樣也可能會陷入單調、無趣的窼臼。所以會用格線法進行設計後，也要學習不拘泥於格線，以做出更具豐富變化的設計。

Design Sample
http://www.folietto.at/
folietto
一看即知是直向拉出格線的設計法，整個格線架構相當嚴謹。

http://www.cci.co.jp/
Cyber Communication
這種做法是將格線直接運用在網頁當中。

http://www.aiga.org/
AIGA Design Forum
這種格線架構讓網站LOGO的設計更為醒目。

快速分割版面設計空間

以黃金分割為基準，漂亮地進行空間分配
「黃金分割」是指建築物、繪畫等，在造型上進行空間分配時，常常用來做為基準的矩形比例，在我們日常生活中常用運用到黃金分割比的矩形做設計，如撲克牌、名片等。這個比例聽說是人類視覺認知覺得最美的形狀。做網頁設計時如果您用格線系統來進行畫面分割，就可以使用此比例來設定基準網格的大小，以便讓畫面看起來更具整體感。就算只是畫面中的某個部分採用這個比率，也能夠讓您的設計呈現出極佳的均衡感，可說是極佳的矩形比例。

1:1.618

憑直覺做設計就不用網格嗎?
街頭的海報等的廣告媒體中，有些看來好像只是將這些插圖隨意安排而已。這種憑直覺的設計樣式，是不是和使用網格的設計手法不同？其實不然。這些乍看之下毫無章法的設計，有不少都還是有其格線架構的。並不是使用網格，成品看起來就一定會很網格風。網格並非完成一板一眼、方方正正的設計的方程式，而是讓人有所依據的工具。

Design Sample
http://www.wedgwood.jp/
Wedgwood官方網站
以直向長方形為基準，用網格架構出整個畫面的實例。

http://www.design-museum.de/vitra/
Vitra Design Museum
畫面中有些部分分為矩形、有些非矩形，視覺上看起來比較開闊。

http://www.pdk.pl/index_f.html
Powszechny Dom Dredytowy we Wroc_awiu S.A.
中間的主要畫面雖然是相同比例的矩形，可是卻故意放斜的，感覺趣味橫生。

碎形(fractal)網頁設計

避免畫面雜亂的設計原則
「碎形(fractal)」是指局部的結構與整體的結構很相似的意思。網頁設計方法中也有一種方式是讓區塊的形狀與整體相同，或是同時使用幾個相似的形狀，以讓畫面呈現規則性。例如，全區導覽等五個主要的功能構成的畫面中，全區導覽的選擇有五個，分類導覽的選擇也有五個。這樣的做法主要的訴求是畫面簡單，易懂。採用這種法則，可以做出相當簡單的網頁設計。

讓瀏覽者印象深刻
網站很重視好用、易懂等功能性，但企業的網站還得同時顧及企業的品牌訴求、發揮廣告媒體的功能。電視廣告等媒體都是以讓觀眾記得廣告內容為第一目的，所以網站也是一樣，採取的樣式也要讓人印象深刻。又要顧及搜尋的便利性、Web標準，又要顧及可用性，真的很辛苦的工作，但希望大家身為設計者，還是能找到網路設計表現的新出口。

Design Sample
http://hochouki.com/
日本助聽器工業會
用了很多矩形讓整體感覺很方正。

http://www.dankimo.com/
男用和服協會
中間Flash部分的功能有三個，選單群也只有三個，感覺很有律動感。

將整理好的資料反映在版面設計上

將資料群組化再運用版面設計進行連結
當文字、圖像，以及導覽等內容資訊集中在一個畫面時，要將各個內容材料一體化，就必須要用位置關係或顏色來做連結，利用位置關係將素材予於群組化，就要善用邊界的效果，而邊界寬窄的安排所造成的客觀視覺感受，正是設計師要培養的能力。在設定邊界有困難、或在有限的範圍內，必須區分操作性等功能時，則可用配色來進行相關連結設定。

安排的位置不同，相關的程度也不同
安排的位置與關聯性的印象有關。如果每個地方的邊界都一樣，就會給人「統一」的印象，有的地方邊界較寬，那會像是分成兩組或三組；如果邊界很大，佔各項要素的二分之一左右，就會給人「擴散」的印象。而「擴散」會給人各內容並無相關的印象。

安排的位置和顏色在關聯性尚有何不同
安排的位置再加上顏色後，變化就更多了。「統一」中再用顏色加以區分的話，就可以給人「條件相同，但內容有所不同」的印象。分成兩組或三組的話，顏色則有表現優先順序的意思，在「擴散」當中，則讓人感覺在眾多不同的項目當中仍具有相關性。

您真的知道嗎?
位置相近的圖，比位置較遠的圖看起來更有相關性。您一定會覺得這種事是基本常識，不用說也知道。可是世界上卻有很多設計根本就沒有想到這些基本的事情。實際上越是覺得理所當然的事情，就越難以有形或無形的方式表現出來。認知科學當中，把腦中所想的事情以有形的方式表現出來，或是告訴他人，就稱為「外化」。任何感覺如果不能外化，就無以判斷真假。整天都埋頭苦幹的設計師們，更要特別注意這點。

Design Sample
http://www.epicurious.com/
epicurious
右邊的設計看起來像全區導覽的延長，可以看出操作上的相關性。

http://www.misawa.co.jp/
MISAWA
這個網站不是用位置來呈現相關性，而是用其他方法來表現不同的屬性。

http://tec.taiko.co.jp/
大興物產WEB目錄
只以配色來區分內容屬性，以畫面的整體感為重。

容易一眼找出所需資訊的設計

魔術數字7與設計
「魔術數字7加減2(MAGICAL NUMBER OF SEVEN PLUS MINUS 2)」是1956年George A.Miller發表的心理學法則，點明人一次能處理的資訊數上限。「人一次能掌握的事情約為7個」。這個法則應用在日常生活上很多地方，例如，報紙一個版面除了廣告的地方外，會登的報導大約是7個，而電氣化產品的操作性能大約是7項。而這點也可以運用在網站上。

內容架構上要去蕪存菁
如果網站內容分區多於7個時，就算整個畫面可以容納得下，還是會有缺點，就是很難一眼就找到要找的主題內容。不只如此，也無法讓閱覽者很快看出這個網站的主題為何。尤其像是要建立公司品牌這種目標越是明確的網站，內容結構就要越單純。

培養「比」的感覺
所有設計中，構成設計本身的各項主題要素之間要安排在什麼位置、要設定多大多小等，都要與周圍主題要素相比較來決定。簡單來說，在一個小的圖的旁邊放個更小的圖，原本的那個圖就變成比較大的圖了。在設計的世界裡並沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。掌握住「大的東西」為什麼看起來比較大、「小的東西」為什麼看起來比較小的這種「比」的概念，在設計上是非常重要的。

Design Sample
http://gap.co.jp/
GAP Japan
善用LOGO標誌的知名度，將架構盡可能地簡化

畫面有秩序，瀏覽更容易

各組成要素位置關係的統一及其效果
在公共設施或醫院這樣的建築物中，都有讓人潮往來更順暢的「標誌系統設計」，這些設計除了要統一樣式外，就連放置的高度或大小等也都會予於統一。具有一定操作性的網站設計也一樣，確定好設計要素的配置可以降低操作的困難。設計的秩序不只會影響使用性，也會影響美觀。定出組成要素的位置關係，在網站設計而言可說是相當基本的一個概念。

閱讀引導標誌的統一
閱讀引導標誌的設計室最容易統一的。要統一時，不只要注意形狀要統一，還有閱讀引導標誌和文字之間邊界的比例也要遵守法則，這樣才會協調。

按鈕樣式
在「執行」或「送出」這些操作按鈕的樣式已經統一的網站，表示「上一頁」、「下一頁」等表示移動的操作按鈕上用像圖一樣的小標誌或小圖樣(icon)，就可以讓整個設計看起來層次提升很多。按鈕的顏色要和連結文字(link text)的顏色統一，讓顏色也有表現相關性的功能。

緊急出口的設計
緊急出口的標誌是一個人急著跑向一個出口。其實這個標誌是世界統一的，設計者是日本設計師太田幸夫。聽說綠色和白色的配色，是因為人在吸入煙時，會將這樣的顏色看成黃色，所以設計者才做這樣的顏色安排。

Design Sample
http://www.dsp.co.jp/
Digital Scape
整個網站都用統一的箭號標誌

http://www.k10k.net/
Kaliber10000
按鈕和小圖示的樣式都有固定規格，設計水準相當高。

http://download.com/
Download.com
可以點選的文字字型都予以統一

有效配置方塊或文字

運用網格設計完成畫面結構
要讓設計樣式不會鬆散，可以從文字、圖片到細節部份，都運用網格法來配置。雖然實際在進行時，主要只是在畫面上設定導引線而已，不過，該對齊的地方是否好好對齊，卻是這種設計能否成功的關鍵。因此在進行設計時，最重要的就是兼顧細部的調整和畫面整體的協調性。所以在設計時要時而近看、時而遠看自己設計的感覺。

無表格設計(No table design)
要在網路上顯示複雜的表格時常會用「設計表格」(Layout table)的手法，可是這個方法卻有讓HTML程式碼(source)複雜化的缺點。於是，後來的人就用CSS來控制各組成要素的位置，而這種流派就稱為「無表格設計」(No table design)。採用這個方法，強調的就是能夠因應Web標準技術。

Design Sample
http://8011web.com/
8011web.com
此網頁中以左邊長條狀為基準來切割畫面空間。

http://www.alistapart.com/
A List Apart
網站LOGO影響整個畫面的空間劃分。

運用留白技巧的設計法

如何運用留白
所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在其周圍留下空白空間。有人會認為網站的目的是提供資訊，留白等於就是「浪費空間」；可是這樣的設計效果具有相當清楚分明的感覺，所以在此還是想將這種手法當成一種設計技巧來介紹。像LOGO或商品影像這樣，想與其他部分或樣式做區別時，這種方法就相當好用，而且就像使用大量展示面積的家具用品展示店給人的高級感一樣，留白的空間也會給人一種很有型的感覺。(留白不一定是白色的，而是指一塊空白的區域。)

畫面上方留多點空間的重點
瀏覽器的發展日新月異，近年來更是很多人關注的焦點。分頁式瀏覽器(Tab Browser)讓使用者不用新開瀏覽器，在同一個瀏覽器中就可以開很多個不同的頁次來瀏覽網頁，很方便。各個網站可用自己設計的按鈕來操作，可是有時候碰到上方選單型設計時，常常就會不小心按到瀏覽器的按鈕，尤其是網站的按鈕和瀏覽器的按鈕接近時更是如此。所以希望讀者們在設計時，可以留個10像素左右的距離為宜。

Design Sample
http://amana.jp/
Amana
大小設定較小的網站LOGO也可透過留白的效果而看起來醒目。

http://swanq.co.jp/
swanq
此為影像直向貫穿畫面的結構，資訊內容變化的地方，也因為有留白而讓畫面轉換感覺起來更自然。

http://www.ckr.se/
CLAESSON KOIVISTO RUNE
這個設計實例特別強調網站LOGO，樣式簡單且高雅的LOGO可強調出高級感。

內容豐富的網站設計重視緊湊感

善用液態設計(liquid design)的網站設計法
入門網站等資訊量多的網站，就要運用左右寬度可調整的液態設計(liquid design)。用這種手法完成的網站效果有兩種，一種是顯示畫面大小變更時，整個設計整體畫面給人的印象不變；另一種則是縮小時覺得很擠，放大時又變得畫面很閒散。產生這種區別的重點就在於標題所設的邊界大小。要讓顯示範圍變更時設計也不會亂掉的祕訣，就在於這個部分的處理。

Point1：顯示畫面大小變更，但設計感仍舊不變的網站大多是因為在網站LOGO下方設定了距離較大的邊界。只要執行這樣的設定，就能免於在顯示畫面縮小時，整個設計得擠成一團的窘況了。

Point2：各區塊不用方框框住。各區塊標題用顏色長條(在此為灰色)，區塊間就自然可以區隔開來。也因此，各個區塊項目沒有必要畫框線。看得到框線反而會讓人覺得整個畫面都是線，而給人複雜、俗套的印象。

Point3：搜尋的部分有支撐標題部份的功能。這個地方與畫面中央的內容部分不同，要用線框住以強調與左側設計之間的左右對稱性，這樣看起來結構就會很緊湊。

液態設計的基本重點
畫面左右安排寬度大小固定的導覽要素、字體設定成與中間本文部分相對應的大小，這也是很多人愛用的手法，優點是，在設定顯示完整畫面時一次可顯示的資訊量增加，可以慢慢閱覽。一般而言較少使用在首頁的設計，而會常用在一次要提供完整資訊的情況(如新聞)上。

瀏覽器也有工具列
Web網頁設計的最大寬度，一般是由顯示器的大小來決定的，不過也不要忘了瀏覽器也有工具列。工具列是畫面左邊出現的書籤(bookmark)或顯示已瀏覽網頁的功能，現在還有即時通訊的RSS顯示功能，所以有不少人會將工具列開著不關掉。在這種情況下，解析度為1280像素的17吋標準顯示器，可設計的最大寬幅也會只剩970像素而已。

Design Sample
http://www.gettyimages.com/creativeimages?country=usa
getty image
將網站LOGO儘量設小一點，以和其他部分產生足夠的間距。

http://www.goo.ne.jp/
goo新聞
長條廣告外的空間，讓瀏覽者面對那麼多資訊可以喘口氣。

以影像為中心之設計架構

中心構成
如果設計的網頁是要以視覺方式來傳達某機關單位或品牌的印象，就要夠靈活、夠有創意才能勝任。如果能夠掌握這種網站的設計類型，就能確實降低設計上的困難。在設計時首先要先決定，是要讓影像充滿整個畫面，還是要讓色塊包圍住影像，還好之後再來決定整體的結構。如果想要展現影像的精美，可以採前者；如果想要展現影像處理的效果，則可採後者。

塞尚的畫面結構哲學
南法艾克斯安普羅旺斯的畫家，保羅塞尚(Paul Czanne)對二十世紀的美術影響甚鉅，他認為三維的大自然界的物體都可以利用球體、圓柱、圓錐的三種方式入畫。想必是他不斷想要設計難以在平面上展現的光與影而得到的結論吧。將事情過度簡單化的確很危險，但對於畫面結構有自己的一套想法，對版面設計而言卻是相當重要。

Design Sample
http://asia.swarovski.com/taiwan/
Swarovski Crystal
商品的硬度和設計樣式的發想有著共通點。

http://www.stylewars.com/
Style Wars
本例以繪畫的手法，充分揮灑影像設計的能力，水準相當高。

分段式的設計類型

用區塊標出網頁重點
平面印刷品中，分段式版面編排方式，可以避免換行時未出現過多空白的情形。在網頁上，這種方式可以盡量減少視線大幅移動，有助充分運用空間。網頁和雜誌等不同，畫面出現的文字量較難控制，所以可以先做一個基本段落區塊，確定好瀏覽者視線集中的重點，再加入其他內容，這樣就會具有平衡感。

網頁分成兩欄
將網頁畫面分成兩欄，左邊的導覽部分全部設為靠右對齊，讓畫面看起來像是文字都向中間的分隔線對齊。用這種「左邊區塊向右對齊」的方法，文字內容很多的網站看起來也會很穩。

由上而下分割網頁空間
網頁的分段式設計基本上都是由左往右排，不過也可以由上而下排。這個結構是將網頁空間分成主題、圖片式全區導覽和文字三大部分，每一部分的內容都少少的，看起來不會塞在一起。

網頁設計的重心
報紙的重心在於發行報社名稱以及各版的重要標題，而網頁也是一樣，網站LOGO和周圍是網頁看起來穩不穩、是否有頭重腳輕、腳重頭輕問題的關鍵。所以網頁設計時就要在網頁上方的頁緣和網站LOGO設定足夠的間距，在瀏覽器的介面和網站LOGO間留白，以集中瀏覽者的視線。

考慮到Web標準相容性的設計方式

考慮網頁資訊結構的畫面架構
現在所謂的網頁設計標準，是指套用CSS樣式的XHTML語法而言。XHTML是從包含樣式與資訊定義的HTML語法中抽出樣式設定的部份，因此光靠XHTML是無法完成網頁設計的。分離樣式與結構，是為了便於設計與維護網頁，因此學會實用性的Web標準網頁設計技巧，實為當務之急。

內容架構的基本
在XHTML語法中，一頁裏可設定的最上層標題h1只有一個。h1主要是用於網頁ID的標籤，而下層資訊則是每一則都用h2來設定。

混用
在Web標準普及之前，網站設計主要都是用table標籤來做表格設計。然而這個手法不只會讓標籤流於繁雜，而且不易標明優先順序等內容結構。雖然如此，要讓能將XHTML和CSS分別解譯處理的瀏覽器正常顯示出網頁內容，還是有很多地方要用到table(表格)，所以就有人採取大致分割網頁設計空間時就用table，要做細部設計時就用CSS來控制的這種方法。這種方法就稱為「混用」以與其他方式區別。

Design Sample
http://9rules.com/
9rules Network
各個區塊的資訊整理情形會反映在樣式上。

http://mightygoods.com/
mightygoods
內容結構包括導覽的部分都很層次井然。

沿用首頁的風格

導覽設計(navigation design)也要沿用首頁的特色
如果網站設計是要傳達品牌印象的話，就要讓網站整體有一致性。像企業品牌這樣大的主題，就要讓瀏覽者從一點點小印象中慢慢堆疊出一個完整的印象，所以不管是影像或顏色都要沿著相同的主題來選擇。就網站而言，呈現效果的一致性也會連帶影響操作使用上的一致性。尤其是包含操作性在內的設計，其整體感在介面設計的領域中更被稱為「look and feel」而備受設計者重視。

不一定從首頁瀏覽起
網站要看起來很有主題首尾一致的效果，就必須要使用者是從首頁連結進來才行。使用者能按照網站設計者、資訊提供者所想，使用網站所設的導覽來逛逛這個網站的話，才會起「Look and Feel」之效果。可是，由於近年來搜尋系統的功能提升，使用者很多都不是從首頁點進網站，對這樣的使用者而言，網站的整體感或氣氛就很難感受得到。網站設計的效果有時也得要看使用者使用方式而定，希望設計者們都能先有這個概念。

Design Sample
http://www.h-kotobuki.co.jp/about/
壽屋商務飯店
導覽設計與使用的影像統一，呈現出高雅的感覺。

http://dma.ucla.edu/info/index.php
UCLA Design Media Arts
矩形擷取部分關鍵影像，與首頁風格一脈相承。

http://www.g-gravity.com/
G-gravity
用有光澤的背景呈現出令人驚艷質感，而此質感也是整個網站的共同特色。

design note
依重力概念而行
設計領域中，稱設計物的上方與下方為「天地」。做平面設計的人一般也都是說「天地」而不說「上下」。多數的設計者都能顧名思義，注意到上面代表的是「天」，下面代表的是「地」。尤其是在固定的顯示範圍內，天地的感覺就顯得相當重要。要把紙面想成是個自然環境，設計時要依重力法則來構思。

舉例來說，好看、好懂的這種設計樣式，我們會說「設計流暢」。這個「流暢」就是指畫面上風順暢地吹拂而去的感覺。一般而言，風都是和地面平行的，所以要有天和地，也才能達到「流暢」的效果。畫面上方比較空，畫面下方則要多些份量，所要呈現的東西就安排在下方，各項主體之間要有適當的距離讓空氣流通。每個設計者所說、所想的某個顏色或某個形狀可能都不一樣，但是「天地」之間的重力法則形成畫面骨架這點卻是不變。

除了上、下、左、右這樣的位置法則之外，大小、重量也會自然地呈現輕重的效果。所以大的東西放在畫面下方比較自然，而畫面上方如果是一些小東西的集合，看起來會很有整體感。在有個大圖形的畫面結構中，如果可以在附近放幾個小一點的圖形以讓大圖形與小圖形平衡，整個畫面看起來就會很穩。這種設計技巧其實正反映了自然環境的重力法則。

重量和大小會隨配色而改變，且條件越多，就越難讓樣式統一。不過不管是怎麼樣的設計，「天地」的概念一定都會是設計者的重要依據。

--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---

認識Ajax

2010-03-24T15:42:00.022+08:00

多數傳統網頁執行的主要問題點在於網頁的回應時間過長，使用者按下網頁上的超連結或是按鍵之後，往往要等待數秒鐘，甚至10幾秒才能夠看到網頁回傳的處理結果，更糟的是使用者有可能需要執行多次的重新整理才能看到所需要的答案，這種考驗使用者耐心的Click and Wait式的操作感覺，因為無法像視窗應用程式一樣提供敏捷的操作反應，是造成Ajax風格的網頁興起的主要推手。

新一代的Ajax(Asynchronous Javascript and XML)網頁開發技術是一種Rich Client網頁解決方案，Ajax網頁會善用用戶端網頁的Javascript技術，透過XmlHttp傳輸協定和網際網路上的伺服器進行溝通，再使用XML技術解析伺服器傳回的執行結果，最後再利用DHTML、DOM(Document Object Model)，和CSS(Cascading Style Sheet)等技術將伺服器傳回的結果顯示到網頁上供使用者檢視，是一種結合用戶端和伺服器的技術，其優點是可以只更新網頁的部份內容，減少使用者等待的時間，提升使用者的工作效率，同時也可以降低網頁對伺服器頻寬的需求，是一個頗為優良的解決方案。

傳統的網頁單純依靠HTTP協定進行用戶端和伺服器之間的運作，用戶端發出需求，然後等待伺服器傳回處理結果，取得伺服器執行結果後再更新整個網頁顯示的內容，其架構如圖：

Ajax網頁的架構和傳統的網頁不同地方在於在用戶端執行的網頁可以透過Javascript搭配XmlHttp協定，以不引發網頁PostBack的方式發出需求，呼叫伺服器上的XML Web Service服務或是網頁提供的功能，再以較有效率的方式更新網頁的部份內容，降低使用者對等待的不耐，提升使用者對網頁操作的感覺，其架構如圖：

體驗Ajax風格的網頁
PageFlakes.com
www.bing.com/maps
Maps.Google.com
Maps.Yahoo.com
DeepEarth(Silverlight網頁)
Google Suggest
G-Mail
Amazon Diamond Search

開發Ajax風格的網頁
‧Hard Code
Javascript + DHTML + DOM + CSS + XmlHttp + XML

Javascript
類似C語言語法，可以用來控制HTML元素，改變網頁顯示的內容或樣式，或是透過XmlHttp通訊協定呼叫網頁或XML Web Service服務提供的功能。

DHTML(Dynamic HTML)、DOM(Document Object Model)和CSS(Cascading Style Sheet)
利用Javascript控制網頁中的物件顯示的資料和效果的技術稱為DHTML。網頁定義的文件模型(DOM)負責將網頁中的物件建構成物件階層，協助網頁執行尋找物件的動作，以便更新物件的內容或樣式，而CSS樣式則是用來定義網頁中物件的樣式之語法。

XmlHttp(Extensible Markup Language Hypertext Transfer Protocol)
支援使用HTTP通訊協定在網際網路傳輸XML、HTML和二進位資料的通訊協定，可以利用網頁中的Javascript語法啟動執行傳送需求給伺服器的動作。XML(Extensible Markup Language)文件處理

XML是一種可以允許自訂的可擴充標示語言，Ajax網頁必須有能力處理伺服器傳回的XML文件，並從自伺服器取得XML文件中取出所需要的結果，再利用Javascript、DOM和CSS技術更新部分網頁顯示的內容或效果。

‧Client Script Callback技術

‧ASP.NET 2.0或更高版本的做法，使用ClientScriptManager類別和ICallbackEventHandler介面

‧Microsoft ASP.NET Ajax Extension + Ajax Control Toolkit

製作Ajax風格網頁的缺點
‧偵錯不易
‧易出錯Weak type
善用http://www.w3schools.com
‧維護不易
‧必須在不同的瀏覽器上進行測試
‧安全性 - IE瀏覽器必須可以進行Active Scripting
‧沒有Framework

「雲端運算」淺談

2010-02-02T01:36:00.005+08:00

「雲端運算」近幾年被炒得火紅，最大的推手應該歸功於Google。Google新發表之Linux-based作業系統Chrome，就是首套內含「雲端運算」概念的作業系統。而所謂的「雲端運算」，可以從「網路運算」談到「分散式運算」(Distributed Computing)和「網格運算」(Grid Computing)；知名分析公司Gartner將「雲端運算」區分為「雲端服務」(Cloud Computing Services)與「雲端科技」(Cloud Computing Technologies)兩大類；商業周刊第1146期(2009.11.9)對雲端運算的產業還作了一個上中下的三層分類：上層的「軟體服務」(software as a service，SaaS)、中層的「平台服務」(platform as a service，PaaS)、底層的「設備服務」(infrastructure as a service，IaaS)。

發展歷史
2007年10月，Google與IBM開始在美國大學校園，包括卡內基美隆大學、麻省理工學院、史丹佛大學、加州大學柏克萊分校及馬里蘭大學等，推廣「雲端運算」的計畫，這項計劃希望能降低「分散式運算」技術在學術研究方面的成本，並為這些大學提供相關的軟硬體設備及技術支援（包括數百台個人電腦及BladeCenter與System x伺服器，這些運算平台將提供1600個處理器，支援包括Linux、Xen、Hadoop等開放原始碼平台）。而學生則可以透過網路開發各項以大規模運算為基礎的研究計畫。

2008年1月30日，Google宣佈在台灣啟動「雲端運算學術計畫」，將與台灣的台大、交大等學校合作，將這種先進的大規模、快速運算技術推廣到校園。

2008年7月29日，雅虎、惠普和英特爾宣布一項涵蓋美國、德國和新加坡的聯合研究計劃，推出「雲端運算」研究測試床，推進「雲端運算」。該計劃要與合作夥伴建立6個資料中心作為研究試驗平台，每個資料中心配置1400個至4000個處理器。這些合作夥伴包括新加坡資訊通訊發展管理局、德國卡爾斯魯厄大學Steinbuch運算中心、美國伊利諾大學香賓分校、英特爾研究院、惠普實驗室和雅虎。」。

2008年8月3日，美國專利商標局網站資訊顯示，戴爾正在申請「雲端運算」(Cloud Computing)商標，此舉旨在加強對這一未來可能重塑技術架構的術語的控制權。戴爾在申請檔案中稱，「雲端運算」是「在資料中心和巨型規模的運算環境中，為他人提供電腦硬體定製製造」。

雲端運算不是技術，它是概念
所謂「雲端」的「雲」即為我們最常使用的網際網路（Internet），「端」則指使用者端（Client）或泛指使用者運用網路服務來完成事情的方式。最終目標是沒有軟體的安裝，所有的資源都來自於雲端，使用者端只需一個連上「雲端」的設備與簡單的介面（例如瀏覽器）即可。所以「雲端運算」本身並不代表任何一項資訊科技的技術，它是一種電腦運算的概念，而一種概念就會有許多不同的方式去實踐，這個時候才會有不同的技術衍伸出來。

雲端運算（Cloud Computing）從本質上來看，他是一種分散式運算（Distributed Computing）的新運用，其最基本的概念，是透過網際網路將龐大的運算處理程序（Process），自動分拆成無數個較小的子程序（Sub process），再交由多部伺服器（Multi- Server）所組成的龐大系統，透過搜尋與運算分析之後，再將處理結果回傳給使用者端。透過這項技術，網路服務提供者（Service Provider）可以在數秒之內，處理數以千萬計甚至億計的資訊，達到和「超級電腦」同樣強大效能的網路服務。

換言之，當大家努力去實現這樣的一個概念時，就促成了網際網路的蓬勃發展，因為網路本身就是在強調不同電腦之間的溝通以及合作，於是在各項基礎設施包括頻寬、通訊標準、電腦運算能力以及運算架構都逐漸發展成熟之後，提供給開發者或是一般使用者的網路服務(Web Service)便開始出現，這些網路服務提供給使用者簡單的介面來存取一些資源。當然一開始的時候，企業提供出來的，都是一些相當陽春的網路服務。

這些網路服務繼續發展下去，時至今日出現了像Google、Yahoo!、Amazon等等網路巨獸，這些大公司有能力去購買數以萬計的伺服器，並且把這些電腦串起來，成為一個龐大的運算資源，而龐大的運算資源自然就意味著更為多樣化和以前無法提供的新服務。所有的人現在可以在網路上不同的地方，利用各大企業開放出來的運算資源，進行資料的運算或是提供服務給使用者，於是就在這樣的情況之下，「雲端運算」被提了出來。因為現在無論是一般的使用者或是開發者，都透過網路來取得資料或是進行資料運算，自己本地端的運算資源雖然有限，還是可以透過網路進行複雜的運算，結果資料就像是從天上的雲端掉下來一樣，所以很多人會將網際網路表示成一朵雲的圖示，例如下圖：

「分散式運算」與「網格運算」
而「雲端運算」的概念其本質大抵承襲自「分散式運算」(Distributed Computing)以及「網格運算」(Grid Computing)。

所謂「分散式運算」，顧名思義，就是將大型工作區分成小塊後，分別交由眾多電腦各自進行運算再彙整結果，以完成單一電腦無力勝任的工作。也就是說讓一些不同的電腦同時去幫你做事情、進行運算，所以有兩台電腦也好、十萬台電腦也好，只要有超過一台電腦，而且讓他們可以互相溝通，一起同時幫你做事情，這就是分散式運算。

而「網格運算」則是「分散式運算」加以延伸的一支，所謂「網格」指的是以公開的基準處理分散各處的資料。其主要特點放在異質系統之間運算資源的整合，簡單來說，在於將各種不同平台、不同架構、不同等級的電腦彼此之間可以透過通訊標準來互相溝通，分享彼此的運算資源。在網際網路還沒有今天這麼發達之前，企業採用「網格運算」，很大的原因是為了讓組織內部IT資源達到更良好的使用率。

由此觀之，「雲端運算」與「網格運算」並沒有顯著的不同。的確，兩者都是分散式運算的延伸，唯獨「網格運算」著眼於整合眾多異構平台，而「雲端運算」則強調在本地端資源有限的情況下，利用網路取得遠方的運算資源。

「雲端服務」與「雲端科技」
問題來了，若說只要是透過網路線接上「雲端」並利用遠端資源就可以稱做「雲端運算」，那麼透過Gmail收發信件與利用BitTorrent之類的P2P技術取得資料，豈不都可算是「雲端運算」？但是這兩者在本質上有著明顯的不同，究竟何者才能真正稱得上是「雲端運算」呢？

在「電腦世界」(Computer World)一篇標題為「雲端運算的過度混淆」( Cloud computing hype spurs confusion) 的文章中，引述了知名分析公司Gartner的分類方式，將「雲端運算」區分為兩大類，分別為「雲端服務」(Cloud Computing Services)與「雲端科技」(Cloud Computing Technologies)。

Gartner指出，「雲端服務」專注在於透過一個瀏覽器，藉由網路連線從遠端來存取、來操作、來服務，例如Salesforce.com的CRM工具，或是提供使用者安裝和使用各種不同作業系統的Amazon EC2服務。這類型可以視為「軟體即服務」(SaaS, Software as a Service)概念的後繼，使用者完全不必去擔心成長的問題，遠端自然會幫你將該需要的伺服器或資料庫都準備好，使用者只要放心的把東西丟到網路上、丟往遠端的服務商即可。也充份善用了網際網路的便利性，讓使用者可以安全的將所有資料都存在遠端的一或多個伺服機裡，到哪裡都可以使用，服務商也可隨時作升級或更動，同時又巧妙的將龐大運算的問題丟給「雲端」解決，於是讓一隻手機或一個沒有運算能力的GPS也都可以上網進行很多奇奇怪怪的事。

而「雲端科技」則是著眼於利用虛擬化以及自動化等技術來創造和普及電腦中的各種運算資源。Gartner認為，這種類型可以視為傳統資料中心(Data Center)的延伸，內部系統採用多台電腦一同運算、儲存、相互備援，且不需要經由第三方提供外部資源便可套用在整個公司的內部系統上。譬如可以將基因圖譜定序、DNA解碼等拆成好多來演算，又譬如Skype與 BitTorrent以點對點(P2P)來共同組成單一系統。

所以說，根據Gartner的定義，Google所謂的「雲端運算」，包含「iGoogle」、「Google Calendar」等，雖然也有運用到「雲端科技」的部分，但是大抵上其模式則是屬於「雲端服務」的範疇。

當然，「雲端運算」的威力不僅僅是提供使用者更妥善的服務而已，對企業而言，「雲端運算」能夠有效的降低成本與風險。由於「雲端服務」不需要將程式安裝在用戶的電腦中，對服務商而言，降低了商業程式邏輯被破解的風險。此外，過去常見到台灣公司必須先將在本地收集的資料傳回美國，經過美國工程師處理後再傳回台灣作業的情況，如此一來則需耗費大量的網路傳輸費用以及時間。利用「雲端運算」，位在世界各地的開發人員便能夠透過同一套平台更即時且密切的合作。

拿下這朵雲，就是下個科技霸主！
上級戰場——軟體服務（software as a service，SaaS）
打破以往大廠壟斷的局面，所有人都可以在上面自由揮灑創意，提供各式各樣的軟體服務。
競爭者：世界各地的軟體開發者

中間戰場——平台服務（platform as a service，PaaS）
打造程式開發平台與作業系統平台，讓開發人員可以透過網路撰寫程式與服務，一般消費者也可以在上面執行程式。
競爭者：Google、微軟、蘋果、Yahoo!

底層戰場——設備服務（infrastructure as a service，IaaS）
將基礎設備（如IT系統、資料庫等）整合起來，像旅館一樣，分隔成不同的房間供企業租用。
競爭者：IBM、戴爾、昇陽、惠普、亞馬遜

以下分別說明目前正進行雲端運算計畫的國際大廠現況如下：

Google
在美國網路搜尋市場占有率第一名的 Google，其實很早就將這概念應用在自家提供的服務上，諸如Gmail、YouTube、Google Docs、Google Talk、Google Calendar、Google Gadget等，Google 於2007年10月與 IBM 合資超過 1,500 萬美元，建立 Google 101 大型資料運算中心，並在 2008 年將雲端運算定為未來的發展策略，而這點，可從Google為進軍通訊產業而推出的G-phone看出點端倪。因此從 Google 大舉佈局雲端應用下，相信在加強「端」連到「雲」的入口和架構完整的商業模式後，是很有機會在未來市場繼續保持領先地位。

IBM
主推Blue Cloud「藍雲計劃」的主要切入點不在於如何提供消費端各種服務，他更專注的是如何提供雲端運算所需擁有的硬體設備與管理軟體，允許企業將運算任務分成不同組件，分別調至最有效率的電腦系統執行，解決企業尖鋒、離鋒時間的系統負荷量問題。同時結合網路巨人 Google 以成為雲端運算中的要角，並著手在全球數個城市建立雲計算中心。

Microsoft
微軟在雲端的策略則是「Software + Service」。預計推出的新作業系統「Azure」，將結合Live Mesh開發新功能，並整合各種Live Services；Azure另一項用途，是能讓軟體開發者所撰寫的程式直接在微軟資料中心上線，不需靠公司裡的伺服器；Azure就像是微軟線上服務的地基，扎穩微軟邁向雲端之路。

Yahoo
Yahoo將開源雲端運算框架Hadoop，應用在自家搜尋服務的兩千台伺服器上，來處理超過5 Petabytes的網頁內容，建立整個網際網路的網頁索引資料。此外，Yahoo的雲端產品定位為Consumer Cloud Computing，提供Yahoo! Live、Yahoo! oneConnect、NewsGlobe，等線上訊息服務。而即將正式開放的Yahoo Application Platform，則是提供開發者線上撰寫和執行程式的開放平台。

Amazon
Amazon 的 Web Services，透過虛擬化的技術，Amazon EC2搭配 Amazon S3 儲存服務，提供各種不同規格的虛擬主機和儲存空間，使軟體開發者能快速地在上面安裝或執行所需的服務，用完了就結束完全沒有負擔，由於費用低廉，吸引了很多開發人員使用。而且你只要負擔所使用的時間與資源即可，在成本效益的投資上，這樣的服務相當吸引人。

參考來源：
雲端運算 Cloud Computing 的概念與應用

PMBOK簡介

2010-02-01T11:28:00.001+08:00

總部設在美國賓州Newtown Square創建於1969年的「專案管理學會」(PMI，Project Management Institute)，對推動專案管理知識體系之建立及針對各不同產業特性發展其特有的專案管理方法上一直不遺餘力。為使「專案管理」所包含的各廣泛知識領域能有效整合，並使其能組織化、分工化、結構化、國際化、標準化及專精化，乃邀集各相關專家學者經數年的努力，於1984年首次編撰完成「專案管理知識體系導讀指南」（PMBOK，A Guide to the Project Management Body of Knowledge），並在歷十餘年不斷地研修及持續地改進後，PMBOK已被公認為專案管理的全球標準，且所有專案經理為促使專案卓越而需獲得具有基礎實務的高標準，目前最新版是第四版。

PMBOK內詳細說明專案管理所依循的五大程序群組 (Process Groups) 和九大知識體系領域 ( Knowledge Areas)各定義。

其中五大專案管理程序群組為：

起始程序 (Initiating Processes) – 授權開始一個專案或進入專案的下一個階段。

規劃程序 (Planning Processes) – 定義及琢磨目的並選擇最佳行動做法以達到專案的所要滿足的目的。

執行程序 (Executing Processes) – 協調人員及其它資源來實行專案計劃 (project plan)。

控制程序 (Controlling Processes) – 由定期監督及量測專案進度來鑑別與專案計劃的差異，必要時採取矯正行動，以確保達成專案目的。

結案程序 (Closing Processes) – 正式化一個專案或其階段的接受，使其有條理地結束。

這五大程序群組不僅適用於一整個專案，且適用於一個專案中的每一個階段。

九大專案管理知識體系領域為：

專案整合管理 (Project Integration Management) – 確保專案中不同的要素相互協調配合，含專案計劃書發展 (Project Plan Development)、專案計劃執行 (Project Plan Execution)、及整體變更控制 (Overall Change Control)。

專案範疇管理 (Project Scope Management) – 確保專案包含所有及僅含有所需的工作項目以成功達成專案目的，含起始 (Initiation)、範疇規劃 (Scope Planning)、範疇定義 (Scope Definition)、範疇確認 (Scope Verification)、及範疇變更控制 (Scope Change Control)。

專案時間管理 (Project Time Management) – 確保專案如期完成，含活動定義 (Activity Definition)、活動排序 (Activity Sequencing)、活動期程估計 (Activity Duration Estimating)、時程發展 (Schedule Development)、及時程控制 (Schedule Control)。

專案成本管理 (Project Cost Management) – 確保專案如核准的預算完成，含資源規劃 (Resource Planning)、成本預估 (Cost Estimating)、預算編列 (Cost Budgeting)、及成本控制 (Cost Control)。

專案品質管理 (Project Quality Management) – 確保專案能滿足需求，含品質規劃 (Quality Planning)、品質保證 (Quality Assurance)、及品質管制 (Quality Control)。

專案人力資源管理 (Project Human Resource Management) – 最有效地運用與專案有關的人員，含組織規劃 (Organizational Planning)、人員獲得 (Staff Acquisition)、及團隊發展 (Team Development)。

專案溝通管理 (Project Communications Management) – 確保專案能適時及適當地產生、蒐集、散佈、儲存、及最終處置專案資訊，含溝通規劃 (Communications Planning)、資訊發佈 (Information Distribution)、績效報告 (Performance Reporting)、及結案作業 (Administrative Closure)。

專案風險管理 (Project Risk Management) – 敘述專案風險的界定、分析、及回應的程序，含風險管理規劃 (Risk Management Planning)、風險界定 (Risk Identification)、定性風險分析 (Qualitative Risk Analysis)、定量風險分析 (Quantitative Risk Analysis)、風險回應規劃 (Risk Response Planning)、及風險監控 (Risk Monitoring and Control)。

專案採購管理 (Project Procurement Management) – 敘述執行自組織外取得商品及服務的程序，含採購規劃 (Procurement Planning)、邀商規劃 (Solicitation Planning)、邀商作業 (Solicitation)、商源評選 (Source Selection)、合約管理 (Contract Administration)、及合約終結 (Contract Closeout)。

PMP與IMPA

2010-01-25T01:29:00.003+08:00

在專案管理領域中，有PMI（國際專案管理學會，總部設在美國）與IPMA（國際專案管理協會，總部設在荷蘭）之兩大不同體系。PMI運用在企業界，IPMA被學術界所重用；另外PMI是基於全球化的考量，如目前全球化語言是英文，反觀，歐洲較注重在地文化，強調各國在地化特色。

美國應用專案管理領域非常廣泛，包含最難大量生產的電影業，好萊塢電影是美國的藝術事業，電影使用專案管理手法，讓流程標準化，其衡量指標為「票房」，讓票房顯示出電影事業的競爭力、績效，像是「鐵達尼」、「哈利波特」，這些都是歐洲的小說，卻在美國拍攝成電影，票房獨步全世界。相對的，歐洲強調在地文化，例如：法國是美學電影的代表、德國的民族電影代表、義大利的寫實電影代表等，這些差異顯示出歐洲在地文化與全球化走在兩種截然不同的軌道上。

在認証制度體系方面，也是有分PMP（Project Management Professional，專案管理師）和IPMA。其中PMP是以美國PMI的統一標準核發證照，取得PMP資格者即為「專案管理專業人士」，全世界只有一種標準，不管您是在美國，日本，台灣或大陸水準統統一樣；而IPMA是以各會員國依不同程度檢定認可認可發與證照，然而其分級檢定界線模糊，像是托福、 TOEIC，而檢定後的核定標準以「專案的職稱」來分界，例如：D級等同於專案副理、A級等同於專案副總，假如今天一個學生考取IPMA的D級證照就等同於專案副理，但其專案實務能力是否等同於專案副理，其實是一個問號，專案人仕考取A級即可擔任公司專案副總嗎？這名稱的設計在企業會有些許的爭議性。

若是以通行性來說，由於PMP由美國PMI統一發照，通行於世界各地，而IPMA是以歐洲各國為大本營，由各會員國自行發照，而IPMA由台灣認定核可程度,，到其它歐洲國家認定卻不一定相同，又各國認証名稱的不一致，大陸叫IPMP、台灣稱IPMA、美國稱PMC。

PMP分佈141國家（遍及五大洲），有美洲的美國加拿大、亞洲的大陸日本新加坡、歐洲的德國英國、大洋洲的澳洲、非洲的南非…等；而IPMA都集中在 42國家（以歐洲為主），波蘭、捷克、塞爾、烏克蘭、匈牙利、葡萄牙、羅馬尼亞…等歐洲國家，少數非歐洲國家如：伊郎、南非、科威特…等。

應用方面，PMP為企業界及實務界所重用，而IPMA為學術合作之領域所重視。像是中鋼、台積電、日月光、104人力銀行、精誠資訊等對於員工PMP取得的要求，又或者今天想從副理晉升為經理、經理晉升為處長，PMP證照即是很棒的考核標準；IPMA以教授教學為主，因業界專案實務經驗有限，故偏向理論論點出發，合作對象與民間學校龍華科技大學，大漢或育英護校等尚有其它學術單位合作，以上僅是兩者之差異，在不同的領域中各領春秋。

3大Linux社群套件：Fedora、OpenSUSE、Ubuntu

2010-01-13T21:35:00.007+08:00

這3大社群套件各有擅長，並且都源自相同的Linux核心--2.6.27、使用相同的GNOME 2.24，也經常名列DistroWatch.com普及率調查的前茅。Ubuntu經常是最受歡迎的Linux套件；OpenSUSE已站穩歐洲市場，並積極揮軍美國；由Red Hat資助的Fedora近幾年雖然的普及率雖有下滑，但由於Red Hat身為最大的Linux公司，Fedora也經常率先嘗試新技術，因此Fedora依然位居重要地位。

Ubuntu是以容易使用而聞名並成為最普及的Linux套件，然而擁有廣大的社群支援（例如論壇和Wiki文件，台灣的Ubuntu社群也很活躍），更是Ubuntu深受使用者喜愛的重要原因。儘管Ubuntu適合有經驗的Linux玩家，但更適合初學者，尤其是完全沒有Linux經驗而想要嘗試Linux的電腦使用者。

Ubuntu還包含了戴爾的DKMS（Dynamic Kernel Module Support），這項功能會在使用者更新Linux核心時，縱使Linux核心尚未內建支援顯示卡或其他硬體，也能自動下載並更新符合機器的驅動程式。這就不用擔心新增硬體或更新Linux核心之後而導致系統無法運作。

OpenSUSE兼具了用戶端桌面與伺服器能力，對於經常得在混合了Linux、Unix、Windows的企業網路環境工作，OpenSUSE對此提供了最佳的支援。此外目前最新版本內建的是Novell客製過的OpenOffice.org 3.0，這個版本能讓使用者讀、寫微軟目前所有的Office檔案，包括Office 2007的Open XML格式。

OpenSUSE不只提供了相當優越且穩定的伺服端能力，更能在安裝時讓管理者自動設定Web、檔案、資料庫等伺服器。而除了提供KVM（Kernel-based Virtual Machine）、Xen、VirtualBox等虛擬化功能，OpenSUSE也內建了Mono--Linux開放源碼版的Microsoft .NET。

Fedora經常扮演實驗先鋒的角色，率先將新技術加入Linux套件讓更多人嘗試，而加入的新技術也會隨著不斷的改進而逐漸穩定、成熟；例如PulseAudio在Fedora已經有相當傑出的表現。此外，Fedora也加入了許多值得注意的新功能，包括利用LinuxTV V4L-DVB和Linux UVC讓Fedora擁有更好的webcam支援。

連線共享是Fedora 10特有的新功能，這能讓電腦同時兼具Wi-Fi AP/路由器，將頻寬分享給其他電腦。而能簡化軟體安裝的PackageKit功能，也獲得相當的改進，不僅能簡化軟體搜尋、下載、安裝流程，甚至也能自動辨識出媒體播放程式所缺少的編碼/解碼器，而且找出並自動安裝適當的編碼/解碼器（雖然目前有時候還會有點小狀況，但Red Hat承諾會再改善）。另一項特點是從USB隨身碟安裝、執行Fedora，這等於能將個人的桌面和工作資料帶著到處跑；而且Fedora 10還能加密家目錄，以免隨身碟遺失而致資料外洩。

由於實驗本質使然，Fedora經常內建較為先鋒、前進的功能，但這類的功能往往會讓Fedora不適合用在關鍵、重要的工作。但是對Linux專家，或如果想在第一時間搶先瞭解尖端技術，Fedora就是最佳選擇。

總結這3套Linux套件：Ubuntu是初學者最佳選擇，OpenSUSE提供很好的商用功能--尤其適合橫跨Windows和Linux環境的人，Fedora則較為適合Linux專家。但不論所選為何，目前這些多元多樣的套件不只展現出 Linux桌面的成熟，也證明人人都有適合的Linux套件。

http://distrowatch.com

Spring簡介

2009-12-09T22:17:00.012+08:00

Spring最初是Rod Johnson在2002年由其著作Expert One-on-One: J2EE Design and Development中提出的，另外一本書Expert One-on-One J2EE Development without EJB更進一步闡述了在不使用EJB（Enterprise JavaBean）開發J2EE企業級應用的一些設計思想和具體的作法（題外話：EJB是sun的伺服器端元件Model，最大的用處是部署分散式應用程式，類似微軟的.com技術。Sun在2006年5月2日發布了JSR 220定義，也就是EJB3.0，企圖減輕EJB以往開發過於複雜以及不必要的負擔。參見-伺服器端元件Model－EJB3.0(Enterprise JavaBean 3.0)論述）。

Spring在2004年初發佈1.0版本，到2006年10月3日發佈了2.0版本，基本上維持著每半年就會有一次大的更新，可到http://www.springsource.org/下載最新版本的Spring。

Spring是一個應用於J2EE領域的輕量應用程式框架，其核心是一個IoC（Inversion of Control）以及AOP（Aspect-oriented programming）。在核心上面的一個主要部份是資料存取DAO框架，包括一個自己的JDBC資料存取封裝以及對眾多ORM框架的工具集支持。Spring內置了一個功能強大、靈活的Web MVC框架Spring MVC框架，以提供快速的Java Web應用程式開發，在程式開發中，程式開發者可以直接使用Spring框架內建的Spring MVC框架。除此之外，對於現在比較流行的各種層面上的框架（如Hibernate、JSF、Struts等），Spring也提供了與它們相互整合的方案。

Spring框架系統架構如圖，從圖中看出Spring提供了很多J2EE應用的基礎設施及解決方案，便於開發J2EE應用。

其中Core是框架的最基礎部分，提供IoC（Inversion of Control，控制反轉）和DI（Dependency Injection，依賴注入）特性。所謂的控制反轉是指控制權由程式改到Spring Container（容器），控制權的移轉，是所謂的反轉；或可說是依賴注入，將原先程式間的耦合降到最低，改由Spring容器注入程式間的關連。使用IoC通常會使得程式碼非常清晰，更為重要的是，IoC可以使得程式碼之間、類別與類別之間有很好的解耦性。DI有三種形式：Setter-based、Constructor-based、Getter-based，Spring推薦使用第一種方式，Setter-based類似典型的JavaBean，帶有一個無參數的構造函數和setter方法。

BeanFactor代表了Spring的心臟，可以配置和管理幾乎所有的Java類別，在存取和操作IoC的初期充當了IoC容器的作用。然而在大多數的情況之下，不會直接使用BeanFactor而是使用ApplicationContext，因為ApplicationContext具有更多的企業級特性如多國語言支援、資源存取、事件傳播和多實例載入等等。

Bean在Spring容器中大致要經歷以下四個階段：Bean定義、初始化、準備狀態以及銷毀。

Spring的AOP是OOP（物件導向程式設計）的延續，提供了符合AOP Alliance規範的層面導向程式設計（Aspect-Oriented Programming）的具體實現，讓使用者可以定義，像方法攔截器（method-interceptors）和切入點（PointCuts），從軟體設計上看，通過這樣的方式可以降低耦合性（coupling），提高內聚性（cohesion），從而在軟體結構上得到改善。

DAO模式是一種資料存取物件模式，它通過抽象方法來提供資料存取的介面，這樣便消除了冗長乏味的JDBC編碼，並且通過這樣的封裝方式更容易為程式設計提供介面，而且對所有的POJO適用。

ORM封裝提供了物件關係對應的API介面，使用ORM工具集的產品除了提到過的Hibernate，還包括了如JDO等產品。
<未完待補充更新>

參訓學員專題製作觀摩競賽 - 光榮的傳說

2009-12-05T14:55:00.010+08:00

↑光榮的傳說

今年專題製作觀摩競賽
入圍的每一個隊伍絕對都是強勁對手
尤其將「程式設計班」和「網際網路資料庫設計班」分在「程式設計類」一起比
另外還特別加入「遊戲軟體程式設計班」
所以能夠得到冠軍...
特別感到意外和驚喜！
也慶幸能夠為文化大學再續光榮的傳說！

在參加競賽之前
就已經聽說活動會場全館雖然有提供無線網路
但因網路品質不佳
所以主辦單位建議作品展示時儘量不要連結上網
以免影響簡報成果
可是我們專題首頁的一部份就是Google MAP
根本無法不能連上網路
所以我就特別製作了五個單元的錄影檔

幸運的是評審委員來到我們攤位展示作品時，網路都很順暢；
簡報時，利用錄影檔也很順利地完成評審委員的提問和展示。
另外在簡報時評審委員對於我們的文件製作之完整
以及認真學習的態度特別讚許！
尤其是文獻調查、系統測試、部署和上線文件更是其他隊伍少有的
或許這是我們脫穎而出的關鍵吧！

最後要謝謝每個夥伴們盡心盡力地完成我們當初設定的目標
也要感謝老師的指導
才能創造光榮的傳說！

----- 學長、學姊們的分享 -----
2007 場地王
2008 KA DA CHA新風潮 - 車由自組

Struts簡介

2009-11-25T23:07:00.011+08:00

Struts框架最早是作為Apache Jakarta專案的組成部分問世運作，專案的創立者希望通過對該專案的研究，改進和提高JAVA Server Pages、Servlet、標籤庫(tag library)以及物件導向的技術水準，它的目的是為了減少在運用MVC設計模型來開發Web應用的時間。

建立基於Struts框架的web應用程式最快捷的方式就是利用Struts框架發佈包中包含的struts-blank.war文件。該檔不僅定義了struts web應用程式的標準的目錄結構而且還包含了開發struts web應用程式所必需的包。

如果使用Eclipse IDE作為開發工具，並部署在應用伺服器Tomcat 5.0中執行，然後再import struts-blank.war進來。由於struts框架本身就是基於servlet，因此需要將tomcat目錄下common\lib中的servlet-api.jar拷到strutsSample\WebContent\WEB-INF\lib中。

在探討Struts MVC運作架構之前我們先來看看基本的MVC運作模式，如圖所示：

所有進入到系統中的Request都會導給一個Controller程式，由Controller來判斷目前這個Request必須交由哪一個程式處理(那一個Request必須交由哪一個程式處理可能是設定在另外一個地方)，接著便會呼叫執行該處理程式，並將收到的Request當作參數傳給該程式。在處理過程中需要進行商業邏輯處理的部分就會呼叫執行Model中的程式，Model處理完之後再將結果回傳給Controller，Controller再將結果傳給指定的View來進行畫面呈現。在這個架構中Controller是所有Request的唯一進入點，Model的部分只負責處理系統中的商業邏輯，畫面呈現則全部都由View來負責。

Struts的運作模式是採用MVC的架構，整個運作方式大致如圖所示。當Request進入到Struts時會導給一個ActionServlet來處理，這個程式會根據設定檔struts-config.xml中的設定呼叫執行我們所撰寫的Action處理程式，並將Request當作參數傳給這個Action處理。Action在處理過程中會呼叫一些商業邏輯物件(Business Objectc)中的程式存取後端的資料庫；當Action處理完之後會將結果回傳給ActionServlet，最後ActionServlet再將這個結果可以在struts-config.xml中設定一些JavaBean(ActionForm)來接收Request中的資料，此時Struts便會幫我們將資料塞到JavaBean中，讓我們可以在Action中直接取用，讓我們可以在Action中直接取用，在使用上會比較方便。

我們在使用Struts開發系統時，必須撰寫流程控制程式(Action)、商業邏輯處理程式(Business Object)、畫面呈現程式(JSP)並在設定檔(struts-config.xml)中設定這幾個元件之間的運作關係。當然，如果在流程控制與商業邏輯處理程式之間有使用到一些物件來當作資料傳遞的參數(DTO，Data Transfer Object)，那麼這些傳遞資料的物件也必須由我們自行撰寫。

觸發程序

2009-10-30T20:24:00.005+08:00

在SQL Server中，我們可以使用二種方法來設定自動化的資料處理規則：

1.條件約束(Constraint)可以直接設定於資料表內，通常不需另外撰寫程式。但此方法只能進行比較單純的運作，包括自動填入預設值(DEFAULT)，確保欄位資料不得重複(PRIMARY KEY/UNIQUE KEY)、限制輸入值在某個範圍內(CHECK)、維護資料表間的參考完整性(FOREIGN KEY)...等。

2.觸發程序(Trigger)是針對單一資料表所撰寫的特殊預存程序，當該資料表發生INSERT、UPDATE或DELETE時會自動被觸發(執行)，以進行各項必要的處理工作。由於是撰寫程式，因此無論是單純或複雜的工作都可一手包辦。

當然，如果只是單純的自動化工作，我們應儘量利用條件約束來完成，因為這樣做一方面容易設定及維護，另一方面執行效率也會比較好。只有當條件約束無法滿足實際需求時，才應考慮使用觸發程序來處理。

那麼，觸發程序到底有什麼特異功能呢？底下來看幾個例子：

檢查所做的更改是否允許：
雖然我們可以用資料表的條件約束來維護資料完整性，例如CHECK、PRIMARY KEY/UNIQUE KEY、FOREIGN KEY等，但觸發程序可以做更多樣、更複雜的檢查。例如同時檢查許多個資料表，或使用IF...ELSE等來做更有彈性的檢查。

‧進行其他相關資料的更改動作：
例如當某筆訂單被取消時，我們可以利用觸發程序去自動刪除相關的送貨單資料，並將業務員的獎金扣一半；或是在更改員工的薪資時，將更改的日期及原薪資存入另一個薪資異動資料表中。

‧發出更改或預警的通知：
例如當有新進員工的資料被輸入時，觸發程序可以自動發Mail通知該部門的所有人員；或是當庫存量小於安全量時，即發Mail通知倉庫管理員要趕快進貨。

‧自訂錯誤訊息：
當操作不符合條件約束時，所回應給前端應用程式的錯誤訊息都是固定的內容。利用觸發程序，則可以回應我們自訂的錯誤訊息。

‧更改原來所要進行的資料操作：
利用SQL Server 2005的INSTEAD OF觸發程序，我們可以撰寫程式來取代原本應該進行的資料操作。例如當新增一筆記錄時，我們可以將該記錄的資料另做處理，而不存入資料表中。

‧檢視表也可以有觸發程序：
檢視表中的計算欄位通常是不允許更改的，但同樣是利用INSTEAD OF觸發程序，我們可以打破這個限制，將預備要更改的資料欄截出來另外處理。例如可將使用者輸入的地址先分解成縣市與街道二部份，再分別存入縣市與街道欄位。

其實觸發程序就像是倉庫的管理員一樣，當有貨物要進出時，管理員即會出面做查核或協調，以維護整個倉庫的正常運作。因此，如果您是資料庫的管理者(DBA，DataBase Administrator)，那麼就應該好好利用觸發程序的功能，為每個重要的資料表都設計一個最佳的倉庫管理員，這樣就不用擔心使用者胡作非為，或是不按照牌理出牌了。

觸發程序的種類與觸發時機

觸發程序可分為2種：
‧AFTER觸發程序：這類的觸發程序要在資料已變動完成之後(AFTER)，才會被啟動並進行必要的善後處理或檢查。若發現有錯誤，則可用ROLLBACK TRANSATION敘述將此次操作所更動的資料全部回復。

‧INSTEAD OF觸發程序：INSTEAD OF是"取代"的意思，就是這類觸發程序會取代原本要進行的操作(例如新增或更改資料的動作)，因此會在資料變動之前就發生，而且資料要如何變動也完全取決於觸發程序。

INSTEAD OF觸發程序能夠適用於資料表及檢視表(View)上；而AFTER觸發程序則只能使用於資料表。

另外，當我們在建立觸發程序時，還必須指定程序要被觸發的操作時機：INSERT、UPDATE或DELETE，至少要指定一種，當然一個觸發程序也可同時指定二種或三種時機。在同一個資料表中，我們可以建立許多的AFTER觸發程序，但INSTEAD OF觸發程序針對每種操作(INSERT、UPDATE、DELETE)最多只能各有一個。

如果針對某操作同時設定了INSTEAD OF及AFTER觸發程序，那麼只有前者會被觸發，後者未必會被觸發。

觸發程序的建立與修改
用SQL建立觸發程序的簡易語法如下：


CREATE TRIGGER trigger_name
ON {table | view}
[WITH ENCRYPTION]
{FOR | AFTER | INSTEAD OF} { [DELETE] [,] [INSERT] [,] [UPDATE]}
AS
sql_statements

自訂函數

2009-10-29T20:00:00.003+08:00

當我們在撰寫SQL程式時，多少都會用到一些系統內建的函數，例如GETDATE()、CAST(...)等。而SQL Server 2005的「使用者自訂函數」功能，則讓我們也可以自己來建立函數，然後直接應用於SQL敘述或運算式中。

自訂函數其實和預存程序是很類似的，都是由多行T-SQL敘述所組成的程式單元。不過它們之間還是有一些明顯的差異：

1.預存程序只能傳回一個整數值；而自訂函數則可傳回各種資料型別的值(但text、ntext、image、timestamp、cursor及rowversion除外)，甚至包括了sql_variant及table型別。

2.預存程序可以經由參數來傳資料(將參數設為OUTPUT)；但自訂函數則只能接收參數，不可由參數傳回資料。

3.在預存程序中可以做任何的資料異動，例如新增或修改資料、更改資料庫的設定...等；但自訂函數則不允許更改資料庫的狀態或內容。

4.預存程序必須以EXECUTE來執行，因此不能使用在運算式之中，例如myProc會傳回2，那麼「SET @var=myProc」或「SELECT * FROM myProc」都會造成錯誤。而自訂函數則除了可用EXECUTE來執行外，也可用於運算式中，並以傳回值來取代其名稱，例如假設myFun(3)會傳回"Good"，則「SET @var=myFun(3)+'!'」就相當於「SET @var='Good'+'!'」。

一般來說，預存程序比較適合做一些對資料庫的操作或設定，其執行結果通常不必傳回，或將結果傳回到執行該程序的應用程式中(例如將SELECT敘述的結果傳回到SQL查詢或前端應用程式中)；而自訂函數則適用於計算或擷取資料，然後將結果傳回給呼叫它的運算式或SQL敘述(例如SELECT或FROM子句)中使用。

自訂函數的建立

您可以在SQL Server Management Studio中建立自訂函數，其操作方法也和預存程序差不多，只是SQL語法有所不同而已：

自訂函數依傳回值及函數內容可分為兩大類：

1.純量值函數(Scalar-valued function)：這類函數會傳回單一的資料值，而資料值的型別可以是除了text、ntext、image、cursor及rowversion(timestamp)之外的任何型別。若是傳回table型別的資料，則歸屬於下列二類函數。

2.傳回資料集(Rowset)的自訂函數：這類函數可傳回一個table型別的資料集，依其定義語法的不同，又分為2小類：

‧嵌入資料表值函數(Inline table-valued function)：或稱為「行內資料集函數」。函數的內容僅有一個SELECT敘述，而傳回值即是該SELECT的查詢結果。

‧多重陳述式資料表值函數(Multistatement table-valued function)：或稱為「多敘述資料集函數」。函數內容包含許多的敘述，而最後也會傳回一個table型別的資料集。

設計預存程序的技巧

2009-10-28T21:49:00.005+08:00

在預存程序中使用敘述時，需注意以下的限制：

1.在預存程序中，有些敘述不可使用，包括：

而除了上表以外的其他敘述則可以使用，甚至我們可以在預存程序中建立物件(例如CREATE TABLE)並進行存取；也就是說，在編譯預存程序時，其內所參照到的物件可以不存在，只要在該敘述實際執行時，所參照的物件已經存在即可。

2.在同一個資料庫中，只要使用不同的結構描述，便可以建立相同名稱的物件。因此不管執行者是誰，只要預存程序中未指明物件的結構描述，都會先找以預存程序所屬的結構描述來尋找物件，找不到的話再換用"dbo.物件"，若都找不到則產生錯誤訊息。

3.有些指令在執行時若未指定結構描述，會固定以目前使用者的預存結構描述來尋找或建立物件，這些指令包括：

因此在預存程序中使用這些敘述時，最好要同時指明結構描述，以免其他使用者在執行時發生預期之外的結果。

參數傳遞的技巧

當我們執行預存程序時，若未指明參數名稱，則必須依照預存程序所需的參數依序傳過去；而且除非該參數有指定預存程序並且是在最後面，否則不可以省略。

預存程序的3種傳回值
1.在程序中以"RETURN n"傳回整數值。
2.在參數中指定OUTPUT選項的參數。
3.預存程序中執行敘述(例如SELECT)所傳回的資料集(RecordSet)及通知訊息。

預存程序

2009-10-27T19:11:00.004+08:00

「預存程序」(Stored Procedure)就是將常用的或很複雜的工作，預先以SQL程式寫好，然後指定一個程序名稱儲存起來，那麼以後只要使用EXECUTE敘述來執行這個程序，即可自動完成該項工作。

預存程序的優點

預存程序中可以包含資料存取敘述、流程控制敘述、錯誤處理敘述...等在使用上非常有彈性。其優點有：

執行效率高：SQL Server會預先將預存程序編譯成一個執行計劃並儲存起來，因此每次執行預存程序時都不需要再重新編譯，如此可以加快執行速度。由此可知，我們應該將經常使用的一些操作寫成預存程序，來提高SQL Server的運作效率。

統一的操作流程：我們可以將複雜的工作製做成預存程序，如此除了節省人力操作的時間外，對於一般使用者來說，也可以維持一致的資料操作流程，並避免使用者不小心的操作錯誤。例如當某項資料變更時，必須更動到5個資料表的內容，那麼將更新步驟寫成預存程序來執行，不但省事，而且也不怕漏掉任何一個資料表。

重複使用：預存程序還可模組化(將大的程序分解成許多較小而且可以獨立運作的程序)，以方便除錯、維護、或重複使用於不同的地方。例如當我們要將「地址」資料分解成「市、街、號、樓」4個字串時，可寫一個預存程序來處理，那麼以後在任何地方只要執行此預存程序，即可完成分解地址的工作。

安全性：當資料表需要保密時，我們可以利用預存程序來作為資料存取的管道。例如當使用者沒有某資料表的存取權限時，我們可以設計一個預存程序供其執行，以存取該資料表中的某些資料，或進行特定的資料處理工作。此外，預存程序的內容還可以加密編碼，這樣別人就看不到預存程序中的程式了。

預存程序的種類

預存程序可分為3類：

系統預存程序(System stored procedures)
系統預存程序一律以sp_開頭，例如"sp_dboption"。此類預存程序為SQL Server內建的預存程序，通常是用來進行系統的各項設定、取得資訊或相關管理工作。

延伸預存程序(Extended stored procedures)
延伸預存程序通常是以xp_開頭，例如"xp_logininfo"。此類程序大多是以傳統的程式語言(例如C++)撰寫而成，其內容並不是儲存在SQL Server中，而是以DLL的形式單獨存在。

我們可以把延伸預存程序看成是SQL Server的外掛程式，它可以擴充SQL Server的功能，例如SQL Server沒有從網頁中萃取資料的能力，則我們可以撰寫一個DLL的延伸預存程序，以供SQL Server將之載入並執行。

使用者自訂的預存程序(User-defined stored procedures)
就是我們自己設計的預存程序，其名稱可以任意取，但最好不要以sp_或xp_開頭，以免造成混淆。自訂的預存程序會被加入所屬資料庫的預存程序項目中，並以物件的形式儲存。

用SQL語言建立預存程序
建立預存程序是使用CREATE PROCEDURE敘述，其語法如下：


CREATE PROC[EDURE] procedure_name [;number]
  [@parameter data_type [VARYING] [= default] [OUTPUT]]
  [,...n]
  [WITH {RECOMPILE | ENCRYPTION | RECOMPILE, ENCRYPTION }]
  [FOR REPLICATION]
AS sql_statement [...n]

T-SQL程式設計

2009-10-26T21:55:00.004+08:00

在存取資料庫時，我們所下的SQL敘述不一定要一個一個地執行，也可以利用批次(Batch)的方式，將一個或多個SQL敘述打包，一起送到SQL Server去處理。SQL Server會將一個批次中所包含的數個SQL敘述當做一個執行單元(Unit)，一起編譯成為執行計畫(Execution plan)，然後再加以執行。

不過請注意，並非所有SQL敘述皆可放在同一個批次內執行，例如CREATE VIEW、CREATE DEFAULT、CREATE RULE、CREATE PROCESURE及CREATE TRIGGER敘述只能單獨放在一個批次中執行，不能與其他敘述合併執行。

用GO分隔不同的批次

因為不是所有SQL敘述都可以放再同一個批次，或是有些情況下，您可以會希望讓某些敘述分開執行。假設您有三個敘述需要執行，如果三個敘述全部放再同一批次，則當第1個敘述失敗時，批次就會停止，而不會繼續執行第2、3個敘述，若是能夠將第1與第2、3個敘述隔開，就可以確保後面敘述可以順利執行。

所以SQL Server提供了一個GO指令，讓您可以隔開SQL敘述，將之分為多個批次。下面是一個簡單的範例：


USE 練習02   <-------第1個批次
GO           
SELECT *     -----
FROM 客戶        |
SELECT *         |---第2個批次
FROM 訂單    ----|
GO

當SQL Server遇到GO指令時，會將GO當作傳送批次的訊號，例如遇到第1個GO的時候，會將GO前面的敘述傳送給伺服器進行處理(編譯成執行計劃並加以執行)。而遇到第2個GO指令時，再將兩個SELECT敘述傳送給伺服器處理，如此就產生兩個批次。

請注意，GO只有SQL Server Management Studio提供的工具程式才能辦識並處理。意即GO指令只能使用在SQL Server Management Studio中執行，若是您撰寫應用程式(例如用Visual Basic撰寫)時使用GO指令，那麼SQL Server將會因不認得而產生錯誤訊息。

ASP.NET網頁程式碼模式

2009-10-25T09:18:00.004+08:00

在ASP.NET中，網頁是由「視覺」與「程式邏輯」兩個部分所組成的，視覺就是指圖片、靜態文字、HTML標籤...等掌控網頁外觀的部分，而程式邏輯就是Visual Basic或是其他程式語言的程式碼，用來控制網頁的邏輯運作。

這兩個部分可以依照您的需求，合在一起放在同一個檔案內，稱為「單一檔案模式」，也可以分開放置在不同檔案，稱為「程式碼後置模式」(Code-Behind)；

雖然程式碼後置模式將程式分開成為兩個檔案，但是ASP.NET載入該程式時，仍然會自動將兩個檔案合併執行。

兩種模式的比較

一般來說，單一檔案模式的優點如下：
1.如果程式碼不多，放置於單一檔案內，對於學習、撰寫與維護較為方便。
2.因為只有一個檔案，所以容易部署至伺服器，傳送給其他人的時候也較為方便。
3.只有單一檔案，所以需要更改名稱時直接更改即可。若是程式碼後置模式，更改aspx.cs檔案的名稱之後，還必須開啟aspx檔案修改CodeFile屬性，所以比較麻煩。

而下面則是程式碼後置模式的優點：
1.將視覺與程式邏輯分開之後，美工與程式設計人員便能獨立作業，可以各自修改檔案，不會互相影響。
2.因為程式羅輯分開為另一個檔案，所以可以方便地讓多個網頁共用同一個程式邏輯檔案。

兩種模式各有其優缺點，您可以依照環境與需求，選擇合適的模式來設計。

開發ASP.NET網頁應用程式

2009-10-23T20:18:00.003+08:00

Visual Studio 2008是微軟公司為.NET程式設計者所提供的IDE軟體，其支援多種程式語言，而且具備統一的開發介面，不論開發桌面應用程式、ASP.NET網頁程式。XML Web Service或是行動裝置應用程式，都可以在相同的環境與介面下完成。

依照功能的不同，Visual Studio 2008分成許多版本，其中Visual Web Developer(簡稱VWD)便是特別為了開發ASP.NET網站所推出。

在VWD內可以使用C#與Visual Basic設計ASP.NET網頁，而且還隨附SQL Server Express資料庫伺服器，可以開發較為複雜、以資料庫為資料後端的網站。

網站種類

在VWD中開發ASP.NET網頁，必須先建立網站專案，一個專案便代表一個網站。VWD支援的網站類型可分為以下幾種：

HTTP、FTP：這2種網站都是指實際運作中的Web伺服器(通常都是IIS伺服器)，在開發網頁的過程中，VWD會透過HTTP或FTP通訊協定存取伺服器上的網頁檔案，載入到VWD的工作環境中供我們進行開發，修改的結果也都會直接存回伺服器上。

檔案系統：顧名思義，這是將我們開發的網頁直接存於本機的資料夾中，不過VWD有一項特別的「虛擬網站」功能，可在電腦上啟動模擬的Web伺服器，以供ASP.NET網頁。此功能讓我們可在開發過程中，不必架設實際的Web伺服器，也可測試ASP.NET網頁在伺服器上執行的效果。由瀏覽器經由虛擬網站來瀏覽開發中的ASP.NET網頁時，即是模擬使用者實際經由網路存取網站伺服器網頁的情形。

剛建好的新網站，其中即會含有1個資料夾及3個檔案(展開右邊方案總管窗格中的加號，可看到另一個檔案)。這些資料夾和檔案雖暫時用不到，但還是先來認識一下：

App_Data：這個資料夾是用來存放ASP.NET所要用到的資料檔，可以是SQL Server的資料庫檔或XML檔案。

Default.aspx：aspx是預設的ASP.NET網頁副檔名；Default則是預設的首頁名稱。當我們在VWD中建立新的ASP.NET網頁時，預設也都是以Default為主檔名，並會依序加上數字編號，不過我們可自行設定新的檔案名稱。

Default.aspx.cs：按Default.aspx前的加號按鈕時才會看到，此為Default.aspx網頁的ASP.NET程式碼所在的檔案，副檔名為cs表示其為C#程式。此種將程式碼與網頁內容分開的方法，稱為程式碼後置(Code-Behined)。

web.config：這是ASP.NET的網站設定檔，當我們希望ASP.NET的行為與預設不同時，即需在web.config寫入新的設定值。

.NET 透過 SqlConnection 連接 SQL Server 的連線字串

2009-10-22T13:12:00.003+08:00

無論使用C#或是VB.NET，當你要透過ADO.NET連接SQL Server資料庫的時候，必須指定連接字串，因此我們來看一下相關連線字串的彙總。

最簡單的連線字串，是以信任連線的方式連接 SQL Server 資料庫，字串如下：

Server=ServerAddress;Database=DataBaseName;Trusted_Connection=True;

ServerAddress是資料庫伺服器的名稱，DataBaseName則是所要連接的資料庫名稱，Trusted_Connection設為True，表示直接透過信任連線連接，因此不需要指定帳號密碼資料。

底下是非信任連線的狀況，其中的Trusted_Connection設定為flase，因此必須再指定ID與Password兩個屬性值給他，這兩個值分別代表開啟資料庫所需的帳號與密碼：

Server=ServerAddress;Database=DataBaseName;User ID=Username;Password=Password;Trusted_Connection=False;

除了上述的語法，你也可以利用以下的替代語法：

Data Source=ServerAddress;Initial Catalog=DataBaseName;Integrated Security=SSPI;
Data Source=ServerAddress;Initial Catalog=DataBaseName;User Id=myUsername;Password=myPassword;

「Integrated Security=SSPI」的意義與「Trusted_Connection=True」的相同，其他的幾個項目則對應至相同的屬性。

另外，你也可以透過指定 IP Address 的方式，連接逺端資料庫，字串如下，要特別注意的是，其中的Data Source除了IP位址，最後一個數字「1433」，是SQL Server的預設連接埠：

Data Source=192.168.100.100,1433;Network Library=DBMSSOCN;
Initial Catalog=DataBaseName;User ID=Username;Password=PasswordName;

如果你使用的是SQL Server Express版本，則連線字串是相同的，差別只在於Server名稱必須加上一個SQLEXPRESS ，如下式：

Server=ServerAddress\SQLEXPRESS ;Database=DataBaseName;Trusted_Connection=True;

char、nchar、varchar、nvarchar，對比那個好（轉貼）

2009-10-21T14:37:00.003+08:00

資料庫定義到char類型的欄位時，不知道大家是否會猶豫一下，到底選char、nchar、varchar、nvarchar、text、ntext中哪一種呢？結果很可能是兩種，一種是節儉人士的選擇：最好是用定長的，感覺比變長能省些空間，而且處理起來會快些，無法定長只好選用定長，並且將長度設置盡可能地小；另一種是則是覺得無所謂，儘量用可變類型的，長度儘量放大些。

鑒於現在硬體像蘿蔔一樣便宜的大好形勢，糾纏這樣的小問題實在是沒多大意義，不過如果不弄清它，總覺得對不起勞累過度的CPU和硬碟。

下面開始了(以下說明只針對SqlServer有效)：

1、當使用非unicode時慎用以下這種查詢：
select f from t where f = N'xx'

原因：無法利用到索引，因為資料庫會將f先轉換到unicode再和N'xx'比較

2、char 和相同長度的varchar處理速度差不多（後面還有說明）

3、varchar的長度不會影響處理速度！！！（看後面解釋）

4、索引中列總長度最多支援總為900位元組，所以長度大於900的varchar、char和大於450的nvarchar,nchar將無法創建索引。

5、text、ntext上是無法創建索引的。

6、O/R Mapping中對應實體的屬性類型一般是以string居多，用char[]的非常少，所以如果按mapping的合理性來說，可變長度的類型更加吻合。

7、一般基礎資料表中的name在實際查詢中基本上全部是使用like '%xx%'這種方式，而這種方式是無法利用索引的，所以如果對於此種欄位，索引建了也白建。

8、其他一些像remark的欄位則是根本不需要查詢的，所以不需要索引。

9、varchar的存放和string是一樣原理的，即length {block}這種方式，所以varchar的長度和它實際佔用空間是無關的。

10、對於固定長度的欄位，是需要額外空間來存放NULL標識的，所以如果一個char欄位中出現非常多的NULL，那麼很不幸，你的佔用空間比沒有NULL的大（但這個大並不是大太多，因為NULL標識是用bit存放的，可是如果你一行中只有你一個NULL需要標識，那麼你就白白浪費1byte空間了，罪過罪過！），這時候，你可以使用特殊標識來存放，如：'NV'。

11、同上，所以對於這種NULL查詢，索引是無法生效的，假如你使用了NULL標識替代的話，那麼恭喜你，你可以利用到索引了。

12、char和varchar的比較成本是一樣的，現在關鍵就看它們的索引查找的成本了，因為查找策略都一樣，因此應該比較誰佔用空間小。在存放相同數量的字元情況下，如果數量小，那麼char佔用長度是小於varchar的，但如果數量稍大，則varchar完全可能小於char，而且要看實際填充數值的充實度，比如說varchar(3)和char(3)，那麼理論上應該是char快了，但如果是char(10)和varchar(10)，充實度只有30%的情況下，理論上就應該是varchar快了。因為varchar需要額外空間存放塊長度，所以只要length(1-fillfactor)大於這個存放空間（好像是2位元組)，那麼它就會比相同長度的char快了。

13、nvarchar比varchar要慢上一些，而且對於非unicode字元它會佔用雙倍的空間，那麼這麼一種類型推出來是為什麼呢？對，就是為了國際化，對於unicode類型的資料，排序規則對它們是不起作用的，而非unicode字元在處理不同語言的資料時，必須指定排序規則才能正常工作，所以n類型就這麼一點好處。

總結陳詞：
1、如果資料量非常大，又能100%確定長度且保存只是ansi字元，那麼char。
2、能確定長度又不一定是ansi字元或者，那麼用nchar；
3、不確定長度，要查詢且希望利用索引的話，用nvarchar類型吧，將它們設到400；
4、不查詢的話沒什麼好說的，用nvarchar(4000)。
5、性格豪爽的可以只用3和4，偶爾用用1，畢竟這是一種額外說明，等於告訴別人說，我一定需要長度為X位元的數據。

.NET Framework類別函式庫的基礎

2009-10-20T22:23:00.005+08:00

「.NET Framework類別函式庫」(.NET Framework Class Library)提供很多功能強大的類別，我們可以直接在C#程式使用這個類別函式庫來輕鬆擴充程式的功能。

.NET Framework類別函式庫是一個龐大且良好組織架構的函式庫，各種.NET Framework支援的程式語言都可以使用相同的.NET Framework類別函式庫，例如C#或Visual Basic 2005程式語言。

.NET Framework類別函式庫的類別架構是使用稱為「名稱空間」(Namespaces，也稱為命名空間)的階層類別架構，每一個名稱空間能夠擁有多個類別，如下圖所示：

上述圖例的System是最基礎的名稱空間，其下擁有基本資料型態的System.Int32(每一階層的名稱空間是使用「.」運算子連接)、System.Byte、System.Single和System.String等名稱空間。這些名稱空間的類別是對應C#語言的內建資料型態。換句話說，C#資料型態都擁有對應的.NET Framework類別物件。

System.Windows.Forms是表單控制項的父名稱空間，其下的名稱空間就是各種控制項的類別：System.IO是基本輸出與輸入和檔案處理的名稱空間。

關於Windows Form及Web Form

2009-10-16T22:14:00.003+08:00

由於微軟希望將.NET做為未來開發所有不同類型專案的平台，也就是專案應用的底層。

在此一底層中，設計人員應常會看到Windows Form及Web Form等兩個名詞。這兩個名詞分別表示開發在Windows及Web中執行的應用程式，由於執行環境不同，故.NET為這兩種環境的介面，區分為Windows Form及Web Form。若以內容而言，Windows Form及Web Form提供的內容就是各種控制項。

換言之，Web Form就是以ASP.NET開發的網頁，在網頁內就只能使用各種Web Form提供的功能，也就是控制項。

若使用Visual Studio.NET，會在分別使用Windows應用程式及Web應用程式等不同專案時，自動顯示可使用的控制項。

所以若要在SDK輔助說明中尋找有關控制項的說明，請先了解型態，如.aspx網頁必須使用Web Form提供的控制項。

關於.NET

2009-10-15T20:49:00.004+08:00

什麼是.NET？一言以敝之，就是「可提供多種語言，進行開發的技術平台」，至於使用的語言種類、開發的應用系統在何處執行等，微軟都希望可做到多語言及多平台。換言之，不論開發人員擅長的語言為何、應用系統完成後的執行位置為何等，都可使用.NET進行開發，這就是.NET的目的。

.NET如何做到此點，首先由其內容觀之，共包括如下四個組成：

Common Language Runtime(CLR)：元件的開發過程中，它扮演著如同runtime的角色，執行測試。當元件在執行時，runtime負責管理記憶體的分配，啟動以及結束執行緒與程序，強制執行安全原則，並滿足所有元件與其他元件間可能具有的相依性。

.NET Framework Class Library：其內容是所有可重複使用的類別庫(或程式庫)，並可與CLR緊密結合。它包含了數個命名空間(Namespace)，而各Namespace之下就是可用的程式庫。

ADO.NET：就是名為System.Data的Namespace，其內就是ADO.NET所有物件模組的類別，目的是「在記憶體內處理資料庫」。

ASP.NET：ASP.NET是一個建構在CLR上，可供撰寫程式的平台，並可在伺服器上使用，以建構強力的Web應用程式。重點是Web Forms(即.aspx檔案)，提供簡易的設計方式，可供建置動態的Web使用者介面。並提供建構分散式Web基礎應用程式所需的建構區塊，即以XML資料為傳輸標準的Web Services。

以上就是.NET的四項組成，其中CLR是.NET引擎的作業，與設計人員及使用者較無直接關係，後三者皆會在設計時，依不同目的而予以引用。

物件基礎程式設計

2009-10-13T19:07:00.004+08:00

C#語言是一種物件導向程式語言，其精神是物件，但支援物件的程式語言並不一定就是一種物件導向程式語言，它可能只是物件基礎程式語言(Object-based Languages)，只提供資料抽象化和物件觀念。例如：Visual Basic 6.0。

物件的基本觀念

物件可以視為提供特定功能的元件或黑盒子，我們不用考慮元件內部詳細的資料或程式碼，只需知道物件提供哪些方法和屬性，以及如何使用它，一樣可以使用物件來建立所需的應用程式。

事實上，物件導向程式設計的目的就是讓設計者自行定義物件或擴充存在的物件功能，簡單的說，就是使用物件基礎程式設計來建立應用程式。

物件

物件(objects)是物件導向程式的基礎，簡單的說，物件是資料(Data)和包含處理此資料程式碼(稱為方法Method)的綜合體。

「類別」(Class)是定義物件內容的模子，透過模子可以建立屬於同一個類別的多個物件，例如：Label控制項是一個類別，當我們在表單上新增多個標籤控制項後，就是使用類別建立名為label1和label2等多個物件。

當程式碼使用類別建立物件後，我們並不用考慮物件內部的處理方式，只需知道它提供的屬性和方法與如何使用它，就可以使用這些物件來建立程式。

事實上，Windows應用程式的組成元件都是物件，在表單中的控制項，例如：文字方塊、清單方塊、標籤和按鈕等都是一個個物件。

屬性

物件的屬性(Properties)是物件的性質和狀態，例如：文字方塊控制項提供MaxLength屬性設定輸入字串的長度，標籤物件的BackColor可以指定背景色彩，如下所示：

label1.BackColor;
textBox1.MaxLength;

PS：句點「‧」是物件運算子，在程式碼中的物件是使用句點來存取物件屬性值和呼叫物件的方法。

方法

方法(Methods)是物件的處理函數，也就是執行物件提供的功能。例如：Graphics繪圖物件g提供方法可以繪出字串和畫線，如下所示：

g.DrawString();
g.DrawLine();

上述程式碼使用Graphics物件的方法。事實上，我們並不需要知道繪出字串和畫線的程式碼是什麼？只需知道物件提供的方法需要如何用，指定參數後，就可以繪出指定的圖形。

事件

事件(Events)本身是一個物件，它代表使用者按下滑鼠按鍵或鍵盤按鍵等操作後，所觸發的動作進而造成控制項狀態的改變，當這些改變發生時，就會觸發對應的事件物件。我們可以針對事件來作進一步處理。

物件可以建立事件處理程序來處理事件，這種以事件設計程式的方式，稱為「事件驅動程式設計」(Event-driven Programming)。例如：Button控制項button1觸發的Click事件，其事件處理程序如下所示：

private void button1_Click(object sender, EventArgs e)
{
... ...
}

上述事件處理程序擁有2個參數。其說明如下所示：
‧object物件：觸發事件的來源物件，也就是哪一個物件產生此事件。
‧Eventargs物件：事件物件本身，包含事件的相關資訊。

建立C#程式開發環境

2009-10-12T23:30:00.005+08:00

程式語言的「開發環境」(Development Environment)是一組工具程式用來幫助程式設計者建立、編譯和維護程式語言建立的應用程式。

目前大部分高階程式語言都擁有整合開發環境，稱為「IDE」(Integrated Development Environment)，只需再同一個應用程式就可以編輯、編譯和執行特定語言的應用程式。

微軟的Visual Studio

微軟C#語言的整合開發環境是Visual Studio，它是微軟公司開發的整合開發環境，能夠再同一套應用程式編輯、編譯、除錯和測試C#等.NET語言的應用程式。

Visual Studio 2005/2008是一套支援.NET Framework的整合開發環境，可以使用C#、Visual basic、C++和J#等語言來建立Windows、ASP.NET、主控台和Web Services等各種不同的應用程式。

Visual Studio整合開發環境

在Visual Studio 2005/2008整合開發環境建立的應用程式是在.NET Framework的CLR平台上執行，如下圖所示：

上述圖例在Windows作業系統安裝.NET Framework 2.0/3.5版後，就可以使用Visual Studio 2005/2008，以.NET語言來建立WindowsForms、ASP.NET、ADO.NET和XML應用程式。

Visual Studio 2005/2008是.NET平台的整合開發環境，提供Express版本讓初學者和學生能夠快速建立.NET應用程式。

C#語言的基礎

2009-10-08T17:13:00.007+08:00

微軟C#語言是一種支援.NET Framework平台的程式語言，它可以說是C/C++語言的進化版本，一種由微軟公司所獨立發展的物件導向程式語言。

.NET Framework的基礎

.NET Framework是微軟新世代的程式開發平台，它是由CLR(Common Language Runtime)和.NET Framework類別所組成。我們可以使用.NET Framework支援的程式語言，例如C#、Visual Basic和C++等來建立.NET應用程式。

.NET Framework程式檔案在使用.NET編譯程式編譯時，並不是直接編譯成CPU的機器語言，而是一種中間程式語言稱為「MSIL」(Microsoft Intermediate Language)。等到執行程式時，CLR使用「JIT」(Just In Time)編譯程式將MSIL轉換成機器語言來執行，其架構如下圖所示：

上述圖例不論使用C#、Visual Basic或C++語言建立的原始程式碼，在編譯成MSIL後，就可以在不同Windows作業系統安裝CLR，撰寫的程式碼就可以跨平台在不同Windows作業系統上來執行。

.NET Framework類別函式庫是一個龐大的類別函式庫，只需支援.NET Framework的程式語言，都可以使用此類別函式庫的類別和方法。

微軟的C#語言

C#語言是一種簡單的程式語言，因為它刪除Java和C++語言的複雜語法和一些常造成程式設計困擾的缺點，例如：指標、含括(Include)、巨集、範本(Templates)、多重繼承和虛擬繼承等，再加上大部分語法都源於C和C++語言，也和Java語言十分相似。

C#語言也是一種非常現代化的程式語言，因為C#語言支援現代程式語言所擁有的例外處理(Exception Handling)、垃圾收集(Garbage Collection)、擴充資料型態和程式碼安全。而且C#語言是一種真正的物件導向程式語言，完全支援對策、繼承和多型的物件導向程式語言特性。

Facebook應用程式

2009-10-08T00:28:00.006+08:00

Facebook成長如此迅速，很大的原因在於它提供了源源不絕的應用程式與小遊戲，讓人身不由己地黏在上面無法自拔。對開發者來說，Facebook也提供了十分親和的開發環境，能夠快速上手。只要具備基本程式能力，照著後面所介紹的步驟就能建立第一個Facebook應用程式!

事前準備
1.PHP開發環境
2.應用程式的Hosting環境

Facebook API目前有三個Libraries可以用來開發Facebook應用程式：PHP、Javascript、AS3。如果開發純html的應用程式就要用Javascript跟PHP，即使是AS3開發，可能還是會遇到需要server端跟Facebook溝通的情形，所以PHP Libraries可能也少不了。

AS3的Libraries叫做ActionScript 3.0 Client Library for Facebook Platform API。

建立新的Fackbook應用程式

1.開啟Facebook的開發者網頁http://www.facebook.com/developers/，登入後點選右上角的[Set Up New Application]，建立一個新的Facebook應用程式。

2.替應用程式取一個名稱，同意使用條款後[儲存變更]。

3.成功建立新的應用程式後，您會取得一組獨一無二的API金鑰與Application Secret。找到並點選下方的example code超連結，稍後我們將使用這段程式碼為例，建立第一個應用程式。

4.複製範例程式碼並存檔為index.php。其中，特別注意下列兩行程式碼是否為自己的API金鑰與Application Secret：

$appapikey = 'YOUR APP API KEY';
$appsecret = 'YOUR APP SECRET';

5.下載並解壓縮官方的PHP client 函式庫後，將index.php放到[your_location]\facebook-platform\php目錄中，如下圖：

註：熟悉PHP語法的開發者也可以修改require_once，自行更改目錄結構。

6.將整個php資料夾deploy至您的伺服器。此時，若您在瀏覽器中直接開啟網址[your_hosting_location]/index.php，出現的竟然不是程式內容，而是導向Facebook並出現開發中的訊息，就表示您已正確地完成了上面的步驟，剩下幾個簡單設定，就可以完成我們的第一個Facebook應用程式了!

我們已經在伺服器上deploy了範例程式，接下來的步驟就是讓Facebook知道這支程式的所在位置。

編輯應用程式設定

1.在[我的應用程式] –> [編輯設定]頁面左邊欄，點選[畫布(Canvas)]。找到並輸入畫布頁面網址以及Canvas Callback URL兩欄。這裡要注意的是，畫布頁面網址欄位只能輸入小寫英文字母、'_'及'-'字元，不接受數字。Canvas Callback URL則是您程式所在位置的網址，例如：http://[yourdomain]/index.php，完成後[儲存變更]。

2.若設定正確，則出現成功訊息：

3.再次連結應用程式所在的網址，映入眼簾的是如此熟悉的畫面：

大功告成!

用力地按下[同意]後，畫面上出現了我們的第一支範例程式執行結果 ─ 列出使用者的25個朋友id。當然，Facebook應用程式的能耐可不僅止於此，更多的功能都寫在API裡，您可以在這個範例基礎上繼續補強並完成您的第一支Facebook應用程式。

雖然Facebook官方主要支援PHP版本的API，但對其他程式語言較拿手的開發者也可以到這裡尋找適合的非官方API。對Google App Engine情有獨鍾的開發者請使用支援Python的PyFacebook或其他Java APIs，經實做證明，GAE是可以拿來host Facebook應用程式的。另外提供一個實用的GAE小技巧：開發過程中，將[編輯設定]的Canvas Callback URL欄位中改為http://127.0.0.1:8080，直接連至自己的本機測試；待程式完成後再改為正確的網址即可，如此可大幅縮短開發時間喔!

內容管理系統（CMS）

2009-10-07T22:33:00.004+08:00

內容管理系統（Content Management System，簡稱CMS），組織和協助共同合作的內容的結果，是指用於管理及方便數字內容的系統。

內容管理系統的定義可以很狹窄，通常是指門戶或商業網站的發布和管理系統；定義也可以很寬泛，個人網站系統也可歸入其中。Wiki也是一種內容管理系統，Blog也算是一種內容管理系統。

現在流行的開源CMS系統有：

Dede CMS，免費、開源（非GPL，無版權）
HB cms，免費、開源
Joomla，免費、開源
Drupal，免費、開源
Xoops，免費、開源
Phpnuke，免費、開源

其中Xoops是一個功能強大的架站系統，而且是免費的軟體，再加上是目前全球最多人使用的網站系統，所以外掛模組眾多，你想的到都有，如常見的「新聞」、「常見問答集」、「檔案下載」、「投票機」等等種類繁多不勝枚舉。

另外Joomla!可以在Linux、Windows、MacOSX等各種不同的平台上執行。目前是由Open Source Matters (www.opensourcematters.org)這個開放源碼組織進行開發與支援，這個組織的成員來自全世界各地，小組成員約有150人，包含了開發者、設計者、系統管理者、文件撰寫者，以及超過9萬名（2007.3）的參與會員。

以上兩者都是使用PHP程式語言加上MySQL資料庫所開發的軟體系統。

學員分組作品發表

2009-09-30T22:09:00.006+08:00

1.GIFTS個性禮品網 - 網際網路資料庫設計班(Linux)
針對送禮需求，我們製作的專題能滿足與使用者互動的個性化禮品服務網。

2.[Your Time Map]有攤嗎? - 程式設計班
本組主題是製作一個網站，提供大家能方便的在線上地圖中發佈、搜尋及分享各個活動的功能。將活動加上分類、地理位置及活動時間的資訊、提供活動的發佈平台，並利用多種不同的搜尋方式、方便訂閱及檢索有興趣的活動。

3.雲龍數位網路服務 - 創業整合平台
雲端技術從廣義上來說，代表了一種現在的網路使用者對於網路的使用方法，主要是利用分散式系統架構因應企業巨量資料處理需求。雲端技術的主要架構概念，是藉由一個分散式的檔案系統架構、程式設計方法，以及低硬體等級的環境來達成高容錯，高延展的計算環境。企業在建置資訊基礎架構時，經常會因為企業規模改變而需要更動資訊基礎架構規模，嘗試提出一個企業運用雲端運算解決此類問題之解決方案。

4.Joise就愛洗 - 網路洗衣媒合平台 - 網際網路資料庫設計班(Linux)
Joise為Web網站平台，提供一個店家和消費者之間的媒合平台。提供消費者簡單、快速的得到充分的店家資訊；提供即時訊息通知，讓衣服送洗流程易於掌握；而店家透過本系統，除可增加曝光度，也將有助於客戶的管理，期望能在網際網路日益發達的今天，讓傳統的洗衣產業，利用網路來媒合洗衣店家和消費者，e化網路平台導入，讓洗衣店的資訊充分提供，消費者也能快速得到想要的資訊，透過本系統，讓洗衣店、消費者雙方的連繫溝通更為方便、快速讓消費者困擾者困擾的衣服送洗流程，能夠透明化，也能夠充分的掌握。

5.[KADACHA]單車適乘零件網 - 程式設計班
單車熱持續，零組件市場方興未艾，有鑒於相關資訊多為外國網站甚為不便，本組為一打造單車零組件本土化之交易網站。另外不當的騎乘姿勢固然讓使用者受傷，經深入研究，不合適的零組件更是主要的原因，因此本專案著重於量身訂製之客製化零組件，DIY資訊及科技技術之教學，希望以此為賣點，結合單車零組件市場進行開發。

6.康熙電子書文化網路 - 網路工程師班
接受康熙電子書文化集團有限公司委託以來，一組負責的同仁即兢兢業業努力進行各相關課題的研究，為了為委託者創造最佳的規畫和營造!除了研究委託公司的產業相關課題，以便和本公司的技術特質達成最佳的整合外；也針對委託者的公司體質做深度瞭解。

7.FunPet瘋寵物地圖網誌 - 網際網路資料庫設計班(Linux)
結合時下最夯的微網誌與google map功能，整合出一個可以讓飼養寵物的同好們彼此交流與分享經驗的溝通平台。

8.排行王 - 程式設計班
請想想，生活週遭是否常聽到排行資訊呢?排行資訊分散在不同網站、雜誌中，是否造成困擾呢?是否想要擁有自己的排行呢?以上問題，延伸「排行王」創意，主要功能：
‧集中排行資訊
‧減少搜尋時間
‧建立個人排行
‧結合網路工具，使用無時無刻、無所不在。

9.企業網路系統建置 - 機房架構暨資訊管理專案規劃 - 網路工程師班
專為龍捲風遊戲公司網路所設計的網路企劃案，本專案分為遊戲機房與總公司網路系統，遊戲機房架構有穩定備援機制。Cisco防火牆與路由功能、網段分離、伺服器認證與升級、經由認證後送到遊戲分流的伺服器。總公司部分，簡單的分為四個網路架構，維護與研發遊戲的功能，滿足網路上線需求，適合一般辦公需求，網管部與研發部可以透過專線，進行遊戲機房端與總公司的直接安全連線。

10.e修居久屋 - 家居修繕客製化媒合系統
以往新屋裝潢設計或舊屋改造裝修，除了少數的大型裝潢設計公司有行銷廣告讓人較易找到外，大多是找親朋好友詢問或自行由黃頁電話簿隨意查詢，如此就無法有效而廣泛的比較，找到符合自己想要的設計風格或施工方式的公司或個人來承作。

11.Show Girl媒合平台 - 程式設計班
主要是提供無經紀公司、個人或素人與廠商活動媒合配對的平台，並提供Model資料搜尋、照片展示。

12.NET科技股份有限公司 - 網路工程師班
構想是一間中型公司，因為業務拓展的需要，開設新的分公司，藉此機會規劃新的網路架構，以及採購新的網路設備，以符合網路備援、資訊安全、資源共享、未來擴充的需求。

13.鈺康網路藥局 - 網際網路資料庫設計班(Linux)
‧一個提供專業藥品資訊的專業形象網站
‧提供簡訊通知功能解決建置基本CRM功能達取得想要的經營效果
提升一般消費者對本藥局的信任並提供一個全新聯繫管道

14.美食精靈王 - 程式設計班
這是一個加入以精靈模式搜尋的美食部落格網站，其中除了一般網站熟析的功能外，讓會員分享資訊、收集資訊的功能，是我們主要的目標，希望藉此使網站的活動性增加，會員的參予度提高，而延續美食網站的生命。

Hibernate簡介

2009-09-22T00:07:00.003+08:00

Hibernate 是「物件/關係對應」（Object/Relational Mapping）的解決方案，簡寫為 ORM，簡單的說就是將 Java 中的物件與物件關係，映射至關聯式資料庫中的表格與表格之間的關係， Hibernate 提供了這個過程中自動對應轉換的方案。

2001 年未 Hibernate 第一個版本發表，2003年6月8日 Hibernate 2 發表，並於年未獲得 Jolt 2004 大獎，後被 JBOSS 收納而成為其子項目之一，2005年3月 Hibernate 3 正式發表，當中有了一些重大的改變，這份文件將以之前 Hibernate 2 時撰寫的文件為基礎，針對 Hibernate 3 作重新整理的動作，所使用的版本為 Hibernate 3.2。

在撰寫 Hibernate 程式的過程中，我們可以粗分四大步驟(1~4) 與二大檔案(5、6)，依序是 :

1. Configuration：

1.1. 透過 Configuration File (hibernate.cfg.xml) 設定與 Database 連線的方式與設定要匯入哪些 Mapping File。

1.2 (JavaEE 環境) 透過 JNDI Service 來註冊 org.hibernate.SessionFactory 成為 Global 物件。

1.3 (JavaEE 環境) 設定 AP Server 所提供的 Transaction 的功能。

1.4. 透過 org.hibernate.cfg.Configuration 的 configure() mathod 來讀取 Configuration File。

1.5 透過 org.hibernate.cfg.Configuration 的 buildSessionFactory() 來產生下一步驟要用到的 org.hibernate.SessionFactory 。

2. SessionFactory：

2.1 一個 org.hibernate.SessionFactory 只對應到一個 Database

2.2 必須在程式要使用之前就必須建立好 SessionFactory，因為需要一點時間才能建立，所以最好是在網站或程式初始化時就去建立，至少必須在程式開始接觸 Database 之前就要建立。

2.3 必須放在所有程式都可以取用到地方 ( 有 JNDI 就註冊到 JNDI 中, 如果沒有 JNDI, 且是Web Apps, 也可以註冊在 ServletContext)。

2.4 org.hibernate.SessionFactory 會 catch 執行 Hibernate 所產生的 SQL statement 和 Database 的 metadata。

2.5 org.hibernate.SessionFactory 是 thread-safe 物件，會自己處理 multi-thread。

2.6 透過 org.hibernate.SessionFactory 的 openSession() 或是 getSession() 來產生/取得下一步驟要用到的 org.hibernate.Session。

3. Session：

3.1 org.hibernate.Session 包含了 JDBC 的 Connection object。

3.2 所以可以視為 Hibernate 與 Database 之間溝通的橋樑、過程。

3.3 org.hibernate.Session 可以提供 org.hibernate.Transaction object

3.4 所以存取 Persistent Class 都需要透過 org.hibernate.Session 。

4. Transaction：

4.1 org.hibernate.Transaction 將真正在底層執行 Transaction service包裝起來，

在 J2EE 中使用 JTA 的 UserTransaction 服務多個 Database (ex: 轉帳)；或利用 J2SE 中 JDBC 的 Transaction 來服務一個 Databae。

4.2 在 Hibernate 3.x 中，存取 Persistent Class 的動作一定要包在 org.hibernate.Transaction 的可視範圍之中。

例如:Transaction transaction = session.beginTransaction();

存取 Persistent Class ...
......

transaction.commit();

5. Persistance Class：

5.1 最好是 JavaBeans 的架構。

5.2 使用 Hibernate 來處理的 Table 一定要有 primary key，且對應到 Java Class 中的欄位與 setter，為了避免誤改，所以都應該宣告為 private 屬性。primary key 是獨一無二的 id，所以在選定時最好避免與目前專案相關性太高的欄位，應儘量使用流水號。

5.3 不要使用 final。Hibernte 會自動為每個 Persistent Class 產生各自的 proxy，但 proxy 會繼承 Persistent Class，所以一旦設為 final，將會限制 proxy 所提供的功能。

5.4 要小心處理 Persistent Class 的三種狀態：
transient : 尚未跟 Persistent Context 接觸。( 與 Session 沒有關係的狀態 )
persistent : 正在跟 Persistent Context 接觸。
detached : 以前曾經跟 Persistent Context 接觸，但現在分開了。

6. Hibernate Mapping File：

6.1 每一個 Persistent Class 都會有自己的 Mapping File，以維護 Table 與 Persistent Class 的對應關係。

6.2 Mapping File 的副檔名為 .hbm.xml。

6.3 Mapping File 的存放位置必須跟所對應的 Persistent Class 的目錄相同。

6.4 在使用 Mapping File 之前必須註冊到 Configuration file 中，通常使用靜態的方法，直接寫入 hibernate.cfg.xml 中。

皮克斯動畫20年一日遊

2009-09-13T08:09:00.015+08:00

在還沒看<皮克斯動畫20年>之前
早就聽說參觀人潮非常踴躍
所以特別挑了一個非假日的時間去看

<皮克斯動畫20年>完整呈現皮克斯工作室20年來結合藝術與科技的動畫藝術
展覽內容包括繪畫手稿、3D模型、故事板、彩繪腳本、短片、多媒體影像及幕後製作影片等將近600件展品
讓看熱鬧的門外漢、看門道的內行人都有很大的收穫

一部動畫電影的一切都始於故事
故事板中一張張的分鏡圖
就是未來電影每一個鏡頭的簡化版
從原始構想到畫出故事板
也就是將文字轉化為視覺
透過轉化，讓電影中每個鏡頭都隨著故事板脈絡而被賦予了意義

當故事產生了
角色的創造必是不可或缺
有深度的角色，可以抓緊觀眾
讓他們在角色中看到自己，而進入電影情境
例如汽車、昆蟲、魚等角色都擬人化

也因此電影對皮克斯而言就是讓虛擬世界變得活靈活現
皮克斯渴望創造一個讓人信服的世界
這樣的世界不僅僅是複製真實
也在於做出令觀眾信服的陳述
就連不真實的假象
觀眾也深信不疑

彩繪腳本是根據劇情演變
做出整體的色彩、光線、氛圍的視覺作品
早在電腦問世之前
彩繪腳本就是皮克斯賴以預覽完整故事最佳途徑
而最高境界的劇情是沒有任何一句對白也能感動人心

總而言之，皮克斯的動畫藝術之所以成功
包含了「角色」、「故事」與「世界」三大要素的整合
在每一部動畫片中
創造出充滿令人驚嘆的世界
引人入勝的角色
以及感同深受和超具想像力的故事
在沒有定型化的電影世界
貼近人們內在的渴望
引發內心的共鳴
也滿足了我們的感知能力

展覽內容還包括令人嘆為觀止的「幻影箱」
在電影發明之前
「幻影箱」就展現出動畫的基本原理
此次展覽皮克斯將「玩具總動員」的角色製作成立體公仔固定在一個大圓盤上
並以每秒18格的頻率轉動
以LED燈的裝置取代傷眼的閃光燈
並應用電腦程式來安排公仔的位置
呈現精準的動作
觀者的大腦將暫留的影像連成一氣
從而產生他們正在連續動作的錯覺
巧妙的帶出動畫形成的原理

這個幻影箱的靈感來自於日本吉卜力工作室的"Bouncing Totoro"
不過「玩具總動員幻影箱」考慮到要讓觀者能夠理解靜止的人物如何動起來
這個大型的幻影箱是從靜止到動態再回到靜態的循環
讓人能夠深刻體會到3D幻影箱的神奇之處

皮克斯工作室的靈魂人物約翰‧萊斯特：「藝術挑戰科技，科技激發藝術」
皮克斯將電腦動畫當成藝術來創作
從展覽中可以看出其「用心」...
創作「海底總動員」時，還特別去學潛水
創作「料理鼠王」時，還特別去法國高級餐廳學料理
創作「超人特攻隊」時，還特別到夏威夷島實地觀察
用心越深，越能感動人心...

------------------------------------------------------------

展覽之外，還特別去看「台灣3D動畫精選」影片賞析會
發現台灣近幾年的電腦動畫進步許多
不過還是卡在一般國片面臨的困境：經費的問題
還好現在已經有很多大專院校都有開這方面的課程
讓培育電腦動畫人才，看到台灣電腦動畫的未來

另外北美館的圖書室有著非常豐富的圖書、期刊
對於美術、廣告、建築等有興趣的人
這裡可以找到一些創作靈感的資料

參觀的那天
雖然是非假日
還是可以看到很多學生來參觀
包括幼稚園的小朋友
比較特別的是還看到有「網拍名模」在外拍
真是充滿藝術美的一日遊啊!!

GWT簡介

2009-09-11T21:03:00.003+08:00

GWT(Google Web Toolkit)是一個屬於Open Source的Java軟體開發架構，它可以讓使用者很容易的撰寫像是Google Maps或是Gmail的AJAX應用程式。通常撰寫Dynamic Web Applications是一個冗長乏味又很容易出錯的工作，使用者通常幾乎有90%的時間是花在處理Web Browser跟Platform之間一些不一致的問題，且因為JavaScript的關係，使得使用者在分享，測試，以及重複利用AJAX元件等都會覺得不方便。

GWT可讓使用者避免掉這些頭痛的問題，使用者可用Java程式語言來撰寫Front End程式，然後GWT Compiler會將此Java Class檔轉換為可在Browser上執行的JavaScript和HTML。

Installing Google Web Toolkit

(1) 安裝Java SDK。
(2) 下載Google Web Toolkit。
(3) 將下載之Google Web Toolkit package解壓縮
(4) 開始使用Google Web Toolkit

GWT並沒有安裝程式，所有你執行GWT所需的檔案都放在指定的目錄中，你執行GWT時最主要的應用程式為applicationCreator。

關於Expression Language

2009-09-07T14:48:00.004+08:00

JSP 2.0最重要的變革之一，便是將Expression Language(以下簡稱EL)整合進JSP標準規格，EL並非全新的語言，最早出現於JSTL 1.0當中，被用來簡化資料存取的相關作業。

由於EL已是JSP的標準，因此你可以選擇直接在JSP網頁當中使用EL替代Java進行資料的存取操作。

EL有其專屬的一套語法，包含了兩項基本要素：變數與運算子。變數用來儲存各種型態的資料，運算子則是資料運算符號。儘管EL是為了特定目的而發展出來的一個特殊語法，然而相較於其他的程式語言的變數與運算子，它們的意義是相同的。對於EL而言，變數是一個儲存了特定資料的符號，EL可以直接對其作存取，或是結合運算子進行必要的運算之後作輸出。

EL另外還有一組內建的預先定義隱含物件(implict variables)，它們以Java集合物件的型態出現，其中儲存了網頁的各種資訊，包含session、cookie以及網頁傳輸過程當中所使用的參數值。EL的語法相當簡潔，為了與其他的網頁元素作區隔，EL必須以一個金錢表示符號加上左大括弧${開始，並且以右大括弧}作結束。

網頁伺服器的架設與管理

2009-09-03T17:23:00.003+08:00

網際網路的普及讓我們對於新技術與新資訊的取得比起以往更為快速，甚至，目前還有研究透過網路搜尋引擎來進行病歷的判斷等，電子郵件與網頁服務是網際網路快速成長的兩大應用推手，一個是讓我們節省了許多書信往返的時間便可以即時和遠方的朋友或是客戶進行聯繫，一個是讓我們可以將訊息快速的散播到世界各地去。而Apache網頁伺服器是目前最受歡迎的網頁伺服器之一，他有著低成本與高穩定的特性讓許多網管人員都十分的喜愛。

透過openSUSE Linux 11中的YaST控制中心來組態網頁伺服器，是一件十分輕鬆的工作。點選[電腦]->[YaST]->[網路服務]->[HTTP伺服器]來啟動[HTTP伺服器]模組。

步驟一：
先選擇那些網路設備介面要提供網頁伺服器的服務，預設系統會將所有的網路設備介面勾選，並以80埠作為主要的服務埠號。

步驟二：
接著可以針對HTTP伺服器欲支援的額外模組進行設定，預設在組態精靈介面中僅提供四種模組共讀者選擇，其它的模組可以於完成精靈組態程式後再進行設定：
1.啟用PHP5程序檔支援：開啟HTTP伺服器支援執行透過PHP5所撰寫的檔案。
2.啟用Perl程序檔支援：開啟HTTP伺服器支援執行透過Perl所撰寫的檔案。
3.啟用Python程序檔支援：開啟HTTP伺服器支援執行透過Python所撰寫的檔案。
4.啟用Ruby程序檔支援：開啟HTTP伺服器支援執行透過Ruby所撰寫的檔案。

步驟三：
接著，HTTP伺服器組態精靈將會建立一個預設主機組態檔。

步驟四：
剛才所產生的基本功能組態檔案，對於目前的操作過程中已經足夠我們使用了，在第四步驟中將會進入虛擬主機的建置畫面。

步驟五：
HTTP伺服器組態精靈會將剛才的設定再進行條列檢視，記得將HTTP伺服器設定於每次啟動主機時一併啟動。確認無誤後請點選[完成]來結束HTTP伺服器的基本組態。

郵件伺服器的設計與管理

2009-09-01T17:39:00.005+08:00

基本上一個電子郵件的傳遞需要透過幾個必要的元件程式才能夠完成，包含：

郵件使用者代理程式(Mail User Agent，MUA) - 意指一種可以供使用者撰寫郵件、回覆郵件、讀取郵件與處理郵件的程式。通常於Linux作業系統上會提供兩種型態的MUA程式，分別為：
圖形介面的MUA，例如：Thunderbird等。
命令列型態的MUA，例如：透過Linux作業系統內的指令工具來完成郵件的處理工作，例如：/usr/bin/mutt或是/usr/bin/mail。

郵件傳輸代理程式(Mail Transfer Agent，MTA) - 則是一種專門用來傳遞郵件的程式，就像傳統郵電傳遞中的郵局角色一樣負責郵件的傳遞。通常在單一台電子郵件伺服器上僅可以使用一種MTA程式，MTA程式在收到電子郵件時，會先讀取郵件中收件者的欄位資訊，並且確定收件者的位址是否存在。然後再透過通訊埠與收件者的郵件伺服器進行連線，如果這個連線可以建立時，則會透過簡易電子郵件傳輸通訊協定(Simple Mail Transfer Protocol，SMTP)將郵件傳遞到收件者的MTA。

郵件傳遞代理程式(Mail Delivery Agent，MDA) - 便是將從MTA收到的郵件，將這些郵件依據使用者名稱來識別放置於每個使用者的郵件信箱檔案(Mailbox)中。或者是透過MDA再將郵件傳遞到其它的MTA，除了分派郵件的功能之外，MDA程式還可以具備郵件過濾等功能。

常見電子郵件通訊協定介紹

簡易電子郵件傳輸通訊協定(Simple Mail Transfer Protocol，SMTP) - 用於傳遞電子郵件訊息時所使用的一種TCP/IP協定，使用TCP埠25作為主要的通訊埠號，透過這個傳輸協定可以讓電子郵件於MTA之間移動。雖然SMTP本身不支援非ASCII文字的傳輸，但是我們可以透過多用途網際網路郵件延伸(Multipurpose Internet mail Extension，MIME)這個通訊協定來協助處理非ASCII文字的傳輸。

郵局通訊協定第三版(Post Office Protocol Version 3，POP3) - 會在網路連線時不斷的檢查是否有新的郵件進入，並且將這些郵件儲存於伺服器上，並且使用TCP埠110作為主要的通訊埠號。另外，POP3也有提供另一個支援SSL加密的版本稱之為POP3S。

網際網路訊息存取通訊協定第四版(Internet Message Access Protocol Version 4，IMAP4) - IMAP4與POP3通訊協定都是提供用戶端存取存放於伺服器上郵件最常使用的協定之一，但是IMAP4提供更多功能來協助使用者透過協定來存取郵件。其中，這兩者間最大差異在於，POP3通訊協定會於MUA存取郵件訊息時便將郵件下載至本地端上，並且刪除伺服器端上儲存的郵件，且每次僅允許一個使用者進行存取。而IMAP4則允許電子郵件可以永久儲存於遠端伺服器上，並且可以從任何地方來讀取這些郵件，且支持多個用戶同時連接到一個郵件信箱上。

SQL Server的安全架構

2009-08-31T21:06:00.004+08:00

SQL Server的安全管理可分為兩階段：
驗證(Authentication)：驗證使用者是否有權利登入SQL Server伺服器，使用SQL Server提供的服務。

授權(Authorization)：也就是設定使用者登入後，可對伺服器做哪些動作、使用哪些資料庫、存取哪些資料表等存取權限。

登入帳戶
在SQL Server中，將用來驗證使用者身份的帳戶稱為登入(Login)。SQL Server提供兩種驗證方式：Windows驗證 - 在SQL Server中建立對應到現有Windows 2000/2003本機或網域帳戶的「登入」，當使用者已用合法的帳戶登入Windows後，要存取SQL Server時，只要他目前所用的Windows帳戶已在SQL Server中有對應的登入，SQL Server就會允許他連線。

SQL Server驗證 - 指由SQL Server自己負責驗證使用者的身份，因此使用這種驗證方式時，管理員需事先y在SQL Server中建好所需的登入及密碼，使用者在連線伺服器時，則必須輸入登入名稱及密碼。通過驗證後才能連上伺服器，使用其資源。

存取權限
在SQL Server中，可被設定存取權限給使用者的物件或動作稱為安全性實體(Securable)，安全性實體的種類相當多，可概分為三個層次：
伺服器層級 - 例如登入、資料庫、連結伺服器、端點(Endpoint)等屬於整個SQL Server執行個體的安全性實體都是屬於這個層級，這類安全性實體的存取權限，也都要以登入為授與對象，而一般為方便設定，都是直接透過內建的伺服器腳色(Server Role)來設定登入對伺服器安全性實體的存取權限；當然SQL Server也允許不透過伺服器角色，而個別設定某安全性實體的存取權限。

資料庫層級 - 舉凡屬於某資料庫本身的安全性實體都屬此類，像是資料庫使用者、資料庫角色、結構描述、全文檢索目錄等，原則上，這類安全性實體都需授與給資料庫使用者。

結構描述層級 - 這類安全性實體包括資料表、檢視表、預存程序、函數等等，這個層級的存取權限自然也是以資料庫使用者為主要授與對象。

使用者
使用者(user)這個資料庫物件，就是用來設定登入帳戶對資料庫是否有存取權。由於每個資料庫所允許使用的人都不同，所以每個資料庫都有它自己的使用者物件，假設我們想使用SQL Server中所有的資料庫，那麼在每個資料庫中，都要有以我們的登入帳戶所建立的使用者物件才行。

角色
角色(role)是用來指定存取權限的資料庫物件，而且每個資料庫都有它自己的角色物件，每個角色也都有其獨立的存取權限設定。例如我們可指定某些角色只可查詢資料表資料、有些角色則可更改或刪除資料。設定好角色之後，我們只需再指定每一個使用者可以扮演哪些角色，就可讓使用者取得與角色相同的存取權限。

網域名稱系統的設計與管理

2009-08-27T15:56:00.004+08:00

在網際網路上的主機通常會透過完整格式的網域名稱(Fully Qualified Domain Name，FQDN)來做為辦識主機的所在位置，而一個完整格式的網域名稱包含了兩個部份，分別為主機名稱(host name)與網域名稱(domain name)。為了確保每台主機的完整格式網域名稱不會產生重複的現象，在網域名稱系統的架構中，位於同一層的節點標籤必須是彼此相異，而我們稱這些在同一階層的節點為同輩節點(sibling node)。

在網域名稱系統中，最頂端的root節點是作為整個網域架構頂層管理，而這個樹狀階層架構中為了方便管理不同領域所使用的域名類型，因此在root節點下一層制定一個頂層網域(Top Level Domain，TLD)架構，在最早的時候，頂層網域架構共制定了七個不同的類型：

.com 商業機構或是公司行號
.edu 教育機構或是研究單位使用
.gov 美國政府的機構使用
.int 國際性組織機構使用
.mil 美國的軍事機構使用
.net 最初是給管理網路基礎設施的機構使用，自1996年開始已經開放給其它機構申請
.org 這個類別是給非商業的機構使用，於1996年後就沒有這個限制了

由於早期的發展與制定的規範都是針對美國本土所進行設計的，因此我們會發現在最初規範出來的七個頂層網域並無讓其它國家使用。為了解決這樣的設計謬誤，掌管這些域名架構的網際網路名稱與位址管理機構(International Corporation for Assigned Names and Numbers，ICANN)便將原先的七個頂層網域改稱為通用頂層網域(Generic Top Level Domain，gTLDs)。而為了因應網際網路的快速發展與調解國際網域分配的爭議，除了現存的gTLDs之外，另外也針對不同的國家與地區增加了新的網域命名空間，而這些新定義的網域命名空間以每個國家的國碼來進行定義，因此稱為國碼頂層網域(Country Code Top Level Domain，ccTLDs)。例如：台灣的國碼頂層網域為.tw，日本的國碼頂層網域為.jp等。除了這些定義之外，像近幾年來頗為熱門的.biz與.info這類的網域名稱也於2000年被新增到通用頂層網域中。除了通用頂層網域是由網際網路名稱與位址管理機構來進行管理之外，區域性的國碼頂層網域則是由該國的管理機構來負責，例如：台灣是透過財團法人台灣網路資訊中心(Taiwan Network Information Center，TWNIC)來進行處理.tw國碼頂層網域的管理。

資料庫的建立與規劃

2009-08-26T19:43:00.003+08:00

SQL Server的資料庫可分為系統資料庫和使用者資料庫兩種，其中系統資料庫就是SQL Server自己所使用的資料庫，至於使用者資料庫就是由我們自己建立的資料庫。

系統資料庫是在SQL Server安裝好時就會被建立的，分別有master、msdb、model、tempdb這四個基本的系統資料庫，而且不能刪除這些資料庫。除此之外，還有一個隱藏的Resource資料庫，但在Management Studio中看不到它。以下簡單說明這幾個系統資料庫的用途：

master
master資料庫記錄的是有關SQL Server的資訊，包括所有的登入帳戶、系統的組態、各資料的初始資訊等各類重要資料。SQL Server 2005基於安全性的考量，已不再讓我們直接瀏覽、修改各資料庫中的系統資料表，而是必須透過系統檢視(system view)來瀏覽。我們可用"select * from sysobjects where type ='S'"來查看master資料庫中有多少隱藏起來的資料表。

由於master資料庫的內容對整個資料庫系統的關係重大，因此最好要定時備份此資料庫的內容。

msdb
msdb是另一個供系統使用的資料庫，其主要用途是供SQL Server Agent做各類排程作業(job)所用的資料庫。除了SQL Server Agent的資料外，有關備份和還原的記錄、複寫和資料維護計劃等資訊也都是放在這個資料庫中。

model
model是個較特殊的系統資料庫，或許應稱它為「樣板」資料庫。當我們在SQL Server中建立新的資料庫時，SQL Server會以model資料庫為藍本，將其內容複製到我們的新資料庫，因此在所有新建的資料庫中，都會有和model資料庫內容一樣的系統資料表和檢視表等資料庫物件。

tempdb
由名稱就可看出，tempdb是用來存放暫時性資料用的，像是使用者在進行各種查詢或排序時，SQL Server就會在此建立這些暫時性的工作資料表。由於是"暫時性"的，所以tempdb中的資料沒有什麼保存的價值，因此每次SQL Server重新啟動時，都會重建一份新的tempdb資料庫。

Resource
雖然在Management Studio中根本看不到這個資料庫，但只要用檔案總管進入SQL Server的資料庫檔資料夾(例如Program Files\Microsoft SQL Server\MSSQL.l\MSSQL\Data)，就可以看到Resource資料庫的資料檔及交易記錄檔mssqlsystemresource.mdf、mssqlsystemresource.ldf，此資料庫檔還不算小，因為它存放了許多與SQL Server 2005本身相關的系統物件，使用者物件都不會存放Resource資料庫中。

SQL Server 2005採用Resource資料庫的目的之ㄧ，就是讓系統資源集中存放管理，日後將可透過升級Resource資料庫的方式，即可升級SQL Server 2005的功能。

以上簡單介紹了SQl Server中內建的系統資料庫，除了這些系統資料庫外，在每個使用者資料庫中，也會有一些系統內建的物件，其中最重要的就是系統資料表和檢視表。

JSP Standard Tag Library

2009-08-24T20:32:00.003+08:00

JSP Standard Tag Library(簡稱JSTL)，是一套預先定義好、協助程式設計人員簡化JSP網頁製作的標籤函式庫，包含了各種網頁運作所需的功能，例如迴圈、流程控制、輸出入、文字格式化，甚至XML文件處理以及資料庫存取操作均為其涵蓋範圍。

JSTL雖然是JSP網頁技術的一環，但是與JSP不同的是，JSTL本身並非由SUN公司所開發出來，相反的，SUN制定其規格之後，便直接開放讓外界進行實作，而目前提供相關規格實作成品的最主要的組織為Apache的Jakarta Project。

我們並沒有辦法直接使用JSTL，還必須先至Jakarta Project網站下載並且安裝JSTL。依其功能面作分類，JSTL提供了五種形式的標籤函式庫，列舉如下表：

行程(Process)與服務(Service)

2009-08-18T16:52:00.006+08:00

在Linux作業系統中當我們執行一個程式來取得所需要的資源時，此時Linux作業系統便會為這個執行動作建立一個行程(process)，以便管理整個程式執行過程中所需要的狀態應變。然而從我們啟動Linux作業系統時，系統便會開始產生很多不同的行程，而如何針對這些行程來進行管理將會是系統管理員一個十分重要的基本工作。

行程的產生代表程式已經被載入記憶體中，並且可以透過CPU來進行執行。然而每一個行程裡面都會儲存程式執行時所需要的重要資訊，包括含有執行緒(thread)位置、行程識別碼(Process ID)、行程優先權、記憶體脈絡等。依據行程的執行啟動方式的不同將其區分為兩種類別，分別為：

使用者行程(User Process)：這類型的行程於啟動時通常是由使用者於終端機介面或是圖形介面來啟用。

Daemon行程(Daemon Process)：這類型的行程通常無法透過終端機或是圖形化介面中來啟動，它通常需要搭配其它的程式或是行程的執行才可以被啟用運作，通常這類型的行程多為網路服務為主的行程。

每一個行程都會擁有一個獨立的識別碼資訊，我們稱之為行程識別碼，行程間基本上也是透過這組識別碼資訊來辦別雙方的關係。通常我們可以依據行程間的關係利用下列名詞來進行解釋：

子行程(Child Process)：由其它行程所產生出來的行程，稱之為子行程。

父行程(Parent Process)：為行程的一個名稱，通常可以產生一個或是多個以上的子行程。

父行程識別碼(Parent Process ID，PPID)：用來表示某一行程的父行程的行程識別碼資訊。

服務
在Linux作業系統中通常我們可以依據服務的功能，將其區分為系統服務(System Service)與網路服務(Network Service)兩個類別。

系統服務：針對Linux作業系統本身所提供的服務，例如boot.quota、quotad等。

網路服務：針對網路中的其他用戶端所提供的服務，例如APACHE、SAMBA伺服器等。

Linux作業系統中所提供的服務通常會在啟動後就會持續的提供服務給所需要的對象，不論是針對Linux作業系統本身或是針對網路中的其他用戶端，一般我們針對這些服務的分類以執行的功能差異來進行區分之外，通常也會依據服務的啟動方式不同而再把這些服務進行不同的分類。通常會區分為：

獨立式服務：一般又稱之為SysV服務，執行於背景，除非被管理者將服務終止，或是系統關閉，否則服務會一直持續於背景提供服務。

短暫式服務：平時不會啟動於背景中等待存取要求，而是當使用者有所需求時才會啟動提供服務進行存取。

MVC Model

2009-08-17T16:38:00.004+08:00

由於Internet的快速發展，網際網路上的應用服務也跟著日新月異，從以往最初的資訊流通共享，時至今日，各式各樣更多的需求和服務為消費者及開發廠商提供更多選擇和機會。如今，單純的網頁早已不敷使用，使用者需要更個人化、更多元化的「服務」。Java因為具跨平台能力，其共通性讓更多開發者投入它的懷抱，也不斷發展出更多應用，而其觸角也理所當然伸向網際網路領域。在1997年所提出的Servlet產生了網路服務的另一波新革命，結合了使用者直接接觸的JSP和後端連結資料庫的JDBC應用，Java相關應用在網路服務上創造了難以想像的衝擊和便利。Struts的目的便是要結合這些功能強大的元件，架構出一個兼具功能性及開發便利性的框架。

MVC Model

要想理解Struts的架構，必須先了解何謂MVC model(Model 2)。

字面上來說，MVC所代表的分別是Model、View以及Controller。這是一種將設計工作分層處理的概念，我們可以將一項網路服務的流程區隔為三個部分，每個部分由個別元件處理，只要製訂好各元件間如何聯絡的合作方法，就可以讓一個大型服務切割成數個較簡單的工作。

MVC-model將會有三個不同的元件，也就是模型元件(Model_Component)、視圖元件(View_Component)和控制器元件(Controller_Component)等，模型元件負責商業邏輯(Business_Logic)，視圖元件作為使用者介面，負責服務主體中和使用者的互動，而控制器元件則是接收使用者發出的需求，介接到相對應的商業邏輯，並取得結果後回應使用者，負責前二者的連結。如同一所大公司一樣，將工作區分做到專業化，讓開發人員各司其職，分別做好三個部分的設計，也讓一個大型服務開發過程能夠變得更加明確而清晰。MVC架構起始於一個GUI(Graphocal_user_interface_design_patter，圖型使用者介面設計原型)原型，早期是使用在Smalltalk這個語言，而今隨著網路服務的快速發展，MVC架構已經成為一個流行且成功的網路服務設計方法。

還原與備份

2009-08-13T15:12:00.005+08:00

電腦科技日益進步，但經過數十年的發展，電腦軟硬體的穩定性仍未達多數人能滿意的水準，電腦中的資料還是有喪失或毀損的情況發生，若再加上天災人禍等意外狀況，存於電腦中的資料實在是不太安全了。就算使用的是具有容錯能力的RAID磁碟陣列，也是難以保證資料庫是百分之百的安全。

雖然電腦軟硬體設備的費用可能不便宜，但大多數的人都認同經過長時間所累積的電腦資料才是更珍貴的資產，因此為了防止在各種意外發生時，仍能保有資料庫的完整性，管理者就必需花額外的時間和資源來備份SQL Server中的資料庫。SQL Server本身當然也提供了不少備份的功能：

資料庫備份
也就是備份整個資料庫內容。如果要將SQL Server中所有資料庫都備份下來，可能需要相當龐大的儲存空間來存放備份資料。但其好處是在還原資料庫時，也只需將整個資料庫從一份資料庫備份還原到SQL Server就可以了。另外，就算要是使用下述的差異式備份或交易紀錄備份，也必須是在做過完整的資料庫備份後才能進行。

差異式(Differential)備份
只備份從上一次執行完整資料庫備份後有更動過的資料，因此所需的備份時間和儲存空間，通常會比資料庫備份少很多，所以適合還原，然後再用最近一次所做的差異式備份還原到SQL Server，就可讀資料庫的內容回復到最近一次差異式備份時的同樣內容。

交易記錄(Transaction Log)備份
只備份交易記錄檔的內容，由於交易記錄檔只會紀錄我們在前一次資料庫備份或交易記錄備份之後，對資料庫所做的異動過程，也就是只記錄某一段時間的資料庫異動情形，因此在做交易記錄備份之前，一定需做過一次完整的資料庫備份才行。交易記錄備份所需的時間和儲存空間應該不多，不過在做還原時，除了要先將資料庫備份還原外，還需再依序還原各個交易記錄備份中的內容。

檔案及檔案群組備份
如果資料庫的內容分散存於多個檔案或檔案群組，而且資料庫已非常龐大，大到進行一次完整的資料庫備份會有時間和儲存空間上的問題，就可使用這種方式來備份資料庫中部分檔案或檔案群組。由於每次只備份部分的檔案或檔案群組，因此需做數次不同的備份才能完成整個資料庫的備份，但資料庫大到不方便做完整備份時也只好如此。而且檔案及檔案群組備份也也另一個好處，就是當損毀的資料只是資料庫中的某個檔案或檔案群組時，也只要還原毀損的檔案或檔案群組備份就可以了，比起只有整個資料庫的備份時，要還原整個資料庫方便許多。

由於資料庫的備份有多種不同的方法，很自然地，還原資料庫時也需依照當初備份資料庫的方式，及還原作業的時間點，以對應的步驟將備份下來的資料還原到伺服器中，以使資料庫的內容能回復到您所希望的時間點(通常是越接近資料庫出問題的時間越好)。以下介紹各種備份的還原方式：

資料庫備份的還原
不管之前只進行完整的資料庫備份，或是資料庫備份、差異式、和交易記錄備份交錯使用，遇到需要還原資料庫時，都需先還原完整的資料庫備份。

若是只做完整的資料庫備份，只需還原最新的備份資料，就算是完成還原的工作了。但若是搭配差異式或交易記錄備份的話，則此處的還原完整的資料庫備份，應該就只是整個還原作業中的第一個動作而已，在將最近一次的資料庫備份還原到伺服器後，可能還得繼續還原後續的差異式或交易記錄備份資料。

差異式備份的還原
還原差異式備份，其步驟並不複雜，只需先還原最近一次的完整資料庫備份，然後再還原最近一次差異式備份即可。例如採取每週六做一次資料庫備份，每天清晨做一次差異式備份者，在星期三遇到要做還原的情況時，需先還原上週六的資料庫備份，然後再還原當天清晨所做的差異式備份，即可完成整個還原的工作。

如果在做完這兩個還原動作後，您還有後續的交易記錄備份，則可再取出這些備份資料，依序以稍後介紹的方法將它們還原。

交易記錄備份的還原
還原交易記錄備份會比較麻煩，但由於通常我們都會以較頻繁的頻率進行交易記錄備份，所以使用交易記錄備份時，也意味著我們能將資料庫的內容回復到較接近目前的狀態。

電子商務系統

2009-08-12T21:39:00.003+08:00

電子商務(Electronic Commerce，EC)，即利用資訊網路進行的商務活動，例如電子報(ET-Today)、網路書店(Amazon)、網路花店、網路銀行、網路下單、網路電視、虛擬商店、網路人力仲介(104)…等等。

常見的電子商務模式

B2B(Business to Business)：企業對企業間的往來關係，透過電腦網路來進行，以加速企業間資訊的流通。例如：文件傳遞、商品採購、收付帳款、資金移轉、等等…

B2C(Business to Consumer)：企業與顧客間的往來，也是透過電腦網路來進行。例如：Amazon網路書店，可瀏覽商品、訂購商品、以及付款等活動。

C2B(Consumer to Business)：顧客對企業，消費者因為彼此共同的需求而形成社群，然後透過社群運作，對廠商進行集體議價。

C2C (Consumer to Consumer)：顧客對顧客，網站經營者提供一個交易環境、交易資訊、公平的信用評等制度，讓買賣雙方有機會互相接觸各取所需。例如：露天市集、Yahoo!拍賣。

B2 (Business to Government)：企業與政府之間的電子商務交易，例如政府採購案，承包商可在線上競標、發展及傳遞產品等。

Ｇ2C (Government to Consumer)：政府的線上交易對象，擴展到對一般民眾的G2C，如繳交稅金、停車場帳單或註冊車輛等，可透過網路進行。 (監理站)

一般商業活動分為四個層面
商流：商品購買交易活動，如：接受訂單、購買、售後服務等。

物流：指商品的配送。

金流：指資金移轉的過程，包括付款、與金融機構連線、信用查詢、付款指示明細、進帳通知明細等。

資訊流：包括商品資訊、行銷活動等。

電子商務活動
商流和資訊流，是一般電子商務活動數位化最為成熟的部分。例如：可以連上電子商務網站，瀏覽各種商品(資訊流)，接著將所要商品放入訂購車中，然後結帳(商流)。

付款(金流)和交貨(物流)，是電子商務活動最重要的部分，仍然有改進的空間。

建立一套安全完善的付款機制，以及便捷快速的物流系統，將是電子商務成功的關鍵因素。

電子商務的商品種類實體商品：在網路上販賣實體化的商品，例如：電腦與週邊硬體、電腦軟體、圖書、鮮花…

資訊與媒體商品：最適合在網路上行銷的商品，莫過於數位化商品，例如：電子報、電子書、影音資料、圖片、研究報告、資料庫檢索…等等。

線上服務：使用網路提供線上服務的商品，例如：金融服務、股市行情分析、醫藥查詢、訂票、飯店訂房、醫院掛號。

電子商務的付款方式
發展電子商務的重要層面之一：「金流」。

現行的電子商務活動，通常會提供多種付款方式：
包括信用卡付款
ATM轉帳
郵政劃撥付款
銀行匯款付款
現金付款等方式

網路行銷的第一步 - 認識SEO

2009-08-11T16:11:00.007+08:00

SEO(Search engine optimization，搜尋引擎最佳化)，經過SEO的網頁可以在搜尋引擎中自然獲得極佳的名次，被點選的機率必然大增，業務量及訪客也將大幅的增加。

當在Yahoo以及Google搜尋引擎打上要搜尋的關鍵字時，搜尋引擎就會在第一頁當中列出大約十個的搜尋結果，以及在上方及右邊剩餘空間內打上付費的網路行銷廣告。

以下列出SEO的變項，如果能一一的加以最佳化，必定能夠大幅提升您網站針對某個關鍵字的排名：

網頁內容出現關鍵字
在實際執行最佳化的時候要注意，關鍵字出現的次數確實會影響排名的順序，整個網頁出現的關鍵字次數愈多者的排名有高過低者的趨勢，但要注意關鍵字出現以自然語文的頻率為佳。若過度人造關鍵字的插入，有可能被歸類為作弊。

網頁標頭(HEAD)內出現關鍵字
網頁的原始碼中最前的一段就是HEAD，其中有多個項目內可以出現想要SEO攻略的關鍵字。我們直接列出原始碼供您抄襲，是您最佳化成功最快速的好工具。

html
head
title SEO - 搜尋引擎SEO排名不能說的秘密 /title
meta name="description" content="SEO"
meta name="keywords" content="SEO"

上面的title是網頁的標題，這裡一定要出現您的關鍵字。
上面的meta name="description".. 是網頁的說明，這裡一定要出現您的關鍵字。
上面的meta name="keywords".. 是網頁的關鍵字宣告，這裡一定要出現您的關鍵字，可以用,分隔多個關鍵字。

這三個項目還有一個奧秘的可能性，凡是做字串的比對，我們要知道，在句子的一開頭就比對正確，那通常是高相關性，因此例如在title當中，我們建議把您要最佳化的關鍵字放在最先頭

網頁的語言宣告
您的網路生意的市場在哪裡？台灣還是大陸？在台灣，你就要用繁體中文的網頁，在大陸你就要用簡體中文的網頁，一個繁體中文的網頁還是一個簡體中文的網頁擺在你面前，你大概也可看得出來，但你要知道，搜尋引擎的索引程式 (Spider) 只不過是一支人寫的程式，他是看不懂你在寫什麼語言的，因此你的網頁到底是什麼語言，這是非常重要的一件事情，一定要告訴搜尋引擎知道，這是搜尋引擎SEO常被人忽略的一塊。

如果搜尋引擎誤判你的網頁語言，將會有很嚴重的後果，例如你的網頁是繁體中文但被誤判為別的語言，當繁體中文用戶的搜尋要求被處理的時候。您的網頁將會被降低優先權，因為語言不合。

因此若要SEO我們絕對不能讓搜尋引擎來”猜”我們的網頁語言是什麼，我們一定要明確的告訴搜尋引擎這個網頁使用的語言為何，以下是宣告網頁語言的原始碼。您可直接抄襲來使用。

html
head
meta http-equiv="Content-Type" content="text/html; charset=big5"
/head

charset的部分為big5表示為繁體中文，gb2312為簡體中文，utf8為萬國語言。這邊又來了一個重點，許多人說認為big5是一種不良的編碼方式，因此在設計網頁的時候喜歡用utf8萬國語言，這是對搜尋引擎SEO極為不利的一種做法，因為萬一搜尋引擎判斷不出你的網頁主要語言是什麼的時候，你就別想在該種語言的搜尋結果內出現了。

網頁原始碼的HTML標籤 - 與搜尋引擎SEO具有關聯性
仔細檢視HTML原始碼其中幾個與SEO相關的：
1. HEADINGS: 這是所謂的標頭，就好像報紙頭版的標題，這裡出現關鍵字絕對與提升你的關鍵字相關度。原理就是通常人們再撰寫文章的時候會以這個段落的主題為標題，因此這個段落的文字自然語該標題呈現相關狀態。
範例：

SEO

2. PARAGRAPH: 這是所謂的段落，段落在原始HTML的設計當中就是用來包括文章段落用的。因此我們在設計網頁的時候要千萬注意別亂用 P 於沒有語意的地方，有些時候你的網頁原始碼從上面算起好幾千個字元了都還沒出現具有語意的文章，那搜尋引擎又要如何判斷哪些文字具有語意呢，就是靠 P。

範例：

SEO is good

3. 粗體字及斜體字，為您的關鍵字加上一兩個粗體或斜體也能增加一點與關鍵字的關聯性，不過應該也只能增加一點點。

網域名稱Domain Name - 搜尋引擎優化的捷徑
網域名稱對於關鍵字搜尋的排名具有相當大的優勢，原因是通常網域名稱與該網站內容呈現高度的相關性，例如www.ibm.com就是IBM公司的官方網站。網域名稱具有獨一無二的特性，一旦被某人搶先使用就沒有第二個人能使用。幾乎所有的商業組織公司行號都早已把自己公司的商標搶先註冊起來，在搜尋引擎搜尋該商標名稱也通常會找到正確的該公司網站。這是一種自然而然的情形，一個公司一定會盡力把自己的公司商標的網址搶下來，這也是Goodgle與Yahoo能大膽的提高網域名稱與關鍵字比對的相關性的原因。

如果要SEO的關鍵字是英文的，那能夠取得一個SEO的捷徑！趕緊去申請一個帶有你的關鍵字的網域名稱吧！甚至若是真的找不到，在關鍵字前後加一個字也算數，例如ibooks.com.tw，但是這就不算百分之一百吻合了。

另外，還有一個跟網域相關的變項存在，但目前尚無關查到其與SEO的關聯性，在此提供參考，就是網域的whois資訊，因為whois資訊中，是實上是有登記該網址位於哪一個國家或地區中，因此有助於搜尋引擎判斷該網頁的地理位置。有些人網站明明就放在台灣，但whois資訊確寫著美國，也許有一天這個變項納入了，也會影響到網站於該區域的排名喔。

網頁檔案存放目錄（資料夾）及檔案名稱
理論基礎就是一般人資料夾分類的方式本來就是表示這個資料夾下的文件具有該資料夾名稱的共通性，而檔案名稱的命名方式更是直接了當的表示了這份文件的內容屬性。

因此如果你要SEO的關鍵字是英文的，那就很簡單，如果你要最佳化SEO這個字，那就把這個檔案的URL訂為：

http://www.seo.com/seo/seo.html

但是很抱歉，目前Google與Yahoo也似乎只承認英文關鍵字的部分，中文的關鍵字要用這種方法，也許也是要等到將來。

網站主機的地理位置 - 一個與內容無關卻搜尋引擎排名的重要因素
稍微好奇一點的網友就會發現，當你打上www.google.com與www.google.com.tw的時候出現的是兩套東西，一套是針對全世界（美國為主）的google，而另一套是針對台灣地區用戶的google，在台灣的google與美國的google搜尋同樣的關鍵字，出來的搜尋引擎排名結果是完全不一樣的。

基本上，在美國google（全球搜尋引擎排名）搜尋的結果具有以下特性，英文的網頁被提高了優先出現的機會，網站放置在美國的虛擬主機的網頁具有更高的優先性。

在台灣的google搜尋的結果具有以下特性，中文（繁體）的網頁最優先出來，且網站主機放置在台灣的IP者提高了優先度，甚至還有一種選項”台灣的網頁”完全提升了台灣IP的優先性。

因此這邊提供一個很簡單的原則，如果你要在台灣做生意，千萬別貪便宜跑去美國租GoDaddy，如果你要做德國的外銷生意，就請到德國租一個虛擬主機。最好的方法就是自己架站！保證在你當地經營，不然用到什麼國內的虛擬主機廠商，但實際上機房在美國，那就慘了。

真實的時光機器 - 搜尋引擎
人有分男女老少，網頁也有分新舊，到底是新的網頁好還是舊的網頁好，這個實際上除了用人工，很難去判斷，但是單純以資訊的角度來說，新的常常比舊的好，試想當您在搜尋一組關鍵字的時候，您希望是找到最新的網頁資訊，還是八年前，八年沒更新過的網頁資訊呢?

因此網頁的最後修改日期，也有可能成為搜尋引擎排名的關鍵因素之一，聰明的站長們，要記得時時更新您的網頁喔，就算不更新，最少也要動個日期，隨便加幾個字更動一下內容，好讓搜尋引擎知道這個網頁又更新了。

究竟搜尋引擎是如何知道網頁的日期呢？答案很簡單，就是透過所謂的HTTP Header，Web Server回應的HTTP Header當中包括了這個網頁的最後修改日期，而這個資料通常是由Web Server在讀取該檔案的時候一併取得的。

網站的PR等級：一級好站還是無名小站(Google搜尋引擎專用)
所謂網站的等級，一般指的是google的PR值，也就是PageRank，PR值愈高，搜尋引擎排名愈容易名列前茅，只要安裝google免費提供的google toolbar軟體並授權它使用PR值資訊，就可以輕鬆的查詢你拜訪的每一個網站的PR值，就算內容完全相同的兩個網址，擁有不同的PR值，在搜尋結果呈現的時候，高PR值的網站具有優先性。

PR值最低為0，最高為10，愈高愈好，它確實影響了搜尋引擎排名的順序，提升PR值的方法眾說紛紜，但基本上有著兩個原則，一是開了愈久的網站普遍較高，二是愈多人連結及拜訪的網站PR值愈高，基本上PR值的設計不就是為了要評鑑網路上所謂重要的網站，好站嗎？因此你只要把你的網站經營好，讓他成為網路上重要的網站，那久了PR值自然就高起來了！

PR值雖然愈高愈好，但可以確定的是低PR值的網站一樣可以排在高PR值的網站前面，因此SEO的原理就是了解所有變項，針對所有變項做最佳化，必能獲得成功。

在Yahoo上並無相對應的工具可以評鑑一個網站在Yahoo中是否為重要的網站。

網頁的連入連結（Linking IN）
你的網頁上說你是”良心商店”，網友說你是”黑心商店”，那在google及yahoo的心目中你到底是良心商店還是黑心商店呢？答案就是網頁的連入連結。

所謂的連入連結就是在別人的網站中，有加入你的網站的連結時，那個連結上面帶著的關鍵字。以下是一個範例：

這裡有一間黑心商店

在這個連結當中，連結本身的文字以及title也就是說明這個連結的文字都出現了黑心商店的關鍵字，因此你的網址已經與黑心商店扯上關係了。即便你一直在你的網站上強調良心商店的關鍵字，還是沒法消掉黑心商店的關聯性。

因此正確的連入連結方式應該為

這裡有一間良心商店

另外我們常常看有人寫什麼　點我　這樣子的連結，這樣子就讓你的網頁與”點我”這兩個字扯上關係啦。因此當有機會登錄你的網址到別的網站，或是要求別人加入連到你的網站的連結的時候，一定要正確的指定連入連結的格式。才不會把你的網站關連到錯誤的關鍵字。例如你公司叫做”ｘｘ公司”主要的商品是”電磁爐”，如果你要主打電磁爐的關鍵字SEO，甚至在要求別人加入連結的時候就直接只打　電磁爐　了，這樣才有最強的SEO效果。

網頁的連出連結（Linking OUT）
所謂的連出連結，就是你自己在你網站上加入連結到別人的網站的連結，為什麼這樣的連結也能增加你網站SEO與某個關鍵字的關聯性呢進而又能提升搜尋引擎排名？其理論基礎就在於，有許多介紹形的網站，他就是介紹某種類別的東西，而在介紹的同時，他又必需增加連出的連結，然而若是輕易的增加連出連結就能增加本網站與某關鍵字的關聯性，那不是很容易做弊嗎？

搜尋引擎可不怕這個，因為他也知道如果您的網站是在做生意的，你怎麼可能會加入連結到同類型競爭對手的連結呢，這也抑制這種評量機制被做弊的可能性，這也是我們常常看到在做同類型產品比較，或是介紹的網址，常常於搜尋結果中名列前茅的原因。

但是這個連出連結要怎麼加才不會加錯？很簡單，使用google toolbar的PR功能，可以看到一個網址的相關網站，要被你連結的網站本身就一定要關連於正確的關鍵字，你在去加這個連結才有效果。

網頁關鍵字的同義字
所謂的同義字。通常發生在縮寫上面，什麼是SEO呢？上Google一查，發現原來是Search engine optimization，但是重點來了，我們看看Google搜尋的結果，我們明明只是搜尋SEO但它卻把Search engine optimization一併標示為紅字了。

影像檔案的奧秘
說明：影像檔就是像是jpeg這樣的檔案，對搜尋引擎最佳化SEO有什麼影響呢？我們假設一個網頁中如果包含了跟目前正在搜尋的關鍵字相關的影像檔，能夠增加這個網頁與該關鍵字的關聯度好了，那麼要如何讓Google搜尋引擎知道這個網頁中的圖檔與該關鍵字相關呢？以下有幾種方法，哪一種有用，哪一種重要，這我們不曉得，但聰明的人一定是全部把它標示清楚。

方法一
圖形檔名的命名: 這個再簡單不過了，一張圖片就叫做　關鍵字.jpg 例如 seo.jpg 大辣辣的放在你網頁上，這個是一定要的。

方法二
HTML標籤的ALT屬性: 這個ALT的意思就是替代文字的意思，他的原始用途是說在那些無法顯示圖片的瀏覽器當中，可以顯示出替代的文字。但後來漸漸被運用到成為圖形檔的說明文字之上。

JavaBean簡介

2009-08-10T20:46:00.004+08:00

開發JSP網頁程式的過程中，如果需要的應用程式功能已經存在其他網頁，最快的方法便是重複使用相同的程式碼，將內容複製到新的網頁，或是直接將其載入。

當應用程式的規模越來越大，複製程式碼的做法很容易就會導致程式碼維護上的困難，為了維持不同版本之間功能的完整與一致性，每次修改原始版本的程式碼，其複本的程式碼必須一併作更動，當一份程式碼同時被數十甚至數百個網頁使用的時候，你所開發的JSP網頁系統將會變成一場災難。

解決程式碼重複使用的問題有很多種方式，其中一種比較簡單的作法便是將其寫成副程式網頁，其他的程式設計人員只需引用這個網頁即可獲得相同的功能而不需重新開發，當相同的功能需要調整的時候，只需修改幅程式即可將所做的改變，直接反應到使用此副程式的所有網頁。

JSP網頁取得外部檔案，並且將其嵌入目前的網頁中，由於顯露在外的程式碼非常容易被更改，因此很快的便導致各種不同的版本產生，如下圖：

為了徹底解決程式碼重複使用的問題，同時建立強固的商業及應用程式，元件化的程式技術被發展出來，提供這一方面相關問題的最佳解決方案。

JavaBean是一種可跨平台且重複使用的Java標準元件，通常用來設計一些特定功能的小程式，簡單的說就是可在JSP網頁中執行的Java程式，我們可把JavaBean想像為功能特定且可重複使用的副程式，當應用程式需要提供相同的特定功能，只需直接引用編譯好的JavaBean元件，而不需撰寫重複的程式碼。

以上為JavaBean運作的示意圖，JavaBean經過編譯成為類別檔，它由原始程式碼產生，然後由網頁所引用，這個過程是單向的，使用JavaBean的網頁並不能修改已編譯後的類別檔，也因此可以保證所有的網頁使用的都是同一個版本，同時由於類別檔是編譯過的元件，因此非常容易被其他的應用程式所引用。

大型的JSP應用系統非常依賴JavaBean元件，它們用來封裝所有包含運算邏輯的程式碼，畫面資料的輸出與展示的部份則交由網頁程式，如此一來，當JSP網頁需要JavaBean元件的功能，只需於網頁中直接引用此元件即可，除了達到簡化JSP程式架構、程式碼重複使用的目的之外，同時提供應用程式擴充與修改更大的彈性。

Samba伺服器

2009-08-06T16:11:00.002+08:00

在一般的區域網路中 (LAN) 如果都是 Windows 電腦，那麼使用『網路上的芳鄰』這個功能，就可以讓不同的 Windows 電腦分享彼此的檔案囉！但萬一這個 LAN 裡面有個 Linux 主機時，要怎麼讓 Linux 也加入這個 Windows 電腦當中的『網路上的芳鄰』呢？也就是說，讓 Windows 電腦可以透過『網路上的芳鄰』來存取 Linux 主機上面的檔案！呵呵！那就是 SAMBA 這個伺服器的主要目的了！SAMBA 是很有用的一個伺服器，可以讓您的 Linux 剎那間成為一個檔案伺服器 (File Server)，並提供整個 LAN 裡面的 Windows 很簡單的就可以對 Linux 主機進行檔案的存取動作。不僅如此， SAMBA 也可以讓 Linux 上面的印表機成為印表機伺服器 (Printer Server) 。

在早期的網路世界當中，檔案資料在不同主機之間的傳輸大多是使用 FTP 這個好用的伺服器軟體來進行傳送。不過使用 FTP 傳輸檔案卻有個小小的問題，那就是無法直接修改主機上面的檔案資料！也就是說，想要更改 Linux 主機上面的某個檔案時，必須要將該檔案自伺服器上下載下來後才能修改。也因此該檔案在伺服器與用戶端都會存在。這個時候，萬一如果有一天修改了某個檔案，卻忘記將資料上傳回主機，那麼等過了一陣子之後，將如何知道那個檔案才是最新的呢？

讓檔案在兩部主機之間直接修改
既然有這樣的問題，那麼好吧，我可不可以在用戶端的機器上面直接取用 server 上面的檔案，如果可以在用戶端直接進行 Server 端檔案的存取，那麼我在用戶端就不需要存在該檔案資料囉，也就是說，我只要有 Server 上面的檔案資料存在就可以啦！有沒有這樣的檔案系統啊 (File System)！很高興的是，前面我們已經提過的 Network File System, NFS 就是這樣的檔案系統之一啦！我只要在用戶端將 Server 所提供分享的目錄掛載進來，那麼在用戶端的機器上面就可以直接取用 Server 上的檔案資料囉，而且，該資料就像是我用戶端上面的 partition 一般，真是好用！

而除了可以讓 Unix Like 的機器互相分享檔案的 NFS 伺服器之外，在微軟 (Microsoft) 作業系統上面也有類似的檔案系統，那就是 Common Internet File System, CIFS 這個咚咚啦！CIFS 最簡單的想法就是目前常見的『網路上的芳鄰』咯！ Windows 系統的電腦可以透過桌面上『網路上的芳鄰』來分享別人所提供的檔案資料哩！真是方便。不過，NFS 僅能讓 Unix 機器溝通， CIFS 只能讓 Windows 機器溝通。傷腦筋，那麼有沒有讓 Windows 與 Unix-Like 這兩個不同的平台相互分享檔案資料的檔案系統呢？

利用封包偵測逆向工程發展的 SMB Server
在 1991 年一個名叫 Andrew Tridgwell 的大學生就有這樣的困擾，他手上有三部機器，分別是跑 DOS 的個人電腦、DEC公司的 Digital Unix 系統以及 Sun 的 Unix 系統。在當時， DEC 公司有發展出一套稱為 PATHWORKS 的軟體，這套軟體可以用來分享 DEC 的 Unix 與個人電腦的 DOS 這兩個作業系統的檔案資料，可惜讓 Tridgwell 覺得較困擾的是，Sun 的 Unix 無法藉由這個軟體來達到資料分享的目的。

這個時候 Tridgwell 就想說：『咦！既然這兩部系統可以相互溝通，沒道理 Sun 就必需這麼苦命吧？可不可以將這兩部系統的運作原理找出來，然後讓 Sun 這部機器也能夠分享檔案資料呢？』，為了解決這樣的的問題，他老兄就自行寫了個 program 去偵測當 DOS 與 DEC 的 Unix 系統在進行資料分享傳送時所使用到的通訊協定資訊，然後將這些重要的資訊擷取下來，並且基於上述所找到的通訊協定而開發出Server Message Block (SMB) 這個檔案系統，而就是這套 SMB 軟體就能夠讓 Unix 與 DOS 互相的分享資料囉！

SAMBA 常見的應用
分享檔案與印表機服務；
可以提供使用者登入 SAMBA 主機時的身份認證，以提供不同身份者的個別資料；
可以進行 Windows 網路上的主機名稱解析 (NetBIOS name)
可以進行裝置的分享 (例如 Zip, CDROM...)

Java Servlet與JSP程式

2009-08-05T16:29:00.004+08:00

JSP與Java Servlet皆是在伺服端執行程式，同樣也是用來設計互動式網頁上的技術，既然這二者之間有著這些共通處，那它們兩者之間又有何不同呢？

Java servlet(底下通稱為servlet)本身就是一種Java程式，主要是應用在網頁上的一種伺服端技術，與JSP有著相當密切的關係，底下就其特性與架構進行基礎的說明。

servlet的特性
servlet出現之前，程式設計人員使用一種簡稱為CGI(Common Gateway Interface)的技術設計伺服端執行的動態網頁，達到與web使用者雙向動態溝通的目的。由於CGI程式每執行一次便會產生一個新的行程(Process)，一定數量的連線人數便會輕易的佔用掉Server端龐大的系統資源，快速降低系統的執行效率。

CGI另一項致命的缺陷同樣與其所產生的行程有關，由於各行程本身獨立且彼此無法溝通，導致連線過程當中，各種資訊的傳遞難以被處理。

servlet透過多執行緒機制解決行程所衍生的諸多問題，相較於行程，執行緒所耗用的資源相當輕，同時一個行程可執行多個執行緒而不會有效能上的問題，同時由於連線狀態均由同一個行程作處理，因此可以輕易的讓各階段的連線進行溝通。

servlet程式執行之前必須經過編譯，而產生的class檔案則存放在伺服端電腦的固定資料夾下，當客戶端使用者對伺服器提出請求時，則會自動執行被請求的servlet程式，最後再回應給客戶端所需的資料。

除了傳統CGI所面臨的問題，servlet另一項優勢在於由標準的Java所寫成，而Java語言的特性之一就是跨平台，也因此servlet自然的擁有跨平台的能力。只要支援servlet語言的網頁伺服器都能順利的執行servlet程式。

servlet的架構
雖然說servlet本身就是個Java程式，但它在架構上卻和Java程式有所不同。servlet程式中並沒有main()這個方法，此為它和Java程式主要的不同處。此外，設計servlet程式必須使用javax.servlet及javax.servlet.http這二個套件下的類別及介面。

下面讓我們概略地解說這兩個套件在設計伺服器端程式上的用途：
javax.servlet：在這個套件底下所定義的是一些和FTP協定無關的類別及介面，主要是用來協助servlet程式處理客戶端送來地請求或將servlet執行的結果傳給客戶端。
javax.http.servlet：這個套件則是繼承自上一個Javax.servlet套件，並增加了與HTTP協定有關的類別及介面，例如處理SMTP或HTTP協定之類別或介面。

除了上述支援servlet的專屬套件，servlet程式事實上同樣可以存取Java本身所提供的眾多類別API，這也大大的提升了servlet應用程式的強度與擴充能力，透過Java的結合，servlet可以在網頁上完成幾乎傳統應用程式才能達到的功能。

上傳與維護網站

2009-08-04T17:09:00.006+08:00

申請放置網站的空間
若要架設網站，需要一部24小時不停運作的主機來放置網站檔案，為節省成本，通常我們是向有提供網站空間服務的公司(例如：中華電信、Sonet...)租用伺服器上的網站空間來放置網站。在比較時可依你網站的需求，朝下列幾個方向進行評估：

1.網站主機在國內或國外
2.網站空間的費用與容量
3.是否支援程式或資料庫
4.檔案的上傳方式
5.免費廣告的干擾
6.安全性與流量

無論申請哪一家業者的網站空間，都會附帶專屬的網站，例如"http://www.你的帳號+主機名稱.com"，經常是又臭又長，很難記憶。你可以考慮向財團法人台灣網路資源中心TWNIC(http://www.twnic.net)這個機構付費購買一個正式的網址(例如http://www.flag.com.tw)，再透過轉址的設定，就能讓網址和你的網站產生連結。

上傳網站
網站空間申請好以後，接着就要將電腦裡的網站上傳到Web伺服器了。Dreamweaver已經內建FTP功能，若要使用此功能，務必申請支援FTP上傳功能的網站空間(例如http://ihost.tw/)，取得上傳時必須的FTP帳號、登入密碼等資訊。

定義本地與遠端網站
為了讓Dreamweaver知道檔案要上傳到哪裡，首先要讓定義好本地與遠端網站，「本地」就是我們自己的電腦，而「遠端」指的就是要上傳的電腦。

與遠端伺服器連結
設定好遠端網站之後，按下連線至遠端主機鈕，才會連結到遠端伺服器並登入。若連接失敗，請檢查帳號、密碼或FTP位址有無輸入錯誤，有時也可能是網路太慢造成連結錯誤，你可以稍等一下連結看看。

上傳整個網站
經過前面的設定後，終於可以開始上傳檔案了，由於這是我們第一次上傳，所以要將所有的檔案都上傳到遠端網站上。檔案上傳完畢後，只要在瀏覽器輸入申請的網址，就能瀏覽和測試自己的網站了。以後若要再將網站上傳到同樣的遠端主機，就不必再重新設定FTP主機位址了，只要在按一次「連線至遠端主機」鈕，就可以立即連結到遠端網站並傳輸檔案。

HTML表單與JSP的應用

2009-08-03T16:30:00.004+08:00

JSP從標籤FORM所構成的表單區塊中，取得使用者於其中特定欄位輸入的資料內容，進行的邏輯運算之後，產生符合條件需求的網頁內容，重新將結果回傳給瀏覽器，整個過程如下圖所示：

圖中左半部為瀏覽器解譯網頁的部份，右半部則是Tomcat伺服器，當使用者於提供JSP網頁的內容填入資料之後，重新回傳至Tomcat啟動資料處理網頁，其中的JSP程式碼進行資料的處理運算，同時輸出結果網頁，重新傳送至瀏覽器。

整個過程中，處理資料網頁、原始資料網頁以及結果輸出網頁，可以是同一份JSP網頁檔案或是不同的JSP檔案，端視JSP程式開發人員的設計而定。

JSP網頁透過HTML表單欄位，取得使用者輸入的資料內容，依據使用者的需求與特定運算邏輯，於同一份JSP檔案展現不同的網頁結果，達到與使用者互動的目的，因此HTML表單欄位標籤對JSP而言，相當的重要，沒有視窗物件的輔助，動態網頁的技術將成為空談。

IIS與其他Web伺服器應用程式

2009-07-31T22:45:00.004+08:00

網際網路資訊服務(Internet Onformation Services，IIS)基本上是一組以TCP/IP為主的服務所組成的，它們都在同一個系統上執行。雖然其中有些服務需要依賴他們之間的共用元件，但是整體而言，它們彼此之間的功能是相互獨立的。就像電匠針對不同的工具來應付。IIS對於不同的需求也有不同的Internet功能來負責。Windows Server 2003內附的IIS是第6版，接下來我們要開始說明IIS 6中內含的某些標準功能。

Web(HTTP)伺服器
IIS中含一個HTTP伺服器，讓你可以快速容易地將資料公佈(publish)到全球資訊網(World Wide Web，WWW)上。IIS的Web服務很容易設定，而且很可靠，另外它還支援安全性與加密功能，以保護機密資料。

你可以使用IIS的Web服務，在你自己的網域或多重網域，甚至是企業內部網路(intranet)或Internet上架一個網站，還能允許使用者穿過IIS Web伺服器，來存取在公司內電腦裡的HTML文件。

假如你曾經使用過Windows 2000 Server和IIS，應該知道Windows 2000 Server的預設安裝也會一起自動安裝IIS 5，包括幾乎所有的選用元件也都一起安裝了。不過Windows Server 2003重視安全性勝過便利性，因此Windows Server 2003預設並未安裝IIS 6；而且IIS 6的預設安裝功能只服務靜態內容，也就是說預設的服務組態設定並不處理網頁內嵌入的任何指令檔或程式碼。而支援Active Server Pages、Server Side Includes，以及FrontPage伺服器擴充功能(它可以讓用戶端使用Microsoft FrontPage來公佈和管理網站)的元件，預設並不安裝。基本上，所有可能會有安全上顧慮的東西都必須另外指定安裝或啟用才能使用。

檔案傳輸(FTP)伺服器
雖然File Transfer Protocol並不是傳送檔案的唯一方式，但是它是Internet最早也最廣泛使用的應用之一，遠在有圖形化的瀏覽器、HTTP或網站這些東西之前，就有這個通訊協定了。正由於它的歷史悠久且使用廣泛，因此幾乎任何平台都支援它，甚至是許多沒有支援HTTP的中型電腦或大型主機也是。

在IIS 6裡的FTP服務，現在多支援了個別使用者目錄的能力。這個功能是讓使用者只能存取私用的目錄，避免看到或寫入不是他自己的目錄。

網路新聞(NNTP)伺服器
Network News Transport Protocol(NNTP)有時候被稱為Usenet，由於它是根據Internet標準RFC 977，因此NNTP服務可以被用來維護IIS伺服器上的threaded交談(conversation)資料庫，就像在Internet上的Usenet群組一樣。用戶端如果有設定適當的新聞讀取程式，就可以瀏覽與參加這些交談資料庫。

雖然最近如Google Groups(http://groups.google.com)廣為宣傳Usenet，但是它還是不如HTTP那麼使用廣泛。這是很可惜的現象，因為NNTP是個很棒的跨平台通訊協定，用來管理threaded交談資料庫。希望在NNTP開始納入IIS後，會有越來越多人使用這個功能。

電子郵件服務
Microsoft是在IIS 5的時候內建了SMTP服務，不過它的功能不足以勝任企業內的電子郵件伺服器。IIS 5內建SMTP服務最主要是為了支援在IIS中的其他服務，也就是HTTP和NNTP。IIS 5內建的SMTP服務缺乏一個最重要的元件：一個POP3或IMAP服務。POP3或IMAP正是用戶端自電子郵件伺服器的信箱中擷取特定訊息所使用的方法。SMTP提供針對郵件的「儲存和轉寄」(store-and-forward)方面的服務，但是並不支援個人使用者信箱，也沒有提供擷取郵件的方法。假如你需要一個架構在Windows 2000之上的郵件伺服器，就必須另外使用包含有POP3或IMAP功能的產品，或是使用如EMWACS SMTP/POP3這一類的免費伺服器產品。

現在Windows Server 2003有內建POP3服務，它可以與SMTP服務搭配一起提供一個非常簡單但是可以運作的郵件伺服器平台。雖然在技術上它不是IIS服務的一部分，而且一定要分開安裝，但是對於一些只需要基本的電子郵件功能的企業而言，它的確提供了一個比Exchange或其他市售郵件伺服器產品更簡單(也更便宜)的解決方案。

在網頁中加入多媒體檔案

2009-07-30T16:14:00.005+08:00

加入FLASH動畫
我們常在網頁上看到Flash動畫(副檔名為*.swf，因此也可稱為SWF動畫)，檔案小且不易失真，可以說是目前最廣泛用於網頁的動畫格式。

加入Flash動畫之前的準備工作：
1.安裝Flash Player，以便用瀏覽器觀看動畫。
2.解除瀏覽器對ActiveX元件的封鎖。
3.下載與安裝Firefox相容的Flash Player。

加入Flash動畫的方法
方法1：從｢插入｣面板加入Flash動畫。
方法2：從｢檔案｣面板加入Flash動畫。
方法3：從｢資源｣面板加入Flash動畫。

加入FLV視訊影片
許多人會把影片放到網頁中和親友分享，然而視訊檔案的體積通常很大，常讓瀏覽者耗費時間等待下載。如果你要加入網頁的影片還不是FLV格式(副檔名為*.flv)，請先透過FLV影片轉檔軟體來轉換格式。只要安裝Flash CS3以上的版本，即可使用隨附的Flash Video Encoder來轉檔，或者也可上網以"FLV Encoder"等關鍵字來搜尋及下載其它免費的FLV轉檔軟體來轉換格式。

加入背景音樂
在網頁中除了豐富的圖文內容，如果再配上好聽的音樂，會更吸引人喔！目前可運用在網頁中的音樂格式有wav、midi、au、mp3...等，不過考量到檔案的大小及瀏覽器的支援度等因素，大多採用mp3格式做為網頁的背景音樂。當我們要在網頁中瀏覽多媒體檔案，必須先在瀏覽器中安裝可播放該格式的外掛程式才能順利瀏覽。

PsExec簡介

2009-07-29T15:46:00.005+08:00

公用程式中的 Telnet 和遠端控制程式中的 Symantec PC Anywhere，都可以讓您在遠端系統上執行程式，但是設定起來很麻煩，而且您必須在要存取的遠端系統上安裝用戶端軟體。PsExec 是一種輕量的 Telnet 替代品，讓您能夠在其他系統上執行處理程序，並且不需要手動安裝用戶端軟體，就可以使用主控台應用程式的完整互動功能。PsExec 最強大的功能包含啟動遠端系統上的互動式命令提示，還有 IpConfig 這類的遠端啟用工具，否則無法顯示遠端系統的相關資訊。

附註：部分掃毒程式會報告一或多個工具受到 remote admin 病毒的感染。PsTools 本身並未包含任何病毒，它們只是受到病毒利用，因此才會觸發病毒通知。

安裝
只要將 PsExec 複製到可執行路徑 (c:\windows\system32)，然後輸入 "psexec"，就會顯示它的使用語法。

使用方法
psexec [\\computer[,computer2[,...]| @file][-u user [-p psswd]][-n s][-l][-s|-e][-x][-i [session]][-c [-f|-v]][-w directory][-d][-][-a n,n,...] cmd [arguments]

computer
引導 PsExec 在指定的一或多部電腦上執行應用程式。如果省略電腦名稱，則 PsExec 會在本機系統執行應用程式；如果輸入電腦名稱 "\\*"，則 PsExec 會在目前網域中的所有電腦執行應用程式。

@file
引導 PsExec 在指定文字檔列出的每部電腦上執行命令。

-a
以逗號隔開可以執行應用程式的處理器，其中 CPU 的最小編號是 1。例如，若要在 CPU 2 和 CPU 4 執行應用程式，請輸入："-a 2,4"

-c
將指定的程式複製到遠端系統以便執行。如果省略這個選項，則該應用程式必須位於遠端系統的系統路徑。

-d
不等候應用程式終止。只有針對非互動式應用程式，才需使用這個選項。

-e
不載入指定的帳戶設定檔。

-f
將指定的程式複製到遠端系統 (即使檔案已經存在於遠端系統)。

-i
執行程式，讓它可以跟遠端系統上指定之工作階段的桌面互動。如果未指定工作階段，則處理程序會在主控台工作階段中執行。

-l
以限制使用者的身分執行處理程序 (卸除 Administrators 群組，而且只允許指派給 Users 群組的權限)。在 Windows Vista 中，會使用低整合性來執行處理程序。

-n
指定連線至遠端的電腦逾時 (秒)。

-p
指定選擇性使用者名稱密碼。如果省略這個動作，則會出現輸入隱藏密碼的提示。

-s
使用 System 帳戶執行遠端處理程序。

-u
指定用來登入遠端電腦的選擇性使用者名稱。

-v
當指定的檔案具有較新的版本號碼，或是比遠端系統中的版本還要新時，才複製指定的檔案。

-w
設定處理程序的工作目錄 (相對於遠端電腦)。

-x
顯示 Winlogon 桌面的 UI (僅限本機系統)。

-priority
指定 -low、-belownormal、-abovenormal、-high 或 -realtime，依不同的優先順序來執行處理程序。使用 -background，可以在 Vista 上用很少的記憶體和較低的 I/O 優先順序來執行

program
要執行的程式名稱。

arguments
要傳遞的引數 (請注意，檔案路徑必須是目標系統上的絕對路徑)。

您可以用引號括住名稱中有空格的應用程式，例如，psexec \\marklap "c:\long name\app.exe"。只有在按下 Enter 鍵時，才會將輸入傳遞給遠端系統，而輸入 Ctrl-C 則會終止遠端處理程序。

如果您省略使用者名稱，則會使用執行 PsExec 的相同帳戶來執行遠端處理程序，但是因為遠端處理程序正在進行模擬，所以它並無法存取遠端系統上的網路資源。當您指定使用者名稱時，就會使用指定的帳戶來執行遠端處理程序，而且會存取該帳戶可以存取的任何網路資源。請注意，密碼會以純文字形式傳輸給遠端系統。

因為 PsExec 不需要使用系統管理員身分就可以執行，所以將本機系統當做目標時，可以將目前的 PsExec 版本當成 Runas 的替代品。

範例：
c:\>psexec \\140.137.215.118 -u bar -p 1234 cmd.exe
C:\>shutdown /s