1 / 61

第 1 章 動態網頁設計概論

第 1 章 動態網頁設計概論. 製作. WWW 的基本觀念 - WWW 的誕生. WWW 的全文為 World Wide Web ，譯為 全球資訊網， 有人簡稱為 3W 。 WWW 的發源地為 歐洲量子物理實驗室 。 最初發展目的： 建立一個可以透過網路同時呈現文字、聲音、影像、圖形的分散式多媒體資訊系統。 不受瀏覽者所使用電腦系統種類的限制，達到跨平台共享資訊的目的 。. WWW 的基本觀念 - WWW 的架構. WWW 的架構主要分為兩個部份： 一 . 為伺服端 （ Server ，或稱遠端） 二 . 為客戶端 （ Client ，或稱近端）

sierra-mcclain
Download Presentation

第 1 章 動態網頁設計概論

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 1 章 動態網頁設計概論 製作

  2. WWW的基本觀念- WWW的誕生 • WWW的全文為World Wide Web，譯為全球資訊網，有人簡稱為3W。 • WWW的發源地為歐洲量子物理實驗室。 • 最初發展目的： • 建立一個可以透過網路同時呈現文字、聲音、影像、圖形的分散式多媒體資訊系統。 • 不受瀏覽者所使用電腦系統種類的限制，達到跨平台共享資訊的目的。

  3. WWW的基本觀念- WWW的架構 • WWW的架構主要分為兩個部份： 一.為伺服端（Server，或稱遠端） 二.為客戶端（Client，或稱近端） • 瀏覽器（Browser），是執行電腦上供使用者操作、觀看網頁的應用程式。

  4. WWW的基本觀念- WWW的架構 • 網頁的瀏覽過程： 由客戶端（瀏覽器）向伺服端（WEB伺服器）要求瀏覽某一網頁，Web伺服器便將該網頁傳送給瀏覽器，由瀏覽器負責解析網頁，並呈現給使用者觀看。

  5. WWW的基本觀念- URL位址 • URL（Uniform Resource Locator），譯為 統一資源定位器。 • URL用於指定欲取得Internet上資源之位置與取得方法，語法如下： [資源取用方法]://[伺服器位址]/[資料夾]/…/[檔 案名稱] • 常見的資源取用方法有http、ftp（檔案傳輸協定）、news（新聞傳輸協定）…等。

  6. WWW的基本觀念- HTTP通訊協定 • 當瀏覽器瀏覽網站時，將運用HTTP協定進行溝通，並採用請求/回應模式。 • 整個通訊過程瀏覽器與網站伺服器間，並不是一直保持連線狀態，而是瀏覽器發出請求，伺服端完成回應便斷線。 • 透過HTTP協定的連線是一種無狀態（stateless）的連線。

  7. WWW的基本觀念- HTTP通訊協定 • 請求訊息之內容，分為以下兩個部分： • HTTP請求 • HTTP表頭 • 網站伺服器接著傳送回應訊息給客戶端的瀏覽器，訊息內容將包含以下三個部分： • HTTP回應 • HTTP表頭 • 客戶端欲取得的資源

  8. WWW的基本觀念- HTTP通訊協定 • HTTP請求 • 一個HTTP請求包含三個欄位： 要求伺服器執行的方法 +資源位置 +瀏覽器支援的 HTTP協定版本 • 假若瀏覽器要求伺服器『取得』資源（GET方法），資源的位置在網站之根資料夾（/），用戶端使用的協定為HTTP 1.1版，則HTTP請求將如下所示： GET / HTTP/1.1

  9. WWW的基本觀念- HTTP通訊協定 • HTTP回應 • HTTP回應包含三個欄位，如下所示： 伺服器支援的HTTP協定版本+ 回應狀態碼 + 狀態碼的簡短說明 • 若瀏覽器正常回應瀏覽器的HTTP請求，則伺服器的HTTP回應將如下所示： HTTP/1.1 200 OK

  10. WWW的基本觀念- HTTP通訊協定 • HTTP表頭 • 當瀏覽端發出請求時，傳給伺服器的表頭常包含以下幾種常見的瀏覽器資訊： 1.接受的檔案格式 2.接受的語言 3.接受的壓縮格式 4.瀏覽器的版本 5. HTTP請求的伺服器位址 6.連結方式 • 伺服器回應瀏覽器時，常透過HTTP表頭傳送以下訊息給瀏覽器： 1.系統時間 2.伺服器的名稱與版本 3.連結方式 4.傳送使用的壓縮方式 5.傳送內容的型態

  11. WWW的基本觀念- HTTP通訊協定 • 客戶端欲取得的資源 • 伺服器的回應訊息裡，在HTTP回應與HTTP表頭後，將是瀏覽器欲請求的資源內容（檔案）。 • 對於HTML文件內連結的各項資源，瀏覽器均會另外發出請求訊息，自伺服端取得資源。

  12. 網頁的開發技術- 靜態網頁 vs. 動態網頁 • 靜態網頁與動態網頁的區別，是指網頁內容，是否能夠針對不同的網頁瀏覽情況，呈現不同的回應畫面。 • 靜態網頁：僅能產生相同畫面的網頁。 動態網頁：依據不同狀況，而做出回應。

  13. 網頁的開發技術- HTML語言 • 建構網頁（.htm檔）的最基礎技術為HTML語法（HyperText Makeup Language，譯為超文件標記語言），目前的版本為HTML 4.0。 • HTML用於描述超文件中，資料的呈現方式，從控制文字的顏色、大小，到標示資料的種類為圖檔或者聲音...等。

  14. 網頁的開發技術- 執行於客戶端的網頁程式語言 • 執行過程：將網頁自伺服器下載到客戶端，由瀏覽器負責解譯並執行，並在完成程式語言的執行後，將網頁顯示在瀏覽器中。

  15. 網頁的開發技術- 執行於伺服端的網頁程式語言 • CGI程式介面 客戶端網頁通常透過表單（Form）將資料送至伺服端，伺服端再透過CGI介面（Common Gateway Interface）將客戶端網頁的資料，轉傳給負責處理此訊息的程式。（請參考下一張圖示）

  16. 網頁的開發技術- 執行於伺服端的網頁程式語言

  17. 網頁的開發技術- 執行於伺服端的網頁程式語言 • Server的延伸API 許多Web伺服器廠商，開始提供所謂的Server延伸API（Application Programming Interface）： 提供程式開發人員延伸Server功能的程式設計介面，以取代CGI產生動態網頁，這類介面有微軟的ISAPI，以及Netscape的NSAPI（現稱 WAI）。

  18. 網頁的開發技術- 執行於伺服端的網頁程式語言 • 範本系統 範本系統（Template System）：是將程式碼嵌入HTML文件內。 • 所謂的範本，意指靜態HTML文件。 • 常見的範本系統： • ColdFusion 提供類似HTML標籤的ColdFusion標籤，協助使用者開發動態網頁，支援的平台有Windows與Unix。

  19. 網頁的開發技術- 執行於伺服端的網頁程式語言 • PHP 是由各國程式設計師自發性開發與維護的開放程式碼（open source），任何人均可取得原始碼免費使用，並可協助改進系統。 • ASP與ASP .Net • ASP（Active Server Page）為Microsoft的WEB伺服器 - IIS所提供的網頁語言執行環境，讓使用者可以運用<%與%>標籤，將Script語言的程式碼嵌入HTML文件。 • 隨著.NET Framework的發表，Microsoft也提出以.NET Framework為基礎的範本系統 - ASP .NET。

  20. 網頁的開發技術- 執行於伺服端的網頁程式語言 • JSP JSP（JavaServer Pages）是基於Java Servlet技術所發展的範本系統，方便運用Java技術的使用者開發動態網頁，建構Web應用程式。 （本書的內容將依據JSP 1.2版標準撰寫。JSP與Java Servlet的進一步說明，請參考1-3節。）

  21. 網頁的開發技術- 客戶端 vs. 伺服端 • 以下是客戶端上執行之程式所擅長的工作： • 檢查使用者輸入於網頁表單內，欲傳遞到伺服端的資料 • 回應使用者在網頁中執行動作所觸發的事件 • 控制瀏覽器 • 以下是伺服端上執行之程式擅長的工作： • 操作資料庫 • 取得網站的相關資訊 • 控制網頁在不同狀態下的顯示內容

  22. Java在動態網頁的應用- Java語言簡介 • Java的開發開始於1990年Sun Microsystem公司所進行的Green專案。 • 此專案的目的是希望運用C++撰寫嵌入式軟體， 但發現C++的某些特性，並不適合開發 嵌入式系統，於是便轉向開發新語言 –OAK • Green專案小組人員於1996年1月正式發表將OAK改名為Java。

  23. Java在動態網頁的應用- Java Servlet • Java Servlet是Java用於撰寫CGI程式的解決方案，Java透過Servlet API的協助，支援CGI功能以便延伸伺服器功能。 • Servlet是一個Java類別，執行時，將動態載入伺服器的記憶體中。 • Servlet並不是獨立執行的應用程式，必須要由Servlet容器管理Servlet的生命週期，以及HTTP通訊協定的互動。

  24. Java在動態網頁的應用- JavaServer Pages • JSP（JavaServer Pages）是以Servlet技術為基礎，所開發的範本系統。 • 執行JSP需要由Web伺服器的JSP容器編譯、執行。 • 當第一次執行JSP網頁時，該JSP容器將把JSP網頁轉譯為Servlet，再加以執行。在編譯後，若JSP網頁內容沒有更改，則下次使用者再次要求瀏覽同一JSP網頁時，便不需要再進行編譯，可直接執行完成編譯的Servlet。（請參考下一張圖示）

  25. Java在動態網頁的應用- JavaServer Pages

  26. 網頁開發環境的建立- 開發JSP網頁的單機模擬環境 • 單機模擬環境的建構，主要的概念是在一台電腦上同時安裝瀏覽器與Web伺服器，這樣一台電腦便可同時扮演伺服端與客戶端的角色。 • 特殊的位址 - 127.0.0.1（localhost） 在單機模擬環境下，欲架設在同一台電腦上的Web伺服器時，可運用TCP/IP協定的特殊位址（IP） - 127.0.0.1。

  27. 網頁開發環境的建立- J2SDK的下載與安裝 • Java 2 SDK的下載 架設開發JSP網頁的單機模擬環境前，必須先完成Java 2 SDK的安裝，在本書截稿為止，最新版本為1.4.2版。 若欲下載更新的版本，請到以下網址下載安裝檔。 http://java.sun.com/j2se/downloads.html

  28. 網頁開發環境的建立- J2SDK的下載與安裝 • 進入該網頁後，點選下載J2SE 1.4.2版的超連結，將可進入選取欲下載安裝檔類型的網頁。 點選 點選

  29. 網頁開發環境的建立- J2SDK的下載與安裝 按下。建議您，下載可離線安裝的安裝檔，但檔案大小約45 mb。

  30. 網頁開發環境的建立- J2SDK的下載與安裝 • Java 2 SDK的安裝 完成Java 2 SDK安裝檔案的下載後，在安裝檔案上快速按兩下滑鼠左鍵，便可開始安裝。 快速按兩下執行 執行安裝

  31. 網頁開發環境的建立- J2SDK的下載與安裝 • 進入授權書畫面後，設定為同意後，按下 Next 按鈕執行安裝。 點選，同意授權書內容。 按下

  32. 網頁開發環境的建立- J2SDK的下載與安裝 • 在此畫面中，可選取欲安裝元件與安裝位置，預設將所有元件安裝至C:\j2sdk1.4.2_01。在此將採用預設值，可直接按下 Next 按鈕。 按下，可更改安裝位置 按下，執行安裝

  33. 網頁開發環境的建立- J2SDK的下載與安裝 • 在這個畫面將供您選取預設使用的瀏覽器，完成設定後，請按下 Next 按鈕，執行安裝。 按下，執行安裝

  34. 網頁開發環境的建立- J2SDK的下載與安裝 執行安裝 按下，完成安裝。

  35. Resin伺服器的安裝與使用- Resin伺服器的下載、安裝 • 下載Resin的壓縮檔 在隨書光碟的shareware資料夾的resin2.1.1資料夾內，將提供Resin伺服器的壓縮檔。若您想要下載最新版本，可至以下網址下載。 http://www.caucho.com/download/index.xtp

  36. Resin伺服器的安裝與使用- Resin伺服器的下載、安裝 • 在下載網頁中，您可以找到Resin伺服器的最新版本，本書撰寫使用的版本為2.1.11版。

  37. Resin伺服器的安裝與使用- Resin伺服器的下載、安裝 • 安裝Resin 欲安裝Resin伺服器時，可直接運用檔案總管，將檔案解壓縮至C:\下，建立出一個名resin-2.1.11的資料夾，步驟如下所示。 選取 點選，按下滑鼠右鍵 按下

  38. Resin伺服器的安裝與使用- Resin伺服器的下載、安裝 按下，選取解壓縮後檔案的儲存位置 按下 按下

  39. Resin伺服器的安裝與使用- Resin伺服器的下載、安裝 按下

  40. Resin伺服器的安裝與使用- Resin伺服器的操作 • 執行Resin伺服器 欲執行Resin伺服器時，開啟檔案總管，並將資料夾切換至C:\resin-2.1.11\bin\資料夾執行httpd.exe檔，開啟Resin Httpd對話盒，且出現一個文字模式視窗。

  41. Resin伺服器的安裝與使用- Resin伺服器的操作 快速按兩下執行

  42. Resin伺服器的安裝與使用- Resin伺服器的操作 • 此時，可開啟瀏覽器，在網址列鍵入『http://localhost:8080/』，將出現如下圖的畫面，表示Resin伺服器已可正常執行。

  43. Resin伺服器的安裝與使用- Resin伺服器的操作 • Resin伺服器的停止 點選Resin Server對話盒的Stop選項，此時，文字模式視窗中，便會出現『closing server』字樣，並終止伺服器的執行。 點選，終止伺服器

  44. Resin伺服器的安裝與使用- Resin伺服器的操作 • 關閉Resin Server對話盒 欲關閉Resin Server對話盒時，請按下對話盒中的 Quit 按鈕。

  45. Resin伺服器的安裝與使用-Resin伺服器的設定與網頁儲存位置Resin伺服器的安裝與使用-Resin伺服器的設定與網頁儲存位置 • Resin伺服器的resin.conf設定檔 在resin.conf檔中，整個伺服器的設定資料，均置於<http-server>標籤與</http-server>標籤中。 <http-server> 伺服器的相關設定 </http-server>

  46. Resin伺服器的安裝與使用-Resin伺服器的設定與網頁儲存位置Resin伺服器的安裝與使用-Resin伺服器的設定與網頁儲存位置

  47. Resin伺服器的安裝與使用- Resin與各Web伺服器的搭配 • Resin可以與目前市面上常見的Web伺服器搭配，做為這些伺服器的JSP引擎，如：Apache、IIS…等。

  48. Tomcat伺服器的安裝與使用- Tomcat伺服器的下載、安裝 • 下載Tomcat的壓縮檔 在隨書光碟的shareware資料夾的resin2.1.1資料夾內，將提供Resin伺服器的壓縮檔。下載最新版本，可至以下網址下載。 • 在下載網頁中，可以找到Resin伺服器的最新版本，本書撰寫使用的版本為2.1.11版。 http://www.caucho.com/download/index.xtp

  49. Tomcat伺服器的安裝與使用- Tomcat伺服器的下載、安裝

  50. Tomcat伺服器的安裝與使用- Tomcat伺服器的下載、安裝 • 安裝Tomcat 用滑鼠左鍵連按二下 顯示使用的SDK，請按下按鈕繼續安裝

More Related