網頁技術簡介.

Presentation on theme: "網頁技術簡介."— Presentation transcript:

1 網頁技術簡介

2 Web應用程式的基礎- WWW與主從架構系統(說明)
「WWW」（World Wide Web，簡稱Web）全球資訊網是 1989年歐洲高能粒子協會一個研究小組開發的Internet服務， Web能夠在網路上傳送圖片、文字、影像和聲音等多媒體資 料，這是由Tim Berners Lee領導的小組開發的主從架構和分 散式網路服務系統。 WWW全球資訊網是一種主從架構系統，在主從架構的主端 是指伺服端（Server）的Web伺服器，儲存HTML網頁、圖 片和相關檔案，從端是客戶端（Client），也就是使用者執 行瀏覽器的電腦，負責和伺服器溝通和讀取伺服器的資料， 其傳送的是HTML網頁、圖檔和相關檔案。

3 Web應用程式的基礎- WWW與主從架構系統(圖例)
在Web伺服器儲存資料，以微軟來說就是「IIS」（Internet Information Services），從端使用瀏覽器取得與顯示伺服 端的資料，例如：Internet Explorer瀏覽器。

4 Web應用程式的基礎- HTTP通訊協定 HTTP通訊協定（Hypertext Transfer Protocol）是一種在伺 服端（Server）和客戶端（Client）之間傳送資料的通訊協 定，如下圖所示：

5 Web應用程式的基礎- HTTP通訊協定的特性
HTTP通訊協定並不會持續保持連線：只有當瀏覽器提出請求 時才建立連線，在請求後就斷線等待回應，每一次請求和回 應都需要事先建立連線。 HTTP通訊協定並不會保留狀態：因為HTTP通訊協定並不會保 持連線，所以在連線時，伺服端和客戶端互相知道對方，一 旦請求結束，就互不相干，所以使用者狀態並不會保留，每 一次連線都如同是一位新使用者。

6 Web應用程式的基礎- Web應用程式(說明)
Web應用程式（Web Applications）簡單的說是一組網頁 （包含HTML網頁、圖片和相關伺服端網頁技術的程式檔案） 的集合，請注意！Web應用程式是在Web伺服器執行，並 不是在客戶端電腦的瀏覽器執行。 Web應用程式主要的功能是回應使用者的請求，並且與使用 者進行互動，以ASP.NET技術來說，就是建立ASP.NET網站 的Web應用程式。目前Internet擁有多種不同類型的Web應 用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路 商店、拍賣網站和電子公共論壇等。

7 Web應用程式的基礎- Web應用程式(圖例)
Web應用程式就是一種「Web基礎」（Web-Based）的資 訊處理系統（Information Processing Systems），如下圖 所示：

8 1-2 網頁設計技術 1-2-1 客戶端網頁技術 1-2-2 伺服端網頁技術

9 1-2-1 客戶端網頁技術-說明 客戶端網頁技術是指程式碼或網頁是在使用者客戶端電腦的 瀏覽器中執行，因為瀏覽器本身支援直譯程式，所以可以執 行客戶端網頁技術，如下圖所示：

10 1-2-1 客戶端網頁技術-種類1 Java Applet：使用Java語言撰寫一種Java應用程式，我 們需要使用編譯程式將原始程式碼編譯成位元組碼，即Java Applet，瀏覽器需要使用Java直譯程式「JVM」（Java Virtual Machine）來執行。 JavaScript（Jscript）：JavaScript是Netscape開發的一 種Script腳本語言，淺顯的程式語法，就算初學程式設計者 也可以運用自如，輕鬆在網頁上建立互動效果；Jscript為微 軟推出相容JavaScript的Script語言，簡單的說，Netscape 或Mozilla Firefox支援JavaScript；Internet Explorer支援 Jscript。

11 1-2-1 客戶端網頁技術-種類2 ActionScript與Flash：ActionScript是Macromedia公司開 發的一種Script腳本語言，可以讓Flash動畫電影檔產生互動 效果，這是一種類似JavaScript語法的腳本語言。Flash是 Macromedia公司的軟體名稱，可以用來建立動畫效果，瀏 覽器只需安裝Flash播放程式，就可以在網頁顯示Flash檔案 建立的動畫效果。我們可以使用Flash和ActionScript來輕鬆 建立動畫效果的網頁應用程式。 VBScript：VBScript是Visual Basic語言家族的成員，全名 Microsoft Visual Basic Scripting Edition，簡稱VBScript。 VBScript是一種完全免費的直譯程式語言，它也是一種在瀏 覽器執行的網頁語言，能夠讓網頁設計者開發互動多媒體的 網頁內容，目前只有微軟Internet Explorer瀏覽器支援 VBScript。

12 1-2-1 客戶端網頁技術-種類3 DHTML：「DHTML」（Dynamic HTML）是一種在瀏覽器 建立HTML動態效果的技術，主要是由三種元素所組成： HTML、CSS和Script語言。 Ajax：Ajax是Asynchronous JavaScript And XML的縮寫， 譯成中文就是非同步JavaScript和XML技術，Ajax技術是由 HTML和CSS、XML、XML DOM和XMLHttpRequest物件所 組成。 Silverlight：Silverlight是一套用來開發豐富網際網路應用程 式（Rich Internet Application，RIAs）的工具程式，其定 位和Macromedia公司的Flash相同，這是微軟開發的RIA工 具，提供網頁設計師另一種建立豐富網頁內容的選擇。

13 1-2-2 伺服端網頁技術-說明 伺服端網頁技術是在Web伺服器上執行的應用程式，而不是 在客戶端電腦的瀏覽器執行，如下圖所示：

14 1-2-2 伺服端網頁技術-種類1 CGI（Common Gateway Interface）：共通匣道介面提 供Web伺服器執行外部程式的管道，CGI應用程式是一種外 部程式的執行檔，能夠使用各種程式語言來開發，例如： Visual Basic、C、C++和Perl，程式需要編譯成執行檔案， 以便在伺服端執行。 ASP（Active Server Pages）：英文字面上是一種讓網頁在 伺服器上動起來的技術，能夠將Script語言內嵌HTML標籤的 網頁，在伺服端產生動態網頁內容，這是一種在伺服端以直 譯方式執行的網頁技術。

15 1-2-2 伺服端網頁技術-種類2 ASP.NET：ASP.NET是繼ASP 3.0後，微軟開發的伺服端網頁 技術，以「CLR」（Common Language Runtime）架構 的.NET程式設計平台，可以讓我們使用CLR語言在伺服端建 立Web應用程式。 PHP（PHP: Hypertext Preprocessor）：一種通用和開放原 始碼（Open Source）的伺服端Script語言，可以直接內嵌 於HTML網頁，特別適用在Web網站的開發，主要是使用在 Linux/Unix作業系統的伺服端網頁技術，目前也支援 Windows作業系統。

16 1-2-2 伺服端網頁技術-種類3 JSP（Java Server Pages）：Java家族中和ASP一較長短 的網頁技術，以Java語言來說，Java Applet是下載到客戶 端執行的程式檔；Java Servlet是在伺服端執行；JSP是結合 HTML和Java Servlet的一種伺服端網頁技術。

17 1-3 ASP.NET與.NET Framework

18 NET Framework-說明 .NET Framework是微軟下一個世代的程式開發平台，它是 由CLR和.NET Framework類別函數庫所組成。當我們使 用.NET Framework支援的程式語言編寫程式碼檔案後，就 可以使用.NET編譯程式進行編譯，不過，.NET Framework 不是編譯成CPU可執行的機器語言，而是一種中間程式語言 稱為「MSIL」（Microsoft Intermediate Language）。

19 NET Framework-圖例 當需要執行程式時，CLR是使用「JIT」（Just In Time）編譯 程式將MSIL轉換成機器語言來執行程式，如下圖所示：

20 1-3-1 .NET Framework-類別函數庫
.NET Framework類別函數庫（.NET Framework Class Library，簡稱.NET FCL）提供龐大的類別物件，幫助我們建 立各種應用程式，只需支援.NET Framework的程式語言都 可以使用類別函數庫的物件和方法。

21 1-3-2 ASP.NET技術的三種開發模型- 說明
ASP.NET是一種架構在.NET Framework的CLR平台的網頁技 術，其主要目的是建立Web應用程式。目前ASP.NET共有三 種開發模型來建立ASP.NET應用程式，如下圖所示：

22 1-3-2 ASP.NET技術的三種開發模型- ASP.NET Web Forms開發模型
傳統ASP.NET開發模型，這是一種事件驅動和伺服端控制項 的開發模型，其目的是隱藏HTTP請求，使用伺服端控制項來 全權處理頁面顯示，以便讓我們如同建立桌上型Windows Form應用程式一般的建立Web應用程式。

23 1-3-2 ASP.NET技術的三種開發模型- ASP.NET Web Pages開發模型
ASP.NET開發模型的最新成員，這是一種以頁面為中心的開 發模型，類似ASP和PHP技術，可以讓開發者全權控制網頁 的顯示，和整合客戶端網頁技術的各種套件，並且使用內建 範本和幫助者類別來快速建立Web應用程式。

24 1-3-2 ASP.NET技術的三種開發模型- ASP.NET MVC開發模型
使用著名MVC設計模式來建立Web應用程式，可以將Web 應用程式分割成三大部分Models、Views和Controllers，分 別是資料、顯示和處理請求，在顯示部分預設是和Web Pages開發模型使用相同的Razor語法。