如何令你的網站“動感十足”
作 者 : 天驕創作室書生
第一章華山論“劍”，尋覓稱手的兵刃
您的網站是否仍一如既往地保持“靜態”？目前呈幾何增長的互聯網網站中，有相當一部分仍固守“靜態”，無形中已大大落后于時代的步伐。所謂“靜態”指的就是網站的網頁內容“固定不變”，當用戶瀏覽器通過互聯網的HTTP（Hypertext Transport Pr otocol）協議向WEB服務器請求提供網頁內容時，服務器僅僅是將原已設計好的靜態HTML文檔傳送給用戶瀏覽器。其頁面的內容使用的僅僅是標準的HTML代碼，最多再加上流行的GIF89A格式的動態圖片，比如產生幾只小狗小貓跑來跑去的動畫效果。若網站維護者要更新網頁的內容，就必須手動地來更新其所有的HTML文檔。
“靜態”網站的致命弱點就是不易維護，為了不斷更新網頁內容，你必須不斷地重復制作HTML文檔，隨著網站內容和信息量的日益擴增，你就會感到工作量大得出乎想象。
你不禁要問：那么什么是動態網站呢？這就是本文將重點講述的核心，所謂“動態”，并不是指那幾個放在網頁上的GIF動態圖片，在這里筆者為動態頁面的概念制定了以下幾條規則：
1、“交互性”即網頁會根據用戶的要求和選擇而動態改變和響應，將瀏覽器作為客戶端界面，這將是今后WEB發展的大事所趨。
2、“自動更新”即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節省工作量。
3、“因時因人而變”，即當不同的時間、不同的人訪問同一網址時會產生不同的頁面，是不是很酷？
現在你已經對“動態”網站有了一個基本的概念，接下來應挑選稱手的“兵刃”了。將網站“動態”化的方法很多，這要看你是出于何種需求。如果你是個人網站的維護者，使用的是免費主頁空間，那么絕大多數情況下你只能使用Java、Java Script和最新的DHTML技術，如果你的主頁空間提供者能給予你CGI權限或ASP支持，那么你將能非常幸運地發揮真正的動態技術。關于CGI和ASP技術將在后面的著重討論，這里針對個人網站僅就最新的DHTML技術進行重點介紹。
究竟什么是DHTML？它與傳統的HTML有什么不同？DHTML就是當網頁從WEB服務器下載后無須再經過服務器的處理，而在瀏覽器中直接動態地更新網頁的內容、排版樣式、動畫。比如，當鼠標移至文章段落中，段落能夠變成藍色，或者當你點擊一個超鏈后會自動生成一個下拉式的子超鏈目錄。這就是Dynamic HTML（動態HTML），它是近年來網絡飛速發展進程中最振奮人心也是最具實用性的創新之一。它是一種通過各種技術的綜合發展而得以實現的概念，這些技術包括Java Script , VB0Script, Document Object Model (文件目標模塊)，Layers和Cascading Style Sheets ( CSS樣式表)等。非常遺憾的是在網景Netscape和微軟IE瀏覽器幾番大戰后，我們仍沒有得到一個對DHTML支持的統一標準。因此本文在介紹DHTML時不得不分別講述。讓我們先來看看Microsoft IE 4對DHTML的支持：
1 .動態內容（Dynamic Content）：動態地更新網頁的內容，可"動態"地隨時插入、修改、或刪除網頁的元件，譬如文字、標記等。
2 .動態排版樣式（Dynamic Styles Sheets）：通過W3C的“Cascading Style Sheets”（串聯式排版樣式，簡稱CSS1或CSS），提供了設定HTML標記的字體大小、字型、粗細、字型樣式、行高度、文字顏色、加底線或加中間橫線、與邊緣距離、靠左右或置中、縮排、背景圖片或顏色等排版功能。而“動態排版樣式”，可以“動態”地隨時地改變排版樣式。
3 .動態定位（Dynamic Positioning）：通過W 3 C的“Working Draft on Positioning HTML with Cascading Style Sheets”，提供HTML元件在X、Y、Z軸的定位功能，讓設計者可以放置影像、控件、文字等在網頁上的任何位置上。而放置在不同的Z軸上，設計者就可以產生重疊的效果。
4 .內建資料處理（Data Awareness）：無須復雜的程序，無須花費服務器太多資源，即可讓網頁設計者即時處理文檔。
5 .內建多媒體支援：IE 4.0結合CSS與內建的ActiveX Controls，提供多媒體支持的功能，包括轉換特效、濾鏡特效、路徑控制、順序控制、動畫、制圖、播放聲音和影像等多媒體功能。
讓我們再來看看Netscape Communicator 4.0對DHTML所提供的支持：
1 .動態排版樣式（Dynamic Styles Sheets）：支援W 3 C的“Cascading Style Sheets”（串聯式排版樣式，簡稱CSS1或CSS）、和自創的“Java Script Style Sheets”。
2 .Dynamic Layers：提供圖文定位、改變圖文重疊順序、控制隱藏或顯示圖文、移動圖文的功能，讓您設計出“動畫”的效果！
3 .Dynamic Fonts：提供由服務器下載字型的功能。可見雖然IE 4.0和Netscape Communicator 4.0都提供了“Dynamic HTML”的支持，但是事實上兩者除了對“Cascading Style Sheets”的規格相近外，其余都相差甚遠。因此當你設計DHTML頁面時必須充分考慮到兼容性的問題，選擇稱手的“兵刃”和方法對于設計者來說始終是最重要的。有關DHTML的使用方法和設計技巧作者將在第二章《動態網頁設計十八般武藝》中仔細講解，請密切關注。
或許對于一個個人網站來說充分運用DHTML技術足以令網頁栩栩如生，動感十足。然而對于建立商業網站的企業而言，僅僅擁有DHTML是遠遠不夠的。因為僅僅發生在客戶瀏覽器端的動態效果是無法滿足商業網站大量信息查詢，客戶咨詢，資源交互等“動態”需求的。因此作為商業網站的設計者，必須要設計出更具實用性和交互性的“動態”網站。由于絕大多數商業網站都具有大量的數據和信息，而建網的初衷也就是在于方便客戶查詢企業資料，方便同客戶的交流，及時獲得信息反饋。那么，就必然會面臨如何讓使用者在瀏覽器界面中，通過互聯網或內聯網（Intranet）查詢WEB數據庫的資料，甚至輸入、更新和刪除WEB服務器上的資料。下面筆者就簡單介紹幾種常用的“動態”網站設計方法：
1、CGI（Common Gateway Interface）通用網關接口的傳統方式，當用戶在瀏覽器端填好表單（form）要求輸入的資料，提出HTTP請求后，WEB服務器端將執行一個表單所設定的可執行的CGI應用程序，CGI程序分析表單（form）中所輸入的資料，存取WEB數據庫，將查詢執行的結果以HTML的格式返回給瀏覽器。使用CGI方式存取WEB數據庫，有很多的缺點，譬如不易開發、變更修改成本高、功能有限、不易偵錯、執行速度慢等，而且由于并非整合于HTML文檔之中，因此必須使用與HTML完全不同的設計過程來設計一個可執行的應用程序。
2、IDC（Internet Database Connector）互聯網數據庫連接頭是Windows NT Server內含Internet Information Server（簡稱IIS）2.0的特征之一，它提供了一種使你的互聯網數據庫內容得以發布并可與用戶交互的方法，它實際上是一個包含于IIS中的I S A P I應用程序。你只需掌握HTML和SQL的基本知識并寫為數不多的代碼就能編出具有交互能力的數據庫應用程序，讓使用者在瀏覽器界面中得以查詢、輸入、更新、和刪除WEB服務器上的數據資料。正如VB程序員所喜歡的那樣，構成IDC應用程序的文件是解釋性的，由于設計簡易，只要準備兩個檔案，即可在用戶端的瀏覽器中存取WEB服務器的數據資料，且無須編譯，因此具有快速的開發循環和反饋。但這種簡單性的代價是犧牲了許多靈活性，使你不得不放棄許多對用戶接口的控制，并幾乎放棄了所有驗證數據的能力。因而I D C僅適用于簡單的WEB應用程序。
3、ActiveX Data Object（ADO）是WEB數據庫應用的最佳選擇。
ActiveX Data Object（簡稱ADO）究竟是什么呢？ActiveX Data Object的技術，讓您可以與Active Server Pages（簡稱ASP）結合以建立提供數據資訊的網頁內容，只需在網頁面中執行Structured Query Language（結構化查詢語言，簡稱SQL）指令，讓用戶在瀏覽器界面中輸入、更新、和刪除WEB服務器上的數據資料。當用戶端的瀏覽器填好表單所要求輸入的資料并按下“Submit”按鈕后，經過互聯網、內聯網傳送HTTP請求到WEB服務器，該請求在WEB服務器執行一個表單所指定的Active Server Pages程序（后綴名為. ASP的文檔）。一個. ASP文檔是一個純文字檔，包括：HTML標記（tags）、VBScript或JScript語言的程序代碼、ASP語法、和結構化查詢語言SQL指令。IIS3.0 / 4.0 WEB服務器執行. ASP文檔，通過ODBC驅動程式，連接到支持ODBC的數據庫上，執行ASP文檔所指定的SQL指令，最后將執行的結果以HTML的格式傳送給用戶瀏覽器。ADO具有容易使用、開發執行快速、消耗系統資源較少，和占用磁盤空間小等優點。
以上就是目前設計商業網站常用的“動態”技術，由于本人的工作和使用經驗，筆者較傾向于ADO和ASP的結合，從長遠來看這對搭檔也勢必成為今后一段時間內“動態”WEB的核心技術。因此在本文第二章《動態網頁設計十八般武藝》中，筆者將就ADO和ASP的使用進行展開講述，敬請期待。
第一章華山論“劍”，尋覓稱手的兵刃
您的網站是否仍一如既往地保持“靜態”？目前呈幾何增長的互聯網網站中，有相當一部分仍固守“靜態”，無形中已大大落后于時代的步伐。所謂“靜態”指的就是網站的網頁內容“固定不變”，當用戶瀏覽器通過互聯網的HTTP（Hypertext Transport Pr otocol）協議向WEB服務器請求提供網頁內容時，服務器僅僅是將原已設計好的靜態HTML文檔傳送給用戶瀏覽器。其頁面的內容使用的僅僅是標準的HTML代碼，最多再加上流行的GIF89A格式的動態圖片，比如產生幾只小狗小貓跑來跑去的動畫效果。若網站維護者要更新網頁的內容，就必須手動地來更新其所有的HTML文檔。
“靜態”網站的致命弱點就是不易維護，為了不斷更新網頁內容，你必須不斷地重復制作HTML文檔，隨著網站內容和信息量的日益擴增，你就會感到工作量大得出乎想象。
你不禁要問：那么什么是動態網站呢？這就是本文將重點講述的核心，所謂“動態”，并不是指那幾個放在網頁上的GIF動態圖片，在這里筆者為動態頁面的概念制定了以下幾條規則：
1、“交互性”即網頁會根據用戶的要求和選擇而動態改變和響應，將瀏覽器作為客戶端界面，這將是今后WEB發展的大事所趨。
2、“自動更新”即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節省工作量。
3、“因時因人而變”，即當不同的時間、不同的人訪問同一網址時會產生不同的頁面，是不是很酷？
現在你已經對“動態”網站有了一個基本的概念，接下來應挑選稱手的“兵刃”了。將網站“動態”化的方法很多，這要看你是出于何種需求。如果你是個人網站的維護者，使用的是免費主頁空間，那么絕大多數情況下你只能使用Java、Java Script和最新的DHTML技術，如果你的主頁空間提供者能給予你CGI權限或ASP支持，那么你將能非常幸運地發揮真正的動態技術。關于CGI和ASP技術將在后面的著重討論，這里針對個人網站僅就最新的DHTML技術進行重點介紹。
究竟什么是DHTML？它與傳統的HTML有什么不同？DHTML就是當網頁從WEB服務器下載后無須再經過服務器的處理，而在瀏覽器中直接動態地更新網頁的內容、排版樣式、動畫。比如，當鼠標移至文章段落中，段落能夠變成藍色，或者當你點擊一個超鏈后會自動生成一個下拉式的子超鏈目錄。這就是Dynamic HTML（動態HTML），它是近年來網絡飛速發展進程中最振奮人心也是最具實用性的創新之一。它是一種通過各種技術的綜合發展而得以實現的概念，這些技術包括Java Script , VB0Script, Document Object Model (文件目標模塊)，Layers和Cascading Style Sheets ( CSS樣式表)等。非常遺憾的是在網景Netscape和微軟IE瀏覽器幾番大戰后，我們仍沒有得到一個對DHTML支持的統一標準。因此本文在介紹DHTML時不得不分別講述。讓我們先來看看Microsoft IE 4對DHTML的支持：
1 .動態內容（Dynamic Content）：動態地更新網頁的內容，可"動態"地隨時插入、修改、或刪除網頁的元件，譬如文字、標記等。
2 .動態排版樣式（Dynamic Styles Sheets）：通過W3C的“Cascading Style Sheets”（串聯式排版樣式，簡稱CSS1或CSS），提供了設定HTML標記的字體大小、字型、粗細、字型樣式、行高度、文字顏色、加底線或加中間橫線、與邊緣距離、靠左右或置中、縮排、背景圖片或顏色等排版功能。而“動態排版樣式”，可以“動態”地隨時地改變排版樣式。
3 .動態定位（Dynamic Positioning）：通過W 3 C的“Working Draft on Positioning HTML with Cascading Style Sheets”，提供HTML元件在X、Y、Z軸的定位功能，讓設計者可以放置影像、控件、文字等在網頁上的任何位置上。而放置在不同的Z軸上，設計者就可以產生重疊的效果。
4 .內建資料處理（Data Awareness）：無須復雜的程序，無須花費服務器太多資源，即可讓網頁設計者即時處理文檔。
5 .內建多媒體支援：IE 4.0結合CSS與內建的ActiveX Controls，提供多媒體支持的功能，包括轉換特效、濾鏡特效、路徑控制、順序控制、動畫、制圖、播放聲音和影像等多媒體功能。
讓我們再來看看Netscape Communicator 4.0對DHTML所提供的支持：
1 .動態排版樣式（Dynamic Styles Sheets）：支援W 3 C的“Cascading Style Sheets”（串聯式排版樣式，簡稱CSS1或CSS）、和自創的“Java Script Style Sheets”。
2 .Dynamic Layers：提供圖文定位、改變圖文重疊順序、控制隱藏或顯示圖文、移動圖文的功能，讓您設計出“動畫”的效果！
3 .Dynamic Fonts：提供由服務器下載字型的功能。可見雖然IE 4.0和Netscape Communicator 4.0都提供了“Dynamic HTML”的支持，但是事實上兩者除了對“Cascading Style Sheets”的規格相近外，其余都相差甚遠。因此當你設計DHTML頁面時必須充分考慮到兼容性的問題，選擇稱手的“兵刃”和方法對于設計者來說始終是最重要的。有關DHTML的使用方法和設計技巧作者將在第二章《動態網頁設計十八般武藝》中仔細講解，請密切關注。
或許對于一個個人網站來說充分運用DHTML技術足以令網頁栩栩如生，動感十足。然而對于建立商業網站的企業而言，僅僅擁有DHTML是遠遠不夠的。因為僅僅發生在客戶瀏覽器端的動態效果是無法滿足商業網站大量信息查詢，客戶咨詢，資源交互等“動態”需求的。因此作為商業網站的設計者，必須要設計出更具實用性和交互性的“動態”網站。由于絕大多數商業網站都具有大量的數據和信息，而建網的初衷也就是在于方便客戶查詢企業資料，方便同客戶的交流，及時獲得信息反饋。那么，就必然會面臨如何讓使用者在瀏覽器界面中，通過互聯網或內聯網（Intranet）查詢WEB數據庫的資料，甚至輸入、更新和刪除WEB服務器上的資料。下面筆者就簡單介紹幾種常用的“動態”網站設計方法：
1、CGI（Common Gateway Interface）通用網關接口的傳統方式，當用戶在瀏覽器端填好表單（form）要求輸入的資料，提出HTTP請求后，WEB服務器端將執行一個表單所設定的可執行的CGI應用程序，CGI程序分析表單（form）中所輸入的資料，存取WEB數據庫，將查詢執行的結果以HTML的格式返回給瀏覽器。使用CGI方式存取WEB數據庫，有很多的缺點，譬如不易開發、變更修改成本高、功能有限、不易偵錯、執行速度慢等，而且由于并非整合于HTML文檔之中，因此必須使用與HTML完全不同的設計過程來設計一個可執行的應用程序。
2、IDC（Internet Database Connector）互聯網數據庫連接頭是Windows NT Server內含Internet Information Server（簡稱IIS）2.0的特征之一，它提供了一種使你的互聯網數據庫內容得以發布并可與用戶交互的方法，它實際上是一個包含于IIS中的I S A P I應用程序。你只需掌握HTML和SQL的基本知識并寫為數不多的代碼就能編出具有交互能力的數據庫應用程序，讓使用者在瀏覽器界面中得以查詢、輸入、更新、和刪除WEB服務器上的數據資料。正如VB程序員所喜歡的那樣，構成IDC應用程序的文件是解釋性的，由于設計簡易，只要準備兩個檔案，即可在用戶端的瀏覽器中存取WEB服務器的數據資料，且無須編譯，因此具有快速的開發循環和反饋。但這種簡單性的代價是犧牲了許多靈活性，使你不得不放棄許多對用戶接口的控制，并幾乎放棄了所有驗證數據的能力。因而I D C僅適用于簡單的WEB應用程序。
3、ActiveX Data Object（ADO）是WEB數據庫應用的最佳選擇。
ActiveX Data Object（簡稱ADO）究竟是什么呢？ActiveX Data Object的技術，讓您可以與Active Server Pages（簡稱ASP）結合以建立提供數據資訊的網頁內容，只需在網頁面中執行Structured Query Language（結構化查詢語言，簡稱SQL）指令，讓用戶在瀏覽器界面中輸入、更新、和刪除WEB服務器上的數據資料。當用戶端的瀏覽器填好表單所要求輸入的資料并按下“Submit”按鈕后，經過互聯網、內聯網傳送HTTP請求到WEB服務器，該請求在WEB服務器執行一個表單所指定的Active Server Pages程序（后綴名為. ASP的文檔）。一個. ASP文檔是一個純文字檔，包括：HTML標記（tags）、VBScript或JScript語言的程序代碼、ASP語法、和結構化查詢語言SQL指令。IIS3.0 / 4.0 WEB服務器執行. ASP文檔，通過ODBC驅動程式，連接到支持ODBC的數據庫上，執行ASP文檔所指定的SQL指令，最后將執行的結果以HTML的格式傳送給用戶瀏覽器。ADO具有容易使用、開發執行快速、消耗系統資源較少，和占用磁盤空間小等優點。
以上就是目前設計商業網站常用的“動態”技術，由于本人的工作和使用經驗，筆者較傾向于ADO和ASP的結合，從長遠來看這對搭檔也勢必成為今后一段時間內“動態”WEB的核心技術。因此在本文第二章《動態網頁設計十八般武藝》中，筆者將就ADO和ASP的使用進行展開講述，敬請期待。