網頁設計回顧
網頁的發展史 網頁發展史大致可以分成下面三個階段： 其他較知名的網頁程式: HTML (HyperText Markup Language) ASP (Active Server Page) ASP.NET 其他較知名的網頁程式: JSP PHP ASP.NET ASP HTML
HTML 以標籤組成整份文件 主要用來呈現網頁畫面與排版 HTML的標籤要成對出現： Hi, 你好 1. <html> 2. <body> 3. <center> 4. <font face="標楷體">Hi, 你好</font> 5. </center> 6. </body> </html> 圖1.1. WebPage0101.html Hi, 你好 圖1.2 瀏覽WebPage0101.html
常用的HTML標籤(1/2) 名稱 說明 html head 頁首文字須夾在<head>及</head>之間。 title 標題文字須夾在<title>及</title>之間。 body 網頁本文須夾在<body>及</body>之間。 br 換行tag，用法<br>。 p 空一行，用法<p>。 pre 編排好的文書須夾在<pre>及</pre>之間。 basefont 基本字型，例：<basefont size="4">Hi, 你好</basefont>，顯示的字型為：Hi, 你好。 font 設定字型、大小、顏色，例：<font face=“標楷體” size=“4”> Hi, 你好</font>， 顯示的字型為：Hi, 你好。 center 置中，例：<center>Hi, 你好</center>，"Hi, 你好"會顯示在畫面的中央。 hx 預設字型大小，從<h1>到<h6>，例：<h3>Hi, 你好</h3>，顯示的字型為：Hi, 你好。 b 黑體字，例：<b>Hi, 你好</b>，顯示的字型為：Hi, 你好。 i 斜體字，例：<i>Hi, 你好</i>，顯示的字型為：Hi, 你好。 u 底線字，例：<u>Hi, 你好</u>，顯示的字型為：Hi, 你好。 tt 正體字，例：<tt>Hi, 你好</tt>，顯示的字型為：Hi, 你好。
常用的HTML標籤(2/2) 名稱 說明 big 較大字體，例：<big>Hi, 你好</big>，顯示的字型為：Hi, 你好。 small 較小字體，例：<small>Hi, 你好</small>，顯示的字型為：Hi, 你好。 sup 上標字體，例：Hi,<sup>你好</sup>，顯示的字型為：Hi,你好。 sub 下標字體，例：Hi,<sub>你好</sub>，顯示的字型為：Hi,你好。 blink 閃爍字體，例：<blink> Hi, 你好</blink>。 img 顯示圖形，例：<img src="圖形檔檔名" width="100px" height="50px">。 a 定義超連結，例：<a href="超連結位址">超連結文字</a>。 caption 表格標題。例：<caption>表格標題</caption>。 table 定義表格。例：<table><tr><td>欄位一</td><td>欄位二</td></tr></table> td 定義表格的欄位。 tr 定義表格的row。 frame 分頁設定。 map 影像地圖。例：<map><area>.…</area><area>.…</area></map> area Map的子標籤，定義影像地圖中的區域。
ASP 最原始的HTML語言缺乏和使用者互動的功能，於是有ASP的出現 1. <html> 2. <body> 3. <form action="WebPage0103.asp"> 4. 請輸入姓名:<input type="text" size="8" name="inName"><br> 5. <input type="submit" value="傳送"> 6. </form> 7. </body> </html> 圖1.3. WebPage0102.html 圖1.4 瀏覽WebPage0102.html
簡介ASP 1. <html> 2. <body> 3. <form action="WebPage0103.asp"> 4. 請輸入姓名:<input type="text" size="8" name="inName"><br> 5. <input type="submit" value="傳送"> 6. </form> 7. </body> </html> 圖1.3. WebPage0102.html 1. <% 2. Response.Write("Hi," + Request("inName") + "你好") 3. %> 圖1.7 WebPage0103.asp.
簡介ASP 圖1.4 瀏覽WebPage0102.html 圖1.5 瀏覽WebPage0102.html 圖1.6 上圖輸出之結果.
ASP的缺點 一件工作要多個程式來完成 不是全盤物件導向化的程式語言 未做輸入資料資驗證 未做網頁的資訊安全 未支援XML
ASP.NET ASP.NET改進了ASP的缺點，將網頁程式帶進一個嶄新的境界，ASP.NET的程式包含下列四大部分： 指引區塊(directive block): 夾在標籤“<%@ … %>”之中。 .NET程式碼區塊(code declaration block): 夾在標籤"<script … >"和"</script>"之中。 網頁標籤區塊(tag block): 夾在標籤"<html>"和"</html>"之中。 動態標籤區塊(code render block): 夾在標籤"<% … %>"之中。
ASP.NET 指引區塊 .NET程式碼區塊 網 頁標籤區 塊 圖1.8 WebPage0104.aspx 指引區塊 <%@ Page Language="VB" %> <script runat="server"> sub SayHi(obj as Object, e as EventArgs) lblMessage.Text = "Hi, " + tbName.Text + "你好“ end sub </script> .NET程式碼區塊 <html> <head></head> <body> <% Response.write("第一個ASP.NET程式") %> <br> <asp:Label id="lblMessage" runat="server" Text="看過來"/><br> <form runat="server"> 請輸入姓名:<asp:TextBox id="tbName" runat="server" /><br> <asp:Button Text="傳送" OnClick="SayHi" Runat="server" /> </form> </body> </html> 網 頁標籤區 塊 動態標籤區塊 圖1.8 WebPage0104.aspx
ASP.NET程式的編譯 .NET程式碼區塊和動態標籤區塊所用的語言都是script語言，但是執行時機卻不同。當用瀏覽器瀏覽網頁程式時，ASP.NET先編譯網頁程式，其中 .NET程式碼區塊，就會被編譯成object code，謂之Microsoft Intermediate Language碼，簡稱MSIL碼，此MSIL碼是儲存在server中，只是要讓網頁程式能快速的被執行。 編譯程式對網頁標籤區塊的處理是將所有的標籤都轉換成HTML的標籤，如果原來就是HTML的標籤，則不會有變化，若是ASP.NET的標籤，就要轉換成HTML的標籤。 編譯程式對動態標籤區塊中的程式碼不是做compile，而是做interpret的動作，亦即動態標籤區塊中的程式碼立即被解譯成HTML的標籤，和轉換後的網頁標籤區塊一起傳送到client端的瀏覽器。