ch04 Dreamweaver 操作與HTML 語法教學投影

Download Report

Transcript ch04 Dreamweaver 操作與HTML 語法教學投影 

Chapter 4
Dreamweaver 操作與
HTML 語法基礎
HTML 有它的一定編寫規範和標準，這些規範都是由 W3C （the
World Wide Web Consortium） 這個國際性協會制定的。
這章將帶領大家一窺 HTML 語法的堂奧，認識最常見的標籤與元
件使用的語法。從 4-4節表格開始會搭配 Dreamweaver 的畫面，
協助您對 HTML 的語法更有感覺。只要能看得懂 HTML 檔，對之
後需要修改程式碼的地方會有幫助的。
開始
離開
＊教科書投影片同教科書受著作權保護，僅供教師作為授課用途。學校教師得使用投
影片，於授課期間，搭配用書進行教學；由於投影片極易重製、列印、出版，為避免
第三人（含學生）因不知情而發生侵權行為，請支持與協助不將教學投影片以任何型
式移轉予第三人使用。如有特殊需求，請向出版社申請授權協議。
目錄
4-1
4-2
4-3
4-4
4-5
4-6
4-7
HTML的簡介
HTML文件的基本架構
文字格式與段落
表格
加入圖形影像
超連結
表單
回章首
上一頁
下一頁
離開
4-1 HTML的簡介
HTML 是 個 結 構 化 （ structured ） 的 語 言 ， 它 的 全 名 是
「HyperText Markup Language」，也就是「超文字標記語
言」。嚴格來說它並不是一般的程式語言，不能處理較複雜的
邏輯判斷，而只是單純描述整個網頁檔案的結構和內容。
完整的 HTML 檔是由許多標籤（tag）組成，標籤外圍用大於
（>）和小於（<）符號包起來。大部份標籤是需要有頭有尾，
也就是成對的，像是 <TITLE> 和 </TITLE> 之間所包含的文
字定義了 HTML 檔的標題；而有些標籤則不需要成對，譬如：
產生分隔線的 <HR>，每加一次 <HR> 標籤就會在加入的位
置產生一行分隔線。
標籤不分英文大小寫。
HTML 的檔名通常以 .html 或 .htm 副檔名結尾。
下一節
上一頁
下一頁
回目錄
4-1 HTML的簡介
有的標籤會附帶它的屬性。譬如：在插入圖片時，用到 <IMG> 標籤如
下：
<IMG SRC="map.gif" ALT="阿里山地圖">
圖的註解說明文字
這個 <IMG> 用到了兩個屬性： SRC，指定使用的影像圖檔來源； ALT，
設定了當滑鼠遊標移到這張圖片上頭時，會浮現什麼註解說明文字。
上述例子，設定了影像圖檔是 “map.gif”，而說明文字是“阿里山地圖”
下一節
上一頁
下一頁
回目錄
4-1 HTML的簡介
HTML 檔 案 的 內 容 都 是 純 文 字 ， 只 要 用 一 般 的 文 字 編 輯 軟 體 ： 如
Windows 內建的 WordPad ，或者是許多人使用的 UltraEdit 等，都可以
建立 HTML 檔案。
而上一章提到 Dreamweaver 的“程式碼”模式下也可以編輯 HTML，也
可以在“設計”模式下用“所見即所得”的方式拖拉元件到文件視窗中，
再切換到“程式碼”模式手動修改。總之，方法很多，端看自己的使用習
慣。
HTML 檔的內容若是固定的，也就是靜態網頁，每次從瀏覽器點進去內容
都一樣。但現在有許多的互動式網頁，它的內容會隨使用者每次查詢的條
件不同或查詢時間點而不同，這就得靠在 HTML 檔裡嵌入script 語言，譬
如：JavaScript、VBScript 或本書要介紹的 PHP 語言，都是 script 語言。
要將 script 語言的程式碼嵌入 HTML 文件裡頭，只要加入可區分該 script
語言的標籤，譬如：PHP 程式碼是加入 <?php 和 ?>
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
HTML 是由許多標籤組成，很多標籤是首尾成對的。而標籤內
是可以再包著另一組標籤，如此就形成了巢狀的結構。
習慣上在編寫時會將同一層的標籤首尾縮排對齊，標籤之間的
空白不會影響結果，因此可以視情況跳行，以方便程式碼的閱
讀。
在建立或是閱讀一份較冗長的 HTML 文件時，只要像剝洋蔥一
樣，從最外層開始一層一層往裡面剝就可以了。
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
常用的幾個架構：
<HTML> </HTML>：文件起始
<HEAD> </HEAD>：標頭
<TITLE> </TITLE>：標題文字
<BODY> </BODY>：本文
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
在 C:\AppServ\www 下建立一個 chap04-01.html 檔案 ：
<html>
<head>
<title> 歡迎光臨小蘋果的家 </title>
</head>
<body>
Hello World !
</body>
</html>
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
在瀏覽器的網址列輸入http://localhost/chap04-01.html，順利
的話就可以看到你的第一個作品了。<TITLE> 裡設定的文字會
出現在視窗標題。
這是來自 Title 的定義
輸入程式網址
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
在瀏覽器中將這個網頁加入我的最愛，這個標題文字也會做
為標籤的預設文字。
「加到我的最愛」鈕
選取「加到我的最愛」
選取「加到我的最愛」
按「新增」鈕
下一節
上一頁
下一頁
回目錄
4-2 HTML文件的基本架構
變成我的最愛書籤標題
下一節
上一頁
下一頁
回目錄
4-3 文字格式與段落
在一份 HTML 檔裡，會需要像在編輯 Word 檔一樣需要將文
字格式做些調整。有些地方要強調某些文字的重要性，要設
為斜體或粗體，或是設定文字的字體大小…等。這節要介紹
的主要是跟文字相關的標籤。
<BR>：跳行
<HR>：分隔線
效果是畫一列分隔線。
<PRE> </PRE>：保留原文格式
PRE> 和 </PRE> 之間的內容會忠實呈現在網頁上。
也就是在 HTML 檔上有跳行的地方就跳行，有空白
字元的地方就仍然保持空白。
下一節
上一頁
下一頁
回目錄
4-3 文字格式與段落
<B></B>：粗體
<B> 和 </B> 之間的文字會變粗體字。
<I></I>：斜體
<I> 和 </I> 之間的文字會變斜體字。
<CENTER></CENTER>：置中
<CENTER> 和 </CENTER> 之間的文字會放在視窗的
左右邊界的水平中間位置。
<Hn>：標題
n 是代表 1到6的數字，n 值越小則字體越大
<P>：分段
<P> 會先加入一列空白行再跳行，比 <BR> 多了先加空
白行的動作
下一節
上一頁
下一頁
回目錄
4-3 文字格式與段落
注意仍保留原本文
件中的空白字元
下一節
上一頁
這就是分
隔線
下一頁
回目錄
4-3 文字格式與段落
調整視窗寬度時,每行的
文字長度將隨視窗寬度
變化
下一節
上一頁
下一頁
回目錄
4-4表格
事實上利用 Dreamweaver 網頁設計軟體，可不必再去記太多 HTML
標籤的語法，只要能記得主要的標籤名稱，並且對它有哪些標籤屬性
可以有印象就可以了。
從這一節開始的接下來幾節會透過實例用Dreamweaver讓您對照幾
個網頁元素在 Dreamweaver 的建立方法和它的 HTML 程式碼
表格在網頁的編排上扮演很重要的角色，當網頁的內容越來越多元時，
有許多文字區塊與影像，甚至還有動畫，使用表格可以將這些元素將
版面安排得井然有序。
下一節
上一頁
下一頁
回目錄
4-4-1 建立新的網頁
在「檔案」面板中，按滑鼠右鍵隨即出現選單。在選單上選取「開新
檔案」，再更改檔名為 table.html 。
按滑鼠右鍵,
選開新檔案
1.更改檔名為 table.html
2. 雙擊滑鼠打開新建檔案
下一節
上一頁
下一頁
回目錄
4-4-1 建立新的網頁
在“table.html”上雙擊滑鼠，即可打開這個新的空白網頁開始編輯
下一節
上一頁
下一頁
回目錄
4-4-2 插入表格
Step 1:執行「插入」功能表的「表格」
執行「插入」/「表格」
或在「插入」面板中，按下「常用」工具列的“表格”按鈕。
下一節
上一頁
下一頁
回目錄
4-4-2 插入表格
Step 2:設定列數與欄數。
下一節
上一頁
下一頁
回目錄
4-4-2 插入表格
Step 3:游標移到表格右下角的小黑點，拖曳滑鼠即可調整表格的大
小。
下一節
上一頁
下一頁
回目錄
4-4-2 插入表格
Step 4:將插入點停在表格內即可開始鍵入文字。請按照下圖把課表
先填好。
下一節
上一頁
下一頁
回目錄
4-4-3 插入欄與列
Step 1:現在要在第一列後插入一個空白列。游標移到第一列的最前
面，按下滑鼠即可選取一整列。注意，若要確認是否正確選
取到一整列，可以看文件視窗下方是否顯示 <tr> 是目前所在
的 HTML 標籤。
Step 2:按滑鼠右鍵，在選單中選「表格」下的「插入列」
選取一整列
按滑鼠右鍵 , 在選單中選
「表格」下的「插入列」
下一節
上一頁
下一頁
回目錄
4-4-3 插入欄與列
Step 3:在第一列的第一個儲存格中輸入標題文字：“幸福國小三年
五班課表”。將這串文字選取，在「屬性」面板中，將它設
為“表頭”，它的文字會變粗體。
另外，在插入的空白列，填入“星期一”至“星期五” 。
下一節
上一頁
下一頁
回目錄
4-4-3 插入欄與列
Step 4:在星期一這欄位的位置插入一欄，用來放每一節課的上課時
間。
在欄位上方按下滑鼠即可選取
該欄位
下一節
上一頁
下一頁
回目錄
4-4-3 插入欄與列
Step 5:在插入的欄位輸入每節課的時段。到目前為止完成的表格如
下：
下一節
上一頁
下一頁
回目錄
4-4-4 合併儲存格
把上一節中設為表頭的儲存格和第一列其他的儲存格合併在一起。選
取有“幸福國小三年五班課表”文字的第一列，按滑鼠右鍵，在選單
中選「表格」下的「合併儲存格」。第一列的儲存格會合併成一個儲
存格。
按滑鼠右鍵, 在選單中選「表
格」下的「合併儲存格」
下一節
上一頁
下一頁
回目錄
4-4-4 合併儲存格
儲存格已合併了
下一節
上一頁
下一頁
回目錄
4-4-5 表格位置與邊框
要修改整個表格的屬性，包括它的水平位置是靠左、靠右或靠中
對齊，或者修改它的邊框粗細，都要先將整個表格選取起來才行。
Step 1: 選取表格。可以先將插入點落在表格中，再執行「修改」
功能表下的「表格」／「選取表格」。
也可以將游標移到表格的角落上，當游標的形狀變成了
再按下滑鼠，這時整個表格就被選取了
，
選取整個表格
下一節
上一頁
下一頁
回目錄
4-4-5 表格位置與邊框
Step 2:在「屬性」面板中也可以設整個表格在視窗的水平位置，
在這裡我們先改為「置中對齊」。
按
鈕預覽網頁
的結果。
整個表格移到中間了
下一節
上一頁
下一頁
回目錄
4-4-5 表格位置與邊框
Step 3:將邊框粗細設為“0”，文件視窗的表格框線都變成虛線
了。
下一節
上一頁
下一頁
回目錄
4-4-5 表格位置與邊框
Step 4:再預覽網頁，表格的框線都看不到了：
邊框都消失了
下一節
上一頁
下一頁
回目錄
4-4-6 儲存格背景顏色
在要選取儲存格的範圍裡拖曳滑鼠，選取範圍內的儲存格周圍框
線顏色變了，就表示儲存格被選取了。接著在「屬性」面板中的
「背景顏色」中設定好想要的顏色。
下一節
上一頁
下一頁
回目錄
4-4-6 儲存格背景顏色
練習將其他儲存格和表格的背景顏色也修改看看吧！
下一節
上一頁
下一頁
回目錄
4-4-7 表格的 HTML程式碼
選取表格，再按下
HTML 碼。
鈕切換到程式碼模式看看表格的
每個範圍表示表格中的一列
下一節
上一頁
下一頁
回目錄
4-4-7 表格的 HTML程式碼
對照一下表格內和 HTML 碼，整個表格是從 <table> 開始，以
</table> 結尾的。對照一下表格內和 HTML 碼，不難發現整個表
格是從 <table> 開始，以 </table> 結尾的：
儲 存 格 是 用 <td> 和
</td> 包圍起來的，標籤
內的 width 和 bgcolor 則
是它的屬性。
<tr>
<td width="79" bgcolor="#FF9900">&nbsp;</td>
<td width="86" bgcolor="#FF9900">時段</td>
<td width="86" bgcolor="#FF9900">星期一</td>
<td width="84" bgcolor="#FF9900">星期二</td>
<td width="82" bgcolor="#FF9900">星期三</td>
<td width="80" bgcolor="#FF9900">星期四</td>
<td width=“87” bgcolor=“#FF9900”>星期五</td>
</tr>
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
複製光碟目錄：Example\chap04\chap04-05：
Step 1:首先將本書光碟 Example\chap04\chap04-05 目錄複製到
C:\Appserv\www 下，取消唯讀屬性。建立一個新的網站，並將網
站定義中的所有相關目錄都設為 chap04-05。
更改目錄
更改目錄
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
更改目錄
更改目錄
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
Step 2:雙擊滑鼠打開 index.html ，將會出現下圖的表格。將插入點
移到表格第一列“羅浮宮”後的儲存格，準備在此插入影像。
將插入點移到這裡準
備插入影像
下一節
雙擊滑鼠打開
index.html
上一頁
images 子目錄下
有幾個照片圖檔
下一頁
回目錄
4-5 加入圖形影像
Step 3:插入圖形有幾個方法：
執行「插入」功能表的「影像」：
執行「插入」/「影
像」
或者，按下「常用」工具列上的“影像”按鈕
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
出現「選取影像原始檔」視窗時，選取圖檔的目錄及檔名，
再按確定。
雙擊滑鼠進入
images 子目錄
下一節
雙擊滑鼠選
取這個圖檔
上一頁
下一頁
回目錄
4-5 加入圖形影像
也可以點開右手邊的「檔案」面板中的 images 目錄，然後直接從
中將圖檔拖曳到表格中。當放開滑鼠時，就會看到圖片已在表格
中，效果是一樣的。
將圖檔從檔案面板中拖曳
到要插入的位置
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
Step 4:設定幾個常用的圖形屬性了：
先看看下方的「屬性」面板，「原始檔」的欄位是不是顯示了剛才在「選
取影像原始檔」視窗中選擇的圖檔呢？
圖片放進來了
圖檔的來源顯示在「原始檔」欄位
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
接著再按照下面說明，一一修改影像的其他屬性。
可以自行為物件命名
調整影像的與寬與高
輸入替代文字
看看這個圖片所對應的程式碼：
影像的程式碼
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
<img src="images/MuseeduLouvre.JPG" alt="羅浮宮" name="imgMuseum"
width="401" height="266" id="imgMuseum">
剛才“選取影像原始檔”的動作，其實就是在設它的 src 屬性值。 alt 屬性值
是替代文字。而 name 屬性值就是自行給定的物件名稱， width 和 height 則
分別是影像的寬度和高度。
下一節
上一頁
下一頁
回目錄
4-5 加入圖形影像
Step 5: 完成剩下來的兩張圖：
下一節
上一頁
下一頁
回目錄
4-6 超連結
在網頁上可以從一個網頁連到另一個網頁，這樣的設定就
叫做超連結。從文字和圖片都可以連結到別的網頁，這一
節將介紹文字與圖片超連結。
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
複製光碟目錄：Example\chap04\chap04-06
Step 1:在檔案面板中點開 index.html，這是前面 4-5 節的最後結果。
除了index.htm 之外，也多了另一個 Museum.html，做為“羅浮宮”
的文字連結目標。
Step 2:選取第一列的“羅浮宮”
三個字，然後按下在「屬
性」面板中「連結」欄位
旁的
鈕。
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 3:在「選取檔案」視窗選取 Museum.html 檔案。
再按「確定」回到文件視窗，可看到「連結」欄位已填入
“Museum.html”
設好超連結了
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 4:來試試設好的超連結。當滑鼠游標移到“羅浮宮”三個字上頭，
游標變成了小手
的形狀，注意瀏覽器下方的狀態列也顯示
了超連結的網址。
瀏覽器的狀態列顯示超連結的網址
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 5:在“羅浮宮”上按下滑鼠，就會跳到“Museum.html”的瀏覽
視窗，在瀏覽器中按
鈕回前一頁，又會再回到前一頁
“index.html”的畫面。
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 6:如果剛剛在設連結時，在「目標」欄位選「_blank」，那麼在
“羅浮宮”上點超連結時，會另外開一個新的瀏覽視窗顯示
“Museum.html”，而不是在原來的瀏覽視窗顯示它。另外，
整個螢幕下方的工作列也會顯示這兩個不同的瀏覽視窗。
不同的瀏覽視窗
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 7:如果想自行調整超連結文字在還沒點下之前，以及點閱過後的
顏色，可執行「修改」功能表的「頁面屬性」。
在「頁面屬性」視窗中選「連結」分類，設定「連結顏色」和「查閱
過連結」的顏色。兩者的顏色若不同，可以幫助使用者在當網
頁上有許多超連結文字時，能夠很快區別出來哪些已經瀏覽過
了，哪些還沒有。
下一節
上一頁
下一頁
回目錄
4-6-1 文字超連結
Step 8:最後，再來看看 “羅浮宮”這個超連結文字對應的 HTML 編碼：
<a href="Museum.html" target="_blank">羅浮宮</a>
<a> 到 </a> 之間是一個完整的超連結，“羅浮宮”這三個字是
顯示在網頁上讓人點閱的超連結文字。至於 href 屬性值則是這
個超連結的目標網址，而 target 則是開啟超連結網頁時，瀏覽
網頁的開啟方式例如：_blank 是開啟新的瀏覽視窗。
將 <A> 超連結標籤的屬性整理如下表：
下一節
上一頁
下一頁
回目錄
4-6-2 圖片超連結
圖片超連結和文字的超連結在設定上並沒什麼差別，只是前者是要先
選取圖片，而後者要先選取文字再設超連結。
現在要將羅浮宮的圖片做超連結，不過這次要來試試讓它連到其他網
站。
選取圖片
Step 1:選取羅浮宮的照片，同
樣按下在「面板」視窗
中「連結」欄位旁的小
圖示 。
下一節
上一頁
下一頁
回目錄
4-6-2 圖片超連結
Step 2:在「選取檔案」視窗的「URL:」欄位中，貼入下列網址：
http://vr.theatre.ntu.edu.tw/fineart/architect-wt/louvre/louvre.htm
事實上以這個例子而言，也可以直接在「面板」視窗的「連結」欄位裡直接
貼入連結網址即可。但有時候連結是要帶參數的，就必須點資料夾小圖示
進來設定參數。所以，希望你現在就能先熟悉這個資料夾小圖示。
下一節
上一頁
下一頁
回目錄
4-6-2 圖片超連結
Step 3:檢查看看「連結」欄位是否已填入網址：
http://vr.theatre.ntu.edu.tw/fineart/architect-wt/louvre/louvre.htm
Step 4: 預覽網頁，當滑鼠游標
移到“羅浮宮”的照片上，游
標變成了小手
的形狀，
瀏覽器下方的狀態列 也顯示
了超連結的網址：
游標移到照片
上按下滑鼠
連到超連結
圖片的超連結網址
下一節
上一頁
下一頁
回目錄
4-6-2 圖片超連結
按下滑鼠就可以開啟超連結的瀏覽視窗了。
開啟超連結的瀏覽視窗
圖片的超連結網址
下一節
上一頁
下一頁
回目錄
4-6-2 圖片超連結
Step 4:最後，再來看看這個“羅浮宮”超連結圖片對應的 HTML 編碼：
<a
href="http://vr.theatre.ntu.edu.tw/fineart/architectwt/louvre/louvre.htm">
<img src="images/MuseeduLouvre.JPG" alt="羅浮宮"
name="imgMuseum" width="401" height="266" id="imgMuseum">
</a>
特別說明一下，這裡的 href 變成了:
http://vr.theatre.ntu.edu.tw/fineart/architect-wt/louvre/louvre.htm，那是
因為這個例子我們將連結的目標設為其它網站的外部網頁，當然也可將
它的連結目標設為網站內部的其它網頁，例如： “Museum.html”。
圖片的超連結網址
下一節
上一頁
下一頁
回目錄
4-6-3 超連結的種類
前兩個小節中介紹的文字超連結與圖片超連結，舉的例子都是用網頁網址做
為連結的目標。事實上還有其它的連結方式，整理如下:
圖片的超連結網址
下一節
上一頁
下一頁
回目錄
4-6-3 超連結的種類
至於設定超連結的方法，除了可用前面 4-6-1 和 4-6-2小節按下「連結」欄
位旁的
鈕，然後在「選取檔案」視窗內設定連結目標，或者直接在「連
結」欄位內填入連結目標之外，另外還有個好用的「指向檔案」 按鈕
可
以善加利用。
例如：以下將艾菲爾鐵塔文字的超連結目標設為一個 Word 檔案。
從這個圖示拉到
要連結的檔案
下一節
上一頁
下一頁
回目錄
4-6-3 超連結的種類
重新瀏覽網頁，在“艾菲爾鐵塔”上點下滑鼠。
下一節
上一頁
下一頁
回目錄
4-6-3 超連結的種類
因為在“艾菲爾鐵塔”所設
的連結目標是個 Word 文件
檔，那麼在瀏覽網頁時點下
這個超連結就會出現「檔案
下載」的視窗了。
可以按「儲存」鈕將檔案存
到指定目，也可按「開啟舊
檔」，直接開啟文件檔案內
容。
下一節
上一頁
下一頁
回目錄
4-7 表單
表單包含了網頁中不同種類的資料元件，通常用來讓使用者輸入資訊，
並可傳遞這些資料到別的網頁或自身網頁做後續處理。Dreamweaver 的
表單工具列提供了許多構成表單的工具，包含文字欄位、核取方塊…等。
這是這一節要做出來的
表單成品，練習時請依
照這個表單成品依序在
表單工具列內找按鈕加
入表單元件。
每一項目完成後，請按
Shift + Enter 鍵產生
<br> 跳行標籤；若行距
需要大一點則按 Enter
鍵，它會產生 <p> 段落
標籤。
上一節
上一頁
下一頁
回目錄
4-7 表單
表單工具列上的表單工具很多，在此僅介紹本書會用到的工具。
表單工具列
表單：
建立表單的範圍，只有放在表單內的元件內容才會送出，所以通常會先
將表單範圍畫出來，再加入其它表單內的元件。
文字欄位：
讓使用者輸入文字資料的欄位，譬如：姓名、身份證字號等。
隱藏欄位：
不會顯示在網頁上的資料欄位，通常用來儲存不需讓使用者看到的內容，
像是存放運算結果的變數、使用者登入時間…等。
上一節
上一頁
下一頁
回目錄
4-7 表單
文字區域：
讓使用者輸入多行文字的資料欄位，通常是使用者會輸入較多文字
的區塊，包括留言、自傳…等文字資料。
核取方塊：
讓使用者勾選，有已核取（checked）和不核取 （unchecked）的
狀態。
在設計時可以視需要將剛開始的狀態設為已核取。
上一節
上一頁
下一頁
回目錄
4-7 表單
選項按鈕群組：
選項按鈕（Radio Button）群
組是一組的選項按鈕，彼此是
有關聯的，同時間只會有一個
選項按鈕被按下，也就是彼此
是互斥的。
選擇段行符號（<br>標籤）
將標籤改為 “男”和“女”做為標
籤文字，值則分別改為 “male”
和 “female”。顯示方式有兩種：
選擇斷行符號（<br>標籤）
和表格，它的結果分別如下：
上一節
選擇表格
上一頁
下一頁
回目錄
4-7 表單
表單/清單：
列出事先定義好的清單選項讓使用者挑選，省去使用者自行
鍵入的時間，可視需要設為可複選
在清單項目加
入標籤文字和
對應的值
網頁上顯示的結果
上一節
上一頁
下一頁
回目錄
4-7 表單
按鈕：
送出表單內的資料，有「重設」和「送出」兩種執行命令。「重
設」是將表單內的資料全部清除，而「送出」則是執行將表單內
容送出的動作。
上一節
上一頁
下一頁
回目錄
4-7 表單
Spry 驗證文字欄位：
和文字欄位一樣是輸入單一文字欄位，但它內含幾種驗證不同性質資料
的格式檢查。例如：「電子郵件位址」要含有 “@”在內，而「IP 位址」
內要有四個數字並用小數點隔開…等基本格式檢查。這個驗證功能可以
幫助設計者不用另外寫程式碼做輸入資料格式錯誤的檢查。
Spry 驗證文字欄位的使用，必須按下文字欄位上方藍色的Spry 文字欄位
區塊，「屬性」面版才會顯示它的設定欄位。Email 欄位的類型設為「電
子郵件地址」，預覽狀態會變為「格式無效」，這是當使用者輸入錯誤
的電子郵件地址格式時會顯示的錯誤訊息；至於“驗證於”選項若選
「onBlur」，則表示當使用者將 focus 離開這個欄位的時候會做格式檢查。
按下文字欄位上方的
Spry 文字欄位區塊
上一節
上一頁
下一頁
回目錄
4-7 表單
若在瀏覽網頁時,輸入的格式錯誤，會顯示錯誤訊息
如下圖：
錯誤訊息
上一節
上一頁
下一頁
回目錄
4-7 表單
最後，瀏覽這個表單的網頁結果如下:
上一節
上一頁
回目錄