1 / 167

ASP.NET 網頁製作教本 -- 從基本語法學起

ASP.NET 網頁製作教本 -- 從基本語法學起. 第 2 章 進入 ASP.NET 網頁製作的準備工作. 2-1 ASP.NET 相關技術概說. Client 與 Server. 網頁提供者將其製作好的網頁放在 Server( 伺服器 ) 上，稱為伺服端 ( Server 端 )。 上網者準備好上網的機器，然後透過網際網路來瀏覽網頁製作者所提供的網頁稱為客戶端 ( Client 端 ) 。. 伺服端與客戶端在同一區域網路上.

morse
Download Presentation

ASP.NET 網頁製作教本 -- 從基本語法學起

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. ASP.NET 網頁製作教本 -- 從基本語法學起 第 2 章 進入 ASP.NET 網頁製作的準備工作

  2. 2-1 ASP.NET 相關技術概說

  3. Client 與 Server • 網頁提供者將其製作好的網頁放在 Server(伺服器)上，稱為伺服端(Server端)。 • 上網者準備好上網的機器，然後透過網際網路來瀏覽網頁製作者所提供的網頁稱為客戶端(Client端) 。

  4. 伺服端與客戶端在同一區域網路上 • 上圖中，雖然將伺服端與客戶端以網際網路連結起來，但實際上，伺服端與客戶端卻不一定要分處於網際網路的兩端，它們可以是同一區域網站的兩部機器，甚至是同一部機器既是伺服端又是客戶端。

  5. 伺服端與客戶端在同一區域網路上(續)

  6. 伺服端與客戶端在同一機器上 • 您在安裝書本範例之後，啟動瀏覽器，然後在位址欄輸入http://localhost/kjaspx藉以檢驗範例網頁是否安裝妥當，此時瀏覽器(也就是上網這一端)與 ASP.NET (也就是伺服器這一端)是位於同一部機器上。

  7. 伺服端與客戶端在同一機器上(續)

  8. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案 • ASP.NET 網頁必須透過 IIS 來執行方才有效，如果直接以瀏覽器或其他工具(例如 FrontPage)來開啟.aspx 檔案，則 ASP.NET 網頁中的 ASP 程式是不會被執行的。 • 舉例來說明：

  9. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續1) • 請利用「記事本」開啟 ch02 目錄的Whattime.aspx 檔案，可看到其內容如下： <HTML><BODY>現在時間：<%Dim T As DateT = NowResponse.Write( T )%></BODY></HTML>

  10. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續2) 其中位於 <% 及 %> 之間的是 ASP 程式，其功用是顯示系統時間。

  11. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續3) 2.請利用瀏覽器的「檔案/開啟舊檔」開啟 Whattime.aspx，結果並不會執行 Whattime.aspx 網頁中的程式，而只是啟動系統中預設的程式開啟 Whattime.aspx 檔案，以作者的機器為例，.aspx 檔案預設的編輯程式為「記事本」，結果開啟 Whattime.aspx 的作用是啟動「記事本」編輯 Whattime.aspx 檔案。

  12. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續4) 3.在瀏覽器的位址欄輸入： 如果您所建立的是區域網路作業平台，請輸入以下網址： http://localhost/kjaspx/ch02/Whattime.aspx http://IIS所在機器的IP位址/kjaspx/ch02/Whattime.aspx

  13. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續5) 結果如下圖，系統時間會被顯示出來，這表示 ASP 程式被執行了。

  14. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續6) • 以下是說明開啟.aspx 檔案(檔案/開啟舊檔)及瀏覽 ASP.NET 網頁(位址欄輸入網址)的差異：

  15. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續7) • 檔案/開啟舊檔：結果是啟動系統中預設的程式開啟 Whattime.aspx，而不會執行其中的 ASP 程式。

  16. 瀏覽ASP.NET 網頁vs.開啟 .aspx 檔案(續8) • 在位址欄輸入網址：網址會送到 IIS，而 IIS 會開啟 Whattime.aspx，並且解讀檔案內容，然後執行其中的 ASP 程式，最後再把結果下載到瀏覽器，而由於 IIS 在執行 ASP 程式之後，會將執行結果(以 Whattime.aspx 為例，結果是系統時間)下載到瀏覽器，所以瀏覽器除了顯示 "現在時間：" 之外，也能夠顯示系統時間。

  17. 練習 • 先利用瀏覽器的「檔案/開啟舊檔」開啟 kjaspx\ch02 的 Week02.aspx，然後在瀏覽器位址欄輸入 http://localhost/kjaspx/ch02/Week02.aspx ，並比較兩者的差異。

  18. HTML 語言 • HTML(HyperText Markup Language，超文字標示語言)是構成網頁最「基礎」的要素，雖然隨著技術的演進，又有各種新技術的誕生，例如 Dynamic HTML、Java Script、VB Script、ASP、ASP.NET…，但它們依然是建構在HTML 之上，並沒有捨棄既有的 HTML。

  19. 需要學 HTML? • 現在 HTML 編輯工具已經相當普遍，要建立一個 .htm 的網頁(文件)，只要使用自己最習慣的 HTML 編輯工具(例如FrontPage、Dreamweaver 、Word…) 加以編輯即可。 • 我們會利用 ASP 程式動態建立 HTML 格式的文件，然後下傳到瀏覽器端，所以不可不瞭解 HTML 語言的文法(簡稱「語法」)。

  20. HTML 是語言非程式語言 • HTML 是一種語言，但並不算是「程式」語言，HTML 所定義的範疇僅侷限於如何表現文字、圖片，以及如何建立文件之間的連結；程式則是經過規劃的一連串命令(或稱為「敘述」)，而這樣的命令可用來驅使作業系統或應用程式執行某些工作 。

  21. 動態網頁 • 由於HTML並不是程式語言，因此由HTML 所構成的文件並不會因時因地產生變化，所以便有「靜態」(static)網頁之稱。為了讓網頁具備動態變化的能力，不管是瀏覽器或 Web Server 製造廠商，都著手將程式加到單純的 HTML 文件中，而發展出動態網頁的技術。

  22. Server 及瀏覽器都可以執行程式 • 要產生動態網頁，一定要撰寫程式，至於該選擇哪一種程式語言，往往令網頁製作者感到頭痛。 • 首先必須說明的是，程式的執行端可分成客戶端(瀏覽器)及伺服端(Server)，如果程式在瀏覽器上面執行，則 Server 必須把程式碼傳下來，而瀏覽器也要聰明到可以執行 Server 所傳輸下來的程式，而如果程式在 Server 端執行，則 Server 只要把執行的結果傳下來即可。

  23. Server 及瀏覽器都可以執行程式(續1)

  24. Server 及瀏覽器都可以執行程式(續2)

  25. 什麼是 CGI? • 早期在 Server 端執行的程式，最有名的莫過於 CGI(Common Gateway Interface)，對網路族來說，CGI 好像是很技術的東西，但實際上，它的觀念卻與 UNIX 或 DOS 的 Shell 很像。 • 對 Shell 而言，使用者是利用鍵盤輸入指令，然後由 Shell 解譯此一指令並且啟動對應的程式。 • 對 CGI 而言，指令則是來自於瀏覽器，以 CGI 介面傳送到伺服器之後，再由伺服器解譯後啟動伺服器之中對應的程式。

  26. 從 CGI 到 ASP • 對 Shell 指令而言，可能帶有參數，當程式被 Shell 啟動之後，它可以透過 Shell 所提供的介面讀取指令的參數；對伺服端的程式而言，當它被啟動之後，則可以透過 CGI 所提供的介面讀取指令的參數。 • 最後是輸出的比較，同一個程式可能被 Shell 啟動或 CGI 所啟動，被 Shell 啟動的程式其輸出是螢幕，被 CGI 啟動的程式其輸出則是網路，也就是傳輸給瀏覽器。

  27. CGI 程式的問題 • CGI 可以說沒有任何技術可言，如果 Web 伺服器提供有 CGI 介面程式(可能的形式有原始程式碼、程式庫、動態連結程式庫…，視 Web伺服器而定)，那麼撰寫伺服端的 CGI 程式與一般程式是沒什麼差別的。 • 不過在實務上，同樣的作業系統，若 Web 伺服器不同，則 CGI 介面程式也會不同，過去常有人抱怨：「Web 伺服器由 WebSite 換成 IIS 之後，原來的 CGI 程式就無法使用了」，原因就是因為不同 Web 伺服器所提供的 CGI 介面程式不同所致。

  28. ASP vs. CGI • ASP 程式也算是 CGI 程式，或者說是CGI 程式的改良版，它跟 CGI 程式一樣是在伺服端執行的，但是它有以下優點： • CGI 介面物件化：在CGI 程式中收集網頁資料最麻煩的事情是解析瀏覽器上傳的資料(主要是為了解析特殊字元及中文碼)，若使用 ASP 程式來收集網頁資料，則 ASP.NET 會代為解析，並且轉換成物件供 ASP 程式來讀取，簡單地說，就是 ASP.NET 提供有豐富的物件(以下簡稱「ASP 物件」)讓 ASP 程式簡化 CGI 的相關處理工作。

  29. ASP vs. CGI(續) 2. 可以使用 .NET 物件類別：除了 ASP 物件外，舉凡 .NET Framework 系統底下的物件也都可以讓 ASP 程式來使用，使其成為 ASP 網頁製作中的資源，而由於 ASP 程式可以使用 .NET Framework 的物件類別，也使得 ASP 程式可以做的事情比傳統的 CGI 程式要多出許多 。

  30. ASP.NET 網頁的程式語言 • 在 ASP.NET 網頁的製作中，我們可以選擇 Visual Basic.NET(以下簡稱 VB.NET 或 VB)、Visual C#.NET、Java Script…等做為撰寫 ASP 程式的語言，本書選擇的是 VB.NET，因此除了 HTML 語言之外，VB.NET 程式語言可以說是製作 ASP.NET 網頁最重要的基礎，預定在下一章為您介紹 VB.NET 的程式設計。

  31. 整理一下 1. 單純由 HTML 所構成的網頁是靜態的網頁，欲產生動態網頁必須撰寫程式。網頁程式的執行可以分成在客戶端執行及在伺服端執行兩種狀態，而 ASP 是在伺服端執行的程式。 2. 以開啟檔案的方式開啟 .aspx 檔案，並不會讓檔案中 ASP 程式被執行。要讓 ASP 程式被執行的條件是：(1) 系統安裝有 IIS (2) 以瀏覽的方式瀏覽 ASP.NET 網頁。

  32. 整理一下(續1) 3. ASP 已經將 CGI 的介面封裝成比較容易使用的物件，如果已經開始使用 ASP，就可以不必再學 CGI。 4. HTML 是製作 ASP.NET 網頁很重要的基礎。

  33. 整理一下(續2) 5.VB.NET、Visual C#.NET 及 Java Script…等都可以用來撰寫 ASP 程式，而本書將採用 VB.NET 做為撰寫 ASP 程式的語言。 6.本書所介紹的 ASP.NET 網頁是由 HTML 與 VB.NET 所構成的，其中 HTML 是構成網頁的基礎，而 VB.NET 則是用來撰寫 ASP.NET 網頁所需之 ASP 程式。

  34. 2-2 使用 HTML 的基本觀念

  35. 為什麼要學 HTML? • 在 ASP.NET 網頁的製作中，瞭解 HTML 語法是必要的，舉例說明為什麼： 1. 首先請瀏覽 kjaspx/ch02 的week01.aspx ，結果網頁會顯示「今天是：星期X」的內容。

  36. 為什麼要學 HTML? (續1) 2. 檢視 week01.aspx 檔案的內容，其內容如下： <HTML><BODY>今天是：<%Dim week Week = DatePart( DateInterval.Weekday, Now() )Response.Write( WeekdayName(Week) ) %></BODY></HTML>

  37. 為什麼要學 HTML? (續2) • 其中粗體字部分為 ASP 程式，非粗體字部分則是傳統的 HTML 文件，ASP 程式與 HTML 文件可以說是涇渭分明，感覺上撰寫 ASP 程式似乎與 HTML 無關，但其實不然。 3. 請再瀏覽 ch02 目錄的 week02.aspx，同樣的網頁也會顯示「今天是：星期X」的內容，但星期 X 的部分則會因為星期一、二、…、日的不同，而顯示不同的顏色，其中星期一～五顯示成藍色、星期六顯示成綠色、星期日則顯示成紅色。

  38. 為什麼要學 HTML? (續3) 4. 讓我們稍微思考一下，week02.aspx 是怎麼做到的，別以為 ASP 程式可以控制瀏覽器所顯示的內容，ASP 程式沒有這種能力，ASP 程式與瀏覽器之間關係只有下載網頁及上載資料的關係，以 week02.aspx 為例，如果 ASP 程式希望瀏覽器能夠將網頁文字顯示成紅色，則方法是下載 "<FONT COLOR=Red>" 給瀏覽器，所撰寫的程式如下： Response.Write( "<FONT COLOR=Red>" )

  39. 為什麼要學 HTML?(續4) • 其中 <FONT COLOR=Red> 就是標準的 HTML 語法，被瀏覽器解讀之後，會將後續的文字顯示成紅色。 • 再看完整的 week02.aspx，其中粗體字的部分，都是由 ASP 程式下載 HTML 語句給瀏覽器的例子：

  40. 為什麼要學 HTML? (續5) <HTML> <BODY> 今天是： <%Dim Week Week = DatePart( DateInterval.Weekday, Now() ) If Week = 1 Then ' 星期日 Response.Write( "<FONT COLOR=Red>" ) ElseIf Week = 7 Then ' 星期六 Response.Write( "<FONT COLOR=Green>" ) Else Response.Write( "<FONT COLOR=Blue>" ) End If Response.Write( WeekdayName(Week) ) Response.Write( "</FONT>" ) %> </BODY> </HTML>

  41. 為什麼要學 HTML? (續6) 5. 在 week02.aspx 的例子中，我們可以看到 ASP 程式若要「控制」瀏覽器所顯示的內容，其方法是下載正確的 HTML 語句給瀏覽器，這就是撰寫 ASP 程式也必須瞭解 HTML 語法的原因。

  42. 標示的觀念 • 首先來看一個很簡單的 HTML 檔案，請使用記事本程式開啟本書 kjaspx/ch02目錄底下的 htm01.htm，其內容如下： <H1>初試 HTML 語法</H1><HR><H2>使用 HTML 的基本觀念</H2><P><UL><LI>標示的觀念</LI><LI>區塊的觀念</LI><LI>參數的觀念</LI></UL>

  43. 標示的觀念(續1) • 以上所看到的是 htm01.htm 檔案的原始碼，其中含有一些 HTML 標示(例如 <H1>、<HR>、<H2>、<UL>、<LI>)，這些標示都是有意義的，每一個標示就好像是下給瀏覽器的一個指令，舉例來說，<H1> 標示在告訴瀏覽器文字要顯示成「最大的標題」，所以「<H1>初試 HTML 語法</H1>」經瀏覽器解讀之後，顯示出來的結果便如下圖：

  44. 標示的觀念(續2)

  45. 標示的觀念(續3) • 除了 htm01.htm 之外，如果您使用記事本檢視其他 .htm 檔案，可以發現它們也都是由標示所組成的，HTML 的全名是 HyperText Markup Language(超文字標示語言)，其中 Markup (標示) 的意義就是這樣來的。

  46. 區塊的觀念 • 除了標示的觀念之外，HTML另一個重要的觀念是「區塊」，以前面的htm01.htm 檔案為例，「<H1>…</H1>」、「<H2>…</H2>」、「<UL>…</UL>」、及「<LI>…</LI>」都算是區塊。

  47. 區塊的觀念(續1)

  48. 區塊的觀念(續2) • 區塊的辨識很簡單，如果開頭的標示寫成 <標示Ｘ>，則一直向後尋找直到 </標示Ｘ> 時，就是一個區塊。 • 區塊的好處是讓 HTML 檔案具有結構性，可提高其可讀性，接下來讓我們繼續觀察 htm02.htm檔案，以下是以 IE 開啟的結果：

  49. 區塊的觀念(續3)

  50. 區塊的觀念(續4) • 再使用記事本加以檢視，結果也可以看到不少由標示所構成的區塊：

More Related