免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
資訊科技 ND076DR-2論壇現已開授網上製作網頁班及Photoshop教學班以及攝影教學班及EXCEL教學班...請各同學留意及支持! 感謝各同學一值支持資訊科技 ND076DR-2論壇!!!
返回列表 發帖
HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片


插入圖片

 

  雖然圖片的主要功能是用來裝飾網頁,但少了圖片的網頁就如同少了裝潢的店面,即使貨品齊全,也很難吸引人潮。在網頁上,如果你要加上圖片,有兩種圖片的格式是為大部份的瀏覽器所接受的;GIFJREG。GIF是是 Web 瀏覽器上比較受歡迎的圖形類別,但是, JPEG 有逐漸受歡迎及廣泛被使用的趨勢。

  所有的圖形瀏覽器都支援 GIF 檔案,即瀏覽哈不需要額外檢視程式便可檢視 GIF 檔; GIF是壓縮的圖形,但它們的圖形清晰度似乎優於 JPEG,用色較少 (256色或少於256色)的圖形,使用 GIF 的效果較佳。GIF 雖然是壓縮檔,卻比 JPEG 檔大一些,不過,當二者檔案大小相同時, GIF 的壓縮及繪圖速度都比 JPEG 來得快。 GIF 的另一個問題是它包含了一些有版權的元件,使得它較不能成為交換的公開標準。

  受歡迎程度緊跟在 GIF 之後的是 JPEG格式。JPEG 圖形可以在大多數新的圖形瀏覽器內檢視,不必使用任何輔助程式。在圖形顏色多的情況下,JPEG 比 GIF 有較好的清晰度;除此之外, JPEG 的檔案也比較小,而且它的壓縮規格在公開的領域內。另一方面, JPEG 比起 GIF,它的高度壓縮導致圖形品質較差, JPEG所需的解壓縮時間也比 GIF 長一些,因此,雖 JPEG檔案較小、所需的傳送時較短,但解壓縮的時間過長往往抵消了這項優點。

  1996年春天,W3C公佈了一份有關新格式的工作標準--PNG,可能會取代 GIF 及 JPEG 。? PNG格式透過真實顏色(true color) 深度提供高壓縮圖形,可以用來傳送非常清晰、活潑的圖形,它使用公開領域壓縮方式,以避免上述 GIF 的再授權問題。雖然以往它的傳輸時間較長,但已經改進很多了,我們可以期待有更多的瀏覽器支援 PNG 格式。


  HTML提供了<IMG>這個標記用來在網頁上置入圖片。而SRC屬性標明了圖片的所在位置。範例如下:

這是我的最愛!<BR>
<IMG SRC="img/miche.jpg" ALT="我的最愛的圖片">
<IMG SRC="img/michelll.jpg" ALT="我的最愛的圖片">
<IMG SRC="img/michelll.jpg">

  顯示情形如下:

 這是我的最愛!
我的最愛的圖片 我的最愛的圖片

 

  其中ALT屬性出現於當圖片的檔名或是路徑錯誤時,所顯示的代替文字,如上圖中。或是圖片的說明文字,把滑鼠移到上面左圖上,看看會不會有文字出現。強烈建你使用 ALT 這個屬性,在使用者的瀏覽器無法支援圖形介面時,他們仍能了解圖片的大致內容。至少,在網路傳輸速度過慢時,使用者可以先大致了解圖片的內容,以決定是否繼續等待傳輸。     

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定


屬性設定

 

  除了 ALT 這個屬性外,圖片常有其他相關的屬性。先列出它完整的屬性值:

<IMG ALIGN="left......"
   ALT="string"
   SRC="image_file"
   BORDER="value"
   LOWSRC="image_file"
   WIDTH="value"
   HEIGHT="value"
   VSPACE="value"
   HSPACE="value">   
屬性 說明 範例
ALIGN ALIGN="left" 將影像對齊視窗左邊界,其後的文字將沿著影像的右邊自動換行顯示。如右上圖。

ALIGN="right" 將影像對齊視窗右邊界,其後的文字將沿著影像的左邊自動換行顯示。如右圖中。

ALIGN="top" 沿著行中最頂端對齊。如右圖下。

ALIGN="texttop" 沿著行中文字最高處對齊。通常與上一個屬性相同,但非完全一樣。

ALIGN="middle" 沿著目前行的基準線對齊影像中間。

ALIGN="bottom" 沿著目前行的基準線對齊影像底部。

空山不見人,但聞人語響;返景入深林,復照青苔上。

 

空山不見人, 但聞人語響; 返景入深林, 復照青苔上。

 

空山不見人, 但聞人語響; 返景入深林, 復照青苔上。

ALT 在非圖形環境下,因無法顯示圖形的替代文字。 <IMG SRC=warning" ALT="注意">
SRC 指定圖形的位址及名稱。 <IMG SRC=warning" ALT="注意">
BORDER 設定圖像的外框寬度。單像以像素決定。

<IMG SRC="miche33.jpg" BORDER=5>

LOWSRC 顯示低解析度的影像。如果設定此屬性,瀏覽器會先顯示這個圖檔,等SRC的檔案下載完成後,再顯示SRC的圖檔。 <IMG SRC="miche33.jpg" LOWSRC="miche33_low.jpg">
WIDTH
HEIGHT
設定圖檔的寬度、及高度。單位可以像素決定,如WIDTH=80,或以百分比決定,如WIDTH=20%,圖形的高度會佔視窗的20%。

<IMG SRC="miche33.jpg" WIDTH=90 HEIGHT=90>

VSPACE
HSPACE
指定影像與前後文字或左右文字之間的距離。設定的單位以像素為主。例如:

<IMG SRC="miche33.jpg" HSPACE=10 VSPACE=10>

空山不見人,但聞人語響;返景入深林,復照青苔上。空山不見人,但聞人語響;返景入深林,復照青苔上。

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定


連結設定

 

  我們曾經提過利用文字來設定超連結,語法如:

<A HREF="URL">連結文字</A>

  同樣的,我們也可以利用圖片來做超連結的設定。方法只不過將連結文字變為插入圖片的標記就可以了。範例如下:

<CENTER>
想看清楚我嗎?按我一下吧!<BR>
<A HREF="img/MICHE4.JPG" TARGET=_blank>
<IMG SRC="img/miche4.jpg" WIDTH=50 HEIGHT=70>
</A>
</CENTER>

按一下圖片吧

 

想看清楚我嗎?按我一下吧!

  如果你是要連結 HTML 檔的話,就把 HREF=XXX.htm改成就可以了。


  我們先前做的連結是一張圖片只能連結到一個檔案中,如果你要在圖片上的不同區域中連結到不同的檔案,那你就要使用影像地圖的技巧了。

  如果要定義影像地圖的映射區域,你要利用 <AREA> 這個標記來描述影像的不同區域所連結的物件,而沒有定義到的區域則視為沒有連結。

  對於上面的一張圖形,如果我們要寫一個 HTML 檔來顯示圖形並定義其映射區域,我們以 <MAP>這個標記來代表整張圖,以 <AREA> 代表圖中的連結方塊,我們要這麼寫:

<MAP NAME="pic_map">
<AREA SHAP="rect" COORDS="6, 6, 46, 46" HREF="1.htm">
<AREA SHAP="rect" COORDS="80, 20, 100, 100" HREF="2.htm">
</MAP>

<IMG SRC="pic.gif" USEMAP="#pic_map">

  如此,這張圖形的兩個紅色的區域就會連到不同的網頁中了。我們來看一下有關於 <AREA> 這個標記的語法:

<AREA SHAPE ="rect"
   COORDS="X, Y..."
   HREF="file_name"
   TARGET="name"
   NOHREF>

SHAPE:指定在圖形上可以點取的形狀,rect是定義為四方形,可設定為 circle,代表圓形,或 poly ,代表多邊形。

COORDS:利用這個屬性,我們可以指定連結區域的座標值,以像素為單位。分別指定區域的左上角及右下角的座標。

HREF:設定連結的位址。

TARGET:設定連結檔案出現的位置,可參考『超連結』單元的設定值。

NOHREF:設定按下某一個區域並沒有任何動作。  

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像


視訊影像

 


  IE 在<IMG>這個標記中加上了一些擴充功能,這些功能可以用來支援播放視訊的新屬性,通稱為動態來源 (DYNSRC) 。你可以用這個擴充功能來播放影片。你可以同時使用 <IMG> 來指定影片及影像檔,如遇到不能播放影片的瀏覽器,則顯示影像檔代替。擴充的語法如下:

<IMG DYNSRC="file_name"
   START="action"
   LOOP="value"
   CONTROLS>

DYNSRC:指定影片檔的來源

START:指定何時開始播放。你可以設定 FILEOPEN 指明開啟文件時立即播放,或是 MOUSEOVER 來指明滑鼠移到動畫上時播放。你也可以兩者一起設定。

LOOP:指定影片循環播放的次數。若設定為 "-1",或是 "infinite" 則代表無限播放。

CONTROLS:顯示影片播放視窗。

  範例如下:

<IMG SRC="miche.jpg"  DYNSRC="sleep.avi"
START="mouseover, fileopen"
LOOP="-1"
CONTROLS>

顯示結果:千萬別度姑

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格


表格

 

  表格在HTML文件中是相當實用的一種技巧,我們可以利用它來組織版面及圖形,更可以利用它來控制網頁的版面。表格以<TABLE>為起始標記,以</TABLE>為結束標記,基本標記如下:

表格的基本標記:

<TABLE> 產生表格
<TABLE BORDER> 產生有框線的表格
<CAPTION> 表格標題
<TH> 定義欄位標題
<TR> 定義橫列
<TD> 定義橫列中的資料

表格的起始標記:

<TABLE> ........</TABLE>

  這樣一來,你就可以在<TABLE>和</TABLE>之間設計表格了。

<TR>定義列

<TR>........</TR>

  表格設計時,每一組『<TR>和</TR>』出現一次,相當於可建立一列表格。

<TD>定義行

<TD>.......</TD>

  設計時,同一列中每一組『<TD>和</TD>』出現一次,相當於可建立一行表格。一般是將『<TD>和</TD>』放在『<TR>和</TR>』之內,混合使用。

  如果不太能了解,沒關係,先看一個範例:

<TABLE>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>

顯示結果:

第一格

第二格

  這....?這是表格嗎? 這當然是表格,但是一個沒框線的表格,可別小看它喔,在網頁排版時很有用處,但目前不是我們要的。但我們可以再加上<BORDER>這個屬性。一般格式是:

<TABLE BORDER=n>

  n代表表格邊線厚度,單位是像素,若不註明,預設值是0。我們再改一下上一個範例:

<TABLE BORDER=5>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>

顯示結果:

 

第一格第二格

  再看一個比較複雜的範例:

<TABLE BORDER=5>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
<TR>
<TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>

顯示結果:

 

第一格第二格
第三格第四格

  看起來很複雜,其實不難,希望大家都學會這個單元。不要貪圖方便直擴使用一些網頁編輯軟體來製作表格,畢竟總有一天,你還是會自已修改原始碼的。

  標記<CAPTION>是用來設定表格標題,你可以設定標題放在表格之上(ALIGN=TOP),或是放在表格之下(ALIGN=BOTTOM),範例如下:

<TABLE BORDER=5>
<CAPTION ALIGN=TOP>標題在上</CAPTION>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
<TR>
<TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
<TABLE BORDER=5>
<CAPTION ALIGN=BOTTOM>標題在下</CAPTION>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
<TR>
<TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
標題在上
第一格第二格
第三格第四格
標題在下
第一格第二格
第三格第四格

  標記<TH>可以用來定義標題儲存格,所不同的是<TH>所定義的儲存格資料是置中,及有粗體的特性。一般<TH>所定義的儲存格是放在最上一列,或是最左欄。範例如下:

<TABLE BORDER=5>
<TR><TH>標題一</TH><TH>標題二</TH></TR>
<TR>
<TD>第一格</TD><TD>第二格</TD></TR>
<TR>
<TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
<TABLE BORDER=5>
<TR><TH>標題一</TH><TD>第一格</TD><TD>第二格</TD></TR>
<TR>
<TH>標題二</TH><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
標題一標題二
第一格第二格
第三格第四格
標題一第一格第二格
標題二第三格第四格

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定


屬性設定

 

  利用WIDTHHEIGHT這兩個屬性 ,我們可以用來設定表格的寬度及高度。你可以絕對值的設定方式來設定,例如: 

<TABLE BORDER=5 WIDTH=300>

  代表設定一個寬度為300像素的表格,而

<TABLE BORDER=5 WIDTH=50%>

  這種表示設定一個寬度為目前視窗寬度一半的表格,且會隨視窗的寬度不同,適時的改變表格的寬度。HEIGHT的設定也是如此。範例如下:

<TABLE BORDER=5 WIDTH=200>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
<TABLE BORDER=5 HEIGHT=100>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
第一格第二格
第三格第四格

  WIDTHHEIGHT這兩個屬性可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的寬度或是高度。提供一些範例,大家可以自行體會一下。

<TABLE BORDER=5 WIDTH=200>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>
第一格第二格
設定寬度為200像素的表格
<TABLE BORDER=5 >
<TR><TD WIDTH=100>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定第一格的寬度為100像素的表格,這樣的設定會影響整欄
<TABLE BORDER=5 >
<TR HEIGHT=100><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定第一列的高度為100像素的表格,這樣的設定會影響整欄
<TABLE BORDER=5 WIDTH=200>
<TR><TD WIDHT=40%>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定寬度為200像素的表格,同時設定第一格的寬度佔整個表格的40%


  這個屬性我們提過很多次了。ALIGN屬代表格的對齊方式,可設定為靠左(LEFT)、靠右(RIGHT)、或置中對齊(CENTER)。這個屬性也可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的對齊方式。略看一下範例就可以了:

<TABLE BORDER=5 WIDTH=200 ALIGN=RIGHT>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>
第一格第二格

 

<TABLE BORDER=5 WIDTH=200 ALIGN=CENTER>
<TR ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
 
建立一個200像素寬的表格,並將表格置中對齊,同時將第一列內的文字靠右對齊
<TABLE BORDER=5 WIDTH=230 ALIGN=CENTER>
<TR ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD><TD ALIGN=LEFT>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第五格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第五格
 
建立一個230像素寬的表格,並將表格置中對齊,同時將第一列內的文字靠右對齊,但第三格靠左對齊


  和ALIGN屬性相同,但會將表格內的文字做垂直的位置的修改,你可以設定為靠上(TOP)、靠中(MIDDLE)、或靠下對齊(BOTTOM)。這個屬性也可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的垂直對齊方式。預設為靠中對齊。略看一下範例就可以了:

<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<TR VALIGN=BOTTOM><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD VALIGN=TOP>第五格</TD></TR>
</TABLE>
 
第一格第二格
第四格第五格
設定垂直對齊的範例。
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<TR VALIGN=BOTTOM ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD VALIGN=TOP>第五格</TD></TR>
</TABLE>
第一格第二格
第四格第五格
 
設定垂直及文平的對齊的範例。


列的對齊方式可以在<TR>標記中指定,而<COL>這個標記則可以指定直欄的對齊方式,範例如下:

<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP></COL>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD></TR>
</TABLE>
第一格第二格
第四格第五格
設定第一欄的水平及垂直對齊方式
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP></COL>
<COL ALIGN=RIGHT VALIGN=TOP>
</COL>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
一次設定兩欄的水平及垂直對齊方式
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP SPAN=2></COL>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
你也可以用SPAN的屬性來一次設定兩欄的水平及垂直對齊方式,顯示結果同上

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性


再談屬性

 

  這個屬性設定表格內框線的寬度,單位為像素,預設值為1。範例如下:

<TABLE BORDER=5 CELLSPACING=5>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
有框線寬度的表格
第一格第二格第三格
第四格第五格第六格
<TABLE BORDER=5>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
無框線寬度的表格
第一格第二格第三格
第四格第五格第六格


  這個屬性是設定表格中儲存格內資料與儲存格邊框間的距離,單位為像素,預設值為1。範例如下:

<TABLE BORDER=5 CELLPADDING=10>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>

有CELLPADDING的表格

第一格第二格第三格
第四格第五格第六格

<TABLE BORDER=5 >
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
無CELLPADDING的表格
第一格第二格第三格
第四格第五格第六格


  屬性BGCOLOR可用來設定表格的背景顏色,值要以#rrggbb或顏色代號來設定,可參考本文效果來設定。該注意的是,如果我們將屬性BGCOLOR 置於<TABLE>中,則設定整個表格的顏色,如果置於<TR>標記中,則設定整列的顏色;將BGCOLOR置於<TD>中則是設定單一儲存格的顏色。範例如下:

<TABLE BORDER=5 BGCOLOR=#CCCCCC>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
 
第一格第二格第三格
第四格第五格第六格
將表格整體顏色設定為灰色
<TABLE BORDER=5 BGCOLOR=#CCCCCC>
<TR BGCOLOR=#0000FF><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
 
將表格整體顏色設定為灰色,第一列設定為藍色
<TABLE BORDER=5 BGCOLOR=#CCCCCC>
<TR BGCOLOR=#0000FF><TD>第一格</TD><TD>第二格</TD><TD BGCOLOR=#FF0000>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
 
將表格整體顏色設定為灰色,第一列設定為藍色,第三格設定為紅色

  背景顏色是如此設定,那麼文字顏色呢?你要用<FONT COLOR=#rrggbb>這個標記來設定了。


  利用這個屬性,我們可以設定表格的背景圖片,如果我們將屬性BBACKGROUND 置於<TABLE>中,則設定整個表格的,如果置於<TR>標記中,則設定整列的背景圖片;置於<TD>中則是設定單一儲存格的背景圖片。

<TABLE BORDER=5 BACKGROUND=snow.gif WIDTH=200 HEIGHT=200>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格

  如果你同時設定背景顏色及背景圖片,那會如何顯示呢? 那麼你的表格會只看到圖片,而不會顯示顏色。


  有三個屬性可以用來設定邊框的顏色:

BORDERCOLOR 設定邊框顏色 #rrggbb
BORDERCOLORDARK 設定亮框線的顏色 #rrggbb
BORDERCOLORLIGHT 設定暗框線的顏色 #rrggbb

  這些屬性也是很容易設定,看一下範例:

<TABLE BORDER=5 BORDERCOLOR=#FF0000>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
 
第一格第二格第三格
第四格第五格第六格
設定邊框顏色為紅亮的表格
<TABLE BORDER=5  BORDERCOLORDARK=#00FF00 BORDERCOLORLIGHT=#0000FF>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
亮框為藍色,暗框為綠色的表格

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性


三談屬性

 


  再談下去就沒完沒了,就在這個單元中把表格做個結束吧。


  首先登場的是 ROWSPAN 這個屬性,它用於向下延申合併垂直儲存格;和這個屬性類似的是 COLSPAN ,它用於向右延伸合併水平儲存格。它們主要是用於合併儲存格的。例如:

<TD COLSPAN=2>   合併 2 個水平儲存格
<TD ROWSPAN=2>    合併2個垂直儲存格

  先看一些簡單的範例:

<TABLE BORDER=1>
<TR><TD COLSPAN=2>合併水平兩格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
合併水平兩格第三格
第四格第五格第六格
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>合併垂直兩格</TD><TD>第三格</TD></TR>
<TR><TD>第六格</TD></TR>
</TABLE>
合併垂直兩格第三格
第六格

  如果你都了解了,自已做一個功課表試試看,有問題再看底下的解答,功課表如下: 
 
我們班的月考成續單
姓名各科成績名次
國文英文數學
趙一86 88 90 1
錢二84 85 92 2
孫三66 89 94 3

參考HTML碼:

<TABLE BORDER WIDTH= 70% HEIGHT=50%> 
<CAPTION>我們班的月考成續單</CAPTION> 
<TR><TH ROWSPAN=2>姓名<TH COLSPAN=3>各科成績<TH ROWSPAN=2>名次 
<TR><TH>國文<TH>英文<TH>數學 
<TR align="center"><TD>趙一<TD>86 <TD>88 <TD>90 <TD>1 
<TR align="center"><TD>錢二<TD>84 <TD>85 <TD>92 <TD>2 
<TR align="center"><TD>孫三<TD>66 <TD>89 <TD>94 <TD>3 
</TABLE> 


  這三個標記一定要放在表格<TABLE>這個標記中才會有作用,你可以用這三個標記分別來指明表格的標頭(THEAD)主體區域(TBODY)、與註腳(TFOOT)。整個完整的順序,你可以這樣表示:

<TABLE BORDER> 
<THEAD>
<TR><TD  COLSPAN=5 ALIGN=CENTER>我們班的月考成續單
</THEAD>


<TBODY> 
<TR><TH ROWSPAN=2>姓名<TH COLSPAN=3>各科成績<TH ROWSPAN=2>名次 
<TR><TH>國文<TH>英文<TH>數學 
<TR align="center"><TD>趙一<TD>86 <TD>88 <TD>90 <TD>1 
<TR align="center"><TD>錢二<TD>84 <TD>85 <TD>92 <TD>2 
<TR align="center"><TD>孫三<TD>66 <TD>89 <TD>94 <TD>3 
</TBODY>

<TFOOT>
<TR><TD COLSPAN=5>導師:Alex
</TFOOT>

</TABLE>

顯示結果:

 

我們班的月考成續單

姓名各科成績名次
國文英文數學
趙一86 88 90 1
錢二84 85 92 2
孫三66 89 94 3
導師:Alex

  看起來有加標記跟沒加標記是結果是一樣的,但至少在你維護 HTML 碼時,你比較容易分辨你的表格資料。

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性


頁框屬性

 


  先看一個會出現頁框會出現捲軸的範例:ex3.htm

  不論你是否將視窗極大化,左邊的頁框部份會出現垂直捲軸,有些情況下,我們大概不會希望頁框出現捲軸,你可以使用SCROLLING這個屬性來設定捲軸。它的設定如下:

SCROLLING="NO"

  你有一些值可以設定:

YES:一定會出現捲軸
NO:不會出現捲軸
AUTO:為預設值,當文件大小超過視窗時,自動產生捲軸

  所以,我們可以修改一下頁框組的內容:

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src="
left1.htm" scrolling="no">
<frame src="
right1.htm">
</frameset>

</html>

  更新後的捲軸範例:ex3_1.htm


  還是先看一個範列,這次出現的問題是,你可以在頁框線上拖曳,並改變頁框的大小:ex3.htm

  大概不會有人希望自已的網頁是如此設計的吧! 你可以使用NORESIZE這個屬性來改變這個設定,它不用設定參數值。因為頁框的邊界是共用的,所以你只要設定一個頁框,其餘邊界相連的頁框就不用再設定了。修改後的內容為:

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src=
"left1.htm" scrolling="no" NORESIZE>
<frame src="
right.htm">
</frameset>

</html>

  修改後的新範例,你不能再拖曳邊界了:ex3_1_2.htm


  你可以再重新看一下ex3_1_2.htm的內容,這次注意一下,左邊視窗視中的圖片和文字是有一些距離的。如果你的頁框是要放上你網站的代表圖,你應該是不希望它和邊界出現空白,參改一下底下的屬性。

MARGINHEIGHT 設定文件顯示上下邊界的寬度,單位為像素,預設值由瀏覽器決定
MARGINWIDTH 設定文件顯示左右邊界的寬度,單位為像素,預設值由瀏覽器決定

  那麼我們再修改一下上一個範例,將左邊頁框的邊界都設定為0:

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%">
<frame src="
left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0">
<frame src="
right.htm">
</frameset>

</html>

  新的範例顯示結果:ex3_1_3.htm


  上一個範例中,你應看到兩個頁框間有一條分隔線,我們可以利用FRAMEBORDER這個屬性來更改它,你可以設定:

FRAMEBORDER="yes"或是FRAMEBORDER="1"來顯示框線
FRAMEBORDER="no"或是FRAMEBORDER="0"來隱藏框線

  現在,我們要將框線隱藏起來了:

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%" frameborder="0">
<frame src="
left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0" >
<frame src="
right.htm">
</frameset>

</html>

  隱藏邊框的範例:ex3_1_4.htm


  這個屬性可以用來設定框線與內容的空白距離,單位為像素,範例如下:

<html>

<head>
<title>頁框範例一</title>
</head>

<frameset cols="30%,70%" frameborder="1" framespacing="20">
<frame src="
left1.htm" scrolling="no" NORESIZE marginwidth="0" marginheight="0">
<frame src="
right.htm">
</frameset>

</html>

  顯示結果:ex3_1_5.htm,很難看是吧 ! 沒關係,把 FRAMEBODER 的值改為 0,就不會那麼難看了。 

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定


連結設定

 

  除了將適當的網頁放於適當的位置外,頁框最迷人的地方就是你可以利用超連結的功能將連結的網頁放於你希望出現的框頁中。為了達到這項功能,我們必須將框架命名,語法如下:範例

<html>

<head>
<title>連結範例一</title>
</head>

<frameset COLS="30%,70%">
<frame src="
link_left.htm" name="left">
<frame src="
link_right.htm name="right">
</frameset>

</html>

  上面的語法值得注意的是:name=left這個語法,設定頁框的名稱為left。名稱可自行設定,如同右半部頁框的名稱為right一般。除了在做超連結設定時,你可以利用 NAME 來指定連結網頁出現的視窗之外,NAME的設定幾乎是不需要的。

  設定好名稱之後,我們就可以將名稱當做是連結的目的地了。範例

  底下是 left.htm 這個檔案的內容:

<body>

<p><a href="l1.htm" target="right">連結一</a></p>

<p><a href="l2.htm" target="right">連結二</a></p>

</body>

  注意到<a href....>中的target=RIGHT部份,這部份指明連結的網頁出現的地方,在上一個範例中我們指明頁框右方的名稱為RIGHT,所以,連結的網頁自然出現在頁面的右方了。如果不太明暸,再看一下範例檔,互相對照,就容易懂了。

  在target的設定中有些保留字是無法自行設定為目的地的,例如:

保留字 目的地
_blank 在新視窗顯示
_parent 在上層視窗顯示
_top 在目前整個視窗顯示
_self 在本身的框架中顯示

  以上的四個保留字是不用設定,而可以直接使用的。最後,我必須說明的是:在目前網路上有相當大的比例都使用了頁框這個功能 (雖然專業的網站少用這個功能),它提供了讓我們更靈活操控視窗的功能。

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定
巢狀頁框


巢狀頁框

 

  這種頁框只是框架的另一種組合吧了,也就是在一個視窗中,出現上下、左右頁框並存的情形,底下的四個檔案,是我們用來放在頁框組內的 HTML 檔:

上邊範例檔:top.htm
左下範例檔:left.htm
右下範例檔:right.htm
頁框範例檔:ex4.htm

  在上一個完成的頁框組中,你可以把它想像成,我們先將視窗分割成上下的頁框組,再將下半部的頁框分割成左右的頁框組,所以你的 HTML 文件可以這麼表示:ex4.htm網頁原始檔內容:

<html>

<head>
<title>多重頁框</title>
</head>

<frameset rows="30%,*">
<!--分割上下頁框-->
<frame src="
top.htm" ><!--指定上頁框的檔案-->
<frameset cols="30%,*">
<!--再將下頁框分割成左右-->
<frame src="
left.htm"><!--指定下左頁框的檔案-->
<frame src="
right.htm"><!--指定下右頁框的檔案-->
</frameset>

</frameset>

</html>

  如果你了解上面的範例,那麼這個範例應該是沒問題的。如範例二,一個單純的上下分割的頁框語法應該如下:

<frameset rows="30%,70%">
<frame src="
top.htm">
<frame src="
bottom.htm">
</frameset>

  一個frameset就做一次視窗分割,最少應該有兩個網頁來源<frame src=xxx>。但我們又將底下的頁框又再分割為左右的視窗,所以<frame src="bottom.htm">又被取代為:

<frameset cols="30%,*">
<frame src="
left.htm">
<frame src="
right.htm">
</frameset>

  好了,看一下底下的範例,應該很容易了解了。

左邊的範例檔:left.htm
右上的範例檔:top.htm
右下的範例檔:bottom.htm
頁框的範例檔:ex5.htm

<html>

<head>
<title>頁框範例五</title>
</head>

<frameset cols="30%,*">
<!--分割左右頁框-->
<frame src=
"left.htm"><!--指定左邊頁框的檔案-->
<frameset rows="20%,*">
<!--再將右頁框分割成上下-->
<frame src="
top.htm"><!--指定右上頁框的檔案-->
<frame src="
bottom.htm"><!--指定右下頁框的檔案-->
</frameset>
</frameset>

</html>

  完成這個單元之前,你不妨自行練習一個範例:參考範例如下:

<frameset rows="64,*,64">
<frame name="top" scrolling="no" noresize src="top.htm">
<frameset cols="150,*">
<frame name="contents" src="link_lefte.htm">
<frame name="right" src="l1.htm" scrolling="auto">
</frameset>
<frame name="bottom" scrolling="no" noresize src="bottom.htm">
</frameset>

 

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定
巢狀頁框
表單設計
基本表單


表單

 


  表單是一個在網頁中常被用來和使用者溝通的工具。HTML中所有的表單內容都是放在</FORM>。。。</FORM>之中,例如:加入文字輸入欄位、輸入圓鈕或按鈕等等。表單的標記格式如:

<FROM Action="N1" Method="N2" EncType="N3" Name="N4">

  這個標記是用來宣告表單元素的,其中的四個屬性介紹如下:

  Action:設定這個FORM元素的處理動作,N1普通為處理這個表單的CGI程式。如:

<FORM Action="http://www.vtc.gov.tw/cgi-bin/test.exe"......

  上述資料表示 Client 端的瀏覽器將資料傳送出去後,是由 Server 端的test.exe程式來處理。

  Method:設定資料傳送的方式,你有兩種選擇,第一種是「GET」,處理方式為將表單內的資料加在URL之後,再將資料傳送出去,而Server 在接到資料後,會把資料存在QUERY-STRING 這個環境變數中,供 CGI 程式使用,這種方法雖然簡單,但缺點是資料不能超過 512 Bytes。第二種方法是「POST」,當使用者填完資料後,瀏覽器會將資料變成一個封包 (Packet) ,送到 Action 所指定的 URL 之下,如此一來,使突破了 512 Bytes的限制。

  EncType:設定將要送出的資料進行編碼的的方式。

  Name:給予這個表單一個名稱,將來在程式應用(如JavaScript的設計時)才能指定特定的表單元件。


  大多數的表單輸入欄位可用標籤<INPUT TYPE="欄位格式" NAME="欄位名稱 VALUE="初始值" ALIGN="對齊方式">來表示,它宣告了一個接受輸入的標記,使用瀏覽器可以接受使用者所欲傳送出的資料,範例如下:

<FORM METHOD="POST" ACTION="Mailto:xxx@vv.bb.nn.mm" >
請輸入你的名字:
<INPUT TYPE="text" NAME="username"><br>
請輸入你的密碼:
<INPUT TYPE="password" NAME="password"><br>
<INPUT TYPE="submit" NAME="Submit_Button" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Button" VALUE="重設">
</FORM>

顯示結果如下:

請輸入你的名字:
請輸入你的密碼:

上述的範例解釋如下:

  標籤<FORM>中的ACTION屬性可以設計此表單的處理程式,一般格式如下: ACTION="http://www.vtc.gov.tw/cgi-bin/manag.asp",上例以電子郵件來處理處例表單。屬性METHOD設定表單資料傳遞的方式,有GETPOST兩種方式。

  標籤<INPUT TYPE=text NAME=username SIZE=10 MAXLENGTH=20>會在表單中出現一個文字輸入欄位,讓使用者輸入文字或是數字,而標籤的名稱(NAME)為name,文字欄位的顯示長度(SIZE)為10個字元寬,最多(MAXLENGTH)可輸入20個字元。

  標籤<INPUT TYPE=passowrd NAME=password SIZE=10 MAXLENGTH=20>同樣會在表單中出現一個文字輸入欄位,讓使用者輸入文字或是數字,但輸入文字後,畫面顯示為。標籤的名稱為password,文字欄位的顯示長度為10個字元寬,最多可輸入20個字元。

  標籤<TYPE="SUBMIT" NAME="Submit_Button" VALUE="送出">顯示一個提送表單(SUBMIT)的按鈕,按鈕的名稱為"按鈕",顯示在按鈕上的文字為送出。

  標籤<TYPE="RESET" NAME="Reset_Button" VALUE="重設">顯示一個重新設定(RESET)表單資料的按鈕,按鈕的名稱為"按鈕",顯示在按鈕上的文字為重設。

  這是一個可以利用電子郵件送出訊息的表單,你可以將 ACTION 部份的 E-mail 改成你的信箱來測試,一定要測試,否則你不了解下面的內容。

  如果你設計了如同以上的表單,當你利用 OutLook來接收信件時,你會收到一封主旨為『從 Microsoft Internet Explorer 公告表格』的信件,但它存成附件的形式,你可以用記事本來開啟,如果使用者輸入英文,That's OK,但如果是輸入中文,你會看到如以下的亂碼:

username=%BEG%B3%D5%A4%B8&password=sdfsdfsd&Submit_Bottom=%B0e%A5X

你可以將上面的表單的語法改成:<FORM METHOD="POST" enctype="text/plain" ACTION="Mailto:xxx@vv.bb.nn.mm?subject=網友來函" > 就可以直接在OutLook中直接看到信件的內容了。

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定
巢狀頁框
表單設計
基本表單
選項鈕


選項鈕(Radio Button)

 

  選項鈕(Radio Button)的設計目的是在提供使用一些事先決定好的選擇,當我們希望在表單上產生一個能讓使用者多選一的問卷時,選項鈕是最好的選擇了。標籤格式如:

<INPUT Type=RADIO Name="XXX" VALUE="X" CHECKED>

  範例如下:

<FORM METHOD="POST" enctype="text/plain" ACTION="Mailto:xxxg@aa.bb.cc.tw?subject=網友來函">
請問你的年齡在下列那一個範圍之內:
<BR><INPUT TYPE="radio" NAME="AGE" VALUE=1>10歲以下
<BR><INPUT TYPE="radio" NAME="AGE" VALUE=2 CHECKED>10到20歲之間
<BR><INPUT TYPE="radio" NAME="AGE" VALUE=3>20到40歲之間
<BR><INPUT TYPE="radio" NAME="AGE" VALUE=4>40到60歲之間
<BR><INPUT TYPE="radio" NAME="AGE" VALUE=5>60歲以上
<>
請問你的薪水是:
<BR><INPUT TYPE="radio" NAME="SALARY">10000以下
<BR><INPUT TYPE="radio" NAME="SALARY">10001~20000之間
<BR><INPUT TYPE="radio" NAME="SALARY">20001~30000之間
<BR><INPUT TYPE="radio" NAME="SALARY">30001~40000之間
<BR><INPUT TYPE="radio" NAME="SALARY">40001以上
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

  顯示結果如下:

請問你的年齡在下列那一個範圍之內:
10歲以下
10到20歲之間
20到40歲之間
40到60歲之間
60歲以上

請問你的薪水是:
10000以下
10001~20000之間
20001~30000之間
30001~40000之間
40001以上

  底下是利用OutLook接收的結果。

AGE=2
SALARY=on
Submit_Bottom=送出

  第一:我們利用不同的NAME屬性來設定不同的選項群組,但同個群中的名稱都必需是相同的。

  第二:CHECKED屬性的設定代表在該選項中,某個項目是內定值。如:年齡中的10歲到20歲之間。

  第三:VALUE設定當使用者選了某個項目之後,傳送回來的結果,如上面傳回內容中的 AGE=2,但你能辨明使用者選了那一個薪水階級嗎?

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定
巢狀頁框
表單設計
基本表單
選項鈕
核取方塊


核取方塊(Checked Box)

 

  選項鈕適用於單選的項目,當我們希望在表單中產生一個能讓使用者複選的問卷時,我們可以利用核取方塊。基本的語法如下:

<INPUT Type="checkbox" NAME="xxx" VALUE="aaa" CHECKED>

範例如下:

<FORM>
請選擇你喜歡的球類運動:
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=volleyball>排球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=basketball>藍球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=tennis>網球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=table_tennis>桌球
<BR><INPUT TYPE="checkbox" NAME="SPORT" VALUE=baseball CHECKED>棒球
<>
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

顯示結果如下:

排球
藍球
網球
桌球
棒球

  底下是利用OutLook接收的結果。

SPORT=basketball
SPORT=tennis
SPORT=baseball
Submit_Bottom=送出

  第一:我們利用不同的NAME屬性來設定不同的選項群組,但同個群中的名稱都必需是相同的。

  第二:CHECKED屬性的設定代表在該選項中,某個項目是已經預選的內容,如:棒球。

  第三:VALUE設定當使用者選了某個項目之後,傳送回來的結果。

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單
定義目錄選單
超連結
加上連結
通訊協定
路徑設定
內部連結
其他設定
圖片
加上圖片
屬性設定
連結設定
視訊影像
表格
基本表格
屬性設定
再談屬性
三談屬性
頁框設計
基本頁框
頁框屬性
連結設定
巢狀頁框
表單設計
基本表單
選項鈕
核取方塊
下拉選單


下拉式選單

 

  下拉式選單是當使用點選下拉箭頭時,才會顯示出可供選擇的項目,如同核取方塊一般,下拉選單也可以有多重選擇。語法如下:

<SELECT NAME="xx" SIZE="value" MULTIPLE>
    <OPTION VALUE="xxx" SELECTED>XXX
    <OPTION VALUE="yyy">YYY
</SELECT>

  範例如下:

<FORM>
請選擇你最喜歡的顏色:
<SELECT NAME="COLOR" SIZE=5 MULTIPLE>
<OPTION SELECTED>red
<OPTION>blue
<OPTION>green
<OPTION>black
<OPTION>white
</SELECT><>
請選擇你最喜歡的汽車:
<SELECT NAME="CAR">
<OPTION VALUE="Benz" SELECTED>賓士
<OPTION VALUE="Ford">福特
<OPTION VALUE="Civic">喜美
</SELECT><>
<INPUT TYPE="submit" NAME="Submit_Bottom" VALUE="送出">
<INPUT TYPE="reset" NAME="Reset_Bottom" VALUE="重設">
</FORM>

顯示結果如下:

請選擇你最喜歡的顏色: 

請選擇你最喜歡的汽車:

  底下是利用OutLook接收的結果。

COLOR=red
COLOR=green
COLOR=white
CAR=Ford
Submit_Bottom=送出

  第一:我們利用不同的NAME屬性來設定不同的選項群組。下拉選單有兩種形式,設定 MULTIPLE 屬性則可設定捲軸式的選單,你可以利用CTRL加上點選的方式來多重選取。設定 SIZE 屬性則可設定顯示的項目數。

  第二:<OPTION>設定選項,其中VALUE設定選擇後傳回的內容,若不設定,則傳回的內容為選項的名稱。

  第三:CHECKED屬性的設定代表在該選項中,某個項目是內定值。

TOP

返回列表
資訊科技 ND076DR-2已經運行: