投影片 1

Size: px

Start display at page:

Download "投影片 1"

寇弦向
6 years ago
Views:

1 CH 08 Web 概念與新潮流 1

2 學習目標 1. 理解 Web 是採用客戶伺服的架構 2. 暸解瀏覽器 Web 伺服器與 HTTP 通訊協定之間的關係 3. 學習 HTML CSS 和 JavaScript 等客戶端技術的基本概念 4. 學習 CGI 和 PHP 等伺服端技術的基本概念 5. 認識若干架站軟體的功能與目的 6. 明白 Web 2.0 的意義及其影響 7. 認識 AJAX 和 Web 應用程式 2

3 大綱 08.1 Web 的架構 08.2 網頁語言 08.3 伺服端網頁程式 08.4 網站架設軟體 08.5 Web 新潮流 3

4 CH 08 Web 的架構 Web 採用所示的客戶伺服 (client server) 的架構 4

5 瀏覽器第一個風行於世的瀏覽器是網景公司的 Netscape 瀏覽器之後有微軟公司推出 Internet Explorer (IE), 而新一代瀏覽器, 譬如 Firefox, 蘋果電腦公司的 Safari 瀏覽器 ( 目前的市佔率約為百分之四左右 ) 以及,Google 公司也推出名為 Chrome 的瀏覽器 Lynx 只能顯示純文字大部分的盲胞就是透過 Lynx 和點字機來瀏覽 Web 5

6 Web 伺服器 Web 伺服器是提供網頁服務的電腦主機結構 : 電腦主機一個固定的 IP 位址與網址名稱必須安裝與執行一套 Web 伺服軟體如 : 微軟公司的 Internet Information Server (IIS) 與 Apache 是當前兩個最常用的 Web 伺服軟體 6

7 Web 伺服器 ( 續 ) 網頁的種類靜態網頁 :Web 伺服器在硬碟上找到預先寫好的網頁檔案, 不做任何處理即回傳給瀏覽器動態網頁 : 是透過電腦程式來產生的, 因為其內容常隨時間不同而異 7

8 超文字傳輸通訊協定超文字傳輸通訊協定 (HyperTex Transfer Protocol, HTTP) 規定瀏覽器與 Web 伺服器之間的網路溝通方式最常見的是 TCP/IP HTTP 的組成, 依序分為下面四個部分 : 要求行 (request line) 標頭 (headers) 空白行與訊息主體 (message body) HTTP 是一種無狀態記憶 (stateless) 的通訊協定, 也就是說,Web 伺服器處理完一項要求後, 即束之腦後, 不留下任何記錄 8

9 超文字傳輸通訊協定 ( 續 ) 超文字傳輸安全通訊協定 (Hypertext Transfer Protocol Secure, HTTPS) 是 HTTP 加上密碼機制的通訊協定, 常用於需要保證安全性的資訊傳輸中, 譬如網路購物傳送信用卡資料等等 9

10 制式資源位址制式資源位址 (Uniform Resource Locator, URL) 的格式 ( 請注意其間的冒號與斜線 ): protocol://server domain name:port number/path name 1. protocol 是資料在 Internet 上傳輸所使用的的通訊協定, 如 : http ftp mailto news gopher 和 telnet 等等 2. server domain name 是伺服器的網路地址 3. port number 是通訊協定所使用的通訊埠號碼, 如果省略的話, 則採用預設的號碼由於安裝網路軟體時, 多半都採用預設的通訊埠號碼, 因此 URL 通常可省略這一部份 4. path name 是網頁在伺服器電腦的虛擬路徑位址 10

11 制式資源位址 ( 續 ) URL nono /a.html ftp://ftp.pu.edu.tw news:comp.lang.c mailto:webmaster@ telnet://m321.cs.edu.tw file://cgi-bin/counter.cgi file:///usr/http/cgi-bin/counter.cgi 連結之目的地 WWW 網站的首頁網站使用者 nono 的首頁該網站使用者 nono 的網頁 a.html 以匿名的方式簽入 (login)ftp 伺服電腦 ftp.pu.edu.tw 網路論壇 (news group)comp.lang.c ( 注意 : 冒號之後並沒有緊跟著兩個斜線 ) 電子信箱 webmaster@ ( 注意 : 冒號之後並沒有緊跟著兩個斜線 ) 遠程簽入 (telnet) 電腦主機 m321.cs.edu.tw 虛擬路徑為 cgi-bin/counter.cgi 的檔案絕對路徑為 /usr/http/cgi-bin/counter.cgi 的檔案 11

12 制式資源位址 ( 續 ) 當連結至本機檔案時, 是採用如下所示簡化的檔案 URL 格式 : table.html 連結至同目錄中的檔案 table.html datadir/data.html../content.html /usr/http/cgi bin/counter.cgi 連結至同層目錄 datadir 中的檔案 data.html 連結至上一層目錄中的檔案 content.html 連結至絕對路徑為 /usr/http/cgibin/counter.cgi 的檔案 12

13 08.2 網頁語言 HTML: 規範網頁格式 CSS: 設定樣式的 JavaScript: 網頁程式語言 13

14 HTML 簡介超文字標記語言 (HyperText Markup Language, HTML) 就是規範網頁編寫格式的標準 14

15 HTML 簡介 ( 續 ) <html> <head> <title> 哈囉!WWW</title> </head> <body> <p> <font size=+2> 哈囉!<b>WWW</b>, 我來了!</font> </p> <p><img src="devil01.gif" height=61 width=62></p> <p><hr width="100%"></p> <p> <a href=" 紅小鬼 </a> 到此一游!!!</p> </body> </html> 15

16 HTML 簡介 ( 續 ) HTML 的基本術語標籤 (tag) 屬性 (attribute) 元件 (element) 編排網頁的指令 ( 標籤 ):<html> <p> <img> 等等以小於符號 < 和大於符號 > 括住的英文字結束標籤來界定其作用範圍 : 在標籤名稱之前加上斜線符號 /, 如 : <html> 的結束標籤是 </html> <body> 的結束標籤是 </body> 等有少數不需要結束標籤, 如 :<img> 標籤只是用來連結一個圖片檔案, 因此就沒有對應的結束標籤 </img> 16

17 HTML 簡介 ( 續 ) 屬性名稱 = 屬性值標籤 <font size=+2> 這個設定中, 字型大小屬性 size 的值被設定為 +2 ( 增大兩級的意思 ) 含括在標籤和對應結束標籤之間的部份稱為元件整份的 HTML 文件結構是由巢狀 (nested) 的各種元件所組成 17

18 HTML 簡介 ( 續 ) HTML 基本架構 : 1. 所有 HTML 文件的最外層元件一定是 <html> </html> 2. 檔頭元件 <head> </head> 和主體元件 <body> </body> 檔頭元件包含文件相關資訊的描述如 <title> 哈囉!WWW</title> 檔頭元件也可以包含作者和字碼集等文件特性的陳述 3. 主體元件則包含文件的內容 <p> </p> : 是由哈囉! WWW, 我來了! 這句話所組成用標籤 <font size=+2> 將整句話的字型放大兩級, 再用標籤 <b> ( 代表 Bold) 設定成粗體字 18

19 圖 18.8 關聯式資料模型 HTML 簡介 ( 續 ) 4. 標籤 <img>( 代表 Image): 加入一張圖片標籤中的屬性設定 src="devil01.gif" height=61 width=62 含意分別為 : 圖片的來源是 Devil01.gif 檔案圖片的高度與寬度分別是 61 個像素與 62 個像素 5. 標籤 <hr>( 代表 Horizontal Rule) 畫出一條水平線來分隔網頁其中屬性 width="100%" 使得水平線的寬度等於瀏覽器視窗的寬度, 並且隨著瀏覽器視窗一起變寬或變窄 6. 標籤 <a>( 代表 Anchor) 來建立一個超連結 (hyperlink) 標籤中的屬性設定 href= 為了與普通文字有所區別, 凡是代表超連結的字詞, 瀏覽器都會用特別的顏色 ( 如藍色 ) 來顯示, 或在其下劃上底線

20 HTML 簡介 ( 續 ) 在 WWW 發展的初期, 所有的網頁都得用文字編輯器一步一標籤地編寫出來 WYSIWYG(What You See Is What You Get) 的網頁編輯器, 不必瞭解 HTML 種種標籤的寫法, 就可以像文書處理一般地編寫網頁, 並且在螢幕上即時看到編排的效果這類的軟體包括 : 微軟公司的 SharePoint Designer 和 Adobe 公司的 Dreamweaver 20

21 CSS HTML 著重於內容導向的編排方式, 大部分元件的顯示效果是交由瀏覽器來決定, 網頁作者並無太多的選擇 W3C 在 1996 年 12 月公佈了一份串接樣式單 (Cascading Styling Sheets, CSS) 的規格書, 並納入 HTML 4.0 標準之中網頁設計師透過樣式單可以輕易地做到以下的編排效果 21

22 CSS ( 續 ) 可以區分為以下三種 : 行間樣式 (Inline Style): 樣式的定義直接寫入 HTML 的元件標籤內它的影響範圍只涵蓋該元件內部樣式單 (Embedded Styling Sheet): 樣式單的定義寫在網頁的 HEAD 元件中它的影響範圍涵蓋了整份網頁外部樣式單 (External Styling Sheet): 樣式單的定義存於一個以.css 為副檔名的樣式單檔案中外部樣式單可以運用在多張網頁上 22

23 CSS ( 續 ) 行間樣式利用元件的 style 屬性來設定元件的樣式 : style = " 樣式屬性一 : 屬性值 ; 樣式屬性二 : 屬性值 ;..." <html> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title> 行間樣式單範例 </title> </head> <body> <p> 本段使用正常的文字 </p> <p style="font:18pt 新細明體 "> 本段使用 18 點新細明體的文字 </p> <p style="font:24pt 標楷體 "> 本段使用 24 點標楷體的文字 </p> </body> </html> 23

08.2.2 CSS ( 續 ) 另類寫法 : <p style="font:9pt 新細明體 "> 段落文字為 9 點新細明體, 不過

24 CSS ( 續 ) 另類寫法 : <p style="font:9pt 新細明體 "> 段落文字為 9 點新細明體, 不過 <span style="font:14pt 標楷體 "> 這裡是 14 點標楷體 </span> 又變回 9 點新細明體 </P> 24

25 CSS ( 續 ) 內部樣式單是將元件樣式的定義集中起來, 且置於 head 元件的 style 元件之內 <head>... <style><!... 元件樣式的定義... > </style> </style> 25

26 CSS ( 續 ) STYLE 元件裏的元件樣式之定義 : 元件名稱 { 樣式屬性一 : 屬性值 ; 樣式屬性二 : 屬性值 ;...} 1. 元件名稱是 HTML 元件的名稱 ( 如 body h1 或 p 等等 ) 2. 樣式定義必須寫在英文左大括號 ({ ) 與英文右大括號 (}) 之間 3. 樣式屬性是用屬性名稱 : 屬性值的格式來設定, 兩者之間是以英文冒號 (:) 加以隔開若有多個樣式屬性設定, 則它們之間必須用英文分號 (;) 加以隔開 body {background:#ffffff; color:#000000; margin top:1cm;} h1 {font:20pt 標楷體 ; color:#ff0000; text align:center} p {font:12pt 新細明體 ; text indent:2em; line height:1.5em} 26

27 CSS ( 續 ) <html> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title> 內部樣式單範例 </title> <STYLE><! body {background:#ffffff; color:#000000; margin top:1cm;} h1 {font:20pt 標楷體 ; color:#ff0000; text align:center} p {font:12pt 新細明體 ; text indent:2em; line height:1.5em} ></STYLE> </head> <body> <h1> 內部樣式單 </h1> <p> 內部樣式單是將元件樣式的定義集中起來, 且置於 head 元件的 style 元件之內由於 ( 省略 )</p> </body> </html> 27

28 CSS ( 續 ) 28

29 CSS ( 續 ) 外部樣式單 : 先將元件樣式儲存在一個以 css 為副檔名的樣式檔案中, 然後在網頁中利用連結的方式將這個樣式檔案加入假定有一個名為 mystyle.css 的樣式檔案在網頁的 head 元件中, 用 link 元件將其加入 : <LINK rel=stylesheet type="text/css" href="mystyle.css"> 1. rel=stylesheet: 宣示連結一份樣式單 (rel 是 relation 的縮寫 ) 2. type= text/css : 宣示連結文件是一個符合樣式單規格的文字檔 3. href= mystyle.css : 連結樣式單的 URL 為 mystyle.css 29

30 CSS ( 續 ) mystyle.css <style><! body {background:#ffffff; color:#000000; margintop:1cm;} h1 {font:20pt 標楷體 ; color:#ff0000; text align:center} p {font:12pt 新細明體 ; text indent:2em; lineheight:1.5em} ></style> 30

31 CSS ( 續 ) <html> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title> 外部樣式單範例 </title> <link rel=stylesheet type="text/css" href="mystyle.css" /> </head> <body> <h1> 內部樣式單 </h1> <p> 內部樣式單是將元件樣式的定義集中起來, 且置於 head 元件的 style 元件之內由於 ( 省略 )</p> </body> </html> 31

32 CSS ( 續 ) 屬性的繼承若樣式屬性不抵觸, 則內層元件將沿用外層元件的樣式屬性 p {font:12pt; color:blue} em {font:20pt} 例 : <p> 馬英九與陳水扁是 <em> 台北市 </em> 市長的熱門人選 </p> 由於 em 是 p 的一個內層元件, 因此其所含的台北市一詞, 除了改用 20pt 的字體外, 也會沿用 p 元件的 color 樣式屬性把文字顏色設定成藍色 32

33 CSS ( 續 ) 相同元件的樣式分類問題 : 由於 HTML 元件的種類並不多, 無法涵蓋所有可能的文字編排格式或用途解決方案 : 使用相同的元件於不同的事物上如 : 在網頁中, 有些段落是屬於本文, 有些段落則可能是備註文字因 HTML 並沒有用於備註文字的元件, 因此這兩種段落都必須用 p 元件來產生又比方說 :HTML 並沒有設定專門術語的元件, 因此你可能借用 b 元件或 em 元件來設定專門術語 33

34 CSS ( 續 ) 設定元件類別的樣式可將某一種元件加以分類, 然後依類別設定不同的樣式 class 的屬性值是一個由英文字母或阿拉伯數字組合而成的類別稱如 : <p class=reddish> 和平奮鬥救中國!</p> 至於元件類別的樣式則是用以下的方式來定義 : 元件名稱. 類別名稱 { 樣式屬性一 : 屬性值 ; 樣式屬性二 : 屬性值 ;...} 元件名稱與類別名稱是以英文句點 (.) 隔開 p {color:black} p.reddish {color:red} 34

35 CSS ( 續 ) 設定元件識別的樣式也可設定元件的識別命稱, 然後依識別命稱來定義不同的樣式 id 的屬性值是一個由英文字母或阿拉伯數字組合而成 <p id=reddish> 歡迎光臨 </p> 元件名稱 # 識別名稱 { 樣式屬性一 : 屬性值 ; 樣式屬性二 : 屬性值 ;...} 元件名稱與類別名稱之間是以英文井字號 (#) 隔開 p#reddish {color:red} 這行樣式將使得之前所舉的 p 元件識別 reddish 範例中的歡迎光臨文字顏色設成紅色 35

36 設定元件語境的樣式 CSS ( 續 ) 運用屬性繼承, 網頁設計師可以先規劃出主要的樣式, 然後再列入細部變更之用的樣式 h1 {color:blue} em {color:red} 結果 : 網頁中所有的 em 元件均採用紅色的文字若讓 h1 元件中的 em 元件使用紅色文字, 而其他 em 元件使用預設的文字顏色, 可改為語境 (context) 的定義方式 : h1 em {color:red} 其中的 h1 與 em 之間必須以空白字元隔開 36

37 CSS ( 續 ) 元件樣式的合併多個元件的樣式相同的話, 可以將它們合併書寫予以簡化 X1, X2,..., Xn { 共同的樣式設定 } h1 {font family:serif; font size:14pts; color:#000000} h2 {font family:serif; font size:14pts; color:#000000} h3 {font family:serif; font size:14pts; color:#000000} 因為它們的樣式完全相同, 所以可以合併寫成 : h1,h2, h3 {font family:serif; font size:14pts; color:#000000} 37

38 樣式屬性 CSS ( 續 ) 分類 : 字型屬性文字屬性顏色屬性與邊界屬性 <html > <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title> 無 CSS 範例 </title> </head> <body> <h1> 電子報稅 </h1> <h2> 電子報稅擴大試辦鼓勵全民上網風潮 </h2> <p><strong> 由 </strong> 行政院主導的電子報稅制度, 在財政部賦稅署等相關單位經歷數月拉距, 近日正式拍版定案, 決定朝大幅開放路線推動計畫 <em> 明年二月 </em> 進行綜合所得稅申報時, 除將電子報稅試辦範疇擴及全國, 並採單軌制, 行政院且計畫授權國內網路服務供應商 (ISP), 使用線上所得稅試算程式, 將 ISP 納入政策推動行列, 期藉由報稅刺激民眾企業上網, 快速達成全民上網的目標 </p> <p> 另據了解, 北區國稅局在試辦電子報稅時, 為日後電子繳稅預作鋪路, 與 <em> 郵政總局 </em> 及 <em> 元智工學院 </em>, 合作架構具金融功能的網路認證機制, 目前該認證機制以處最後測試階段, 北區國稅局極可能於明年二月申報綜合所得稅時, 除電子報稅外, 更進一步提供批次電子繳稅服務, 而預料此將再一次點燃財政部金融中心, 與交通部郵政總局的跨部會爭戰 ( 資訊傳真週刊第 273 期 ) </p> </body> </html> 38

39 CSS ( 續 ) 將 CSS 規則加 HTML 文件 : h1 {font family: 微軟正黑體 ; font size:36pt; text align:center; letterspacing:0.5em; margin top:1cm} h2 {font family: 標楷體 ;font size:18pt;text align:center;letterspacing:0.3em; color:#ff6633} p {letter spacing:0.1em;line height:1.6em;text indent:2em;margin:0.2cm 1cm} strong {font size:200%} /* 放大 2 倍字形 */ em.bb {font style:normal;font weight:bold;color:blue} /* 粗藍字 */ em.hl {background color:yellow;font style:normal} /* 黃底字 */ 並對網頁中的三個 EM 元件做下列的修改 : <em>> 明年二月 </em> 改為 <em class=hl> 明年二月 </em> <em> 郵政總局 </em> 改為 <em class=bb> 郵政總局 </em> <em> 元智工學院 </em> 改為 <em class=bb > 元智工學院 </em> 39

40 CSS ( 續 ) 更改之前更改之後 40

41 Javascript JavaScript 是一種嵌入在網頁中的程式語言它的前身是 Netscape 公司所發展的 LiveScript 程式語言 Microsoft 很快地也讓 IE 瀏覽器支援 JavaScript 的功能, 並更名為 JScript ECMA (European Computer Manufacturers Association) 出面來規範 JavaScript 的語言標準, 稱為 Standard ECMA 262 或 ECMAScript 目前, 不區別 JavaScript JScript 和 ECMAScript 這三個版本, 統稱為 JavaScript 41

42 Javascript( 續 ) JavaScript 是一種以物件為基礎 (object based) 的程式語言 JavaScript 程式碼必須利用 <script> 標籤加入 HTML 文件中 <html> 2.<head> 3.<title>JavaScript 範例一 </title> 4.</head> 5.<body> 6.<p> 底下是由 JavaScript 所產生的一段話 :</p> 7.<p> 8.<script type= text/javascript > 9.<! document.write(" 哈囉!JavaScript") 11. //--> 12. </script> 13 </p> 14.</body> 15.</html> 42

43 Javascript( 續 ) 43

44 Javascript( 續 ) 加入外部的 JavaScript 程式碼如果有多個網頁使用同樣的 JavaScript 程式碼 ( 如函式庫 ), 可把 JavaScript 程式碼存在一個以.js 為副檔名的檔案中, 然後用 <script> 標籤的 src 屬性連結進來 <script src="lib.js"></script> 把與網頁同目錄的 lib.js 檔加入網頁中, 又如 : <script src=" 44

08.2.3 Javascript( 續 ) today.js var today = new Date(); var year = today.

45 Javascript( 續 ) today.js var today = new Date(); var year = today.getfullyear(); var month = today.getmonth() + 1; var date = today.getdate(); 45

46 Javascript( 續 ) <html> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>javascript 範例二 </title> <script type="text/javascript" src= today.js ></script> </head> <body> <p> <script type="text/javascript"> <! document.write(" 今天是西元 "+year+" 年 "+month+" 月 "+date+" 日 "); // > </script> </p> </body> </html> 46

47 Javascript( 續 ) 47

48 Javascript( 續 ) JavaScript 用途檢查表單 (form) 資料的正確性動態產生網頁內容控制瀏覽器畫面提供複雜的網頁導覽方式產生動畫效果 48

49 08.3 伺服端網頁程式互動式的網頁都是利用 HTML 的表單 (Form) 元件來製作表單, 以及利用一個伺服端網頁程式來收集與處理所接收到的表單資料 49

50 08.3 伺服端網頁程式 ( 續 ) 50

51 CGI 程式共通閘道介面 (Common Gateway Interface, CGI) 是一種程式撰寫的規則, 依據這個規則製作的程式稱為 CGI 程式 CGI 程式的電腦語言可為傳統的 C/C++ 程式語言 UNIX 系統下的 shell script 或 Perl 腳本語言或 Windows 系統下的 Visual Basic 程式語言等等目的 1. 取得從瀏覽器傳過來的資料 ( 包括表單的資料和瀏覽器的資訊等 ) 2. 利用作業系統所提供的資源 ( 如檔案和工具程式等 ) 3. 查詢或存取資料庫系統中的資料 4. 經由 WWW 伺服程式傳送 MIME(Multipurpose Internet Mail Extension) 格式的文件 ( 如純文字圖片 HTML 等 ) 至瀏覽器顯示 CGI 程式把完整的 HTML 文件透過標準輸出 (standard output) 輸出至 WWW 伺服器 51

52 嵌入式網頁程式嵌入式的網頁程式是把程式碼加在 HTML 文件中, 就如同客戶端的 JavaScript 程式一般過程 : 1. 伺服器採用該程式語言的直譯器 (interpreter) 來執行網頁中的程式, 2. 然後把執行結果整合至網頁中 3. 全部完成後, 再傳送至客戶端 52

53 PHP 程式語言 PHP 程式碼是寫在 <?php 和?> 兩個標籤之間 <html> <head> <title> 哈囉!PHP</title> </head> <body> <?php echo "<p> 哈囉!PHP</p>";?> </body> </html> 53

54 其他技術 ASP.Net A. 是微軟公司在 2002 年初公佈以取代原先 ASP(Active Server Pages) B. ASP.Net 將程式碼嵌入網頁中, 由伺服軟體負責分派處理不過,ASP.Net 允許使用多種程式語言, 如微軟的 VBScript C# 或 Jscript, 或公用領域軟體的 Perl 或 Python 等 C. ASP.Net 可利用微軟.Net Framework 所提供的種種強大功能 JSP(Java Server Pages) 是由 Sun Microsystems 公司倡導 54

55 08.4 網站架設軟體內容管理系統 (Content Management System, CMS) 定義為 : 協助機構和個人, 藉助資訊技術, 實現內容的創建儲存分享應用與檢索現有的 CMS 軟體 :PhpNuke Joomla 和 Xoops 學習管理系統 (Learning Management System, LMS) 網路教學 (e Learning) 現有 :Moodle (Modular Object Oriented Dynamic Learning Environment) 及商業版的 LMS 系統 ftp 系統或 BBS 系統以及用 phpbb 或 Discuz 架設的網路論壇等等 55

56 08.5 Web 新潮流 Web 2.0: 2001 年秋天在網路泡沫化後 Tim O Reilly 與 Dale Dougherty 兩人觀察與比較失敗公司與成功公司之間的差異, 提出一些 Web 未來發展的原則與實作方式, 他們稱之為 Web 2.0 AJAX: Asynchronous JavaScript and XML ( 非同步的 JavaScript 和 XML) Web 應用程式 56

57 Web 2.0 Web 已經慢慢成為一種平台 (platform), 不再是單純的應用程式而已 1. 資料 : 每一個成功的 Web 應用, 其背後都有一個專用的資料庫系統 2. 使用者 : 網站不應該只把使用者當作瀏覽者, 應該把使用者納入網站發展進化的過程中, 讓使用者的人數與資料分享成為網站價值的一部分 3. 軟體 : 網站是以服務而非以產品的方式推出 1. 必須高度自動化 2. 網站的軟體改採輕量化的程式模型 (Lightweitht Programming Models) 4. 操作介面 : 網頁能夠提供如傳統電腦應用程式一樣強大的操作介面, 則網頁就不僅提供資訊而亡, 進而化身成為網頁應用程式 (Web Applications) 57

58 AJAX AJAX 是 Jesse James Garrett 在 2005 年一篇短文中首先提出的名詞, 用以命名當時的一種互動式網頁製作技術 AJAX 並不是一項技術, 而是把好幾項技術整合在一起使用標準的 XHTML 和 CSS 來呈現利用文件物件模型 (Document Object Model, DOM) 來進行動態顯示網頁內容以及處理瀏覽者的互動使用 XML 和 XSLT 進行資料交換與處理使用 XMLHttpRequest 物件與 Web 伺服器進行非同步的資料交換 ; 使用 JavaScript 將所有的東西整合在一起 58

59 AJAX( 續 ) 優點 : 只更新部分的網頁資料這使得 Web 應用程式能夠更迅捷地回應使用者, 並避免在網路上傳送沒有改變過的資訊, 節省網路頻寬 AJAX 不需要任何外掛程式, 只要瀏覽器支援 JavaScript AJAX 的函式庫如 :jquery 和 Dojo 使用這類函式庫可以節省大量的程式開發時間 59

60 Web 應用程式 Google: 1. Gmail 的使用者還可以使用行事曆文件編輯電子試算表等類似微軟 Office 的應用程式 2. Google Map( 地圖資訊 ) 3. Google Earth( 衛星空照圖 ) 4. Google Books( 圖書搜尋 ) 等等應用 Facebook Blog: 網誌 (Blog), 又音譯為部落格 ( 台灣 ) 或博客 ( 中國大陸 ) 60

61 Web 應用程式 ( 續 ) 微網誌 (microblog) 是一種傳送少量資料, 如短文 ( 少於 200 字 ) 少量圖片或簡短音樂, 給他人的一種網誌 Plurk: 是一個流行於台灣的社群化微網誌 YouTube: 一個讓用戶上傳影片與他人分享的網站, 是目前最大的影片分享網站 RSS:RSS 是 Really Simple Syndication 或 Rich Site Summary 的縮寫 61

62 課後練習試說明何謂客戶 - 伺服架構? 請簡述 URL 的格式為何? 網頁原始檔必須符合何種規範? 試扼要說明行間樣式內部樣式單和外部樣式單之間的差異說明把 JavaScript 程式碼加入網頁的方法請簡述何謂 CGI PHP 程式碼必須加在何種標籤之間何謂內容管理系統? 請上網查詢 Web 2.0 相關文獻請上網查詢 AJAX 相關文獻請連上節所介紹的網站, 了解它們的功能與使用介面 62

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5