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

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

第第 2 2 章章進入進入 ASP.NET ASP.NET 網頁製作的準備工作網頁製作的準備工作

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

Client Client 與與 ServerServer

網頁提供者將其製作好的網頁放在網頁提供者將其製作好的網頁放在 ServerServer(( 伺服器伺服器 )) 上，稱為伺服端上，稱為伺服端 ((ServerServer 端端 )) 。。

上網者準備好上網的機器，然後透過網際網上網者準備好上網的機器，然後透過網際網路來瀏覽網頁製作者所提供的網頁稱為客戶路來瀏覽網頁製作者所提供的網頁稱為客戶端端 ((ClientClient 端端 )) 。。

客戶端(Client) 伺服端(Server)

網際網路

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

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

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

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

瀏覽瀏覽 ASP.NET ASP.NET 網頁網頁 vs.vs. 開啟開啟 ..aspx aspx 檔案檔案

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

舉例來說明：舉例來說明：

瀏覽瀏覽 ASP.NET ASP.NET 網頁網頁 vs.vs. 開啟開啟 ..aspx aspx 檔案檔案 (( 續續 1)1)

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


其中位於其中位於 <% <% 及及 %> %> 之間的是之間的是 ASP ASP 程式程式，其功用是顯示系統時間。，其功用是顯示系統時間。


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


3.3. 在瀏覽器的位址欄輸入：在瀏覽器的位址欄輸入：

如果您所建立的是區域網路作業平台，如果您所建立的是區域網路作業平台，請輸入以下網址：請輸入以下網址：

http://localhost/kjaspx/ch02/Whattime.aspx

http://http://IISIIS 所在機器的所在機器的 IPIP 位址位址 //kjaspx/ch02/kjaspx/ch02/Whattime.aspxWhattime.aspx


結果如下圖，系統時間會被顯示出來，結果如下圖，系統時間會被顯示出來，這表示這表示 ASP ASP 程式被執行了。程式被執行了。


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

(1) /功能表的「檔案開啟舊檔」

(2) 在位址欄位輸入網址

瀏覽器

記事本或其他程式

Whattime.aspx

<HTML><BODY>現在時間：<%T = NowResponse.Write(T)%></BODY></HTML>

開啟檔案

開啟檔案

IIS

網頁下載執行

Whattime.aspx


檔案檔案 // 開啟舊檔開啟舊檔：結果是啟動系統中：結果是啟動系統中預設的程式開啟預設的程式開啟 Whattime.aspxWhattime.aspx ，，而而不會執行其中的不會執行其中的 ASP ASP 程式。程式。


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

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

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

需要學需要學 HTML?HTML?

現在現在 HTML HTML 編輯工具已經相當普遍，編輯工具已經相當普遍，要建立一個要建立一個 ..htm htm 的網頁的網頁 (( 文件文件 )) ，只要，只要使用自己最習慣的使用自己最習慣的 HTML HTML 編輯工具編輯工具(( 例如例如FrontPageFrontPage、、 Dreamweaver Dreamweaver 、、 WordWord……) ) 加加以編輯即可。以編輯即可。

我們會利用我們會利用 ASP ASP 程式動態建立程式動態建立 HTML HTML 格式的文件，然後下傳到瀏覽器端，所格式的文件，然後下傳到瀏覽器端，所以不可不瞭解以不可不瞭解 HTML HTML 語言的文法語言的文法 (( 簡簡稱「語法」稱「語法」 )) 。。

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

動態網頁動態網頁由於由於 HTMLHTML 並不是程式語言，因此由並不是程式語言，因此由

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

Server Server 及瀏覽器都可以執行程式及瀏覽器都可以執行程式要產生動態網頁，一定要撰寫程式，至於該選要產生動態網頁，一定要撰寫程式，至於該選擇哪一種程式語言，往往令網頁製作者感到頭擇哪一種程式語言，往往令網頁製作者感到頭痛。痛。

首先必須說明的是，程式的執行端可分成客戶首先必須說明的是，程式的執行端可分成客戶端端 (( 瀏覽器瀏覽器 )) 及伺服端及伺服端 ((Server)Server) ，，如果程式在瀏如果程式在瀏覽器上面執行，則覽器上面執行，則 Server Server 必須把程式碼傳下必須把程式碼傳下來，而瀏覽器也要聰明到可以執行來，而瀏覽器也要聰明到可以執行 Server Server 所所傳輸下來的程式，而如果程式在傳輸下來的程式，而如果程式在 Server Server 端執端執行，則行，則 Server Server 只要把執行的結果傳下來即可。只要把執行的結果傳下來即可。

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

1 程式在客戶端執行 2 程式在伺服端執行

:客戶端瀏覽器伺服端

程式網頁下載結果

直接顯示在瀏覽視窗上

執行

:客戶端瀏覽器伺服端

程式下載程式

執行

執行後顯示在瀏覽視窗上

程式

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

瀏覽器

Web Server

存取資料庫很簡單，但要把程式執行結果下載給瀏覽器

程式

資料庫

在瀏覽器上執行的程式資料庫

瀏覽器 Web Server存取資料庫是很辛苦的事情

什麼是什麼是 CGI?CGI?

早期在早期在 Server Server 端執行的程式，最有名的莫過端執行的程式，最有名的莫過於於 CGI(Common Gateway Interface)CGI(Common Gateway Interface) ，，對網路對網路族來說，族來說， CGI CGI 好像是很技術的東西，但實際好像是很技術的東西，但實際上，它的觀念卻與上，它的觀念卻與 UNIX UNIX 或或 DOS DOS 的的 Shell Shell 很像。很像。

對對 Shell Shell 而言，使用者是利用鍵盤輸入指令，而言，使用者是利用鍵盤輸入指令，然後由然後由 Shell Shell 解譯此一指令並且啟動對應的程解譯此一指令並且啟動對應的程式。式。

對對 CGI CGI 而言，指令則是來自於瀏覽器，以而言，指令則是來自於瀏覽器，以 CGI CGI 介面傳送到伺服器之後，再由伺服器解譯介面傳送到伺服器之後，再由伺服器解譯後啟動伺服器之中對應的程式。後啟動伺服器之中對應的程式。

從從 CGI CGI 到到 ASPASP

對對 Shell Shell 指令而言，可能帶有參數，當程式被指令而言，可能帶有參數，當程式被 Shell Shell 啟動之後，它可以透過啟動之後，它可以透過 Shell Shell 所提供的所提供的介面讀取指令的參數；對伺服端的程式而言，介面讀取指令的參數；對伺服端的程式而言，當它被啟動之後，則可以透過當它被啟動之後，則可以透過 CGI CGI 所提供的所提供的介面讀取指令的參數。介面讀取指令的參數。

最後是輸出的比較，同一個程式可能被最後是輸出的比較，同一個程式可能被 Shell Shell 啟動或啟動或 CGI CGI 所啟動，被所啟動，被 Shell Shell 啟動的程式其啟動的程式其輸出是螢幕，被輸出是螢幕，被 CGI CGI 啟動的程式其輸出則是啟動的程式其輸出則是網路，也就是傳輸給瀏覽器。網路，也就是傳輸給瀏覽器。

CGI CGI 程式的問題程式的問題 CGI CGI 可以說沒有任何技術可言，如果可以說沒有任何技術可言，如果 Web Web 伺伺

服器提供有服器提供有 CGI CGI 介面程式介面程式 (( 可能的形式有原可能的形式有原始程式碼、程式庫、動態連結程式庫…，視始程式碼、程式庫、動態連結程式庫…，視 WebWeb 伺服器而定伺服器而定 )) ，那麼撰寫伺服端的，那麼撰寫伺服端的 CGI CGI 程式與一般程式是沒什麼差別的。程式與一般程式是沒什麼差別的。

不過在實務上，同樣的作業系統，若不過在實務上，同樣的作業系統，若 Web Web 伺伺服器不同，則服器不同，則 CGI CGI 介面程式也會不同，過去介面程式也會不同，過去常有人抱怨：「常有人抱怨：「 Web Web 伺服器由伺服器由 WebSite WebSite 換成換成 IIS IIS 之後，原來的之後，原來的 CGI CGI 程式就無法使用了」，程式就無法使用了」，原因就是因為不同原因就是因為不同 Web Web 伺服器所提供的伺服器所提供的 CGI CGI 介面程式不同所致。介面程式不同所致。

ASP ASP vs.vs. CGI CGI

ASP ASP 程式也算是程式也算是 CGI CGI 程式，或者說是程式，或者說是 CGI CGI 程式的改良版，它跟程式的改良版，它跟 CGI CGI 程式一樣是在伺程式一樣是在伺服端執行的，但是它有以下優點：服端執行的，但是它有以下優點：

1.1. CGI CGI 介面物件化介面物件化：在：在 CGI CGI 程式中收集網頁程式中收集網頁資料最麻煩的事情是解析瀏覽器上傳的資料資料最麻煩的事情是解析瀏覽器上傳的資料((主要是為了解析特殊字元及中文碼主要是為了解析特殊字元及中文碼 )) ，若使，若使用用 ASP ASP 程式來收集網頁資料，則程式來收集網頁資料，則 ASP.NET ASP.NET 會代為解析，並且轉換成物件供會代為解析，並且轉換成物件供 ASP ASP 程式程式來讀取，簡單地說，就是來讀取，簡單地說，就是 ASP.NET ASP.NET 提供有提供有豐富的物件豐富的物件 (( 以下簡稱「以下簡稱「 ASP ASP 物件」物件」 ))讓讓 ASP ASP 程式簡化程式簡化 CGI CGI 的相關處理工作。的相關處理工作。

ASP ASP vs.vs. CGI CGI (( 續續 ))

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

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

整理一下整理一下 1.1. 單純由單純由 HTML HTML 所構成的網頁是靜態的網頁，所構成的網頁是靜態的網頁，

欲產生動態網頁必須撰寫程式。網頁程式的欲產生動態網頁必須撰寫程式。網頁程式的執行可以分成在客戶端執行及在伺服端執行執行可以分成在客戶端執行及在伺服端執行兩種狀態，而兩種狀態，而 ASP ASP 是在伺服端執行的程式是在伺服端執行的程式。。

2.2. 以開啟檔案的方式開啟以開啟檔案的方式開啟 ..aspx aspx 檔案檔案，並不會，並不會讓檔案中讓檔案中 ASP ASP 程式程式被執行。要讓被執行。要讓 ASP ASP 程程式被執行的條件是：式被執行的條件是： (1) (1) 系統安裝有系統安裝有 IIS (2) IIS (2) 以瀏覽的方式瀏覽以瀏覽的方式瀏覽 ASP.NET ASP.NET 網頁網頁。。

整理一下整理一下 (( 續續 1)1)

3. ASP 3. ASP 已經將已經將 CGI CGI 的介面封裝成比較容的介面封裝成比較容易使用的物件，如果已經開始使用易使用的物件，如果已經開始使用 ASPASP ，，就可以不必再學就可以不必再學 CGICGI。。

4. HTML 4. HTML 是製作是製作 ASP.NET ASP.NET 網頁很重要的網頁很重要的基礎。基礎。

整理一下整理一下 (( 續續 2)2)

5.VB.NET5.VB.NET、、 Visual C#.NET Visual C#.NET 及及 Java Java ScriptScript……等都可以用來撰寫等都可以用來撰寫 ASP ASP 程式，程式，而本書將採用而本書將採用 VB.NET VB.NET 做為撰寫做為撰寫 ASP ASP 程式的語言。程式的語言。

6.6. 本書所介紹的本書所介紹的 ASP.NET ASP.NET 網頁網頁是由是由 HTML HTML 與與 VB.NET VB.NET 所構成的，其中所構成的，其中 HTML HTML 是構成網頁的基礎，而是構成網頁的基礎，而 VB.NET VB.NET 則是用來撰寫則是用來撰寫 ASP.NET ASP.NET 網頁所需之網頁所需之 ASP ASP 程式程式。。

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

為什麼要學為什麼要學 HTML?HTML?

在在 ASP.NET ASP.NET 網頁的製作中，瞭解網頁的製作中，瞭解 HTML HTML 語法是必要的，舉例說明為什麼：語法是必要的，舉例說明為什麼：

1. 1. 首先請瀏覽首先請瀏覽 kjaspx/ch02 kjaspx/ch02 的的week01.aspx week01.aspx ，，結果網頁會顯示「今結果網頁會顯示「今天是：星期天是：星期 XX 」」的內容。的內容。

為什麼要學為什麼要學 HTML? HTML? (( 續續 1)1)

2. 2. 檢視檢視 week01.aspx week01.aspx 檔案的內容，其內檔案的內容，其內容如下：容如下：

<HTML><BODY>今天是：<%Dim week Week = DatePart( DateInterval.Weekday, Now() )Response.Write( WeekdayName(Week) ) %></BODY></HTML>


其中粗體字部分為其中粗體字部分為 ASP ASP 程式，非粗體字部分程式，非粗體字部分則是傳統的則是傳統的 HTML HTML 文件，文件， ASP ASP 程式與程式與 HTML HTML 文件可以說是涇渭分明，感覺上撰寫文件可以說是涇渭分明，感覺上撰寫 ASP ASP 程式似乎與程式似乎與 HTML HTML 無關，但其實不然。無關，但其實不然。

3. 3. 請再瀏覽請再瀏覽 ch02 ch02 目錄的目錄的 week02.aspxweek02.aspx ，，同樣的同樣的網頁也會顯示「今天是：星期網頁也會顯示「今天是：星期 XX 」」的內容，但的內容，但星期星期 X X 的部分則會因為星期一、二、…、日的部分則會因為星期一、二、…、日的不同，而顯示不同的顏色，其中星期一～五的不同，而顯示不同的顏色，其中星期一～五顯示成藍色、星期六顯示成綠色、星期日則顯顯示成藍色、星期六顯示成綠色、星期日則顯示成紅色。示成紅色。


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

為什麼要學為什麼要學 HTML?HTML? (( 續續 4)4) 其中其中 <<FONT COLOR=Red> FONT COLOR=Red> 就是標準的就是標準的

HTML HTML 語法，被瀏覽器解讀之後，會將語法，被瀏覽器解讀之後，會將後續的文字顯示成紅色。後續的文字顯示成紅色。

再看完整的再看完整的 week02.aspxweek02.aspx ，，其中粗體字其中粗體字的部分，都是由的部分，都是由 ASP ASP 程式下載程式下載 HTML HTML 語句給瀏覽器的例子：語句給瀏覽器的例子：

為什麼要學為什麼要學 HTML? HTML? (( 續續 5)5) <HTML><BODY>今天是：<%Dim WeekWeek = 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 IfResponse.Write( WeekdayName(Week) )Response.Write( "</FONT>" )%></BODY></HTML>


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

標示的觀念標示的觀念首先來看一個很簡單的首先來看一個很簡單的 HTML HTML 檔案，請檔案，請

使用記事本程式開啟本書使用記事本程式開啟本書 kjaspx/ch02kjaspx/ch02 目目錄底下的錄底下的 htm01.htmhtm01.htm ，，其內容如下：其內容如下：<H1>初試 HTML 語法 </H1><HR><H2>使用 HTML 的基本觀念 </H2><P><UL><LI>標示的觀念 </LI><LI>區塊的觀念 </LI><LI>參數的觀念 </LI></UL>

標示的觀念標示的觀念 (( 續續 1)1) 以上所看到的是以上所看到的是 htm01.htm htm01.htm 檔案的原始檔案的原始

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

標示的觀念標示的觀念 (( 續續 2)2)

<H1>初試 HTML 語法</H1>經瀏覽器解讀之後，所顯示出來的結果。

標示的觀念標示的觀念 (( 續續 3)3) 除了除了 htm01.htm htm01.htm 之外，如果您使用記事之外，如果您使用記事

本檢視其他本檢視其他 ..htm htm 檔案，可以發現它們也檔案，可以發現它們也都是由標示所組成的，都是由標示所組成的， HTML HTML 的全名是的全名是 HyperText Markup Language(HyperText Markup Language( 超文字標示超文字標示語言語言 )) ，其中，其中 Markup (Markup ( 標示標示 ) ) 的意義就的意義就是這樣來的。是這樣來的。

區塊的觀念區塊的觀念除了標示的觀念之外，除了標示的觀念之外， HTMLHTML 另一個重另一個重

要的觀念是「區塊」，以前面的要的觀念是「區塊」，以前面的htm01.htm htm01.htm 檔案為例，「檔案為例，「 <<H1>…</H1>H1>…</H1> 」、」、「「 <H2>…</H2><H2>…</H2> 」、「」、「 <UL>…</UL><UL>…</UL>」、」、及「及「 <<LI>…</LI>LI>…</LI> 」」都算是區塊。都算是區塊。

區塊的觀念區塊的觀念 (( 續續 1)1)

<H1>初試 HTML 語法</H1><HR><H2>使用 HTML 的基本觀念</H2><P><UL><LI>標示的觀念</LI><LI>區塊的觀念</LI><LI>參數的觀念</LI></UL>

區塊

區塊

區塊區塊


區塊的辨識很簡單，如果開頭的標示寫區塊的辨識很簡單，如果開頭的標示寫成成 << 標示Ｘ標示Ｘ >> ，則一直向後尋找直到，則一直向後尋找直到 <<//標示Ｘ標示Ｘ > > 時，就是一個區塊。時，就是一個區塊。

區塊的好處是讓區塊的好處是讓 HTML HTML 檔案具有結構性，檔案具有結構性，可提高其可讀性，接下來讓我們繼續觀可提高其可讀性，接下來讓我們繼續觀察察 htm02.htmhtm02.htm 檔案，以下是以檔案，以下是以 IE IE 開啟開啟的結果：的結果：


區塊的觀念區塊的觀念 (( 續續 4)4) 再使用記事本加以檢視，結果也可以看再使用記事本加以檢視，結果也可以看

到不少由標示所構成的區塊：到不少由標示所構成的區塊：

標示的屬性標示的屬性在在 htm02.htm htm02.htm 裡面，我們也發現有些標示並裡面，我們也發現有些標示並不是單純的不是單純的 << 標示標示 > > 型態，而是型態，而是 << 標示標示 xxx=? yyy=?xxx=? yyy=?……> > 的型態，這一類的標示稱為的型態，這一類的標示稱為有有屬性屬性的標示，例如的標示，例如 <<IMG SRC="stone.jpg" IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>HEIGHT=200 WIDTH=300> 。。

<IMG WIDTH=300>HEIGHT=200SRC="stone.jpg"

以空白字元區隔

標示名稱屬性

屬性的表示屬性的表示含有屬性的標示其屬性之間須使用空白含有屬性的標示其屬性之間須使用空白字元區隔，屬性本身則是「字元區隔，屬性本身則是「 xxx = yyyxxx = yyy 」」的型態，位於的型態，位於 ‘ ‘ =’ =’ 號前面的是號前面的是屬性名屬性名稱稱，，‘‘ =’ =’ 號後面的則是號後面的則是屬性值。屬性值。

屬性名稱是不可以改變的，而屬性值則屬性名稱是不可以改變的，而屬性值則依設計者的需求來設定。依設計者的需求來設定。

屬性的表示屬性的表示 (( 續續 )) 舉例來說，如果我們把：舉例來說，如果我們把：

改成：改成：

則顯示出來的則顯示出來的 stone.jpg stone.jpg 圖片將變成原來圖片將變成原來的四分之一。的四分之一。

<IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>


階層的觀念階層的觀念在在 htm02.htm htm02.htm 裡面，我們還發現標示是裡面，我們還發現標示是有階層的，如果把有階層的，如果把 htm02.htm htm02.htm 標示之外標示之外的文字及標示之中的屬性刪除，並且按的文字及標示之中的屬性刪除，並且按階層來排列，結果如下：階層來排列，結果如下：

階層的觀念階層的觀念 (( 續續 ))<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML> <HEAD> <TITLE></TITLE> <META> <META> </HEAD> <BODY> <H2></H2> <CENTER> <P> <HR> </P> </CENTER> <CENTER> <P> <IMG> </P> </CENTER> </BODY></HTML>

HTML HEAD

BODY

TITLE

META

META

H2

CENTER P HR

CENTER P IMG

階層的優點階層的優點有些有些 HTML HTML 編輯工具在產生編輯工具在產生 HTML HTML 原始檔時，會將其中的原始檔時，會將其中的 HTML HTML 標示按標示按照階層關係來排列照階層關係來排列 (( 例如以上的排序方例如以上的排序方式式 )) ，可以給人一目了然的感覺。，可以給人一目了然的感覺。

階層階層 -- <-- <HTML>HTML> 標示標示 HTMLHTML ：：用來表示用來表示 <<HTML> HTML> 與與

</</HTML> HTML> 之間的文字是一份之間的文字是一份 HTML HTML 文文件。對絕大部分的瀏覽器來說，會自動件。對絕大部分的瀏覽器來說，會自動將將 ..htm htm 及及 ..html html 的檔案視為的檔案視為 HTML HTML 文文件，所以省略此一標示並不會影響顯示件，所以省略此一標示並不會影響顯示的結果。的結果。

階層階層 -- <-- <HEAD>HEAD> 標示標示 HEADHEAD ：：用來設定用來設定 HTML HTML 文件的標題、文件的標題、作者…等資訊，但這些資訊都不會顯示作者…等資訊，但這些資訊都不會顯示在瀏覽視窗上，因此有人會乾脆省略這在瀏覽視窗上，因此有人會乾脆省略這個標示，例如：個標示，例如：

<HTML><BODY>HTML 文件的主體在此</BODY></HTML>

階層階層 -- <-- <BODY>BODY> 標示標示 BODYBODY ：：撰寫在撰寫在 <<BODY> BODY> 及及

</</BODY> BODY> 之間的之間的 HTML HTML 標示經瀏覽器標示經瀏覽器解讀之後，會顯示在瀏覽視窗中，所以解讀之後，會顯示在瀏覽視窗中，所以這是這是 HTML HTML 主體的部分。對大部分瀏主體的部分。對大部分瀏覽器來說，省略覽器來說，省略 BODY BODY 標示也是無所標示也是無所謂的，例如謂的，例如 htm01.htm htm01.htm 就是一個沒有就是一個沒有 HTMLHTML、、 HEADHEAD 、、及及 BODY BODY 標示的文標示的文件，而使用件，而使用 IE IE 及及 Netscape Netscape 來瀏覽，來瀏覽，也都可以正常顯示。也都可以正常顯示。

超文字的觀念超文字的觀念 HTMLHTML 指的是指的是 HyperText HyperText Markup Markup

LanguageLanguage ，，這這 HyperTextHyperText 直譯為「超文直譯為「超文字」，主要是指「連結」及「圖片」字」，主要是指「連結」及「圖片」 (( 也也包含其他任何非文字性的媒體，例如聲包含其他任何非文字性的媒體，例如聲音、音樂、影片…等音、音樂、影片…等 )) ，以下解說「連，以下解說「連結」及「圖片」與結」及「圖片」與 HTML HTML 文件的關係：文件的關係：

超文字的觀念超文字的觀念 -- -- 圖片圖片圖片圖片：在：在 htm02.htm htm02.htm 標示中，我們已經標示中，我們已經看到用來插入圖片的標示看到用來插入圖片的標示 <<IMG>IMG> ，，其其中設定圖片來源檔案的屬性是中設定圖片來源檔案的屬性是 SRCSRC 、、而屬性值是而屬性值是 “ “ stone.jpg”stone.jpg” ，，如下：如下：

這表示瀏覽器在解讀此一標示時，必須這表示瀏覽器在解讀此一標示時，必須繼續下載繼續下載 (( 或讀取或讀取 ) ) stone.jpg stone.jpg 這個檔案，這個檔案，然後將其顯示在瀏覽視窗上。然後將其顯示在瀏覽視窗上。


圖檔來源目錄的設定圖檔來源目錄的設定但瀏覽器該從哪一個目錄讀取但瀏覽器該從哪一個目錄讀取 stone.jpg stone.jpg 檔案呢？以「檔案呢？以「 SRC=“stone.jpg”SRC=“stone.jpg” 」」的設定的設定方式來看，方式來看， stone.jpg stone.jpg 必須與必須與 HTML HTML 檔檔案放在同一個目錄。除了案放在同一個目錄。除了「「 SRC="stone.jpg"SRC="stone.jpg" 」」的設定格式之外，的設定格式之外，以下也是常見的設定方式：以下也是常見的設定方式： (1) SRC="picture/stone.jpg"(2) SRC="../stone.jpg"(3) SRC="http://www.kj.com.tw/graphic/stone.jpg"

圖檔來源目錄的設定圖檔來源目錄的設定 (( 續續 1)1)

(1)(1)SRC=“picture/stone.jpg”SRC=“picture/stone.jpg”：：以以 HTML HTML 檔案的所在目錄為基礎，檔案的所在目錄為基礎， stone.jpg stone.jpg 必須放在必須放在 HTML HTML 檔案所在目檔案所在目錄的錄的 picture picture 子目錄。子目錄。

(2)(2)SRC="../stone.jpg"SRC="../stone.jpg"：：以以 HTML HTML 檔案的所在目錄為基礎，檔案的所在目錄為基礎， stone.jpg stone.jpg 必須放在必須放在 HTML HTML 檔案所在目檔案所在目錄的上一層目錄。錄的上一層目錄。

簡單地說，簡單地說， (1)(2)(1)(2) 的設定格式是以的設定格式是以 HTML HTML 檔案做為相對的目錄。檔案做為相對的目錄。

圖檔來源目錄的設定圖檔來源目錄的設定 (( 續續 2)2)

(3)(3)SRC=“http://www.kj.com.tw/SRC=“http://www.kj.com.tw/graphic/stone.jpg”graphic/stone.jpg” ：： stone.jpg stone.jpg 必須放在必須放在 www.kj.com.tw www.kj.com.tw 這個這個 Web Web 伺服器的伺服器的 //graphic graphic 目錄底下。目錄底下。

超文字的觀念超文字的觀念 -- -- 連結連結連結連結：在瀏覽網頁時，將滑鼠指標移到：在瀏覽網頁時，將滑鼠指標移到某一段文字或圖片上面，如果會出現某一段文字或圖片上面，如果會出現指標，就表示這是一個連結，在此按下指標，就表示這是一個連結，在此按下會連結到另一個網頁。會連結到另一個網頁。

超文字的觀念超文字的觀念 -- -- 連結連結 (( 續續1)1)

超文字的觀念超文字的觀念 -- -- 連結連結 (( 續續2)2)

以以 kjaspx\ch02 kjaspx\ch02 目錄的目錄的 VBBooks.htm VBBooks.htm 為例，為例，將 “將 “ Visual Basic 6.0 Visual Basic 6.0 與與 Windows API Windows API 講講座” 定義成連結的標示是座” 定義成連結的標示是 <<A>A> ，，如下：如下：

其中標示的其中標示的 HREFHREF 屬性被設定成屬性被設定成 ““ api/vbapi.htm”api/vbapi.htm” ，，這表示在 “這表示在 “ Visual Basic Visual Basic 6.0 6.0 與與 Windows API Windows API 講座” 上面按下連結講座” 上面按下連結之後，會跳到之後，會跳到 apiapi 子目錄的子目錄的 vbapi.htm vbapi.htm 網頁網頁

<A HREF="api/vbapi.htm">Visual Basic 6.0 與 Windows API 講座 </A>

連結之網頁的目錄設定連結之網頁的目錄設定 HREF=“api/vbapi.htm” HREF=“api/vbapi.htm” 表示以表示以 HTML HTML 的所在目錄為基礎，在的所在目錄為基礎，在 api api 子目錄底下子目錄底下必須含有必須含有 vbapi.htm vbapi.htm 網頁，才能構成正網頁，才能構成正確的連結。除此之外，以下也是常見的確的連結。除此之外，以下也是常見的設定方式：設定方式：

(1) HREF="vbapi.htm"(2) HREF="../vbapi.htm"(3) HREF="http://www.kj.com.tw/2000/vb/api/vbapi.htm"

連結之網頁的目錄設定連結之網頁的目錄設定 (( 續續 ))(1)(1)HREF="vbapi.htm"HREF="vbapi.htm": :

vbapi.htm vbapi.htm 檔案必須放在目前所在目錄。檔案必須放在目前所在目錄。(2)(2)HREF="../vbapi.htm"HREF="../vbapi.htm": :

vbapi.htm vbapi.htm 檔案必須放在目前所在目錄的上一檔案必須放在目前所在目錄的上一層目錄。層目錄。

(3)(3)HREF="http://www.kj.com.tw/2000/vb/HREF="http://www.kj.com.tw/2000/vb/api/vbapi.htm"api/vbapi.htm": :

vbapi.htm vbapi.htm 必須放在必須放在 www.kj.com.tw www.kj.com.tw 這個這個 Web Web 伺服器的伺服器的 /2000//2000/vb/api vb/api 目錄底下。目錄底下。

其他觀念一其他觀念一多個放在一起的空白字元，只會被瀏覽器視為多個放在一起的空白字元，只會被瀏覽器視為

一個空白字元一個空白字元：：

舉例來說，以下兩行標示所顯示的結果是相同舉例來說，以下兩行標示所顯示的結果是相同的：的：

結果結果 ""初試初試 " " 與與 ""HTML" HTML" 之間都只會顯示一之間都只會顯示一個空白字元。個空白字元。

<H1> 初試 HTML 語法 </H1><H1> 初試 HTML 語法 </H1>

其他觀念一其他觀念一 (( 續續 )) 既然多個放在一起的空白字元，只會顯既然多個放在一起的空白字元，只會顯示出一個空白字元，那麼如果我們想將示出一個空白字元，那麼如果我們想將字元與字元之間的距離拉寬一點，該如字元與字元之間的距離拉寬一點，該如何做呢？何做呢？

最簡便的方法是最簡便的方法是在字元與字元之間插入在字元與字元之間插入中文中文 (( 全形字型全形字型 )) 的空白字元的空白字元，中文的空，中文的空白字元並不會被解讀成空白字元，而是白字元並不會被解讀成空白字元，而是被解讀成中文字，故多插入幾個中文的被解讀成中文字，故多插入幾個中文的空白字元便可以達到拉大字元與字元距空白字元便可以達到拉大字元與字元距離的目的。離的目的。

其他觀念二其他觀念二跳行字元是沒有作用的字元跳行字元是沒有作用的字元：：

在我們編輯文字檔時，往往會按下在我們編輯文字檔時，往往會按下 Enter Enter 鍵來鍵來表示跳行，如下：表示跳行，如下：

而實際上顯示在瀏覽視窗時，其結果卻是「這而實際上顯示在瀏覽視窗時，其結果卻是「這是第一行這是第二行」，根本沒有被分成兩行是第一行這是第二行」，根本沒有被分成兩行來顯示。來顯示。

這是第一行這是第二行

跳行字元

其他觀念二其他觀念二 (( 續續 1)1) 那麼如何將文字分行呢？那麼如何將文字分行呢？常用的方法是常用的方法是在文字之間插入在文字之間插入 <<P> P> 或或

<<BR> BR> 標示標示。。– <<P> P> 標示的作用是標示的作用是分段落分段落，也就是位於，也就是位於

<<P> P> 標示後面的文字會放在新的段落標示後面的文字會放在新的段落 (( 也就也就是新的一行是新的一行 )) 。。

– <<BR> BR> 標示的作用是標示的作用是斷行斷行，兩者的差別如下，兩者的差別如下圖，若利用圖，若利用 <<P> P> 標示來分行，則行與行之標示來分行，則行與行之間的距離比較大。間的距離比較大。

其他觀念二其他觀念二 (( 續續 2)2)

這是第一行 <P>這是第二行

這是第一行 <BR>這是第二行

其他觀念三其他觀念三標示是不區分大小寫的標示是不區分大小寫的：：

舉例來說，舉例來說， <<BR>BR> 、、 <Br><Br> 、、及及 <<br> br> 的意義是完全相同的。的意義是完全相同的。

其他觀念四其他觀念四註解標示註解標示：：凡是放在凡是放在  --> 之間的文字，之間的文字，都會被瀏覽器略過不予解讀，也就都會被瀏覽器略過不予解讀，也就是不會顯示在瀏覽視窗上。由於是不會顯示在瀏覽視窗上。由於   具有不被解讀的特性，我們具有不被解讀的特性，我們可以利用它來插入註解文字。可以利用它來插入註解文字。

其他觀念四其他觀念四 (( 續續 1)1) 舉例來說，有一串標示如下：舉例來說，有一串標示如下：

其作用是「以置中方式插入其作用是「以置中方式插入 stone.jpg stone.jpg 圖片」，那圖片」，那麼我們可以在此一標示之前插入以下的註解標示：麼我們可以在此一標示之前插入以下的註解標示：

則則  --> 在此在此的用途便是解釋的用途便是解釋 <<CENTER><IMG CENTER><IMG SRC=...></CENTER> SRC=...></CENTER> 這一串標示的作用，而且不這一串標示的作用，而且不會改變既有標示的意義。會改變既有標示的意義。

<CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER>

<CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER>

其他觀念五其他觀念五前面在設定屬性值時，有些標示在屬性值的前前面在設定屬性值時，有些標示在屬性值的前

後含有後含有 " "(" "( 例如例如 SRC= "stone.jpg")SRC= "stone.jpg") ，，但有些但有些卻沒有卻沒有 (( 例如例如 HEIGHT=200 )HEIGHT=200 ) ，，請問設定屬性請問設定屬性值時，前後加不加值時，前後加不加 " "" " ，該如何判斷？，該如何判斷？

在屬性值前後加上在屬性值前後加上 " " " " 是比較標準的寫法，但是比較標準的寫法，但如果屬性值之中只有中英文字及數字，則屬性如果屬性值之中只有中英文字及數字，則屬性值前後不加值前後不加 " " " " 也沒關係。如果您沒有把握該也沒關係。如果您沒有把握該不該在屬性值前後加上不該在屬性值前後加上 " "" " ，那麼加上，那麼加上 " " " " 總總是不會錯的。是不會錯的。

2-3 2-3 常用的常用的 HTML HTML 標示標示

learn.aspxlearn.aspx：： HTML HTML 學習網頁學習網頁

左邊的架框會列出本節所有左邊的架框會列出本節所有的的 ..htm htm 網頁，選取後其原始碼會網頁，選取後其原始碼會顯示於右上方的架框，網頁瀏覽的顯示於右上方的架框，網頁瀏覽的結果會顯示於右下方的架框。結果會顯示於右下方的架框。

learn.aspxlearn.aspx：： HTML HTML 學習網頁學習網頁(( 續續 1)1)

選取原始碼

瀏覽結果


右上方的框架還可用來輸入右上方的框架還可用來輸入 HTMLHTML標示，為「輸入架框」，輸入後，標示，為「輸入架框」，輸入後，按下「解讀按下「解讀 HTMLHTML 」」鈕，則輸入於鈕，則輸入於架框內的文字即會被解讀，然後顯架框內的文字即會被解讀，然後顯示在右下方的架框中。示在右下方的架框中。


在此輸入HTML 標示

解讀後的結果

上機練習上機練習接下來讓我們來嘗試前面所介紹過的接下來讓我們來嘗試前面所介紹過的

HTML HTML 標示，請分別輸入標示，請分別輸入 (1)(1) ～～ (5) (5) 的的HTMLHTML 標示，然後按下「解讀標示，然後按下「解讀 HTMLHTML 」」鈕，看看瀏覽的結果：鈕，看看瀏覽的結果：

上機練習上機練習 (1)(1) 輸入：輸入：

結果結果：瀏覽窗格上只會顯示「上一行是：瀏覽窗格上只會顯示「上一行是一個註解，不會顯示在瀏覽視窗上」這一個註解，不會顯示在瀏覽視窗上」這一行文字。一行文字。

上一行是一個註解，不會顯示在瀏覽視窗上

上機練習上機練習 (2)(2) 輸入：輸入：

結果結果：這四行文字會顯示成三個落段，：這四行文字會顯示成三個落段，其中由於第三行與第四行之間沒有其中由於第三行與第四行之間沒有 <<P> P> 標示，所以會顯示成同一個段落。標示，所以會顯示成同一個段落。

這是第一個段落。 <P>這是第二個段落。 <P>

這是第三個段落。這還是第三個段落，因為兩行之間沒有段落標示 P。

上機練習上機練習 (3)(3)

輸入：輸入：

結果結果：兩行「：兩行「 P P 是段落標示」之間有明是段落標示」之間有明顯的間距，但兩行「顯的間距，但兩行「 BR BR 是斷行標示」是斷行標示」之間則沒有明顯的間距。之間則沒有明顯的間距。

P 是段落標示 <P>P 是段落標示 <P>

BR 是斷行標示 <BR>BR 是斷行標示


輸入：輸入：

結果結果：第一行的：第一行的 6 6 個空白字元只會顯示個空白字元只會顯示出一個空白字元，而第二行的出一個空白字元，而第二行的 3 3 個中文個中文全形空白字元則會完全顯示出來。全形空白字元則會完全顯示出來。

這一行插入 6 個空白字元 ( 英文半形 )<P>這一行插入 3 個中文全形空白字元


輸入：輸入：

說明說明：以上在測試：以上在測試 <<IMG> IMG> 標示標示 (( 用來插入圖用來插入圖片片 )) ，其中比較有趣的是第二個，其中比較有趣的是第二個 <<IMG> IMG> 標示，標示，此一標示省略了此一標示省略了 HEIGHT HEIGHT 及及 WIDTH WIDTH 屬性，屬性，這表示圖片要以原大小來顯示，另外增加了這表示圖片要以原大小來顯示，另外增加了 BORDER=1 BORDER=1 屬性，這表示圖片顯示時要含有屬性，這表示圖片顯示時要含有邊框。邊框。

<CENTER> <IMG SRC="F8316.gif" HEIGHT=66 WIDTH=440><BR> 圖片一 <P> <IMG SRC="F8315.gif" BORDER=1><BR> 圖片二 <P></CENTER>

練習一練習一利用利用 learn.aspx learn.aspx 網頁檢測以下網頁檢測以下 HTML HTML 顯示的結果：顯示的結果：

1)<HTML> <BODY BgColor=Blue> </BODY> </HTML>

2) 這是第一階 <BLOCKQUOTE> 這是第二階 <BLOCKQUOTE> 這是第三階 </BLOCKQUOTE> </BLOCKQUOTE>

練習一練習一 ((續續 ))

3)<HTML> <BODY Background="stone.jpg"> </BODY> </HTML>

4)<IMG SRC=“../B01.jpg”>

5)<A HREF=“ba/vbba6.htm”> 新觀念的 VB6 教本 </A><P> <A HREF=“ex/vbex6.htm”> VB6 實戰講座 </A>

設定文字外觀的標示設定文字外觀的標示設定文字外觀的標示，常用者有設定文字外觀的標示，常用者有

<<B>B>、、 <I><I>、、 <U><U>、、 <SUP><SUP>、、 <SUB><SUB>、、 <TT><TT>、、 <FONT><FONT> 。。

<<B>B> ：：將文字設定成粗體字，例如：將文字設定成粗體字，例如：「「 <<B>B> 這是粗體字這是粗體字 </</B>B> 」」所顯示的結所顯示的結果為「果為「這是粗體字這是粗體字」。」。

設定文字外觀的標示設定文字外觀的標示 ((續續 1)1)

<<I>I> ：：將文字設定成斜體字，例如：將文字設定成斜體字，例如：「「 <<I>I> 這是斜體字這是斜體字 </</I>I> 」」所顯示的結果所顯示的結果為「為「這是斜體字這是斜體字」。」。

<<U>U> ：：將文字設定成加底線，例如：將文字設定成加底線，例如：「「 <<U>U> 這是加底線字這是加底線字 </</U>U> 」」所顯示的所顯示的結果為「結果為「這是加底線字這是加底線字」。」。

設定文字外觀的標示設定文字外觀的標示 ((續續 2) 2)

<<SUP>SUP> ：：將文字設定成上標字，例如：將文字設定成上標字，例如：「這是正常字「這是正常字 <<SUP>SUP> 這是上標字這是上標字 </</SUP>SUP> 」」所顯示的結果為「所顯示的結果為「這是正常字這是正常字這是這是

上標字上標字」。」。

<<SUB>SUB> ：：將文字設定成下標字，例如：將文字設定成下標字，例如：「這是正常字「這是正常字 <<SUB>SUB> 這是下標字這是下標字 </</SUB>SUB> 」」所顯示的結果為「所顯示的結果為「這是正常字這是正常字這是這是

下標字下標字」。」。


<<TT>TT> ：：採用等寬字型來顯示文字，例如：採用等寬字型來顯示文字，例如：「「 <<TT>TT> 這是這是 Windows Windows 的等寬字的等寬字 </</TT>TT> 」」所顯示的結果為「所顯示的結果為「這這是是 WindowsWindows 的等寬字的等寬字」。」。 (( 註：以註：以 ""Windows" Windows" 為例，在不等寬字體為例，在不等寬字體中，中， ""W" W" 比比 ""i" i" 來得寬，但是在等寬字來得寬，但是在等寬字體中，體中， ""WW" " 與與 ""ii" " 是等寬的是等寬的 )) 。。


<<FONT>FONT>：： FONT FONT 標示通常帶有屬性，標示通常帶有屬性，例如「例如「 <<FONT FONT SIZE=+1SIZE=+1>> 字體放大一級字體放大一級</</FONT>FONT>」」 (( 註：註： SIZE SIZE 為為 FONT FONT 標示標示的屬性的屬性 )) ，表示所顯示出來的字體要放大，表示所顯示出來的字體要放大一級，有關一級，有關 FONT FONT 標示的屬性請參閱標示的屬性請參閱稍後的說明。稍後的說明。

設定文字外觀的標示設定文字外觀的標示 ((續續 5)5) Text.htm Text.htm 網頁：網頁：

FONT FONT 標示的屬性標示的屬性 -- -- SIZESIZE

FONTFONT 標示的屬性有標示的屬性有 SIZESIZE 、、 COLORCOLOR 、、及及 FACE FACE 三種，茲說明如後：三種，茲說明如後：

SIZESIZE 屬性屬性：： SIZE SIZE 屬性的用途是設定字屬性的用途是設定字體的大小：體的大小：<FONT SIZE=+4>Size=+4</FONT><P><FONT SIZE=+3>Size=+3</FONT><P><FONT SIZE=+2>Size=+2</FONT><P><FONT SIZE=+1>Size=+1</FONT><P><FONT SIZE=+0>Size=+0</FONT><P><FONT SIZE=-1>Size=-1</FONT><P><FONT SIZE=-2>Size=-2</FONT><P>

FONT FONT 標示的屬性標示的屬性 – – SIZE (SIZE ( 續續1)1)

Size.htmSize.htm


也就是以也就是以 0 0 為基礎，每加一則字體放大為基礎，每加一則字體放大一級，每減一則字體縮小一級，但放大一級，每減一則字體縮小一級，但放大的最大值為的最大值為 +4+4 、縮小的最小值為、縮小的最小值為 -2-2 。。

除了採用除了採用 '+' '+' 及及 '-' '-' 號來改變字體大小號來改變字體大小之外，也可以使用絕對值的設定方法，之外，也可以使用絕對值的設定方法，例如「例如「 <<FONT SIZE=FONT SIZE=77>> 第七級字體大小第七級字體大小</</FONT>FONT>」。」。


兩種方法在字體大小的對應關係如下：兩種方法在字體大小的對應關係如下：

Size=+4 等於 Size=7Size=+3 等於 Size=6Size=+2 等於 Size=5Size=+1 等於 Size=4Size=+0 等於 Size=3Size=-1 等於 Size=2Size=-2 等於 Size=1

FONT FONT 標示的屬性標示的屬性 – – COLORCOLOR

COLOR COLOR 屬性屬性：： COLORCOLOR 屬性屬性的用途是設定字的用途是設定字體的顏色，設定的格式有以下兩種：體的顏色，設定的格式有以下兩種：

第一種設定方法是將第一種設定方法是將 COLOR COLOR 的屬性值輸入成的屬性值輸入成「顏色的英文名稱」，例如我們熟知的「顏色的英文名稱」，例如我們熟知的 BlackBlack(( 黑色黑色 )) 、、 White(White( 白色白色 )) 、、 Red(Red( 紅紅色色 )) 、、 Green(Green( 綠色綠色 )) 、、 Blue(Blue( 藍色藍色 )) 、、 Cyan(Cyan( 青青色色 )…)…等，都可以成為等，都可以成為 COLOR COLOR 的屬性值。的屬性值。

(1) <FONT COLOR="Red">紅色字 </FONT><P>(2) <FONT COLOR="#FF0000">紅色字 </FONT><P>

FONT FONT 標示的屬性標示的屬性 – – COLOR COLOR (( 續續 1)1)

第二種設定方法則必須瞭解第二種設定方法則必須瞭解 RGB RGB 的配的配色原理色原理 ((RR、、 GG、、 B B 三個英文字母代表三個英文字母代表的是組成各種顏色變化的三原色的是組成各種顏色變化的三原色 RedRed、、 GreenGreen、、 Blue Blue 三原色三原色 )) 。。

舉例來說，紅色與綠色會組合成黃色。舉例來說，紅色與綠色會組合成黃色。除了取色之外，除了取色之外， RR、、 GG、、 B B 三原色的強三原色的強度也會影響組合出來的顏色，例如綠色度也會影響組合出來的顏色，例如綠色的強度只有一半時，與紅色組合出來的的強度只有一半時，與紅色組合出來的顏色會變成橘色。顏色會變成橘色。


R(紅 )

G(綠 ) B(藍 )

黃紫白

青


第二種設定格式中含有第二種設定格式中含有 6 6 個字元，就是個字元，就是用來設定三原色的強度值：用來設定三原色的強度值：

<FONT COLOR="#rr gg bb ">紅色的強度值

綠色的強度值藍色的強度值


其中的其中的 rrrr 、、 gggg 、、 bb bb 分別代表分別代表 RR 、、 GG 、、 B B 的強度值，其有效範圍為的強度值，其有效範圍為 0000 ～～ FF(FF( 註：這是十六進位表示法，其值註：這是十六進位表示法，其值相當於相當於 00 ～～ 255255)) ，以下舉幾個例子來看：，以下舉幾個例子來看：

11.. 紅色紅色取最強的取最強的 FFFF ，，綠色綠色及及藍色藍色取最弱取最弱的的 0000：：此時的設定值等於此時的設定值等於 "#"#FF0000"FF0000" ，，所得到所得到的顏色將等於紅色。的顏色將等於紅色。


2. 2. 紅色紅色及及綠色綠色取最強的取最強的 FFFF ，，藍色藍色取最弱的取最弱的 0000：此時的設定值等於：此時的設定值等於 “ “ ##FFFF00”FFFF00” ，，所得所得到的顏色將等於黃色。到的顏色將等於黃色。

33.. 紅色紅色、、綠色綠色、及、及藍色藍色都取最強的都取最強的 FFFF：：此時的設定值等於此時的設定值等於 "#"#FFFFFF"FFFFFF" ，，所得到的顏所得到的顏色將等於白色。色將等於白色。

44.. 紅色紅色、、綠色綠色、及、及藍色藍色都取最弱的都取最弱的 0000：：此時的設定值等於此時的設定值等於 "#000000""#000000" ，所得到的顏，所得到的顏色將等於黑色。色將等於黑色。


以下所列出的是一些常用顏色的設定值：以下所列出的是一些常用顏色的設定值：

顏色設定值顏色設定值黑色 #000000 灰色 #808080

藍色 #0000FF 暗藍色 #000080

綠色 #00FF00 暗綠色 #008000

青色 #00FFFF 暗青色 #008080

紅色 #FF0000 暗紅色 #800000

紫色 #FF00FF 暗紫色 #800080

黃色 #FFFF00 暗黃色 #808000

白色 #FFFFFF 亮灰色 #C0C0C0


color.htmcolor.htm：：

FONT FONT 標示的屬性標示的屬性 – – FACEFACE

FACE FACE 屬性屬性：：FACE FACE 屬性的用途是選擇文字所使用的屬性的用途是選擇文字所使用的字型，例如字型，例如「「 <<FONT FACE=FONT FACE= 標楷體標楷體 >> 我是標楷體我是標楷體</</FONT>FONT> 」。」。

FONT FONT 標示的屬性標示的屬性 – – 練習練習想要顯示以下結果，請完成其想要顯示以下結果，請完成其 HTMLHTML：：

設定段落樣式的標示設定段落樣式的標示 HTML HTML 用來設定段落的標示有用來設定段落的標示有

<<H1>H1>、、 <H2><H2>、、 <H3><H3>、、 <H4><H4>、、 <H5><H5>、、 <H6><H6>、、 <ADDRESS><ADDRESS>、、 <PRE><PRE>、、 <b<blockquotelockquote>>、、 <OL><OL>、、 <UL><UL>、、 <DL><DL>……等。等。

設定段落樣式的標示設定段落樣式的標示 -- -- <<H1>H1>

<<H1>H1>～～ <H6><H6> ：：這幾個標示的用途是這幾個標示的用途是設定段落標題的大小級數。設定段落標題的大小級數。

設定段落樣式的標示設定段落樣式的標示 -- -- <<ADDRESS>ADDRESS>

<<ADDRESS>ADDRESS> ：：此一標示會採用此一標示會採用斜體字做為該段落的字體，例如斜體字做為該段落的字體，例如「「 <<ADDRESS>ADDRESS> 此一段落採斜體字此一段落採斜體字為字體為字體 </</ADDRESS>ADDRESS>」」

設定段落樣式的標示設定段落樣式的標示 -- -- <<PRE> PRE>

<<PRE>PRE> ：：此一標示會採用等寬字型此一標示會採用等寬字型做為該段落的字體，且具有以下特做為該段落的字體，且具有以下特性：性：(1) (1) 每一個空白字元每一個空白字元 ((英文半形英文半形 )) 也也都會顯示出一個空白位置。都會顯示出一個空白位置。(2) (2) 跳行字元會被視為文字的跳行。跳行字元會被視為文字的跳行。

設定段落樣式的標示設定段落樣式的標示 ----<<PRE>(PRE>( 續續1)1)

對於需要保留空白字元的段落，將對於需要保留空白字元的段落，將其設定成其設定成 <<PRE> PRE> 最為合適，例如最為合適，例如有一段程式如下：有一段程式如下：

For I = 1 To 9 For J = 1 To 9 Response.Write I*J NextNext

這些是空白字元

設定段落樣式的標示設定段落樣式的標示 ----<<PRE> (PRE> ( 續續2)2)

如果我們採用預設的段落，則由於跳行如果我們採用預設的段落，則由於跳行字元會被視為無效字元，而多個空白字字元會被視為無效字元，而多個空白字元只會顯示出一個空白字元，所以結果元只會顯示出一個空白字元，所以結果如下：如下：

For I = 1 To 9 For J = 1 To 9 Response.Write I*J Next Next

設定段落樣式的標示設定段落樣式的標示 ----<<PRE> (PRE> ( 續續2)2)

但如果採但如果採 <<PRE> PRE> 為段落標示，則顯示為段落標示，則顯示結果如下：結果如下：

設定段落樣式的標示設定段落樣式的標示 -- -- <<blockquote>blockquote>

<<blockquote>blockquote> ：：此一標示稱為「縮此一標示稱為「縮排」標示，如果我們希望某一段落採縮排」標示，如果我們希望某一段落採縮排方式顯示，則只要將其放在排方式顯示，則只要將其放在 <<BLOCKQUOTE> BLOCKQUOTE> 及及 </</BLOCKQUOTE> BLOCKQUOTE> 即可，例如：即可，例如：

設定段落樣式的標示設定段落樣式的標示 -- -- <<blockquote> blockquote> ((續續 1)1)

<H2>使用 HTML 的基本觀念 </H2><BLOCKQUOTE>標示的觀念 <BR>區塊的觀念 <BR>其他觀念 <BLOCKQUOTE> 多個放在一起空白字元，只會被瀏覽器視為一個空白字元 <BR> 跳行字元是沒有作用的字元 <BR> 標示是不區分大小寫的 </BLOCKQUOTE></BLOCKQUOTE>



在在 BlockQuo.htm BlockQuo.htm 之中，比較有意思的之中，比較有意思的事情是事情是 <<BLOCKQUOTE>BLOCKQUOTE> ～～ </BLOCKQUOTE> </BLOCKQUOTE> 裡面還有裡面還有 <<BLOCKQUOTE>BLOCKQUOTE> ，，結果將會結果將會造成後面的段落更大的縮排。造成後面的段落更大的縮排。

其實在某一個標示區塊裡面又有相同的其實在某一個標示區塊裡面又有相同的標示，在標示，在 HTML HTML 裡面是很普遍的，除裡面是很普遍的，除了了 <<BLOCKQUOTE> BLOCKQUOTE> 標示之外，以下標示之外，以下所介紹的所介紹的 <<OL>OL>、、 <UL><UL>、、 <DL><DL>……等等標示也都具有類似的特性。標示也都具有類似的特性。

練習練習有一文字檔如下：有一文字檔如下： ((收錄於收錄於 aspbook.txt)aspbook.txt)

ASP.NET ASP.NET 網頁製作教本網頁製作教本第一章第一章建立建立 ASP.NETASP.NET 的作業平台的作業平台 -- -- 安裝安裝 IISIIS1-1 1-1 安裝安裝 IISIIS 的軟硬體需求的軟硬體需求1-2 1-2 單機作業平台的建立單機作業平台的建立1-3 1-3 區域網路作業平台的建立區域網路作業平台的建立第二章第二章進入進入 ASP.NETASP.NET 網頁製作的準備工作網頁製作的準備工作2-1 2-1 ASP.NETASP.NET 相關技術概說相關技術概說2-2 2-2 使用使用 HTMLHTML 的基本觀念的基本觀念2-3 2-3 常用的常用的 HTMLHTML 標示標示

練習練習 ((續續 ))

請利用請利用 HTML HTML 將其顯示成：將其顯示成：

設定段落樣式的標示設定段落樣式的標示 -- -- <<OL>OL>

<<OL>OL> ：：此一標示稱為「標號清此一標示稱為「標號清單」標示，當我們想要以條列的方單」標示，當我們想要以條列的方式來顯示資料時，採用此一標示最式來顯示資料時，採用此一標示最為合適。為合適。

設定段落樣式的標示設定段落樣式的標示 -- -- <<OL>OL>((續續1)1)

舉例來說，我們想要將資料顯示成：舉例來說，我們想要將資料顯示成：

Visual Basic 系列叢書 1. 新觀念的 Visual Basic 6.0 教本一本為完全初學者所寫的書 2. Visual Basic 6.0 實戰講座一本實用的‧技術的‧資訊完整的書 3. Visual Basic 6.0 資料庫程式設計從實務經驗中整理出來的資料庫設計寶典 4. Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書


撰寫的方法是：撰寫的方法是：(1) (1) 在需要編號的資料前面加上在需要編號的資料前面加上 <<LI> LI> 標示。標示。(2) (2) 將所有的將所有的 <<LI> LI> 標示放在標示放在 <<OL> OL> 及及 </</OL> OL> 區塊之間。區塊之間。


Visual Basic 系列叢書<OL> <LI> 新觀念的 Visual Basic 6.0 教本 <BR> 一本為完全初學者所寫的書 <LI>Visual Basic 6.0 實戰講座 <BR> 一本實用的‧技術的‧資訊完整的書 <LI>Visual Basic 6.0 資料庫程式設計 <BR> 從實務經驗中整理出來的資料庫設計寶典 <LI>Visual Basic 6.0 與 Windows API 講座<BR> Visual Basic 專業人員最不可或缺的一本書</OL>


在以上例子中，如果我們想要在在以上例子中，如果我們想要在「一本為完全初學者所寫的書」後「一本為完全初學者所寫的書」後面顯示以下內容，則面顯示以下內容，則 HTML HTML 標示標示該如何寫呢？該如何寫呢？


Visual Basic 系列叢書 1. 新觀念的 Visual Basic 6.0 教本一本為完全初學者所寫的書

1. 基礎學習篇 2. 程式實務篇 3. 物件應用篇 4. 專題研究篇 2. Visual Basic 6.0 實戰講座一本實用的‧技術的‧資訊完整的書 3. Visual Basic 6.0 資料庫程式設計從實務經驗中整理出來的資料庫設計寶典 4. Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書


答案是在「一本為完全初學者所寫的答案是在「一本為完全初學者所寫的書」之後插入以下標示：書」之後插入以下標示：

<OL> <LI> 基礎學習篇 <LI> 程式實務篇 <LI> 物件應用篇 <LI> 專題研究篇</OL>

設定段落樣式的標示設定段落樣式的標示 -- -- <<UL>UL>

<<UL>UL> ：：此一標示稱為「項目清單」標此一標示稱為「項目清單」標示，功能與示，功能與 <<OL> OL> 相類似，以相類似，以 ol2.htm ol2.htm 範例為例，如果我們將其中的範例為例，如果我們將其中的 <<OL> OL> 全全部改成部改成 <<UL>UL> 、、將將 </</OL> OL> 全部改成全部改成 <<//UL>UL> ，，則顯示的結果將如下，也就是則顯示的結果將如下，也就是「編號」被「項目符號」「編號」被「項目符號」 ((‧‧ 。。 ))所取代。所取代。

設定段落樣式的標示設定段落樣式的標示 -- -- <<UL>UL>((續續 ))

Visual Basic 系列叢書 . 新觀念的 Visual Basic 6.0 教本一本為完全初學者所寫的書

。基礎學習篇。程式實務篇。物件應用篇。專題研究篇 . Visual Basic 6.0 實戰講座一本實用的‧技術的‧資訊完整的書 . Visual Basic 6.0 資料庫程式設計從實務經驗中整理出來的資料庫設計寶典 . Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書

練習練習利用利用 HTML HTML 將將 aspbook.tx aspbook.tx 檔案的內容檔案的內容顯示成顯示成：：

設定段落樣式的標示設定段落樣式的標示 -- -- <<DL>DL>

<<DL>DL> ：：此一標示稱為「定義清此一標示稱為「定義清單」標示，若有兩段文字而第二段單」標示，若有兩段文字而第二段文字用來解釋第一段文字時，使用文字用來解釋第一段文字時，使用 <<DL> DL> 標示最為合適，例如：標示最為合適，例如：

設定段落樣式的標示設定段落樣式的標示 -- -- <<DL>DL>((續續1)1)

設定段落樣式的標示設定段落樣式的標示 -- -- <<DL>DL>((續續2)2)

撰寫的方法是：撰寫的方法是：(1)(1) 在被解釋的段落在被解釋的段落 (( 第一個段落第一個段落 )) 前面前面加上加上 <<DT> DT> 標示。標示。 (2)(2) 在解釋的段落在解釋的段落 (( 第二個段落第二個段落 )) 前面加前面加上上 <<DD> DD> 標示。標示。 (3)(3) 將第一、二兩個段落放在將第一、二兩個段落放在 <<DL> DL> 及及 </</DL> DL> 區塊之間。區塊之間。

練習練習利用利用 HTML HTML 將將 aspbook2.txt aspbook2.txt 檔案的內檔案的內容顯示成：容顯示成：

設定對齊的標示設定對齊的標示對齊可分成靠左、靠右、及置中三種，對齊可分成靠左、靠右、及置中三種，而我們可以根據以下兩種情況來選擇對而我們可以根據以下兩種情況來選擇對齊的標示：齊的標示： (1) (1) 單一段落的對齊單一段落的對齊 (2) (2) 連連續多個段落的對齊。續多個段落的對齊。

單一段落的對齊單一段落的對齊：單一段落的對齊可以：單一段落的對齊可以選擇以下標示：選擇以下標示：靠左 <P ALIGN="Left"> 這是左靠的段落 </P>置中 <P ALIGN="Center"> 這是置中的段落 </P>靠右 <P ALIGN="Right"> 這是右靠的段落</P>

設定對齊的標示設定對齊的標示 ((續續 1)1)

連續多個段落的對齊連續多個段落的對齊：：要將多個段落一起要將多個段落一起靠右靠右對齊對齊，則將多個段，則將多個段落放在落放在 <<DIV DIV Align=“Right”Align=“Right”> > 及及 </</DIV> DIV> 之間。之間。

若要若要置中置中對齊對齊，則是將，則是將 Align Align 的屬性設定的屬性設定成成 ““ Center”Center”(( 也就是將也就是將 “ “ Right” Right” 改成改成 ““ Center”)Center”)。。

若要若要靠左靠左對齊對齊，則是將，則是將 AlignAlign 的屬性設定的屬性設定成成 ““ Left”Left”((註：靠左對齊是預設的對齊註：靠左對齊是預設的對齊方式方式 )) ，請看，請看 Align.htm Align.htm 範例。範例。

設定對齊的標示設定對齊的標示 ((續續 2)2)

靠右對齊

置中對齊

預設值就是靠左對齊，所以不必使用 DIV 標示

表格表格 ((Table)Table) 標示標示 HTML HTML 語法中用來產生表格的標示包含語法中用來產生表格的標示包含

<<TABLE>TABLE> 、、 <TR><TR> 、、及及 <<TD>TD> ，，這幾個這幾個標示必須互相配合使用，才能正確地產標示必須互相配合使用，才能正確地產生表格。生表格。

表格的結構表格的結構

構成一欄資料

構成一列資料

表格的結構表格的結構 ((續續 ))

TABLE

TR

TR

TR

TD TD

TD TD

TD TD

單一欄位的對齊設定單一欄位的對齊設定

(1) (2) (3)

(4) (5) (6)

(7) (8) (9)

單一欄位的對齊設定單一欄位的對齊設定 ((續續 ))

以上以上 99 種對齊方式的設定標示分別如下：種對齊方式的設定標示分別如下：

Align(Align(水平對齊水平對齊 ))屬性及屬性及 Valign (Valign (垂直對齊垂直對齊 ))屬性。屬性。

Align Align 及及 Valign Valign 屬性如果省略，則水平對齊表示屬性如果省略，則水平對齊表示靠左、垂直對齊表示置中。靠左、垂直對齊表示置中。

(1) <TD Align="Left" Valign="Top"> 水平 : 靠左 <br> 垂直 : 靠上 </TD>(2) <TD Align="Center" Valign="Top"> 水平 : 置中 <br> 垂直 : 靠上 </TD>(3) <TD Align="Right" Valign="Top"> 水平 : 靠右 <br> 垂直 : 靠上 </TD>(4) <TD Align="Left" Valign="Center"> 水平 : 靠左 <br> 垂直 : 置中 </TD>(5) <TD Align="Center" Valign="Center"> 水平 : 置中 <br> 垂直 : 置中</TD>(6) <TD Align="Right" Valign="Center"> 水平 : 靠右 <br> 垂直 : 置中 </TD>(7) <TD Align="Left" Valign="Bottom"> 水平 : 靠左 <br> 垂直 : 靠下 </TD>(8) <TD Align="Center" Valign="Bottom"> 水平 : 置中 <br> 垂直 : 靠下</TD>(9) <TD Align="Right" Valign="Bottom"> 水平 : 靠右 <br> 垂直 : 靠下 </TD>

設定同一列的垂直對齊設定同一列的垂直對齊如果同一列的所有欄位都採用相同的對如果同一列的所有欄位都採用相同的對齊方式，則我們只要將齊方式，則我們只要將 Valign Valign 屬性設屬性設定於定於 <<TR> TR> 標示中即可，不必逐一在同標示中即可，不必逐一在同一列的所有一列的所有 <<TD> TD> 標示中加以設定。標示中加以設定。

以以 Table02.htm Table02.htm 為例，欄位為例，欄位 (1)(2)(3) (1)(2)(3) 都是靠上對齊、欄位都是靠上對齊、欄位 (4)(5)(6) (4)(5)(6) 都是置中都是置中對齊、欄位對齊、欄位 (7)(8)(9) (7)(8)(9) 都是靠下對齊，因都是靠下對齊，因此可以將此可以將 HTML HTML 標示修改成：標示修改成：

設定同一列的垂直對齊設定同一列的垂直對齊 ((續續 ))

<TR Valign="Top"> <TD Align="Left">水平 :靠左 <br>垂直 : 靠上 </TD> <TD Align="Center">水平 :置中 <br>垂直 : 靠上 </TD> <TD Align="Right">水平 :靠右 <br>垂直 : 靠上 </TD></TR><TR Valign="Center"> <TD Align="Left">水平 :靠左 <br>垂直 :置中 </TD> <TD Align="Center">水平 :置中 <br>垂直 :置中 </TD> <TD Align="Right">水平 :靠右 <br>垂直 :置中 </TD></TR><TR Valign="Bottom"> <TD Align="Left">水平 :靠左 <br>垂直 : 靠下 </TD> <TD Align="Center">水平 :置中 <br>垂直 : 靠下 </TD> <TD Align="Right">水平 :靠右 <br>垂直 : 靠下 </TD></TR>

練習一練習一完成以下完成以下 HTML HTML 的製作：的製作： (( 提示：使提示：使用用 <<TABLE> TABLE> 標示標示 )()( 註：圓球圖檔收錄註：圓球圖檔收錄於於 Ball.gif)Ball.gif)

練習二練習二有一文字檔如下：有一文字檔如下： (( 收錄於收錄於 stock.txt)stock.txt)

股票代號股票名稱收盤價漲跌2328 廣宇 103.50 -1.502329 華泰 92.00 -2.002330 臺積電 152.00 0.002331 精英 54.00 0.00

練習二練習二 ((續續 ))

利用利用 HTML HTML 將其製作成以下表格：將其製作成以下表格：

置中左靠右靠右靠

表格及欄位屬性的設定表格及欄位屬性的設定 - - BgColorBgColor

BgColorBgColor((背景顏色背景顏色 ))屬性：屬性：設定方法是 “設定方法是 “ ##rrggbb” rrggbb” 或 “英文顏色名稱”，或 “英文顏色名稱”，BgColorBgColor 屬性可以使用於屬性可以使用於 <<TD>TD> 、、 <TR><TR> 、、及及 <<TABLE> TABLE> 標示。標示。若使用於若使用於 <<TD> TD> 標示，則可設定單一欄位的背標示，則可設定單一欄位的背景顏色。景顏色。若使用於若使用於 <<TR> TR> 標示，則可設定同一列的背景標示，則可設定同一列的背景顏色。顏色。若使用於若使用於 <<TABLE> TABLE> 標示，則可設定整個表格標示，則可設定整個表格的背景顏色。的背景顏色。

表格及欄位屬性的設定表格及欄位屬性的設定 --BgColorBgColor((續續 )) 將將 (1, 1) (1, 1) 欄的背景顏色設定黃色、將第欄的背景顏色設定黃色、將第

22 列的背景顏色設定成青色列的背景顏色設定成青色<TABLE BORDER=1> <TR> <TD BgColor="yellow"> (1, 1) </TD> <TD> (1, 2) </TD> </TR> <TR BgColor="Cyan"> <TD> (2, 1) </TD> <TD> (2, 2) </TD> </TR> <TR> <TD> (3, 1) </TD> <TD> (3, 2) </TD> </TR></TABLE>

表格及欄位屬性的設定表格及欄位屬性的設定 -- -- Border Border 、、 CellPadding CellPadding 、、 CellSpacinCellSpacin

BorderBorder((邊框寬度邊框寬度 ))、、 CellPaddingCellPadding((儲存格與儲存格邊框之距離儲存格與儲存格邊框之距離 )) 、、 CellSpacingCellSpacing((儲存格與表格邊框之距儲存格與表格邊框之距離離 )) ：這幾個屬性可用來調整表格的：這幾個屬性可用來調整表格的外觀。外觀。

表格及欄位屬性的設定表格及欄位屬性的設定 -- -- Border Border 、、 CellPadding CellPadding 、、 CellSpacinCellSpacin((續續 1)1)

Border( )邊框寬度CellSpacing( )儲存格與表格邊框之距離

CellPadding( )儲存格與儲存格邊框之距離

表格及欄位屬性的設定表格及欄位屬性的設定 -- -- Border Border 、、 CellPadding CellPadding 、、 CellSpacinCellSpacin((續續 2)2)

<TABLE Border=7 CellSpacing=15 CellPadding=5> <TR> <TD> (1, 1) </TD> <TD> (1, 2) </TD> </TR> <TR> <TD> (2, 1) </TD> <TD> (2, 2) </TD> </TR></TABLE>

表格及欄位屬性的設定表格及欄位屬性的設定 -- -- WidthWidth

WidthWidth(( 寬度寬度 ))：： Width Width 屬性可用來設定屬性可用來設定表格、列、及儲存格的寬度，以表格的表格、列、及儲存格的寬度，以表格的寬度為例，請比較以下兩種設定方法：寬度為例，請比較以下兩種設定方法：<TABLE Border=1 Width="80%">...</TABLE>

<TABLE Border=1 Width="350">...</TABLE>

表格及欄位屬性的設定表格及欄位屬性的設定 - - Width Width ((續續 ))

「「 Width=“80%”Width=“80%” 」」表示表格將佔據可顯示表示表格將佔據可顯示寬度的寬度的 80%80% ，而「，而「 Width=“350”Width=“350” 」」則表示則表示表格將佔據表格將佔據 350 350 點的寬度，顯示結果如下：點的寬度，顯示結果如下：

100%80%

350 點

表格及欄位屬性的設定表格及欄位屬性的設定 - - NoWrapNoWrap

NoWrapNoWrap(( 不自動折行不自動折行 )) ：：NoWrap NoWrap 屬性的用途是設定欄位內的文屬性的用途是設定欄位內的文字，若某一欄位中的文字太長，而沒有字，若某一欄位中的文字太長，而沒有設定此一屬性，則該文字太長的部分會設定此一屬性，則該文字太長的部分會自動折到下一行，若設定此一屬性，則自動折到下一行，若設定此一屬性，則不會折行，此一屬性沒有屬性值，設定不會折行，此一屬性沒有屬性值，設定方法如下：方法如下：

<TD NoWrap> 本欄位不自動折行 </TD

表格及欄位屬性的設定表格及欄位屬性的設定 - - NoWrapNoWrap ((續續 ))

請比較一下有沒有設定請比較一下有沒有設定 NoWrap NoWrap 屬性的屬性的差別：差別：

設定了 NoWrap 屬性未設定 NoWrap 屬性

畸形表格的產生畸形表格的產生產生畸形表格要使用到產生畸形表格要使用到 ColSpanColSpan 及及

RowSpan RowSpan 屬性，先畫一個標準的表格，屬性，先畫一個標準的表格，如下：如下：

ColSpan=3

ColSpan=2RowSpan=2

畸形表格的產生畸形表格的產生 ((續續 )) 然後標出要延伸多少格，再將然後標出要延伸多少格，再將 ColSpan ColSpan 或或 RowSpan RowSpan 屬性寫到屬性寫到 <<TD> TD> 標示之標示之中。中。<TABLE Border=1 Width="100%" > <TR> <TD ColSpan="3"> </TD> </TR> <TR> <TD RowSpan="2"> </TD> <TD ColSpan="2"> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR></TABLE>

實例實例完成以下表格的製作：完成以下表格的製作：

實例實例 ((續續 1)1)<TABLE Border=1 Cellpadding=2 Cellspacing=0 width="100%"> <TR> <TD Align=Center Rowspan=5> <IMG Src="F8315.jpg"> </TD> <TD Align=Center Colspan=2><FONT Size=+2> <B> 新觀念的 Visual Basic 6.0 教本 </B></FONT> </TD> </TR> <TR> <TD NoWrap Valign=Top> 基礎學習篇 :</TD> <TD>將 VisualBasic 琳瑯滿目的操作環境化簡御繁，讓您能儘速上手進入 VisualBasic 的世界。 </TD> </TR>

實例實例 ((續續 2)2)<TR> <TD NoWrap Valign=Top> 程式實務篇 :</TD> <TD> 突破程式語言刻板的教學方式，以精心設計的例子逐步引領您掌握 VisualBasic 程式語言的核心。 </TD> </TR> <TR> <TD NoWrap Valign=Top> 物件應用篇 :</TD> <TD> 教您如何控制 VisualBasic 的物件，進而組合出有實用價值的應用程式。 </TD> </TR> <TR> <TD NoWrap Valign=Top> 專題研究篇 :</TD> <TD> 包含「應用程式的散發」、「螢幕保護程式」、「資料庫」、及「 WindowsAPI 」四種專題。 </TD> </TR></TABLE>

實例實例 ((續續 3)3)

在以上在以上 HTML HTML 之中，除了要將圖片欄位之中，除了要將圖片欄位的的 Rowspan Rowspan 屬性設定為屬性設定為 55 、將「新觀、將「新觀念的念的 Visual Basic 6.0Visual Basic 6.0 教本」欄位的教本」欄位的 ColspanColspan 屬性設定為屬性設定為 2 2 之外，「基礎學之外，「基礎學習篇習篇 :: 」、「程式實務篇」、「程式實務篇 :: 」、「物件應」、「物件應用篇用篇 :: 」、「專題研究篇」、「專題研究篇 :: 」等」等 4 4 個欄個欄位須將位須將 Valign Valign 屬性設定為屬性設定為 TopTop 、、並設並設定定 NoWrap NoWrap 屬性。屬性。

練習練習請製作您個人基本資料的網頁，如下圖：請製作您個人基本資料的網頁，如下圖：

Documents

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