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

Présentation au sujet: "第 1 章 動態網頁設計概論 製作."— Transcription de la présentation:

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

2 WWW基本觀念 - WWW的誕生 WWW讀為triple w，全名為World Wide Web，中文譯為全球資訊網。
發源地為歐洲量子物理實驗室（the Conseil Europeenpour La Recherache Nucleaire, CERN）。

3 WWW基本觀念 - WWW的誕生 發展WWW的最初目的為建立可以透過網路同時呈現文字、聲音、影像、圖形的分散式多媒體資訊系統，且不受瀏覽者所使用電腦系統種類的限制，可達到跨平台共享資訊的目的。

4 WWW基本觀念 - WWW的架構 WWW的架構主要分為兩個部份，一為伺服端（Server，或稱遠端），也就是資訊的提供者。二為客戶端（Client，或稱近端），也就是資訊的接收者。

5 WWW基本觀念 - URL位址 URL的全名為Uniform Resource Locator，譯為統一資源定位器。URL用於指定取得Internet上資源之位置與使用的通訊協定，語法如下： 以下URL將連結至國立台灣大學土木工程研究所電腦輔助工程組的中文介紹網頁。 [資源取用方法]://[URL位址]/[目錄]/…/[檔案名稱]

6 WWW基本觀念 - HTTP通訊協定 當瀏覽器瀏覽網站時，將運用HTTP協定進行溝通，並採用請求/回應模式。
請求訊息之內容可分為以下兩個部分： HTTP請求 HTTP表頭 網站伺服器接著傳送回應訊息給客戶端的瀏覽器，訊息內容將包含以下三個部分： HTTP回應 客戶端欲取得的資源

7 WWW基本觀念 - HTTP通訊協定 HTTP請求 一個HTTP請求包含三個欄位，如下所示：
要求伺服器執行的方法 + 資源位置 + 瀏覽器支援的HTTP協定版本

8 WWW基本觀念 - HTTP通訊協定 HTTP回應 HTTP回應包含三個欄位，如下所示：
伺服器支援的HTTP協定版本+ 回應狀態碼 + 狀態碼的簡短說明

9 WWW基本觀念 - HTTP通訊協定 HTTP表頭
HTTP表頭將包含一些額外資訊。當瀏覽端發出請求時，傳給伺服器的表頭常包含以下幾種常見的瀏覽器資訊。 接受的檔案格式 接受的語言 接受的壓縮格式 瀏覽器的版本 HTTP請求的伺服器位址 連結方式

10 WWW基本觀念 - HTTP通訊協定 伺服器回應瀏覽器時，常透過HTTP表頭傳送以下訊息給瀏覽器。 系統時間 伺服器的名稱與版本 連結方式
傳送使用的壓縮方式 傳送內容的型態

11 WWW基本觀念 - HTTP通訊協定 以下是一個回應訊息，將包含HTTP回應、HTTP表頭與欲取得資源的內容。

12 網頁的開發技術 -靜態網頁 vs. 動態網頁 對於僅能產生相同畫面的網頁，稱之為靜態網頁。 能做依據不同狀況，而做出回應的稱之為動態網頁。

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

14 網頁的開發技術 - 執行於客戶端的網頁程式語言
網頁的開發技術 - 執行於客戶端的網頁程式語言

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

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

17 網頁的開發技術 -執行於伺服端的網頁程式語言
網頁的開發技術 -執行於伺服端的網頁程式語言 ASP與ASP .Net ASP（Active Server Page）為Microsoft的WEB伺服器 - IIS所提供的網頁語言執行環境，讓使用者可以運用<%與%>標籤，將Script語言的程式碼嵌入HTML文件。

18 網頁的開發技術 -執行於伺服端的網頁程式語言
網頁的開發技術 -執行於伺服端的網頁程式語言 ASP與ASP .Net 隨著.NET Framework的發表，Microsoft也提出以.NET Framework為基礎的範本系統 - ASP .NET。

19 簡介ASP技術 - Active Server Page – 動態伺服端網頁
ASP並不是一種語言，而是指由WEB伺服器提供的網頁語言執行環境。 在IIS上ASP網頁的執行架構與CGI程式相當類似，只是ASP取得客戶端資料的介面為ISAPI（Internet Server Application Programming Interface，譯為網際網路伺服器應用程式設計介面），而不是CGI介面。

20 簡介ASP技術 - Active Server Page – 動態伺服端網頁

21 簡介ASP技術 - Active Server Page – 動態伺服端網頁

22 簡介ASP技術 - Active Server Page – 動態伺服端網頁

23 簡介ASP技術 - 物件導向觀念與ASP 所謂的物件導向觀念，就是以現實世界中的『物件』做為程式設計或者撰寫時，思考問題的『導向』。
物件導向觀念模擬真實世界的方法，主要透過模擬物件的行為與性質這兩方面著手。

24 簡介ASP技術 物件導向觀念與ASP 所謂的行為就是真實世界中，這個物件有什麼樣的動作，物件導向觀念稱之為方法（Method）。而性質就是這個物件有哪些特性，例如：顏色、長、寬…等，在物件導向觀念中又稱之為屬性（Attribute）。 透過方法與屬性的描繪，便可在程式中，模擬這個物件在真實世界的行為。

25 簡介ASP技術 – ASP 3.0 物件 Application物件
以ASP的觀念來說，某虛擬目錄下的所有ASP網頁將構成一個Web應用程式，而Application物件便代表著這整個應用程式。 ASPError物件 ASP網頁執行發生錯誤時，所產生的物件。

26 簡介ASP技術 – ASP 3.0 物件 ObjectContext物件
此物件可提供程式設計師利用Microsoft Transaction Server處理交易（Transaction，所謂的交易在資料庫技術裡，指的是一個連續且完整的資料處理過程）。

27 簡介ASP技術 – ASP 3.0 物件 用於取得從客戶端瀏覽器中，透過HTTP協定送至伺服端上Web伺服器的資訊。 Request物件
Response物件 用於處理從伺服端Web伺服器輸出到客戶端資料的物件。

28 簡介ASP技術 – ASP 3.0 物件 Server物件
在ASP網頁裡，Server物件用於代表Web伺服器，透過此物件的應用，可以取得Web伺服器的資料與執行狀態。 Session物件 當有使用者連線至網頁時，Session物件便用於代表某個使用者的連線。

29 簡介ASP技術 – ASP網頁的開發環境 建構單機模擬環境很容易，主要概念是在一台電腦上同時安裝瀏覽器與Web伺服器，這樣一台電腦便可同時扮演伺服端與客戶端的角色。

30 WEB伺服器的安裝與架設 – IIS的安裝

31 WEB伺服器的安裝與架設 – 特殊的TCP/IP位址 - 127.0.0.1
TCP/IP（Transmission Control Protocol/Internet Protocol）是一種電腦透過網路連結溝通的工業標準。 在TCP/IP協定中，將以位址（IP Address）代表每一台連結到網路上的電腦

32 WEB伺服器的安裝與架設 – 特殊的TCP/IP位址 - 127.0.0.1
代表本機位址的 當完成IIS的安裝，開啟IE鍵入

33 WEB伺服器的安裝與架設 – Web站台的建立觀念
主目錄 所謂主目錄就是Web站台的根目錄。當電腦硬碟內某資料夾被Web站台（伺服器）指定為主目錄時，該目錄及其子目錄的Web網頁將可被登入Web站台的使用者瀏覽。 虛擬目錄 所謂虛擬目錄是指Web站台邏輯上的目錄。

34 WEB伺服器的安裝與架設 – Web站台的建立觀念
若希望硬碟中，不在wwwroot資料夾的網頁亦可被瀏覽時，就必須將該目錄建立為Web站台的虛擬目錄。 由於這個目錄實際上並不存在於主目錄下，僅邏輯上存在於使用者瀏覽Web站台時，所以被稱為虛擬。

35 WEB伺服器的安裝與架設 – Web站台的建立觀念
若筆者的電腦中C磁碟的部份資料夾路徑如下圖。

36 WEB伺服器的安裝與架設 – Web站台的建立觀念
其中C:\Dir1資料夾被指定為IIS之主目錄下的虛擬目錄後，那架設在筆者電腦內Web站台（localhost）的目錄路徑將如下圖所示。

37 WEB伺服器的安裝與架設 – 虛擬目錄的建立
1.控制台 2.系統管理工具 3.IIS 4.本機電腦 5.預設網站 6.滑鼠右鍵->新增 7.虛擬目錄 8.下一步 9.別名 10.實體路徑 11.執行權限 12.完成

38 Web伺服器的安裝與架設 – 虛擬目錄的建立
進入虛擬目錄建立精靈在該精靈的第二個步驟，於別名欄輸入虛擬目錄名稱，在精靈的第三個步驟點選瀏覽選項。

39 Web伺服器的安裝與架設 – 虛擬目錄的建立
虛擬目錄的五種權限之意義說明如下： 讀取 – 登入Web站台的使用者擁有讀取或下載存放在主目錄或虛擬目錄下的檔案。 執行指令碼 – 賦予使用者在不具執行權限的情況 下，執行此目錄的特定指令，如：ASP、IDC…等 指令。應將此權限授與使用者，否則ASP或IDC網 頁將無法正常執行。

40 Web伺服器的安裝與架設 – 虛擬目錄的建立
執行 – 賦予使用者執行此目錄下應用程式的權力，所謂的應用程式包含指令引擎及Windows的二進位檔（.dll與.exe檔案），一般建議不應授與此權限。 寫入 – 更改此目錄下檔案內容之權限。 瀏覽 – 瀏覽此目錄下檔案與資料夾的清單。

41 Web伺服器的安裝與架設 – 虛擬目錄的建立
進入最後一個步驟，按下 完成 按鈕完成虛擬目錄的建立。

42 Web伺服器的安裝與架設 – 虛擬目錄的建立
完成虛擬目錄的建立後，便可透過瀏覽器檢視該目錄的檔案列表。

43 網頁開發工具 NotePad（記事本） 下圖為運用NotePad撰寫ASP網頁的畫面。

44 網頁開發工具 NotePad（記事本） 完成ASP網頁的撰寫後，只要在儲存時，設定存檔類型為所有檔案，輸入包含副檔名為『.asp』之檔名即可。

45 網頁開發工具 - Microsoft Script Editor
Microsoft Script Editor（簡稱MSE）是Office 2003提供，用於撰寫HTML文件的編輯器，亦可用於開發ASP網頁。

46 網頁開發工具 - Microsoft Script Editor
運用MSE的好處如下： 以不同顏色辨別HTML標籤、程式碼與文字內容 可顯示程式碼的行號 提示ASP元件的性質與方法 提供建立HTML標籤的提示與設定屬性的視窗 建立HTML控制項的工具箱

47 網頁開發工具 - Microsoft Script Editor

48 網頁開發工具 - Microsoft Script Editor

49 網頁開發工具 - Microsoft Script Editor

50 網頁開發工具 - Microsoft Script Editor
更新安裝後，運用檔案總管開啟Office安裝資料夾的Office11子資料夾，連按二下MSE7項目，便可開啟MSE，步驟如下。

51 網頁開發工具 - Microsoft Script Editor

52 網頁開發工具 - Microsoft Script Editor
開啟舊檔

53 網頁開發工具 - Microsoft Script Editor
建立新檔

54 網頁開發工具 - Microsoft Script Editor

55 網頁開發工具 - Microsoft Script Editor

56 網頁開發工具 - Microsoft Script Editor
工具箱 此區提供設計網頁所需的工具列。

57 網頁開發工具 - Microsoft Script Editor
程式編輯區 此區有兩種模式，分別為設計與HTML。 設計模式用於以視覺化的方式設計網頁，通常用於處理靜態的HTML。 HTML模式則是以編輯網頁程式碼的方式設計網頁。

58 網頁開發工具 - Microsoft Script Editor
程式編輯區上方，還提供物件控制項與事件控制項，協助使用者建立回應物件之事件函數。

59 網頁開發工具 - Microsoft Script Editor
在程式編輯區撰寫程式時，MSE將提示ASP元件的方法與性質。

60 網頁開發工具 - Microsoft Script Editor
專案總管區

61 網頁開發工具 - Microsoft Script Editor
屬性區

62 網頁開發工具 - Macromedia Dreamweaver MX 2004
運用Dreamweaver開發ASP網頁時，有以下優點： 以不同顏色辨別HTML標籤、程式碼與文字內容 可顯示程式碼的行號 提示ASP元件的性質與方法 提供快速建立各種HTML標籤、ASP元件的工具列 可在Web伺服器建立網站資料夾，方便開發 建立資料庫連結

63 網頁開發工具 - Macromedia Dreamweaver MX 2004
下圖為Dreamweaver開啟ASP網頁的畫面。

64 網頁開發工具 - Macromedia Dreamweaver MX 2004
建立欲開發的網站環境 在Dreamweaver內建立網站，步驟如下：

65 網頁開發工具 - Macromedia Dreamweaver MX 2004

66 網頁開發工具 - Macromedia Dreamweaver MX 2004

67 網頁開發工具 - Macromedia Dreamweaver MX 2004

68 網頁開發工具 - Macromedia Dreamweaver MX 2004

69 網頁開發工具 - Macromedia Dreamweaver MX 2004
建立新檔

70 網頁開發工具 - Macromedia Dreamweaver MX 2004
開啟舊檔

71 網頁開發工具 - Macromedia Dreamweaver MX 2004
若已完成網站的建立，則可直接在檔案面版，選取欲開啟的檔案，操作步驟如下圖所示。

72 網頁開發工具 - Macromedia Dreamweaver MX 2004

73 網頁開發工具 - Macromedia Dreamweaver MX 2004