ASP.NET 網頁製作教本 -- 從基本語法學起 第2章 進入 ASP.NET
Download
Report
Transcript ASP.NET 網頁製作教本 -- 從基本語法學起 第2章 進入 ASP.NET
ASP.NET 網頁製作教本
-- 從基本語法學起
第2章
進入 ASP.NET 網頁製作的準備工作
2-1 ASP.NET 相關技術概說
Client 與 Server
網際網路
客戶端(Client)
伺服端(Server)
網頁提供者將其製作好的網頁放在
Server(伺服器)上，稱為伺服端(Server端)。
上網者準備好上網的機器，然後透過網
際網路來瀏覽網頁製作者所提供的網頁
稱為客戶端(Client端) 。
伺服端與客戶端在同一區域網路上
上圖中，雖然將伺服端與客戶端以
網際網路連結起來，但實際上，伺
服端與客戶端卻不一定要分處於網
際網路的兩端，它們可以是同一區
域網站的兩部機器，甚至是同一部
機器既是伺服端又是客戶端。
伺服端與客戶端
在同一區域網路上(續)
伺服端
客戶端
客戶端
ASP
.NET
區域網路
客戶端
客戶端
伺服端與客戶端在同一機器上
您在安裝書本範例之後，啟動瀏覽
器，然後在位址欄輸入
http://localhost/kjaspx藉以檢驗範例
網頁是否安裝妥當，此時瀏覽器(也
就是上網這一端)與 ASP.NET (也就
是伺服器這一端)是位於同一部機器
上。
伺服端與客戶端在同一機器上(續)
ASP.NET
瀏覽器
伺服端與客戶端在同一部機器
(ASP.NET 與瀏覽器在同一部機器)
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案
網頁必須透過 IIS 來執行
方才有效，如果直接以瀏覽器或其
他工具(例如 FrontPage)來開啟 .aspx
檔案，則 ASP.NET 網頁中的 ASP
程式是不會被執行的。
舉例來說明：
ASP.NET
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續1)
1.
請利用「記事本」開啟 ch02 目錄的
Whattime.aspx 檔案，可看到其內容如下：
<HTML>
<BODY>
現在時間：
<%
Dim T As Date
T = Now
Response.Write( T )
%>
</BODY>
</HTML>
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續2)
其中位於 <% 及 %> 之間的是 ASP 程式，
其功用是顯示系統時間。
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續3)
2.請利用瀏覽器的「檔案/開啟舊檔」開啟
Whattime.aspx， 結 果 並 不 會 執 行
Whattime.aspx 網頁中的程式，而只是啟
動系統中預設的程式開啟 Whattime.aspx
檔案，以作者的機器為例，.aspx 檔案預
設的編輯程式為「記事本」，結果開啟
Whattime.aspx 的作用是啟動「記事本」
編輯 Whattime.aspx 檔案。
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續4)
3.在瀏覽器的位址欄輸入：
http://localhost/kjaspx/ch02/Whattime.aspx
如果您所建立的是區域網路作業平台，
請輸入以下網址：
http://IIS所在機器的IP位址/kjaspx/ch02/Whattime.aspx
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續5)
結果如下圖，系統時間會被顯示出來，
這表示 ASP 程式被執行了。
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續6)
以下是說明開啟.aspx 檔案(檔案/開啟舊
檔)及瀏覽 ASP.NET 網頁(位址欄輸入網
址)的差異：
(1) 功能表的「檔案/開啟舊檔」
記事本或
其他程式
開啟檔案
(2) 在位址欄位輸入網址
瀏覽器
網頁下載
Whattime.aspx
Whattime.aspx
開啟檔案
執行
IIS
<HTML>
<BODY>
現在時間：
<%
T = Now
Response.Write
(T)
%>
</BODY>
</HTML>
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續7)
檔案/開啟舊檔：結果是啟動系統中預
設的程式開啟 Whattime.aspx，而不
會執行其中的 ASP 程式。
瀏覽 ASP.NET 網頁 vs.
開啟 .aspx 檔案 (續8)
在位址欄輸入網址：網址會送到 IIS，而
IIS 會開啟 Whattime.aspx，並且解讀檔案
內容，然後執行其中的 ASP 程式，最後
再把結果下載到瀏覽器，而由於 IIS 在執
行 ASP 程式之後，會將執行結果(以
Whattime.aspx 為例，結果是系統時間)下
載到瀏覽器，所以瀏覽器除了顯示 "現在
時間：" 之外，也能夠顯示系統時間。
練習
先利用瀏覽器的「檔案/開啟舊檔」開
啟 kjaspx\ch02 的 Week02.aspx，然後
在瀏覽器位址欄輸入
http://localhost/kjaspx/ch02/Week02.aspx
，並比較兩者的差異。
HTML 語言
HTML(HyperText Markup Language，超
文字標示語言)是構成網頁最「基礎」的
要素，雖然隨著技術的演進，又有各種
新技術的誕生，例如 Dynamic HTML、
Java Script、VB Script、ASP、
ASP.NET…，但它們依然是建構在HTML
之上，並沒有捨棄既有的 HTML。
需要學 HTML?
現在 HTML 編輯工具已經相當普遍，要
建立一個 .htm 的網頁(文件)，只要使用
自己最習慣的 HTML 編輯工具(例如
FrontPage、Dreamweaver 、Word…) 加以
編輯即可。
我們會利用 ASP 程式動態建立 HTML 格
式的文件，然後下傳到瀏覽器端，所以
不可不瞭解 HTML 語言的文法(簡稱「語
法」)。
HTML 是語言非程式語言
HTML 是一種語言，但並不算是「程式」
語言，HTML 所定義的範疇僅侷限於如
何表現文字、圖片，以及如何建立文件
之間的連結；程式則是經過規劃的一連
串命令(或稱為「敘述」)，而這樣的命令
可用來驅使作業系統或應用程式執行某
些工作 。
動態網頁
由 於 HTML 並 不 是 程 式 語 言 ， 因 此 由
HTML 所構成的文件並不會因時因地產
生變化，所以便有「靜態」(static)網頁之
稱。為了讓網頁具備動態變化的能力，
不管是瀏覽器或 Web Server 製造廠商，
都著手將程式加到單純的 HTML 文件中，
而發展出動態網頁的技術。
Server 及瀏覽器都可以執行程式
要產生動態網頁，一定要撰寫程式，至於該選
擇哪一種程式語言，往往令網頁製作者感到頭
痛。
首先必須說明的是，程式的執行端可分成客戶
端(瀏覽器)及伺服端(Server)，如果程式在瀏覽
器上面執行，則 Server 必須把程式碼傳下來，
而瀏覽器也要聰明到可以執行 Server 所傳輸下
來的程式，而如果程式在 Server 端執行，則
Server 只要把執行的結果傳下來即可。
Server 及瀏覽器
都可以執行程式(續1)
1 程式在客戶端執行
客戶端:瀏覽器
程式
下載程式
2 程式在伺服端執行
伺服端
程式
執行
執行後顯示在瀏覽視窗上
客戶端:瀏覽器
網頁
伺服端
下載結果
直接顯示在瀏覽視窗上
程式
執行
Server 及瀏覽器
都可以執行程式 (續2)
Web Server
瀏覽器
存取資料庫很簡單
，但要把程式執行
結果下載給瀏覽器
瀏覽器
在瀏覽器上
執行的程式
資料庫
程式
Web Server
存取資料庫是
很辛苦的事情
資料庫
什麼是 CGI?
早期在 Server 端執行的程式，最有名的莫過於
CGI(Common Gateway Interface)，對網路族來
說，CGI 好像是很技術的東西，但實際上，它
的觀念卻與 UNIX 或 DOS 的 Shell 很像。
對 Shell 而言，使用者是利用鍵盤輸入指令，
然後由 Shell 解譯此一指令並且啟動對應的程
式。
對 CGI 而言，指令則是來自於瀏覽器，以
CGI 介面傳送到伺服器之後，再由伺服器解譯
後啟動伺服器之中對應的程式。
從 CGI 到 ASP
對 Shell 指令而言，可能帶有參數，當程式被
Shell 啟動之後，它可以透過 Shell 所提供的介
面讀取指令的參數；對伺服端的程式而言，當
它被啟動之後，則可以透過 CGI 所提供的介
面讀取指令的參數。
最後是輸出的比較，同一個程式可能被 Shell
啟動或 CGI 所啟動，被 Shell 啟動的程式其輸
出是螢幕，被 CGI 啟動的程式其輸出則是網
路，也就是傳輸給瀏覽器。
CGI 程式的問題
CGI 可以說沒有任何技術可言，如果 Web 伺
服器提供有 CGI 介面程式(可能的形式有原始
程式碼、程式庫、動態連結程式庫…，視 Web
伺服器而定)，那麼撰寫伺服端的 CGI 程式與
一般程式是沒什麼差別的。
不過在實務上，同樣的作業系統，若 Web 伺
服器不同，則 CGI 介面程式也會不同，過去
常有人抱怨：「Web 伺服器由 WebSite 換成
IIS 之後，原來的 CGI 程式就無法使用了」，
原因就是因為不同 Web 伺服器所提供的 CGI
介面程式不同所致。
ASP vs. CGI
1.
ASP 程式也算是 CGI 程式，或者說是CGI 程
式的改良版，它跟 CGI 程式一樣是在伺服端
執行的，但是它有以下優點：
CGI 介面物件化：在CGI 程式中收集網頁資
料最麻煩的事情是解析瀏覽器上傳的資料(主
要是為了解析特殊字元及中文碼)，若使用
ASP 程式來收集網頁資料，則 ASP.NET 會代
為解析，並且轉換成物件供 ASP 程式來讀取，
簡單地說，就是 ASP.NET 提供有豐富的物件
(以下簡稱「ASP 物件」)讓 ASP 程式簡化
CGI 的相關處理工作。
ASP vs. CGI (續)
2. 可以使用 .NET 物件類別：除了 ASP 物
件外，舉凡 .NET Framework 系統底下
的物件也都可以讓 ASP 程式來使用，
使其成為 ASP 網頁製作中的資源，而
由於 ASP 程式可以使用 .NET
Framework 的物件類別，也使得 ASP
程式可以做的事情比傳統的 CGI 程式
要多出許多 。
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 的程式設計。
整理一下
1. 單純由 HTML 所構成的網頁是靜態的網頁，
欲產生動態網頁必須撰寫程式。網頁程式的
執行可以分成在客戶端執行及在伺服端執行
兩種狀態，而 ASP 是在伺服端執行的程式。
2. 以開啟檔案的方式開啟 .aspx 檔案，並不會
讓檔案中 ASP 程式被執行。要讓 ASP 程式
被執行的條件是：(1) 系統安裝有 IIS (2) 以瀏
覽的方式瀏覽 ASP.NET 網頁。
整理一下 (續1)
3. ASP 已經將 CGI 的介面封裝成比較容易
使用的物件，如果已經開始使用 ASP，
就可以不必再學 CGI。
4. HTML 是製作 ASP.NET 網頁很重要的
基礎。
整理一下(續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 程式。
2-2 使用 HTML 的基本觀念
為什麼要學 HTML?
在 ASP.NET 網頁的製作中，瞭解
HTML 語法是必要的，舉例說明為什麼：
1. 首先請瀏覽 kjaspx/ch02 的
week01.aspx ，結果網頁會顯示「今天
是：星期X」的內容。
為什麼要學 HTML? (續1)
2. 檢視 week01.aspx 檔案的內容，其內容
如下：
<HTML>
<BODY>
今天是：
<%
Dim week
Week = DatePart( DateInterval.Weekday, Now() )
Response.Write( WeekdayName(Week) )
%>
</BODY>
</HTML>
為什麼要學 HTML? (續2)
其中粗體字部分為 ASP 程式，非粗體字部分
則是傳統的 HTML 文件，ASP 程式與 HTML
文件可以說是涇渭分明，感覺上撰寫 ASP 程
式似乎與 HTML 無關，但其實不然。
3. 請再瀏覽 ch02 目錄的 week02.aspx，同樣的網
頁也會顯示「今天是：星期X」的內容，但星
期 X 的部分則會因為星期一、二、…、日的不
同，而顯示不同的顏色，其中星期一～五顯示
成藍色、星期六顯示成綠色、星期日則顯示成
紅色。
為什麼要學 HTML? (續3)
4. 讓我們稍微思考一下，week02.aspx 是怎
麼做到的，別以為 ASP 程式可以控制瀏
覽器所顯示的內容，ASP 程式沒有這種
能力，ASP 程式與瀏覽器之間關係只有
下載網頁及上載資料的關係，以
week02.aspx 為例，如果 ASP 程式希望瀏
覽器能夠將網頁文字顯示成紅色，則方
法是下載 "<FONT COLOR=Red>" 給瀏
覽器，所撰寫的程式如下：
Response.Write( "<FONT COLOR=Red>" )
為什麼要學 HTML? (續4)
其中 <FONT COLOR=Red> 就是標準的
HTML 語法，被瀏覽器解讀之後，會將
後續的文字顯示成紅色。
再看完整的 week02.aspx，其中粗體字的
部分，都是由 ASP 程式下載 HTML 語
句給瀏覽器的例子：
為什麼要學 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>
為什麼要學 HTML? (續6)
5. 在 week02.aspx 的例子中，我們可以看
到 ASP 程式若要「控制」瀏覽器所顯示
的內容，其方法是下載正確的 HTML 語
句給瀏覽器，這就是撰寫 ASP 程式也必
須瞭解 HTML 語法的原因。
標示的觀念
首先來看一個很簡單的 HTML 檔案，請
使用記事本程式開啟本書 kjaspx/ch02目
錄底下的 htm01.htm，其內容如下：
<H1>初試 HTML 語法</H1>
<HR>
<H2>使用 HTML 的基本觀念</H2><P>
<UL>
<LI>標示的觀念</LI>
<LI>區塊的觀念</LI>
<LI>參數的觀念</LI>
</UL>
標示的觀念 (續1)
以上所看到的是 htm01.htm 檔案的原始
碼 ， 其 中 含 有 一 些 HTML 標 示 ( 例 如
< H1>、<HR>、<H2>、<UL>、<LI>)，
這些標示都是有意義的，每一個標示就
好像是下給瀏覽器的一個指令，舉例來
說，<H1> 標示在告訴瀏覽器文字要顯示
成「最大的標題」，所以「<H1>初試
HTML 語法</H1>」經瀏覽器解讀之後，
顯示出來的結果便如下圖：
標示的觀念 (續2)
<H1>初試 HTML 語法</H1>
經瀏覽器解讀之後，
所顯示出來的結果。
標示的觀念 (續3)
除了 htm01.htm 之外，如果您使用記事
本檢視其他 .htm 檔案，可以發現它們也
都是由標示所組成的，HTML 的全名是
HyperText Markup Language(超文字標示
語言)，其中 Markup (標示) 的意義就是
這樣來的。
區塊的觀念
除了標示的觀念之外，HTML另一個重
要的觀念是「區塊」，以前面的
htm01.htm 檔案為例，「<H1>…</H1>」、
「<H2>…</H2>」、「<UL>…</UL>」、
及「<LI>…</LI>」都算是區塊。
區塊的觀念 (續1)
區塊
區
塊
<H1>初試 HTML 語法</H1>
區塊
<HR>
<H2>使用 HTML 的基本觀念</H2><P>
<UL>
區塊
<LI>標示的觀念</LI>
<LI>區塊的觀念</LI>
<LI>參數的觀念</LI>
</UL>
區塊的觀念(續2)
區塊的辨識很簡單，如果開頭的標示寫
成 <標示Ｘ>，則一直向後尋找直到 </標
示Ｘ> 時，就是一個區塊。
區塊的好處是讓 HTML 檔案具有結構性，
可提高其可讀性，接下來讓我們繼續觀
察 htm02.htm檔案，以下是以 IE 開啟的
結果：
區塊的觀念 (續3)
區塊的觀念 (續4)
再使用記事本加以檢視，結果也可以看
到不少由標示所構成的區塊：
標示的屬性
在 htm02.htm 裡面，我們也發現有些標示並
不是單純的 <標示> 型態，而是 <標示 xxx=?
yyy=?…> 的型態，這一類的標示稱為有屬性
的標示，例如 <IMG SRC="stone.jpg"
HEIGHT=200 WIDTH=300>。
以空白字元區隔
<IMG SRC="stone.jpg" HEIGHT =200 WIDT H=300>
標示名稱
屬性
屬性的表示
含有屬性的標示其屬性之間須使用空白
字元區隔，屬性本身則是「xxx = yyy」
的型態，位於 ‘=’ 號前面的是屬性名
稱，‘=’ 號後面的則是屬性值 。
屬性名稱是不可以改變的，而屬性值則
依設計者的需求來設定。
屬性的表示 (續)
舉例來說，如果我們把：
<IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>
改成：
<IMG SRC="stone.jpg" HEIGHT=100 WIDTH=150>
則顯示出來的 stone.jpg 圖片將變成原來
的四分之一。
階層的觀念
在 htm02.htm 裡面，我們還發現標示是
有階層的，如果把 htm02.htm 標示之外
的文字及標示之中的屬性刪除，並且按
階層來排列，結果如下：
階層的觀念 (續)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META>
<META>
HTML
HEAD
TITLE
</HEAD>
META
<BODY>
<H2></H2>
META
<CENTER>
<P>
BODY
H2
<HR>
CENTER
P
</P>
</CENTER>
CENTER
P
<CENTER>
<P>
<IMG>
</P>
</CENTER>
</BODY>
</HTML>
HR
IMG
階層的優點
有些 HTML 編輯工具在產生 HTML 原
始檔時，會將其中的 HTML 標示按照階
層關係來排列(例如以上的排序方式)，可
以給人一目了然的感覺。
階層 -- <HTML>標示
HTML： 用 來 表 示 < HTML> 與
</HTML> 之間的文字是一份 HTML 文件。
對絕大部分的瀏覽器來說，會自動
將 .htm 及 .html 的檔案視為 HTML 文件，
所以省略此一標示並不會影響顯示的結
果。
階層 -- <HEAD>標示
HEAD：用來設定 HTML 文件的標題、
作者…等資訊，但這些資訊都不會顯示
在瀏覽視窗上，因此有人會乾脆省略這
個標示，例如：
<HTML>
<!-- 省略了 HEAD 標示 -->
<BODY>
HTML 文件的主體在此
</BODY>
</HTML>
階層 -- <BODY>標示
BODY：撰寫在 <BODY> 及 </BODY>
之間的 HTML 標示經瀏覽器解讀之後，
會顯示在瀏覽視窗中，所以這是 HTML
主體的部分。對大部分瀏覽器來說，省
略 BODY 標示也是無所謂的，例如
htm01.htm 就是一個沒有 HTML、HEAD、
及 BODY 標示的文件，而使用 IE 及
Netscape 來瀏覽，也都可以正常顯示。
超文字的觀念
HTML 指 的 是 HyperText Markup
Language， 這 HyperText 直 譯 為 「 超 文
字」，主要是指「連結」及「圖片」(也
包含其他任何非文字性的媒體，例如聲
音、音樂、影片…等)，以下解說「連結」
及「圖片」與 HTML 文件的關係：
超文字的觀念 -- 圖片
圖片：在 htm02.htm 標示中，我們已經
看到用來插入圖片的標示 <IMG>，其中
設定圖片來源檔案的屬性是 SRC、而屬
性值是 “stone.jpg”，如下：
<IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>
這表示瀏覽器在解讀此一標示時，必須
繼續下載(或讀取) stone.jpg 這個檔案，
然後將其顯示在瀏覽視窗上。
圖檔來源目錄的設定
但瀏覽器該從哪一個目錄讀取 stone.jpg
檔案呢？以「SRC=“stone.jpg”」的設定
方式來看，stone.jpg 必須與 HTML 檔案
放在同一個目錄。除了
「SRC="stone.jpg"」的設定格式之外，
以下也是常見的設定方式：
(1) SRC="picture/stone.jpg"
(2) SRC="../stone.jpg"
(3) SRC="http://www.kj.com.tw/graphic/stone.jpg"
圖檔來源目錄的設定(續1)
(1)SRC=“picture/stone.jpg”：
以 HTML 檔案的所在目錄為基礎，
stone.jpg 必須放在 HTML 檔案所在目錄
的 picture 子目錄。
(2)SRC="../stone.jpg"：
以 HTML 檔案的所在目錄為基礎，
stone.jpg 必須放在 HTML 檔案所在目錄
的上一層目錄。
簡單地說，(1)(2)的設定格式是以 HTML
檔案做為相對的目錄。
圖檔來源目錄的設定 (續2)
(3)SRC=“http://www.kj.com.tw/graphic/stone.
jpg”：stone.jpg 必須放在 www.kj.com.tw 這
個 Web 伺服器的 /graphic 目錄底下。
超文字的觀念 -- 連結
連結：在瀏覽網頁時，將滑鼠指標移到
某一段文字或圖片上面，如果會出現
指標，就表示這是一個連結，在此按下
會連結到另一個網頁。
超文字的觀念 -- 連結(續1)
超文字的觀念 -- 連結(續2)
以 kjaspx\ch02 目錄的 VBBooks.htm 為例，
將 “Visual Basic 6.0 與 Windows API 講
座” 定義成連結的標示是 <A>，如下：
<A HREF="api/vbapi.htm">Visual Basic 6.0 與 Windows API 講座</A>
其 中 標 示 的 HREF 屬 性 被 設 定 成
“ api/vbapi.htm”， 這 表 示 在 “ Visual
Basic 6.0 與 Windows API 講座” 上面按
下 連 結 之 後 ， 會 跳 到 api 子 目 錄 的
vbapi.htm 網頁
連結之網頁的目錄設定
HREF=“api/vbapi.htm” 表示以 HTML 的
所在目錄為基礎，在 api 子目錄底下必
須含有 vbapi.htm 網頁，才能構成正確的
連結。除此之外，以下也是常見的設定
方式：
(1) HREF="vbapi.htm"
(2) HREF="../vbapi.htm"
(3) HREF="http://www.kj.com.tw/2000/vb/api/vbapi.htm"
連結之網頁的目錄設定 (續)
(1)HREF="vbapi.htm":
vbapi.htm 檔案必須放在目前所在目錄。
(2)HREF="../vbapi.htm":
vbapi.htm 檔案必須放在目前所在目錄的上一層
目錄。
(3)HREF="http://www.kj.com.tw/2000/vb/api/vba
pi.htm":
vbapi.htm 必須放在 www.kj.com.tw 這個 Web
伺服器的 /2000/vb/api 目錄底下。
其他觀念一
多個放在一起的空白字元，只會被瀏覽器視為
一個空白字元：
舉例來說，以下兩行標示所顯示的結果是相同
的：
<H1>初試 HTML 語法</H1>
<H1>初試
HTML 語法</H1>
結果 "初試" 與 "HTML" 之間都只會顯示一個
空白字元。
其他觀念一 (續)
既然多個放在一起的空白字元，只會顯
示出一個空白字元，那麼如果我們想將
字元與字元之間的距離拉寬一點，該如
何做呢？
最簡便的方法是在字元與字元之間插入
中文(全形字型)的空白字元，中文的空白
字元並不會被解讀成空白字元，而是被
解讀成中文字，故多插入幾個中文的空
白字元便可以達到拉大字元與字元距離
的目的。
其他觀念二
跳行字元是沒有作用的字元：
在我們編輯文字檔時，往往會按下 Enter 鍵來
表示跳行，如下：
這是第一行
這是第二行
跳行字元
而實際上顯示在瀏覽視窗時，其結果卻是「這
是第一行這是第二行」，根本沒有被分成兩行
來顯示。
其他觀念二 (續1)
那麼如何將文字分行呢？
常用的方法是在文字之間插入 <P> 或
<BR> 標示。
– <P> 標示的作用是分段落，也就是位於 <P>
標示後面的文字會放在新的段落(也就是新
的一行)。
– <BR> 標示的作用是斷行，兩者的差別如下
圖，若利用 <P> 標示來分行，則行與行之間
的距離比較大。
其他觀念二 (續2)
這是第一行 <P>
這是第二行
這是第一行 <BR>
這是第二行
其他觀念三
標示是不區分大小寫的：
舉例來說，<BR>、<Br>、及 <br>
的意義是完全相同的。
其他觀念四
註解標示：
凡是放在 <!-- 與 --> 之間的文字，都
會被瀏覽器略過不予解讀，也就是
不會顯示在瀏覽視窗上。由於 <!-- -> 具有不被解讀的特性，我們可以
利用它來插入註解文字。
其他觀念四(續1)
舉例來說，有一串標示如下：
<CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER>
其作用是「以置中方式插入 stone.jpg 圖片」，那
麼我們可以在此一標示之前插入以下的註解標示：
<!-- 以置中方式插入 stone.jpg 圖片 -->
<CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER>
則 <!-- 以置中方式插入 stone.jpg 圖片 --> 在此的
用途便是解釋 <CENTER><IMG
SRC=...></CENTER> 這一串標示的作用，而且不
會改變既有標示的意義。
其他觀念五
前面在設定屬性值時，有些標示在屬性值的前
後含有 " "(例如 SRC= "stone.jpg")，但有些卻
沒有(例如 HEIGHT=200 )，請問設定屬性值時，
前後加不加 " "，該如何判斷？
在屬性值前後加上 " " 是比較標準的寫法，但
如果屬性值之中只有中英文字及數字，則屬性
值前後不加 " " 也沒關係。如果您沒有把握該
不該在屬性值前後加上 " "，那麼加上 " " 總是
不會錯的。
2-3 常用的 HTML 標示
learn.aspx：HTML 學習網頁
左邊的架框會列出本節所有的
.htm
網頁，選取後其原始碼會顯示於右
上方的架框，網頁瀏覽的結果會顯
示於右下方的架框。
learn.aspx：HTML 學習網頁(續1)
選取
原始碼
瀏覽結果
learn.aspx：HTML 學習網頁(續2)
右上方的框架還可用來輸入HTML標
示，為「輸入架框」，輸入後，按
下「解讀HTML」鈕，則輸入於架框
內的文字即會被解讀，然後顯示在
右下方的架框中。
learn.aspx：HTML 學習網頁(續3)
解讀後的結果
在此輸入
HTML 標示
上機練習
接下來讓我們來嘗試前面所介紹過的
HTML 標示，請分別輸入 (1)～(5) 的
HTML標示，然後按下「解讀 HTML」
鈕，看看瀏覽的結果：
上機練習(1)
輸入：
<!-- 這是一個註解，內容不會顯示在瀏覽視窗上 -->
上一行是一個註解，不會顯示在瀏覽視窗上
結果：瀏覽窗格上只會顯示「上一行是
一個註解，不會顯示在瀏覽視窗上」這
一行文字。
上機練習(2)
輸入：
這是第一個段落。<P>
這是第二個段落。<P>
這是第三個段落。
這還是第三個段落，因為兩行之間沒有段落標示 P。
結果：這四行文字會顯示成三個落段，
其中由於第三行與第四行之間沒有 <P>
標示，所以會顯示成同一個段落。
上機練習(3)
輸入：
P是段落標示<P>
P是段落標示<P>
BR是斷行標示<BR>
BR是斷行標示
結果：兩行「 P 是段落標示」之間有明
顯的間距，但兩行「BR 是斷行標示」之
間則沒有明顯的間距。
上機練習(4)
輸入：
這一行插入
這一行插入
6個空白字元(英文半形)<P>
3個中文全形空白字元
結果：第一行的 6 個空白字元只會顯示
出一個空白字元，而第二行的 3 個中文
全形空白字元則會完全顯示出來。
上機練習(5)
輸入：
<CENTER>
<IMG SRC="F8316.gif" HEIGHT=66 WIDTH=440><BR>圖片一<P>
<IMG SRC="F8315.gif" BORDER=1><BR>圖片二<P>
</CENTER>
說明：以上在測試 <IMG> 標示(用來插入圖片)，
其中比較有趣的是第二個 <IMG> 標示，此一
標示省略了 HEIGHT 及 WIDTH 屬性，這表
示圖片要以原大小來顯示，另外增加了
BORDER=1 屬性，這表示圖片顯示時要含有邊
框。
練習一
利用 learn.aspx 網頁檢測以下 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>、
<I>、<U>、<SUP>、<SUB>、<TT>、
<FONT> 。
< B>： 將 文 字 設 定 成 粗 體 字 ， 例 如 ：
「<B>這是粗體字</B>」所顯示的結果
為「這是粗體字」。
設定文字外觀的標示 (續1)
<I>：將文字設定成斜體字，例如：
「<I>這是斜體字</I>」所顯示的結果為
「這是斜體字」。
<U>：將文字設定成加底線，例如：
「<U>這是加底線字</U>」所顯示的結
果為「這是加底線字」。
設定文字外觀的標示(續2)
<SUP>：將文字設定成上標字，例如：
「這是正常字<SUP>這是上標字</SUP>」
所顯示的結果為「這是正常字這是上標字」。
<SUB>：將文字設定成下標字，例如：
「這是正常字<SUB>這是下標字</SUB>」
所顯示的結果為「這是正常字這是下標字」。
設定文字外觀的標示 (續3)
<TT>：採用等寬字型來顯示文字，例如：
「<TT>這是 Windows 的等寬字</TT>」
所顯示的結果為「這是Windows的等寬
字」。(註：以 "Windows" 為例，在不等
寬字體中，"W" 比 "i" 來得寬，但是在等
寬字體中，"W" 與 "i" 是等寬的)。
設定文字外觀的標示 (續4)
<FONT>：FONT 標示通常帶有屬性，例
如「<FONT SIZE=+1>字體放大一級
</FONT>」(註：SIZE 為 FONT 標示的
屬性)，表示所顯示出來的字體要放大一
級，有關 FONT 標示的屬性請參閱稍後
的說明。
設定文字外觀的標示 (續5)
Text.htm 網頁：
FONT 標示的屬性 -- SIZE
FONT標示的屬性有 SIZE、COLOR、及
FACE 三種，茲說明如後：
SIZE屬性：SIZE 屬性的用途是設定字體
的大小：
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
<FONT
SIZE=+4>Size=+4</FONT><P>
SIZE=+3>Size=+3</FONT><P>
SIZE=+2>Size=+2</FONT><P>
SIZE=+1>Size=+1</FONT><P>
SIZE=+0>Size=+0</FONT><P>
SIZE=-1>Size=-1</FONT><P>
SIZE=-2>Size=-2</FONT><P>
FONT 標示的屬性 – SIZE (續1)
Size.htm
FONT 標示的屬性 – SIZE (續2)
也就是以 0 為基礎，每加一則字體放大
一級，每減一則字體縮小一級，但放大
的最大值為 +4、縮小的最小值為 -2。
除了採用 '+' 及 '-' 號來改變字體大小之外，
也可以使用絕對值的設定方法，例如
「<FONT SIZE=7>第七級字體大小
</FONT>」。
FONT 標示的屬性 – SIZE (續3)
兩種方法在字體大小的對應關係如下：
Size=+4
Size=+3
Size=+2
Size=+1
Size=+0
Size=-1
Size=-2
等於
等於
等於
等於
等於
等於
等於
Size=7
Size=6
Size=5
Size=4
Size=3
Size=2
Size=1
FONT 標示的屬性 – COLOR
COLOR 屬性：COLOR屬性的用途是設定字體
的顏色，設定的格式有以下兩種：
(1) <FONT COLOR="Red">紅色字</FONT><P>
(2) <FONT COLOR="#FF0000">紅色字</FONT><P>
第一種設定方法是將 COLOR 的屬性值輸入成
「顏色的英文名稱」，例如我們熟知的
Black( 黑 色 ) 、 White( 白 色 ) 、 Red( 紅 色 ) 、
Green(綠色)、Blue(藍色)、Cyan(青色)…等，
都可以成為 COLOR 的屬性值。
FONT 標示的屬性 – COLOR (續1)
第二種設定方法則必須瞭解 RGB 的配色
原理(R、G、B 三個英文字母代表的是組
成各種顏色變化的三原色 Red、Green、
Blue 三原色)。
舉例來說，紅色與綠色會組合成黃色。
除了取色之外，R、G、B 三原色的強度
也會影響組合出來的顏色，例如綠色的
強度只有一半時，與紅色組合出來的顏
色會變成橘色。
FONT 標示的屬性 – COLOR (續2)
R(紅)
黃
紫
白
G(綠)
青
B(藍)
FONT 標示的屬性 – COLOR (續3)
第二種設定格式中含有 6 個字元，就是
用來設定三原色的強度值：
紅色的強度值
<FONT COLOR="#rr gg bb ">
綠色的強度值
藍色的強度值
FONT 標示的屬性 – COLOR (續
4)
其中的 rr、gg、bb 分別代表 R、G、B 的
強度值，其有效範圍為 00～FF(註：這是
十六進位表示法，其值相當於 0～255)，
以下舉幾個例子來看：
1.紅色取最強的 FF，綠色及藍色取最弱的
00：
此時的設定值等於 "#FF0000"，所得到的
顏色將等於紅色。
FONT 標示的屬性 – COLOR (續5)
2.
紅色及綠色取最強的FF，藍色取最弱的 00：
此時的設定值等於 “#FFFF00”，所得到的顏
色將等於黃色。
3. 紅色、綠色、及藍色都取最強的 FF：
此時的設定值等於 "#FFFFFF"，所得到的顏
色將等於白色。
4. 紅色、綠色、及藍色都取最弱的 00：
此時的設定值等於 "#000000"，所得到的顏色
將等於黑色。
FONT 標示的屬性 – COLOR (續6)
以下所列出的是一些常用顏色的設定值：
顏 色
黑
藍
綠
青
紅
紫
黃
白
色
色
色
色
色
色
色
色
設定值
#000000
#0000FF
#00FF00
#00FFFF
#FF0000
#FF00FF
#FFFF00
#FFFFFF
顏 色
灰 色
暗藍色
暗綠色
暗青色
暗紅色
暗紫色
暗黃色
亮灰色
設定值
#808080
#000080
#008000
#008080
#800000
#800080
#808000
#C0C0C0
FONT 標示的屬性 – COLOR (續
7)
color.htm：
FONT 標示的屬性 – FACE
FACE 屬性：
FACE 屬性的用途是選擇文字所使用的字
型，例如
「<FONT FACE=標楷體>我是標楷體
</FONT>」。
FONT 標示的屬性 – 練習
想要顯示以下結果，請完成其 HTML：
設定段落樣式的標示
HTML 用來設定段落的標示有 <H1>、
<H2>、<H3>、<H4>、<H5>、<H6>、
<ADDRESS>、<PRE>、<blockquote>、
<OL>、<UL>、<DL>…等。
設定段落樣式的標示 -- <H1>
<H1>～<H6>：這幾個標示的用途是設
定段落標題的大小級數。
設定段落樣式的標示-<ADDRESS>
此一標示會採用斜
體字做為該段落的字體，例如
「<ADDRESS>此一段落採斜體字為
字體</ADDRESS>」
<ADDRESS>：
設定段落樣式的標示 -- <PRE>
<PRE>：此一標示會採用等寬字型
做為該段落的字體，且具有以下特
性：
(1) 每一個空白字元(英文半形)也都
會顯示出一個空白位置。
(2) 跳行字元會被視為文字的跳行。
設定段落樣式的標示--<PRE>(續1)
對於需要保留空白字元的段落，將
其設定成 <PRE> 最為合適，例如有
一段程式如下：
這些是空白字元
For I = 1 To 9
For J = 1 To 9
Response.Write I*J
Next
Next
設定段落樣式的標示--<PRE> (續2)
如果我們採用預設的段落，則由於跳行
字元會被視為無效字元，而多個空白字
元只會顯示出一個空白字元，所以結果
如下：
For I = 1 To 9 For J = 1 To 9 Response.Write I*J Next Next
設定段落樣式的標示--<PRE> (續2)
但如果採 <PRE> 為段落標示，則顯示結
果如下：
設定段落樣式的標示 -<blockquote>
<blockquote>：此一標示稱為「縮排」
標示，如果我們希望某一段落採縮排方
式顯示，則只要將其放在
<BLOCKQUOTE> 及 </BLOCKQUOTE>
即可，例如：
設定段落樣式的標示 -<blockquote> (續1)
<H2>使用 HTML 的基本觀念</H2>
<BLOCKQUOTE>
標示的觀念<BR>
區塊的觀念<BR>
其他觀念
<BLOCKQUOTE>
多個放在一起空白字元，只會被瀏覽器視為一個空白字
元<BR>
跳行字元是沒有作用的字元<BR>
標示是不區分大小寫的
</BLOCKQUOTE>
</BLOCKQUOTE>
設定段落樣式的標示 -<blockquote> (續2)
設定段落樣式的標示 -<blockquote> (續3)
在 BlockQuo.htm 之中，比較有意思的事
情是 <BLOCKQUOTE>～
</BLOCKQUOTE> 裡面還有
<BLOCKQUOTE>，結果將會造成後面
的段落更大的縮排。
其實在某一個標示區塊裡面又有相同的
標示，在 HTML 裡面是很普遍的，除了
<BLOCKQUOTE> 標示之外，以下所介
紹的 <OL>、<UL>、<DL>…等標示也都
具有類似的特性。
練習
有一文字檔如下：(收錄於aspbook.txt)
ASP.NET 網頁製作教本
第一章 建立ASP.NET的作業平台 -- 安裝IIS
1-1 安裝IIS的軟硬體需求
1-2 單機作業平台的建立
1-3 區域網路作業平台的建立
第二章 進入ASP.NET網頁製作的準備工作
2-1 ASP.NET相關技術概說
2-2 使用HTML的基本觀念
2-3 常用的HTML標示
練習(續)
請利用 HTML 將其顯示成：
設定段落樣式的標示 -- <OL>
<OL>：此一標示稱為「標號清單」
標示，當我們想要以條列的方式來
顯示資料時，採用此一標示最為合
適。
設定段落樣式的標示 -- <OL>(續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 專業人員最不可或缺的一本書
設定段落樣式的標示 -- <OL>(續2)
撰寫的方法是：
(1) 在需要編號的資料前面加上 <LI>
標示 。
(2) 將所有的 <LI> 標示放在 <OL> 及
</OL> 區塊之間。
設定段落樣式的標示 -- <OL>(續3)
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>
設定段落樣式的標示 -- <OL>(續4)
在以上例子中，如果我們想要在
「一本為完全初學者所寫的書」後
面顯示以下內容，則 HTML 標示該
如何寫呢？
設定段落樣式的標示 -- <OL>(續5)
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>(續6)
答案是在「一本為完全初學者所寫的書」
之後插入以下標示：
<OL>
<LI>基礎學習篇
<LI>程式實務篇
<LI>物件應用篇
<LI>專題研究篇
</OL>
設定段落樣式的標示 -- <UL>
<UL>：此一標示稱為「項目清單」標示，
功能與 <OL> 相類似，以 ol2.htm 範例為
例，如果我們將其中的 <OL> 全部改成
<UL>、將 </OL> 全部改成 </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 將 aspbook.tx 檔案的內容顯
示成 ：
設定段落樣式的標示 -- <DL>
<DL>：此一標示稱為「定義清單」
標示，若有兩段文字而第二段文字
用來解釋第一段文字時，使用 <DL>
標示最為合適，例如：
設定段落樣式的標示 -- <DL>(續1)
設定段落樣式的標示 -- <DL>(續2)
撰寫的方法是：
(1)在被解釋的段落(第一個段落)前面加上
<DT> 標示 。
(2)在解釋的段落(第二個段落)前面加上
<DD> 標示。
(3)將第一、二兩個段落放在 <DL> 及
</DL> 區塊之間。
練習
利用 HTML 將 aspbook2.txt 檔案的內容
顯示成：
設定對齊的標示
對齊可分成靠左、靠右、及置中三種，
而我們可以根據以下兩種情況來選擇對
齊的標示：(1) 單一段落的對齊 (2) 連續
多個段落的對齊。
單一段落的對齊：單一段落的對齊可以
選擇以下標示：
靠左 <P ALIGN="Left">這是左靠的段落</P>
置中 <P ALIGN="Center">這是置中的段落</P>
靠右 <P ALIGN="Right">這是右靠的段落</P>
設定對齊的標示(續1)
連續多個段落的對齊：
要將多個段落一起靠右對齊，則將多個
段落放在 <DIV Align=“Right”> 及
</DIV> 之間。
若要置中對齊，則是將 Align 的屬性設
定成 “Center”(也就是將 “Right” 改成
“Center”)。
若要靠左對齊，則是將Align的屬性設定
成 “Left”(註：靠左對齊是預設的對齊
方式)，請看 Align.htm 範例。
設定對齊的標示(續2)
靠右對齊
置中對齊
預設值就是靠左
對齊，所以不必
使用 DIV 標示
表格(Table)標示
HTML 語法中用來產生表格的標示包含
<TABLE>、<TR>、及 <TD>，這幾個標
示必須互相配合使用，才能正確地產生
表格。
表格的結構
構成一欄資料
構成一列資料
表格的結構(續)
TABLE
TR
TD
TD
TR
TD
TD
TR
TD
TD
單一欄位的對齊設定
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
單一欄位的對齊設定(續)
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
以上9種對齊方式的設定標示分別如下：
<TD Align="Left" Valign="Top">水平:靠左<br>垂直:靠上</TD>
<TD Align="Center" Valign="Top">水平:置中<br>垂直:靠上</TD>
<TD Align="Right" Valign="Top">水平:靠右<br>垂直:靠上</TD>
<TD Align="Left" Valign="Center">水平:靠左<br>垂直:置中</TD>
<TD Align="Center" Valign="Center">水平:置中<br>垂直:置中</TD>
<TD Align="Right" Valign="Center">水平:靠右<br>垂直:置中</TD>
<TD Align="Left" Valign="Bottom">水平:靠左<br>垂直:靠下</TD>
<TD Align="Center" Valign="Bottom">水平:置中<br>垂直:靠下</TD>
<TD Align="Right" Valign="Bottom">水平:靠右<br>垂直:靠下</TD>
Align(水平對齊)屬性及 Valign (垂直對齊)屬性。
Align 及 Valign 屬性如果省略，則水平對齊表
示靠左、垂直對齊表示置中。
設定同一列的垂直對齊
如果同一列的所有欄位都採用相同的對
齊方式，則我們只要將 Valign 屬性設定
於 <TR> 標示中即可，不必逐一在同一
列的所有 <TD> 標示中加以設定。
以 Table02.htm 為例，欄位 (1)(2)(3) 都是
靠上對齊、欄位 (4)(5)(6) 都是置中對齊、
欄位 (7)(8)(9) 都是靠下對齊，因此可以
將 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 的製作：(提示：使用
<TABLE> 標示)(註：圓球圖檔收錄於
Ball.gif)
練習二
有一文字檔如下：(收錄於 stock.txt)
股票代號 股票名稱 收盤價
2328
廣宇
103.50
2329
華泰
92.00
2330
臺積電 152.00
2331
精英
54.00
漲跌
-1.50
-2.00
0.00
0.00
練習二 (續)
利用 HTML 將其製作成以下表格：
置中
左靠
右靠 右靠
表格及欄位屬性的設定 BgColor
BgColor(背景顏色)屬性：
設定方法是 “#rrggbb” 或 “英文顏色名稱”，
BgColor屬性可以使用於 <TD>、<TR>、及
<TABLE> 標示。
若使用於 <TD> 標示，則可設定單一欄位的背
景顏色。
若使用於 <TR> 標示，則可設定同一列的背景
顏色。
若使用於 <TABLE> 標示，則可設定整個表格
的背景顏色。
表格及欄位屬性的設定-BgColor(續)
將 (1, 1) 欄的背景顏色設定黃色、將第2
列的背景顏色設定成青色
<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 、
CellPadding 、 CellSpacin
Border(邊框寬度)、CellPadding(儲
存格與儲存格邊框之距離)、
CellSpacing(儲存格與表格邊框之距
離)：這幾個屬性可用來調整表格的
外觀。
表格及欄位屬性的設定 -- Border 、
CellPadding 、 CellSpacin(續1)
Border(邊框寬度)
CellSpacing(儲存格與表格邊框之距離)
CellPadding(儲存格與儲存格邊框之距離)
表格及欄位屬性的設定 -- Border 、
CellPadding 、 CellSpacin(續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>
表格及欄位屬性的設定 -- Width
Width(寬度)：Width 屬性可用來設定表
格、列、及儲存格的寬度，以表格的寬
度為例，請比較以下兩種設定方法：
<TABLE Border=1 Width="80%">
...
</TABLE>
<TABLE Border=1 Width="350">
...
</TABLE>
表格及欄位屬性的設定 - Width (續)
「Width=“80%”」表示表格將佔據可顯示寬
度的 80%，而「Width=“350”」則表示表格
將佔據 350 點的寬度，顯示結果如下：
100%
80%
350 點
表格及欄位屬性的設定 - NoWrap
NoWrap(不自動折行)：
NoWrap 屬性的用途是設定欄位內的文字，
若某一欄位中的文字太長，而沒有設定
此一屬性，則該文字太長的部分會自動
折到下一行，若設定此一屬性，則不會
折行，此一屬性沒有屬性值，設定方法
如下：
<TD NoWrap>本欄位不自動折行</TD
表格及欄位屬性的設定 NoWrap (續)
請比較一下有沒有設定 NoWrap 屬性的
差別：
設定了 NoWrap 屬性
未設定 NoWrap 屬性
畸形表格的產生
產 生 畸 形 表 格 要 使 用 到 ColSpan 及
RowSpan 屬性，先畫一個標準的表格，
如下：
ColSpan=3
RowSpan=2
ColSpan=2
畸形表格的產生 (續)
然後標出要延伸多少格，再將 ColSpan
或 RowSpan 屬性寫到 <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)
<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)
<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)
在以上 HTML 之中，除了要將圖片欄位
的 Rowspan 屬性設定為 5、將「新觀念
的 Visual Basic 6.0教本」欄位的 Colspan
屬性設定為 2 之外，「基礎學習篇:」、
「程式實務篇:」、「物件應用篇:」、
「專題研究篇:」等 4 個欄位須將 Valign
屬性設定為 Top、並設定 NoWrap 屬性。
練習
請製作您個人基本資料的網頁，如下圖：