單元7：網頁規劃與製作

Size: px

Start display at page:

Download "單元7：網頁規劃與製作"

漩会孟袁
5 years ago
Views:

1 單元七 : 網頁規劃與製作第一章 : 教學目標與教學方法第二章 :HTML 從零開始第三章 : 如何建立文字排版第四章 : 清單的設計第五章 : 直線與表格的製作第六章 : 超鏈結的應用第七章 : 如何插入圖形實作題 : 網頁設計實作相關規定

2 第一章 : 教學目標與教學方法教學目標教學方法 1. 具備將資訊技能與生活的應用結合 2. 具備資訊社會所需之網路倫理與法律常識 3. 了解數位內容與數位學習方法具備網頁規劃概念與實作網頁素養 1. 將教材製作成網頁 ( 或投影片 ), 並架設一教學網站, 供老師上課教學及學生課後學習 2. 每單元結束後, 皆會進行評量與程式設計練習, 測試學生之學習成果 3. 架設一實習專用之伺服器平台, 並為每位學生規劃一個人 Web & FTP Site 空間, 供置放學生作業老師評量作業及同學參靠觀摩第二章 :HTML 從零開始 2-1 HTML 文件編輯器概論 : HTML 文件是一種標籤語言, 其格式為 ASCII, 即純文字檔, 所以可用任何純文字編輯器來編輯在編輯時, 我們可以先定義一些文件的基本設定, 如文件標題文件本體的一些屬性 ( 色彩背景字型大小超鏈結顏色等 ) 等等種類 : 純文字編輯器 :Windows 所提供的記事本 U1traEdit 網頁輔助編輯器 :FrontPage Express FrontPage 2000 Word Netscape 的編輯器 Dreamweaver

3 使用網頁製作輔助軟體? 優點 : 可快速製作出整個網頁, 甚至是網站的架構及一些效果缺點 : 1. 所製作的 HTML 文件, 不易了解且難以直接維護 2. 無法設計動態網頁, 降低網際網路的功能 2-2 HTML 文件基本架構相關敘述 1. <!> 文件註解 2. 宣告為 HTML 文件 3. 標頭宣告 4. <TITLE> 文件標題 5. 文件本體的設定基本架構    <html> <head> <title> 名稱 </title> </head> <body> 文件內容 </body> </html> 文件註解 : 1.  表文件註解結束 3. 可至於文件任何位置    <html> <head> <title> 名稱 </title> </head> <body> 文件內容 </body> </html>

4 宣告 HTML 文件 :   1. <html> 表 HTML 文件的開始,  2. </html> 表 HTML 文件的結束 <html> 3. HTML 文件粗分為 <head> o 標頭宣告 <title> 名稱 </title> o 文件本體 </head> 兩部分 <body> 文件內容 </body> </html> 標頭宣告 :   1. <head> 表標頭宣告的開始, 2. </head> 表標頭宣告的結束 3. <head> 至 </head> 間為標頭宣告的部分可包含下列標籤 : a. <title> 至 </title> 間讓網頁製作者以簡短的文字表達此一網頁之標題其內容會出現在瀏覽器的頂端  <html> <head> <title> 名稱 </title> </head> <body> 文件內容若將某個網頁加入書籤, 則 Title 內 </body> 容變成該書籤名稱 </html> b. <style> 至 </style> c. <script> 至 </script> 文件本體的設定 :   1. <body> 至 </body> 間為文件本體的  部分 <html> 2. 設計完成之 HTML 文件需透過瀏 <head> 覽器觀賞 <title> 名稱 </title> </head> <body> 文件內容 </body> </html>

5 2-3 自己動手做 Home Page 範例說明概論 : 本節的目的是讓讀者能親自動手製作一個特定主題的 Web Page, 例如 : 個人的網頁或某特定領域的網頁,( 有關於音響或相機等等的 Web Page), 此後的每一章皆會將該章所提到的語法標籤應用到 Web Page 的製作上, 一步一步來建構心中的夢幻國度製作 Web Page 的第一步便是選擇主題, 在此例中, 將以歡迎光臨聯合出版社為主題, 介紹其出版的書籍, 公司的歷史及未來的目標, 讀者們亦可選擇另一個主題跟著做步驟 : STEP1 宣告 HTML 文件及檔頭宣告 STEP2 加入文件標題 STEP3 加入文件註解及文件內容評量與實作概論 : 在說明了網頁 (HTML) 文件的基本架構標籤及寫法, 現在可利用此基本架構, 設計 500 字左右之個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景求學經過與經歷 ( 幹部得獎... ) 興趣與休閒生涯規劃未來期許與展望修讀課程 ( 上本學期選課 ) 住宿環境與聯絡方式 ( 住址電話手機 mail... ) 設計步驟 : 鍵入上述基本資料, 不需任何排版與美化檢視成果

6 第三章 : 如何建立文字排版 3-1 排版標籤說 <BR> 文字斷列不含 <BR> 文字斷列的實例 <TITLE> 普通格式的文件 </TITLE> 空山不見人但聞人語響反景赴山林復照清苔上空山不見人但聞人語響反景赴山林復照清苔上明 : 瀏覽器讀入 HTML 文件時, 只會判別標籤及文字, 並不會判別換列符號 (Enter), 所以文字會被視為同一列輸出所以與編輯 HTML 文件的判別方式並不相同改進 : 使用文字斷列標籤 :<BR> 或 <br> 標籤功能 : 強迫文字斷列, 讓文字依設計者的規劃斷列, 不因瀏覽器視窗大小而亂了所要呈現的順序標籤特性 : 單一標籤, 不需使用終止標籤標籤格式 : <BR> 或 <br> 加上 <BR> 文字斷列標籤的實例 <TITLE> 文字斷列標籤的應用 </TITLE> 空山不見人 <BR> 但聞人語響 <BR> 反景赴山林 <BR> 復照清苔上 <BR> 空山不見人但聞人語響反景赴山林復照清苔上

7 說改 <NOBR> 關閉文字斷列普通段落文件的輸出實例 ( 依視窗大小自動將文字斷列 ) <TITLE> 普通格式的文件 </TITLE> 空山不見人但聞人語響反景赴山林復照清苔上朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山空山不見人, 但聞人語響反景赴山林, 復照清苔上朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山明 : HTML 文字段落會依瀏覽器實際視窗寬度自動調整每一列可顯示的字元數, 亦即不同的視窗寬度將使每一列有不同的文字數進 : 使用關閉瀏覽器自動文字斷列標籤標籤功能 : 1. 關閉由瀏覽器依其視窗大小自動將文字斷列的功能 2. 若依列無法顯示所有文字, 瀏覽器視窗將自動產生水平捲軸來瀏覽文件上其餘的文字標籤特性 : 為雙標籤, 需使用 : 起始標籤 <NOBR> 終止標籤 </NOBR> 標籤格式 : <NOBR>...</NOBR>

關閉由瀏覽器依其視窗大小自動將文字斷列的功能的實例 <TITLE> 普通格式的文件 </TITLE> <NOBR> 空山不見人但聞人語響反景赴山林復照清苔上朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山 </NOBR> <P> 段落標籤功能 : 在文章段落後面, 加上一個段落標籤, 瀏覽器在觀賞時, 會出現一空白列標籤特性 : 為單一標籤標籤格式 :.

8 關閉由瀏覽器依其視窗大小自動將文字斷列的功能的實例 <TITLE> 普通格式的文件 </TITLE> <NOBR> 空山不見人但聞人語響反景赴山林復照清苔上朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山 </NOBR> <P> 段落標籤功能 : 在文章段落後面, 加上一個段落標籤, 瀏覽器在觀賞時, 會出現一空白列標籤特性 : 為單一標籤標籤格式 :...<P> 段落標籤的應用, 凡是有 <P> 段落標籤出現處會又一空白列出現 <TITLE> 段落標籤 </TITLE> 我是天空裡的一片雲, 偶爾投影在你的波心,<BR> 你不必訝異, 更無頇歡欣, 在轉瞬間消滅了蹤影.<P> 你我相逢在黑夜的海上, 你有你的, 我有我的方向,<BR> 我是天空裡的一片雲, 偶爾投影在你的波心, 你不必訝異, 更無頇歡欣, 在轉瞬間消滅了蹤影. 你我相逢在黑夜的海上, 你有你的, 我有我的方向, 你記得也好, 最好你忘掉, 交會時互放的光芒...

9 你記得也好, 最好你忘掉, 交會時互放的光芒...<P> <PRE> 原始文字樣式文字斷列的應用 <TITLE> 文字斷列 </TITLE> 李白 <BR> 朝辭白帝彩雲間,<BR> 千里江陵一日還 <BR> 兩岸猿聲啼不住,<BR> 輕舟已過萬重山 <BR> 說李白朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山明 : 文字斷列標籤 <BR>, 雖可自動換列, 但因為瀏覽器無法判別超過一個以上的半形空白字元, 故上例中李白左邊的空白字元, 在瀏覽器中無法顯示出來改進 : 使用原始文字樣式標籤 <PRE> 標籤功能 : 讓文件在瀏覽器中所呈現的效果與在編輯時所看到的一樣, 且省略了每一列輸入 <BR> 的麻煩標籤特性 : 為雙標籤 : 文章前加起始標籤 <PRE> 文章結束加終止標籤 </PRE> 標籤格式 : <PRE>...</PRE> 原始文字樣式標籤的應用 <TITLE> 普通格式的文件 </TITLE> <PRE> 李白朝辭白帝彩雲間, 李白朝辭白帝彩雲間, 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山

10 千里江陵一日還兩岸猿聲啼不住, 輕舟已過萬重山 </PRE> 說非斷列符號明 : 視窗內的排版格式會依視窗寬度來調整, 此項功能在 IE5.5 及 NetScape4.5 這兩種瀏覽器中, 有不一樣的效果 IE5.5 瀏覽器 : 調整規則較單純 a. 以視窗寬度將文字換列顯示, 讓所有文字皆可在視窗中出現 b. 使用關閉視窗文字斷列標籤 <NOBR>, 關閉文字斷列功能, 改由水平捲軸瀏覽全部文字 NetScape4.5 瀏覽器 : 調整規則較複雜 a. 以視窗寬度將文字換列顯示, 讓所有文字皆可在視窗中出現 b. 若其文字編碼採 Western(ISO ), 在視窗寬度變動時, 依原始文件中空白字元的位置調整 c. 若其文字編碼採 Traditional Chinese(BIG5), 則調整規則與 IE5.5 相同更改視窗寬度, 以了解空白字元在 NetScape4.5 中, 對文件排版的影響 <TITLE> 空白字元與排版 </TITLE> 我是天空裡的一片雲偶爾投影在你的波心 <BR> 你不必訝異更無頇歡欣在轉瞬間消滅了蹤影 <P> 你我相逢在黑夜的海上你有你的我有我的方向 <BR> 你記得也好最好你忘掉交會時互放的光芒 <P> 改我是天空裡的一片雲偶爾投影在你的波心你不必訝異更無頇歡欣在轉瞬間消滅了蹤影你我相逢在黑夜的海上你有你的我有我的方向你記得也好最好你忘掉交會時互放的光芒進 : 使用非斷列符號, 取代空白字元

11 符號功能 : 讓 NetScape4.5 瀏覽器會用空白字元取代符號, 且不會依空白字元和視窗寬度調整文字排版, 改由水平捲軸瀏覽全部文字符號特性 : 在文件欲使用半形空白字元處, 以特殊符號取代符號格式 : 非斷列符號的應用 <TITLE> 非斷列符號 </TITLE> 我是天空裡的一片雲 &nbsp 偶爾投影在你的波心 <BR> 你不必訝異 &nbsp 更無頇歡欣 &nbsp 在轉瞬間消滅了蹤影 <P> 你我相逢在黑夜的海上 &nbsp 你有你的 &nbsp 我有我的方向 <BR> 你記得也好 &nbsp 最好你忘掉 &nbsp 交會時互放的光芒 <P> 我是天空裡的一片雲偶爾投影在你的波心你不必訝異更無頇歡欣在轉瞬間消滅了蹤影你我相逢在黑夜的海上你有你的我有我的方向你記得也好最好你忘掉交會時互放的光芒空白字元與排版在兩個字串間空 6 個空白字元 <TITLE> 空白字元 </TITLE> 我是天空裡的一片雲在你的波心說改功特偶爾投影我是天空裡的一片雲偶爾投影在你的波心明 : 上例中, 在我是天空裡的一片雲和偶爾投影在你的波心間空了 6 個空白字元, 但執行時只剩 1 個空白字元進 : 使用全形空白字元取代半形空白字元能 : 讓編輯器所空的字元與瀏覽器所產生的結果相同性 : 一個全形空白字元等於兩個半形空白字元

12 個全形空白字元的應用 <TITLE> 全形空白字元 </TITLE> 我是天空裡的一片雲在你的波心偶爾投影我是天空裡的一片雲在你的波心偶爾投影 <CENTER> 置中對齊標籤格式 : <CENTER>...</CENTER> 標籤特性 : 為雙標籤, 起始標籤為 <CENTER>, 終止標籤為 </CENTER> 置中對齊的結果不因視窗寬度更改而改變標籤功能 : 將 <CENTER> 與 </CENTER> 之間的文字置中對齊顯示文件置中對齊顯示的應用 <TITLE> 置中對齊 </TITLE> <CENTER> 遣懷 <BR> 落魄江湖載酒行,<BR> 楚腰纖細掌中輕 <BR> 十年一覺揚州夢,<BR> 贏得青樓薄倖名 <BR> </CENTER> 遣懷落魄江湖載酒行, 楚腰纖細掌中輕十年一覺揚州夢, 贏得青樓薄倖名 <BLOCKQUOTE> 向右縮排標籤格式 : <BLOCKQUOTE>...</BLOCKQUOTE> 標籤特性 : 為雙標籤, 起始標籤為 <BLOCKQUOTE>, 終止標籤為 </BLOCKQUOTE> 標籤功能 : 將 <BLOCKQUOTE> 與 </BLOCKQUOTE> 之間的文字, 會向右邊縮

13 排空出 5 個空白字元, 同時會產生空白列若用二個以上的標籤夾住文章, 則縮排程度會加倍向右縮排文件的應用 <TITLE> 置中對齊 </TITLE> 落魄江湖載酒行,<BR> <BLOCKQUOTE><BR> 楚腰纖細掌中輕 <BR> </BLOCKQUOTE><BR> <BLOCKQUOTE><BLOCKQUOTE>< BR> 十年一覺揚州夢,<BR> </BLOCKQUOTE></BLOCKQUOTE> <BR> <BLOCKQUOTE><BLOCKQUOTE>< BLOCKQUOTE><BR> 贏得青樓薄倖名 <BR> </BLOCKQUOTE></BLOCKQUOTE> </BLOCKQUOTE> <BR> 落魄江湖載酒行, 楚腰纖細掌中輕十年一覺揚州夢, 贏得青樓薄倖名 3-2 標題格式 <H> 標題標籤格式 : <Hx>...</Hx> x=1,2,3,4,5,6 標籤特性 : 為雙標籤, 起始標籤為 <Hx> 終止標籤為 </Hx> HTML 文件中提供 6 類標題的標籤標籤功能 : 以字體大小的變化及粗體效果, 來凸顯主要標題, 讓參觀 Web Page 者第一眼就被標題所吸引 6 種標題標籤及普通文件格式的應用 <TITLE> 標題樣式 </TITLE> 標題樣式 1

14 <H1> 標題樣式 1</H1><BR> <H2> 標題樣式 2</H2><BR> <H3> 標題樣式 3</H3><BR> <H4> 標題樣式 4</H4><BR> <H5> 標題樣式 5</H5><BR> <H6> 標題樣式 6</H6><BR> 普通文字 <BR> 標題樣式 2 標題樣式 3 標題樣式 4 標題樣式 5 標題樣式 6 普通文字標題的應用 <TITLE> 標題應用 </TITLE> <CENTER> <H2> 遣懷 </H2><BR> 落魄江湖載酒行,<BR> 楚腰纖細掌中輕 <BR> 十年一覺揚州夢,<BR> 贏得青樓薄倖名 <BR> </CENTER> 遣懷落魄江湖載酒行, 楚腰纖細掌中輕十年一覺揚州夢, 贏得青樓薄倖名標題對齊格式說明 : 標題預設是靠左對齊, 不過可用 <Hx> 標題標籤的 ALIGN 屬性設定, 來控制標題輸出位置 ALIGN 屬性需在標題標籤中設定屬性格式 : ALIGN="LEFT" 靠左對齊 ALIGN="CENTER" 置中對齊 ALIGN="RIGHT" 靠右對齊標題對齊方式的測試 <TITLE> 標題位置測試 </TITLE> 標題靠右對齊

15 <H1 ALIGN="RIGHT"> 標題靠右對齊 </H1><BR> <H1 ALIGN="CENTER"> 標題靠中對齊 </H1><BR> <H1 ALIGN="LEFT"> 標題靠左對齊 </H1><BR> 標題置中對齊標題靠左對齊 3-3 文字效果 <B>,<STRONG> 粗體標籤格式 : <B>...</B> 或 <STRONG>...</STRONG> 標籤特性 : 為雙標籤起始標籤為 <B> 或 <STRONG> 終止標籤為 </B> 或 </STRONG> 兩種標籤結果一樣標籤功能 : 在起始及終止標籤之間, 所包含的文字會比平常文字粗的字體顯示粗字體的應用 <TITLE> 粗體測試 </TITLE> <H2> 水調歌頭 </H2><BR> 明月幾時有? 把酒問青天,<BR> 不知天上宮闕, 今夕是何年?<BR> 我欲乘風歸去, 唯恐瓊樓玉孙,<BR> <STRONG> 高處不勝寒 </STRONG><BR> 起舞弄清影, 何似在人間 <BR> 水調歌頭明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒起舞弄清影, 何似在人間

16 <I>,<EM>,<CITE> 斜體標籤格式 : <I>...</I> <CITE>...</CITE> <EM>...</EM> 標籤特性 : 1. 為雙標籤起始標籤為 <I> <CITE> 或 <EM> 終止標籤為 </I> </CITE> 或 </EM> 三種標籤結果一樣 2. 巢狀格式 : 兩種或多種標籤互相包含的技巧在 HTML 文件中, 標籤可以互相包含, 只要起始和終止標籤互相對應即可兩種或多種標籤的效果不可衝突標籤功能 : 在起始及終止標籤之間, 所包含的文字會以斜體字顯示斜體字的測試 <TITLE> 斜體字測試 </TITLE> <H2><I> 水調歌頭 </I></H2><BR> <CITE> 明月幾時有 </CITE>? 把酒問青天,<BR> 不知天上宮闕, 今夕是何年?<BR> 我欲乘風歸去, 唯恐瓊樓玉孙,<BR> <STRONG><EM> 高處不勝寒 </EM></STRONG><BR> 起舞弄清影, 何似在人間 <P> 水調歌頭明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒起舞弄清影, 何似在人間 <U> 底線標籤格式 : <U>...</U> 標籤特性 : 為雙標籤, 起始標籤為 <U> 終止標籤為 </U> 標籤功能 : 在起始及終止標籤之間, 所包含的文字底下會加上一條底線底線的測試 <TITLE> 底線測試 </TITLE> 水調歌頭明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年?

17 <H2><I><U> 水調歌頭 </U></I></H2><BR> <CITE> 明月幾時有 </CITE>? 把酒問青天,<BR> 不知天上宮闕, 今夕是何年?<BR> 我欲乘風歸去, 唯恐瓊樓玉孙,<BR> <STRONG><EM> 高處不勝寒 </EM></STRONG><BR> 起舞弄清影, 何似在人間 <P> 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒起舞弄清影, 何似在人間 <STIKE> 刪除線標籤格式 : <STIKE>...</STIKE> 標籤特性 : 為雙標籤, 起始標籤為 <STIKE> 終止標籤為 </STIKE> 標籤功能 : 在起始及終止標籤之間, 所包含的文字的中間會加上一條水平直線刪除線的測試 <TITLE> 刪除線測試 </TITLE> <H2><I><U> 水調歌頭 </U></I></H2><BR> <CITE> 明月幾時有 </CITE>? 把酒問青天,<BR> 不知天上宮闕, 今夕是何年?<BR> <STRIKE> 我欲乘風歸去 </STRIKE>, 唯恐瓊樓玉孙,<BR> <STRONG><EM> 高處不勝寒 </EM></STRONG><BR> 起舞弄清影, 何似在人間 <P> 水調歌頭明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒起舞弄清影, 何似在人間

18 <BLINK> 文字閃爍 ( 文字閃爍標籤只有在 NetScape 中才有作用 ) 標籤格式 : <BLINK>...</BLINK> 標籤特性 : 為雙標籤, 起始標籤為 <BLINK> 終止標籤為 </BLINK> 標籤功能 : 在 <BLINK> 及 </BLINK> 之間的文字會閃爍不停, 適用於超鏈結文字之處, 以吸引使用這注意文字閃爍的測試 <TITLE> 文字閃爍測試 </TITLE> <H2><I><U><BLINK> 水調歌頭 </BLINK></U></I></H2><BR> <CITE> 明月幾時有 </CITE>? 把酒問青天,<BR> 不知天上宮闕, 今夕是何年?<BR> <STRIKE> 我欲乘風歸去 </STRIKE>, 唯恐瓊樓玉孙,<BR> <STRONG><EM> 高處不勝寒 </EM></STRONG><BR> 起舞弄清影, 何似在人間 <P> 水調歌頭明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒起舞弄清影, 何似在人間 <BIG> 大型字體標籤格式 : <BIG>...</BIG> 標籤特性 : 為雙標籤, 起始標籤為 <BIG> 終止標籤為 </BIG> 標籤功能 : 在 <BIG> 及 </BIG> 之間的文字會比原先所設定的字體大一級若基本設定大小為 3, 則被 <BIG> 及 </BIG> 所夾住的文字其大小為 4 大型字體的測試明月幾時有 <TITLE> 大型字體的測試 </TITLE> 把酒問青天高處不勝寒明月幾時有 <P> <BIG> 把酒問青天 </BIG><P>

19 高處不勝寒 <P> <SMALL> 小型字體標籤格式 : <SMALL>...</SMALL> 標籤特性 : 為雙標籤, 起始標籤為 <SMALL> 終止標籤為 </SMALL> 標籤功能 : 在 <SMALL> 及 </SMALL> 之間的文字會比原先所設定的字體小一級若基本設定大小為 3, 則被 <SMALL> 及 </SMALL> 所夾住的文字其大小為 2 小型字體的測試 <TITLE> 小型字體的測試 </TITLE> 明月幾時有 <P> <SMALL> 把酒問青天 </SMALL><P> 高處不勝寒 <P> 明月幾時有把酒問青天高處不勝寒 <SUB> 文字下標標籤格式 : <SUB>...</SUB> 標籤特性 : 為雙標籤, 起始標籤為 <SUB> 終止標籤為 </SUB> 標籤功能 : 在 <SUB> 及 </SUB> 之間的文字會稍微向下位移, 成為一般文字的下標, 且下標字比正常字小一級下標字的測試 <TITLE> 下標字的測試 </TITLE> H<SUB>2 </SUB>O H 2 O

20 <SUP> 文字上標標籤格式 : <SUP>...</SUP> 標籤特性 : 為雙標籤起始標籤為 <SUP> 終止標籤為 </SUP> 標籤功能 : 在 <SUP> 及 </SUP> 之間的文字會稍微向上位移, 成為一般文字的上標, 且上標字比正常字小一級上標字的測試 <TITLE> 上標字的測試 </TITLE> X<SUP>2</SUP>+Y <SUP>2</SUP> X 2 +Y 2 <BASEFONT> 預設字型設定標籤格式 : <BASEFONT SIZE=N>, N 值介於 1 至 7 之間標籤特性 : 1. 為單一標籤,N 值介於 1 至 7 之間 2. 不特別設定, 預設值為 3 標籤功能 : <BASEFONT SIZE=N> 通常放在 HTML 文件的前面, 用來設定 Web Page 的字型大小預設字型大小的測試 <TITLE> 預設字型大小的測試 </TITLE> 明月幾時有 <P> <BASEFONT SIZE=5> 把酒問青天 <P> <BASEFONT SIZE=3> 高處不勝寒 <P> 明月幾時有把酒問青天高處不勝寒

21 <FONT> 更改字型設定 ( 其屬性有 SIZE 和 COLOR 兩項 ) A. 更改字型大小標籤格式 : <FONT SIZE=N>...</FONT> 標籤特性 : 為雙標籤, 起始標籤 : <FONT SIZE=N>, N 值介於 1 至 7 之間終止標籤 : </FONT>,N 值可加上正負號, 代表設定相對大小 (N 值加上正號 (+): 表比預設字型大 N 級,N 值加上負號 (-): 表比預設字型小 N 級 ) N 值不加上正負號, 代表設定絕對大小標籤功能 : <FONT SIZE=N> 通常放在 HTML 文件的需要之處, 用來改變 Web Page 的字型大小更改字型絕對大小的測試 <TITLE> 設定字型絕對大小的測試 </TITLE> <FONT SIZE=6> 花自 </FONT> <FONT SIZE=5> 飄零 </FONT> <FONT SIZE=4> 水自流 </FONT> <FONT SIZE=3> 一種 </FONT> <FONT SIZE=4> 相思 </FONT> <FONT SIZE=5> 兩處 </FONT> <FONT SIZE=6> 閒愁 </FONT> 花自飄零水自流一種相思兩處閒愁設定字型相對大小的測試 <TITLE> 設定字型相對大小的測試 </TITLE> <FONT SIZE=+3> 花自 </FONT> <FONT SIZE=+2> 飄零 </FONT> <FONT SIZE=+1> 水自流 </FONT> 一種 <FONT SIZE=+1> 相思 </FONT> 花自飄零水自流一種相思兩處閒愁

22 <FONT SIZE=+2> 兩處 </FONT> <FONT SIZE=+3> 閒愁 </FONT> B. 更改字型顏色標籤格式 : <FONT COLOR=#VALUE>...</FONT> 標籤特性 : 為雙標籤 1. 起始標籤 : <FONT COLOR=#VALUE> a. VALUE 之前一定要加 # 符號 b. VALUE 值在至 FF FF FF( 十六進位 ) 之間, 前面兩個數字代表紅色 (RED) 中間兩個數字代表綠色 (GREEN) 後面兩個數字代表藍色 (BLUE) 2. 終止標籤 : </FONT> 標籤功能 : <FONT SIZE=N> 通常放在 HTML 文件的需要之處, 用來改變 Web Page 的字型顏色文字顏色的測試 <TITLE> 文字顏色的測試 </TITLE> <CENTER> <FONT COLOR=#0000FF> 月下獨酌 </FONT><BR> <FONT COLOR=#00FF00> 花間一壺酒 </FONT><BR> <FONT COLOR=#FF0000> 獨酌無相親 </FONT><BR> <FONT COLOR=#000000> 舉杯邀明月 </FONT><BR> <FONT COLOR=#FFFF00> 對影成三人 </FONT><BR> </CENTER> 月下獨酌花間一壺酒獨酌無相親舉杯邀明月對影成三人

23 B. 字型大小及的配合顏色標籤格式 : <FONT SIZE=N COLOR=#VALUE>...</FONT> 標籤特性 : 為雙標籤 1. 起始標籤 : <FONT SIZE=N COLOR=#VALUE> SIZE 屬性 2. 終止標籤 : </FONT> COLOR 屬性標籤功能 : <FONT SIZE=N COLOR=#VALUE> 通常放在 HTML 文件的需要之處, 用來改變 Web Page 的字型大小及顏色字型大小及文字顏色的測試 <TITLE> 字型大小及文字顏色的測試 </TITLE> <CENTER> <FONT SIZE=5 COLOR=#0000FF> 月下獨酌 </FONT><BR> <FONT COLOR=#00FF00> 花間一壺酒 </FONT><BR> <FONT COLOR=#FF0000> 獨酌無相親 </FONT><BR> <FONT COLOR=#000000> 舉杯邀明月 </FONT><BR> <FONT COLOR=#FFFF00> 對影成三人 </FONT><BR> </CENTER> 月下獨酌花間一壺酒獨酌無相親舉杯邀明月對影成三人 3-4 特殊字型標籤 ( 共有 7 組不常使用的特殊字型標籤 ) 標籤格式 : <DFN>...</DFN> 標籤功能 : 當 HTML 文件要定義某段文字時使用, 其效果與從瀏覽器上所看到的相同標籤格式 : <Q>...</Q> 標籤功能 : 當 HTML 文件要使用某段文字做說明時, 可用此標籤, 其效果與從

24 瀏覽器上所看到的相同標籤格式 : <SAMP>...</SAMP> 標籤功能 : 用來標明訊息文字, 所呈現的字體較一般字大細且字元間距較寬標籤格式 : <CODE>...</CODE> 標籤功能 : 用來說明一些程式碼, 其字體與 <SAMP> 標籤相同標籤格式 : <KBD>...</KBD> 標籤功能 : 字體與 <SAMP> 標籤相同標籤格式 : <VAR>...</VAR> 標籤功能 : 其字體較一般字體細且為斜體標籤格式 : <ADDRESS>...</ADDRESS> 標籤功能 : 可用來說明或住址電話之類的文字, 其字體較一般字體細且為斜體 7 組特殊字型標籤的測試英文中文 <TITLE>7 組特殊字型標籤的測試 </TITLE> <BASEFONT SIZE=4> 英文中文 <P> this is a test string 辛苦遭逢起一輕, <BR> <DFN>this is a test string 干戈寥落四周星 </DFN><BR> <Q>this is a test string 山河破碎風拋絮, </Q><BR> <CODE>this is a test string 身世飄搖雨打萍 </CODE><BR> <SAMP>this is a test string 皇恐灘頭說皇恐, </SAMP><BR> <KBD>this is a test string 零丁洋裡歎零丁 </KBD><BR> this is a test string 辛苦遭逢起一輕, this is a test string 干戈寥落四周星 this is a test string 山河破碎風拋絮, this is a test string 身世飄搖雨打萍. this is a test string 皇恐灘頭說皇恐, this is a test string 零丁洋裡歎零丁. this is a test string 人生自古誰無死? this is a test string 留取丹心照汗青!

25 <VAR>this is a test string 人生自古誰無死? </VAR><BR> <ADDRESS> this is a test string 留取丹心照汗青! </ADDRESS><BR> 3-5 特殊符號在 HTML 文件中, 有些符號和部分的關鍵字元相同, 故瀏覽器會將這些符號視為關鍵字而予以忽略不顯示出來為解決此一問題,HTML 文件會用其他表示法, 來取代這些特殊符號特殊符號 HTML 表示法 < &LT; 或 < > &GT; 或 > " &QUOT; 或 " & &AMP; 或 & 特殊符號的測試 <TITLE> 特殊符號的測試 </TITLE> 10 > 5<BR> 10 < 20<BR> 10 > 5 10 < 再談 BGCOLOR 背景顏色適當地在內加上一些屬性設定, 有如在空白的舞台上搭起背景, 讓 Web Page 更有看頭標籤格式 : <BODY BGCOLOR=#VALUE > 標籤特性 : VALUE 值的設定, 可參考節標籤功能 : 網頁背景顏色預設為白色, 可用 BGCOLOR 屬性更改之

背景顏色的測試 <TITLE> 背景顏色測試 </TITLE> <BODY BGCOLOR=#FFFF00> <center> <h2> 望江南 </h2> 多少恨, 昨夜夢魂中 <BR> 還似舊時遊上苑,<BR> 車如流水馬如龍,<BR> 花月正春風!<P> </center> 望江南多少恨, 昨夜夢魂中還似舊時遊上苑, 車如流水馬如龍, 花月正春風!

26 背景顏色的測試 <TITLE> 背景顏色測試 </TITLE> <BODY BGCOLOR=#FFFF00> <center> <h2> 望江南 </h2> 多少恨, 昨夜夢魂中 <BR> 還似舊時遊上苑,<BR> 車如流水馬如龍,<BR> 花月正春風!<P> </center> 望江南多少恨, 昨夜夢魂中還似舊時遊上苑, 車如流水馬如龍, 花月正春風! BACKGROUND 背景圖形標籤格式 : <BODY BACKGROUND=" 圖檔路徑 " > 標籤特性 : 圖檔路徑的設定, 可參考 6-3 節標籤功能 : 使用 GIF 或 JPG 圖檔作為背景, 可解決用單一顏色為背景較為單調的缺點, 且背景圖雖然只有一張, 但瀏覽器會將整個視窗填滿背景顏色的測試 <TITLE> 背景圖案測試 </TITLE> <BODY BACKGROUND="../../images/ch3/body.gif" > <center> </center> TEXT 文字顏色設定標籤格式 : <BODY TEXT=#VALUE > 標籤特性 : VALUE 值的設定, 可參考節

27 標籤功能 : 網頁上之文字顏色預設為黑色, 可用 TEXT 屬性更改文字顏色文字顏色的應用 <TITLE> 文字顏色的應用 </TITLE> <BODY BACKGROUND="../../images/ch3/back.gif " TEXT=#FF0000> <center> <h2> 望江南 </h2> 多少恨, 昨夜夢魂中 <BR> 還似舊時遊上苑,<BR> 車如流水馬如龍,<BR> 花月正春風!<P> </center> 3-7 自己動手做 Home Page 範例說明概論 : 在說明了文字排版特殊效果標籤及標籤的屬性設定, 現在可利用這些標籤, 對 2-6 節的網頁設計 DIY 進行排版及修飾的動作基本要求 :. 背景圖形 :back.gif. 文字顏色 : 黑色. 基本字型大小 :4. 文件內容向右縮排

.. ) 興趣與休閒生涯規劃未來期許與展望修讀課程 ( 上本學期選課 ) 住宿環境與聯絡方式 ( 住址電話

28 修飾前修飾後概評量與實作論 : 在說明了文件的排版格式及文字效果等標籤及寫法, 現在可利用這些標籤, 修改美化 CH2 所設計之個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景求學經過與經歷 ( 幹部得獎... ) 興趣與休閒生涯規劃未來期許與展望修讀課程 ( 上本學期選課 ) 住宿環境與聯絡方式 ( 住址電話手機 mail... ) 設計步驟 : 修改 CH2 所設計之個人簡介的網頁, 利用本章所介紹之各種標籤加以排版與美化檢視成果

29 第四章 : 清單的設計清單 : 所傳達的訊息是以一條一條且整齊的方式呈現將某些選項式文字敘述以清單來方式表達, 可以使的整份文件更易讓人接受 4-1 符號清單 ( 清單的各個項目左邊沒有編號, 而以特殊符號表示 ) 說 <MENU> 選項清單明 : 只列出各選項的名稱之清單標籤格式 : <MENU> <LI>..... <LI>... </MENU> 標籤特性 : 為雙標籤起始標籤為 <MENU> 終止標籤為 </MENU> 在 <MENU> 和 </MENU> 之間的是項目名稱項目名稱需以在 <LI> 標籤開頭標籤功能 : 以符號開頭, 整齊的條列出夾在起始及終止標籤之間, 所包含的項目名稱選項清單 MENU 的應用 <TITLE> 選項清單 MENU</TITLE> 台灣的網路環境分為三大系統 : <MENU> <LI> 台灣學術教育網路 (TANet) <LI> 中華電信公司網路 (HiNet) <LI> 資策會種子網路 (SeedNet) </MENU> 台灣的網路環境分為三大系統 : 台灣學術教育網路 (TANet) 中華電信公司網路 (HiNet) 資策會種子網路 (SeedNet)

30 選項清單之 TYPE 屬性說明 : 選項清單前的符號有三種, 可由起始標籤內加上 TYPE 屬性設定標籤格式 : <MENU TYPE=N>...</MENU> 標籤特性 : N 為項目符號代碼, 有三種可供選用 : 實心圓點 : DISC 空心圓點 : CIRCLE 實心方塊 : SQUARE IE4.x 以上版本, 只能使用實心圓點使用不同的項目符號之選項清單的應用 <TITLE> 選項清單 MENU 使用特定符號 </TITLE> 台灣的網路環境分為三大系統 : <MENU TYPE=SQUARE> <LI> 台灣學術教育網路 (TANet) <LI> 中華電信公司網路 (HiNet) <LI> 資策會種子網路 (SeedNet) </MENU> 台灣的網路環境分為三大系統 : 台灣學術教育網路 (TANet) 中華電信公司網路 (HiNet) 資策會種子網路 (SeedNet) 彈性設定選項清單之 TYPE 屬性說明 : 將屬性 TYPE=N 寫在 <LI> 標籤內, 使得項目符號的設定更具彈性標籤格式 : <LI TYPE=N> 選項清單 MENU 特定符號測試 <TITLE> 選項清單 MENU 特定符號測試 </TITLE> 選項清單以不同符號表示預設實心黑圓點 (DISC) 台灣學術教育網路 (TANet) 空心圓點 (CIRCLE) 中華電信公司網路 (HiNet) 實心黑方塊 (SQUARE)

31 選項清單以不同符號表示 <BR> <MENU> <LI> 台灣學術教育網路 (TANet)<P> <LI TYPE=CIRCLE> 空心圓點 (CIRCLE)<BR> 中華電信公司網路 (HiNet)<P> <LI TYPE=SQUARE> 實心黑方塊 (SQUARE)<BR> 資策會種子網路 (SeedNet)<P> </MENU> 資策會種子網路 (SeedNet) 說 <DIR> 目錄清單明 : <DIR> 目錄清單使用方式與 <MENU> 選項清單相同, 所產生的結果也相同標籤格式 : <DIR> <LI>..... <LI>... </DIR> 標籤特性 : 為雙標籤起始標籤為 <DIR> 終止標籤為 </DIR> 在 <DIR> 和 </DIR> 之間的是項目名稱項目名稱需以在 <LI> 標籤開頭標籤功能 : 以符號開頭, 整齊的條列出夾在起始及終止標籤之間, 所包含的項目名稱 <DIR> 目錄清單的應用 <TITLE> 目錄清單 DIR</TITLE> 台灣的網路環境分為三大系統 : <DIR> <LI> 台灣學術教育網路 (TANet) <LI> 中華電信公司網路 (HiNet) <LI> 資策會種子網路 (SeedNet) 台灣的網路環境分為三大系統 : 台灣學術教育網路 (TANet) 中華電信公司網路 (HiNet) 資策會種子網路 (SeedNet)

32 </DIR> <LH> 清單格式一標籤格式 : <LH> <LI>..... <LI>... </LH> 標籤特性 : 為雙標籤起始標籤為 <LH> 終止標籤為 </LH> 在 <LH> 和 </LH> 之間的是項目名稱項目名稱需以在 <LI> 標籤開頭項目符號為實心圓點, 且無法以 TYPE=N 來更改符號種類所建立的清單資料不向右縮排, 上下文件間也不空一列標籤功能 : 以實心圓點符號開頭, 整齊的條列出夾在起始及終止標籤之間, 所包含的項目名稱 <LH> 清單的應用 <TITLE>LH 清單 </TITLE> 台灣的網路環境分為三大系統 : <LH> <LI> 台灣學術教育網路 (TANet) <LI> 中華電信公司網路 (HiNet) <LI> 資策會種子網路 (SeedNet) </LH> 台灣的網路環境分為三大系統 : 台灣學術教育網路 (TANet) 中華電信公司網路 (HiNet) 資策會種子網路 (SeedNet)

33 <LH> 清單的整合應用 <TITLE> 選項清單 MENU 使用特定符號 </TITLE> 台灣的網路環境分為三大系統 : <BLOCKQUOT> <LH> <LI> <FONT COLOR=#FF0000> 台灣學術教育網路 (TANet)</FONT> <LI> <FONT COLOR=#00FF00> 中華電信公司網路 (HiNet)</FONT> <LI> <FONT COLOR=#0000FF> 資策會種子網路 (SeedNet)</FONT> </LH> </BLOCKQUOT> 台灣的網路環境分為三大系統 : 台灣學術教育網路 (TANet) 中華電信公司網路 (HiNet) 資策會種子網路 (SeedNet) <UL> 清單格式二標籤格式 : <UL> <LI>..... <LI>... </UL> 標籤特性 : 為雙標籤起始標籤為 <UL> 終止標籤為 </UL> 在 <UL> 和 </UL> 之間的是項目名稱項目名稱需以在 <LI> 標籤開頭項目符號為實心圓點, 且無法以 TYPE=N 來更改符號種類清單資料會向右縮排, 上下文件間也會空一列標籤功能 : 以實心圓點符號開頭, 整齊的條列出夾在起始及終止標籤之間, 所包含的項目名稱

34 比較 <LH> 和 <UL> 標籤的差異 <TITLE> 比較 <LH> 和 <UL> 標籤的差異 </TITLE> 這是 <LH> 標籤的效果 :<BR> <LH> <LI> 第一條 <LI> 第二條 </LH><BR> <LH> 標籤不會將選項部份自成區域, 而且不會向右縮排 <P> 這是 <UL> 標籤的效果 : <UL> <LI> 第一條 <LI> 第二條 </UL> <UL> 標籤會將選項部份自成區域, 而且會向右縮排 <BR> 這是 <LH> 標籤的效果 : 第一條第二條 <LH> 標籤不會將選項部份自成區域, 而且不會向右縮排這是 <UL> 標籤的效果 : o o 第一條第二條 <UL> 標籤會將選項部份自成區域, 而且會向右縮排 <DL> <DT> 和 <DD> 說明式清單標籤格式 : <DL> <DT> <DD> <DD>.. <DT> <DD> <DD> </DL> 標籤特性 : 為雙標籤, 起始標籤為 <DL>, 終止標籤為 </DL> 在 <DL> 和 </DL> 之間的是清單的標題及說明此標題的內容在 <DT> 標籤後填入清單的標題在 <DD> 標籤後填入說明此標題的內容標籤功能 : 適用於, 有一份文件分成好幾項, 每一向都有標題和說明內容

35 說明式清單使用實例 <TITLE><DL> <DT> 和 <DD> 說明式清單 </TITLE> 台灣網路環境分為三大系統 : <DL> <DT> 台灣學術教育網路 (TANet) <DD>TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒 <DT> 中華電信公司網路 (HiNet) <DD>HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月正式收費 <DT> 資策會種子網路 (SeedNet) <DD>77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務 </DL> 台灣網路環境分為三大系統 : 台灣學術教育網路 (TANet) TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒中華電信公司網路 (HiNet) HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月正式收費資策會種子網路 (SeedNet) 77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務說明式清單配合文字效果的使用實例 <TITLE> 說明式清單加格式字串技巧 </TITLE> 台灣網路環境分為三大系統 : <DL> <DT><STRONG><U> 台灣學術教育網路 (TANet) </U></STRONG> 台灣網路環境分為三大系統 : 台灣學術教育網路 (TANet) TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒中華電信公司網路 (HiNet) HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月

36 <DD><I>TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒 </I> <DT><STRONG><U> 中華電信公司網路 (HiNet) </U></STRONG> <DD><I>HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月正式收費 </I> <DT><STRONG><U> 資策會種子網路 (SeedNet) </U></STRONG> <DD><I>77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務 </I> </DL> 正式收費資策會種子網路 (SeedNet) 77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務說明式清單配合含多個 <DD> 標籤的使用實例 <TITLE> 一個 DT 配合多個 DD 的效果 </TITLE> 以下是說明式清單配合多個 <DD> 標籤的效果 <BR> 魁工作室叢書 : <DL> <DT>Windows 系列版 <DD> 看圖例學 Windows 98 中文 <DD> 看圖例學 Windows 2000 中文版 <DD> 看圖例學 Word 2000 中文版以下是說明式清單配合多個 <DD> 標籤的效果魁工作室叢書 : Windows 系列看圖例學 Windows 98 中文版看圖例學 Windows 2000 中文版看圖例學 Word 2000 中文版看圖例學 Excel 2000 中文版精通系列精通 HTML 精通 DyanmicHTML 精通 VB 6.0 精通 VC++ 6.0

37 <DD> 看圖例學 Excel 2000 中文版 <DT> 精通系列 <DD> 精通 HTML <DD> 精通 DyanmicHTML <DD> 精通 VB 6.0 <DD> 精通 VC </DL> 4-2 標號清單 ( 清單的各個項目左邊加上數字編號或其他有序編號, 並且可以設定編號起始值, 由瀏覽器自動給予編號 ) <OL> 和 <LI> 標號清單標籤格式 : <OL> <LI>..... <LI>... </OL> 標籤特性 : 為雙標籤起始標籤為 <OL> 終止標籤為 </OL> 在 <OL> 和 </OL> 之間的是項目名稱項目名稱需以在 <LI> 標籤開頭標籤功能 : 由瀏覽器自動給予每個清單項目一個遞增的編號 <OL> 和 <LI> 標號清單的基本應用 <TITLE> 標號清單 </TITLE> 魁工作室好書推薦 : <OL> <LI> 精通 HTML <LI> 看圖例學 Windows 98 中文版魁工作室好書推薦 : 精通 HTML 看圖例學 Windows 98 中文版看圖例學 Windows 2000 中文版看圖例學 Microsoft Office 2000 中文版

38 <LI> 看圖例學 Windows 2000 中文版 <LI> 看圖例學 Microsoft Office 2000 中文版 </OL> TYPE 數字型式屬性設定標籤功能 : 計數符號除了阿拉伯數字 ( 預設 ) 外, 還有英文及羅馬字母, 可供 TYPE 屬性設定選用標籤格式 : <OL TYPE=T> <LI>..... <LI>... </OL> 標籤特性 : T 值及代表意義如下 TYPE=1: 數字, 如 TYPE=a: 小寫英文字母, 如 a b c... TYPE=A: 大寫英文字母, 如 A B C... TYPE=i: 小寫羅馬字母, 如 i ii iii... TYPE=I: 大寫羅馬字母, 如 I II III... 標號清單配不同之標號格式的基本應用 <TITLE> 使用 a b... 標號 </TITLE> 魁工作室好書推薦 : <OL TYPE=a> <LI> 精通 HTML <LI> 看圖例學 Windows 98 中文版 <LI> 看圖例學 Windows 2000 中文版 <LI> 看圖例學 Microsoft Office 2000 中文版魁工作室好書推薦 : a. 精通 HTML b. 看圖例學 Windows 98 中文版 c. 看圖例學 Windows 2000 中文版 d. 看圖例學 Microsoft Office 2000 中文版

39 </OL> START 起始數字屬性設定標籤功能 : 計數預設值是由 1 開始, 不過可用 START 屬性予以更改標籤格式 : <OL START=N> <LI>..... <LI>... </OL> 起始數字為 5 的基本應用 <TITLE> 起始數字為 5</TITLE> 魁工作室好書推薦 : <OL START=5> <LI> 精通 HTML <LI> 看圖例學 Windows 98 中文版 <LI> 看圖例學 Windows 2000 中文版 <LI> 看圖例學 Microsoft Office 2000 中文版 </OL> N 值為起始數字魁工作室好書推薦 : 5. 精通 HTML 6. 看圖例學 Windows 98 中文版 7. 看圖例學 Windows 2000 中文版 8. 看圖例學 Microsoft Office 2000 中文版使用 I 標號, 起始數字為 3 的基本應用 <TITLE> 使用 I 標號, 起始數字為 3 的應用 </TITLE> 魁工作室好書推薦 : 魁工作室好書推薦 : III. 精通 HTML IV. 看圖例學 Windows 98 中文版 V. 看圖例學 Windows 2000 中文版 VI. 看圖例學 Microsoft Office 2000

40 <OL TYPE=I START=3> <LI> 精通 HTML <LI> 看圖例學 Windows 98 中文版 <LI> 看圖例學 Windows 2000 中文版 <LI> 看圖例學 Microsoft Office 2000 中文版 </OL> 中文版 4-3 巢狀清單 ( 某個清單內含另一層次清單 ) 巢狀清單的設計 <TITLE> 巢狀清單 </TITLE> <H2> 魁工作室好書推薦 :</H2> <UL> <LI> 精通系列 <UL> <LI> 網頁設計 <OL> <LI> 精通 HTML <LI> 精通 DynamicHTML </OL> <LI> 程式語言系列 <OL> <LI> 精通 VC <LI> 精通 VB 6.0 </OL> </UL> <LI>Windows 系列 <UL> <LI> 作業系統系列魁工作室好書推薦 : 精通系列 o o 網頁設計 Windows 系列 o o 1. 精通 HTML 2. 精通 DynamicHTML 程式語言系列 1. 精通 VC 精通 VB 6.0 作業系統系列 1. 看圖例學 Windows 98 中文版 2. 看圖例學 Windows Office 系列 2000 中文版 1. 看圖例學 Microsoft Word 2000 中文版 2. 看圖例學 Microsoft Excel 2000 中文版

41 <OL> <LI> 看圖例學 Windows 98 中文版 <LI> 看圖例學 Windows 2000 中文版 </OL> <LI>Office 系列 <OL> <LI> 看圖例學 Microsoft Word 2000 中文版 <LI> 看圖例學 Microsoft Excel 2000 中文版 </OL> </UL> </UL> 4-4 自己動手做 Home Page 範例說明概論 : 在說明了各式清單文件的標籤及寫法, 現在可利用這些標籤與技巧, 基本要求 : 設計步驟 : 設計某圖書資訊公司所發行的書目網頁基本資料背景圖形 :list.gif 文字顏色 : 黑色基本字型大小 :3 鍵入基本資料 ( ) 利用清單標籤將各項資料作適當分配利用第三章的文字技巧及效果標籤進行美化工作設計完成, 瀏覽成果 ( )

42 評量與實作概論 : 在說明了各式清單文件的標籤及寫法, 現在可利用這些標籤與技巧, 設計個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景求學經過與經歷 ( 幹部得獎... ) 興趣與休閒生涯規劃未來期許與展望修讀課程 ( 上本學期選課 ) 住宿環境與聯絡方式 ( 住址電話手機 mail... ) 設計步驟 : 修改 CH3 所設計之個人簡介的網頁, 利用清單標籤將各項資料作適當分配, 利用第三章的文字技巧及效果標籤進行美化工作檢視成果第五章 : 直線與表格的製作 5-1 直線製作直線 : 除了可分割不同的主題資訊外, 同時也具有美觀大方的效果 <HR> 直線標籤標籤格式 : <HR> 標籤特性 : 為單一標籤, 沒有終止標籤所產生之直線物件會自動依所在位置調整寬度標籤功能 : 代表一直線

43 加上直線處理的應用 <TITLE> 直線的使用 </TITLE> 台灣網路環境分為三大系統 : <HR> <DL> <DT><STRONG><U> 台灣學術教育網路 (TANet) </U></STRONG> <DD><I>TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒 </I> <HR> <DT><STRONG><U> 中華電信公司網路 (HiNet) </U></STRONG> <DD><I>HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月正式收費 </I> <HR> <DT><STRONG><U> 資策會種子網路 (SeedNet) </U></STRONG> <DD><I>77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務 </I> </DL> 台灣網路環境分為三大系統 : 台灣學術教育網路 (TANet) TANet 是由教育部所支持的全國學術單位研究單位和校園, 所組成的校際網路, 是我國 Internet 發展的先鋒中華電信公司網路 (HiNet) HiNet 是交通部所設立的商用 Internet, 於 83 年底建立完成, 初期免費開放使用,84 年 7 月正式收費資策會種子網路 (SeedNet) 77 年經濟部委託財團法人資訊工業策進會進行這項計劃, 這個計劃的主要目的在提供各類網路和資料庫的服務直線屬性設定 (<HR> 直線標籤提供了 WIDTH ALIGN SIZE 及 NOSHADE 四種屬性, 供設計網頁時彈性使用 )

44 WIDTH 屬性標籤功能 : 設定直線寬度 ( 長度 ) 標籤特性 : 寬度 ( 長度 ) 單位分成兩種絕對單位 : 以 pixel ( 螢幕上的點 ) 表示相對單位 : 以螢幕寬度的百分比 % 表示, 會隨瀏覽器視窗寬度大小而變化預設寬度為 100% 建議使用相對單位標籤格式 : <HR WIDTH=300> <HR WIDTH=80%> 相對和絕對線條寬度的應用 <TITLE> 相對和絕對線條寬度 </TITLE> 明月幾時有 <BR> <HR WIDTH=300> 把酒問青天 <BR> <HR WIDTH=90%> 高處不勝寒 <BR> ALIGN 對齊方式屬性明月幾時有把酒問青天高處不勝寒標籤功能 : 當直線寬度採絕對單位時, 就可用 ALIGN 屬性來設定直線的對齊方式標籤格式 : <HR WIDTH=300 ALIGN=" 對齊方式 "> 標籤特性 : 對齊方式有三種 LEFT: 靠左對齊 CENTER: 置中對齊 RIGHT: 靠右對齊線條靠左置中靠右對齊的應用 <TITLE> 線條對齊方式 </TITLE> 明月幾時有把酒問青天

45 明月幾時有 <BR> <HR WIDTH=300 ALIGN="LEFT"> 把酒問青天 <BR> <HR WIDTH=300 ALIGN="CENTER"> 高處不勝寒 <BR> <HR WIDTH=300 ALIGN="RIGHT"> SIZE 直線厚度屬性標籤功能 : 設定直線的厚度標籤格式 : <HR SIZE=N> N > 0 標籤特性 : 厚度單位為 pixel, 預設值為 1 不同直線厚度的應用 <TITLE> 線條厚度的設定 </TITLE> 明月幾時有 <BR> <HR size=10> 把酒問青天 <BR> <HR size=5> 高處不勝寒 <BR> <HR> 高處不勝寒何似在人間 ( tml/ch5/ex5-3.htm ) 明月幾時有把酒問青天高處不勝寒何似在人間 NOSHADE 無陰影屬性標籤功能 : 關閉直線顯示陰影的功能, 以實心直線顯示 ( 當厚度大於 1 時 ) 標籤格式 : <HR SIZE=N NOSHADE> N > 1 無陰影屬性的應用明月幾時有 <TITLE> 無陰影屬性線條 </TITLE> 把酒問青天明月幾時有 <BR> 高處不勝寒

46 <HR size=5> 把酒問青天 <BR> <HR size=5 NOSHADE> 高處不勝寒 <BR> 5-2 表格的基本製作其宣告格式如下 : 1. 先宣告建立表格, 2. 在其中宣告建立表格列, 3. 在表格列中宣告建立表格行 ( 儲存格 ), <TABLE> 表格的宣告標籤格式 : <TABLE>...</TABLE> 標籤特性 : 為雙標籤起始標籤 :<TABLE> 終止標籤 :</TABLE> 在 <TABLE> 和 </TABLE> 之間, 可依需要宣告建立表格列與表格行 <TR> 定義列標籤格式 : <TR>...</TR> 標籤特性 : 為雙標籤起始標籤 :<TR> 終止標籤 :</TR> 每一 <TR> 和 </TR> 之間, 可依需要宣告建立數個表格行 ( 儲存格 ) <TD> 定義行標籤格式 : <TD>...</TD> 標籤特性 : 為雙標籤起始標籤 :<TD> 終止標籤 :</TD> 每一 <TR> 和 </TR> 之間, 可依需要宣告建立數個表格行同一列中, 每一組 <TD> 和 </TD>, 一次相當於可建立一數個表格行, 也就是一個儲存格

47 一般均是將 <TD> 和 </TD> 放在 <TR> 和 </TR> 之內, 混合使用後的標籤格式如下 : 標籤格式 : <TR> 簡單表格設計 <TD>...</TD>.. <TD>...</TD> </TR> 結果看不到表格的框線 <TITLE> 無框線的表格 </TITLE> <TABLE> <TR><TD> 明月 </TD></TR> </TABLE> 明月 5-3 表格屬性設定 <TABLE> 標籤提共了 BORDER WIDTH CELLSPACING CELLPADDING BGCOLOR 及 ALIGN 六種屬性說 BORDER 邊框厚度屬性明 : 此屬性應放在 <TABLE> 標籤內使用標籤格式 : <TABLE BORDER=N>...</TABLE> 標籤特性 : N 值代表表格邊框厚度, 單位是 pixel, 預設值為 0 N = 0 時, 看不到邊框標籤功能 : 設定表格邊框厚度表格邊框的測試 <TITLE> 含框線的表格 </TITLE>

48 <TABLE BORDER=1> <TR><TD> 明月 </TD></TR> </TABLE> 建立多列表格的實例 <TITLE> 含多列的表格 </TITLE> <TABLE BORDER=1>  <TR><TD> 明月 </TD></TR> <TR><TD> 美人 </TD></TR> <TR><TD> 醇酒 </TD></TR> </TABLE> 建立一列多行資料的表格 <TITLE> 多列多行的表格 </TITLE> <TABLE BORDER=1>  <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> </TABLE>

49 建立多列多行資料的表格 <TITLE> 多列多行的表格 </TITLE> <TABLE BORDER=1>  <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> 將邊框厚度改成 10 <TITLE> 表格邊框厚度的應用 </TITLE> <TABLE BORDER=10>  <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> WIDTH 寬度屬性標籤功能 : 設定整個表格寬度標籤特性 : 寬度 ( 長度 ) 單位分成兩種絕對單位 : 以 pixel ( 螢幕上的點 ) 表示

50 標籤格式 : 相對單位 : 以螢幕寬度的百分比 % 表示, 會隨瀏覽器視窗寬度大小而變化建議使用相對單位預設為恰好可容納表格資料的寬度儲存格的寬度 = 總寬度 / 行數, 60 pixel = 300 pixel / 5 行 <TABLE WIDTH=300> 寬度為 300 pixel <TABLE WIDTH=80%> 寬度為瀏覽器視窗寬度的 80% 邊框厚度為 5 表格寬度為 300 的應用 <TITLE> 表格絕對寬度的應用 </TITLE> <TABLE BORDER=5 width=300> <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> 已相對寬度 70% 來設定表格寬度 <TITLE> 表格相對寬度的應用 </TITLE> <TABLE BORDER=5 width=70%> <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD>

<TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> CELLSPACING 內框線厚度屬性標籤功能 : 設定表格的內框線厚度標籤特性 : 寬度 ( 長度 ) 單位 : 以 pixel ( 螢幕上的點 ) 表示預設值為 1 標籤格式 : < TABLE WIDTH=80% BORDER=10 CELLSPACING=5 > 表格邊框厚度為 10 內框厚度為 5

51 <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> CELLSPACING 內框線厚度屬性標籤功能 : 設定表格的內框線厚度標籤特性 : 寬度 ( 長度 ) 單位 : 以 pixel ( 螢幕上的點 ) 表示預設值為 1 標籤格式 : < TABLE WIDTH=80% BORDER=10 CELLSPACING=5 > 表格邊框厚度為 10 內框厚度為 5 的應用 <TITLE> 表格內框線厚度的應用 </TITLE> <TABLE width=70% BORDER=10 CELLSPACING=5 > <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> CELLPADDING 資料與邊框距離屬性標籤功能 : 設定表格中, 儲存格的資料與儲存格邊框的距離標籤特性 : 寬度 ( 長度 ) 單位 : 以 pixel ( 螢幕上的點 ) 表示預設值為 1

</TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> 設定 CELLPADDING 為 20 的應用

52 會與 WIDTH 屬性抵觸, 當彼此抵觸時, 瀏覽器會取較大者顯示當設定 CELLPADDING 屬性時, 就不要在設定 WIDTH 屬性, 以免彼此衝突標籤格式 : <TABLE BORDER=10 CELLSPACING=5 CELLPADDING=20> 設定 CELLPADDING 為 20 的應用 <TITLE> 表格內框線厚度的應用 </TITLE> <TABLE BORDER=10 CELLSPACING=5 CELLPADDING=20 > <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> 設定 CELLPADDING 為 20 的應用 <TITLE> 表格內框線厚度的應用 </TITLE> <TABLE BORDER=10 CELLSPACING=5 CELLPADDING=20 > <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學

</TD> <TD> 最愛 </TD></TR> </TABLE> BGCOLOR 背景顏色屬性標籤功能 : 設定儲存格的背景顏色標籤特性 : 背景顏色的設定可參考 3-3-11-2 節標籤格式 : < TABLE BORDER=10 BGCOLOR=#VALUE > 將儲存格的背景設定為藍色的應用 <TITLE> 儲存格背景顏色設為藍色 </TITLE> <TABLE BORDER=10

53 </TD> <TD> 最愛 </TD></TR> </TABLE> BGCOLOR 背景顏色屬性標籤功能 : 設定儲存格的背景顏色標籤特性 : 背景顏色的設定可參考節標籤格式 : < TABLE BORDER=10 BGCOLOR=#VALUE > 將儲存格的背景設定為藍色的應用 <TITLE> 儲存格背景顏色設為藍色 </TITLE> <TABLE BORDER=10 CELLSPACING=5 CELLPADDING=20 BGCOLOR=#0000FF> <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> ALIGN 對齊方式屬性標籤功能 : 設定表格的水平位置標籤格式 : <TABLE ALIGN=" 水平位置 " > 標籤特性 : 水平位置有 3 種選項 LEFT: 靠左 CENTER: 置中 RIGHT: 靠右

54 將表格的對齊方式, 分別設為靠左置中與靠右對齊 <TITLE> 表格的 ALIGN 屬性 </TITLE> <H3> 內定是向左靠 </H3> <TABLE border="10"> <TR><TH> 國小 </TH><TH> 國中 </TH><TH> 高中 </TH> <TH> 專科 </TH><TH> 大學 </TH></TR> <TR><TD> 新埔國小 </TD><TD> 新埔國中 </TD><TD> 內思高職 </TD> <TD> 聯合工專 </TD><TD> 台灣科技大學 </TD></TR> </TABLE> <H3> 設定向中對齊 </H3> <TABLE border="10" align="center"> <TR><TH> 國小 </TH><TH> 國中 </TH><TH> 高中 </TH> <TH> 專科 </TH><TH> 大學 </TH></TR> <TR><TD> 新埔國小 </TD><TD> 新埔國中 </TD><TD> 內思高職 </TD> <TD> 聯合工專 </TD><TD> 台灣科技大學 </TD></TR> </TABLE> <H3> 設定向右靠 </H3> <TABLE border="10" align="right"> <TR><TH> 國小 </TH><TH> 國中 </TH><TH> 高中 </TH> <TH> 專科 </TH><TH> 大學 </TH></TR> <TR><TD> 新埔國小 </TD><TD> 新埔國中 </TD><TD> 內思高職 </TD> <TD> 聯合工專 </TD><TD> 台灣科技大學 </TD></TR> </TABLE>

55 5-4<TH> 定義標題儲存格標籤功能 : <TH> 標籤功能是定義標題儲存格, 和 <TD> 標籤類似, <TH> 所定義的儲存格資料有置中及粗體特性標籤格式 : <TH>...</TH> 標籤特性 : 為雙標籤且頇置於 <TR> 及 </TR> 中使用所定義的儲存格是放在最上列或最左一欄 <TITLE>TH 標籤的使用 </TITLE> <TABLE BORDER=3 WIDTH=60%> <TR> TH 標籤的使用 <TH></TH><TH> 第一天 </TH><TH> 第二天 </TH><TH> 第三天 </TH> </TR> <TR> <TH> 早上 </TH> <TD> 出發 </TD><TD> 南彎戲水 </TD><TD> 林邊海鮮 </TD></TR> <TR> <TH> 下午 </TH> <TD> 國道風光 </TD><TD> 關山夕照 </TD><TD> 賦歸 </TD> </TR>

<TR><TH> 晚上 </TH> <TD> 墾丁 </TD><TD> 恆春夜遊 </TD><TD> 呼呼大睡 </TD> </TR> </TABLE> 5-5 儲存格的屬性設定即 <TH> 標籤和 <TD> 標籤的屬性設定, 共包含 WIDTH HEIGHT ALIGN VALIGN 及 BGCOLOR 五種屬性 WIDTH 寬度屬性標籤功能 : 設定儲存格寬度標籤特性 : 寬度 (

56 <TR><TH> 晚上 </TH> <TD> 墾丁 </TD><TD> 恆春夜遊 </TD><TD> 呼呼大睡 </TD> </TR> </TABLE> 5-5 儲存格的屬性設定即 <TH> 標籤和 <TD> 標籤的屬性設定, 共包含 WIDTH HEIGHT ALIGN VALIGN 及 BGCOLOR 五種屬性 WIDTH 寬度屬性標籤功能 : 設定儲存格寬度標籤特性 : 寬度 ( 長度 ) 單位分成兩種絕對單位 : 以 pixel ( 螢幕上的點 ) 表示相對單位 : 以表格寬度的百分比 % 表示, 會隨瀏覽器視窗寬度大小而變化 <TH> 標籤只能使用絕對單位, <TD> 標籤兩種單位皆可使用預設為恰好可容納表格資料的寬度儲存格的寬度 = 總寬度 / 行數, 60 pixel = 300 pixel / 5 行標籤格式 : <TH WIDTH=100>...</TH> <TD WIDTH=100>...</TD> 或 <TD WIDTH=80%>...</TD> 用 <TH> 標籤將第一行的儲存格寬度改為 100 <TITLE> 儲存格的 WIDTH 屬性 </TITLE> <TABLE BORDER=3>

57 <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH><TH> 才藝 </TH></TR> <TR><TH> 楊貴妃 </TH><TD>89</TD><TD>92</TD></TR> <TR><TH> 西施 </TH><TD>93</TD><TD>90</TD></TR> </TABLE> 以相對寬度 50% 來設定第一行的儲存格寬度 <TITLE> 儲存格相對寬度的應用 </TITLE> <TABLE BORDER=3 WIDTH=50%> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TD WIDTH=50%> 姓名 </TD><TD> 身材 </TD><TD> 才藝 </TD></TR> <TR><TD> 楊貴妃 </TD><TD>89</TD><TD>92</TD></TR> <TR><TD> 西施 </TD><TD>93</TD><TD>90</TD></TR> </TABLE>

HEIGHT 高度屬性標籤功能 : 單獨設定某一儲存格的高度標籤特性 : 高度單位 : 以 pixel ( 螢幕上的點 ) 表示設定某一儲存格的高度, 會促使表格該列的高度也跟著改變標籤格式 : <TH HEIGHT=N > <TD HEIGHT=N > 將第二列的儲存格高度改為 50 <TITLE> 儲存格的 HEIGHT 屬性 </TITLE> <TABLE BORDER=3>

58 HEIGHT 高度屬性標籤功能 : 單獨設定某一儲存格的高度標籤特性 : 高度單位 : 以 pixel ( 螢幕上的點 ) 表示設定某一儲存格的高度, 會促使表格該列的高度也跟著改變標籤格式 : <TH HEIGHT=N > <TD HEIGHT=N > 將第二列的儲存格高度改為 50 <TITLE> 儲存格的 HEIGHT 屬性 </TITLE> <TABLE BORDER=3> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH><TH> 才藝 </TH></TR> <TR><TH HEIGHT=100> 楊貴妃 </TH><TD>89</TD><TD>92</TD></TR> <TR><TH> 西施 </TH><TD>93</TD><TD>90</TD></TR> </TABLE> ALIGN 對齊方式屬性標籤功能 : 設定儲存格的水平位置, 只適用於 <TD> 標籤標籤格式 : <TD ALIGN=" 水平位置 " > 標籤特性 : 水平位置有 3 種選項 LEFT: 靠左 CENTER: 置中 RIGHT: 靠右

將西施的身材得分設為置中對齊 <TITLE> 儲存格的 ALIGN 屬性 </TITLE> <TABLE BORDER=3> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH><TH> 才藝 </TH></TR> <TR><TH HEIGHT=50> 楊貴妃

59 將西施的身材得分設為置中對齊 <TITLE> 儲存格的 ALIGN 屬性 </TITLE> <TABLE BORDER=3> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH><TH> 才藝 </TH></TR> <TR><TH HEIGHT=50> 楊貴妃 </TH><TD>89</TD><TD>92</TD></TR> <TR> <TH> 西施 </TH><TD ALIGN="CENTER">93</TD> <TD>90</TD></TR> </TABLE> VALIGN 垂直對齊方式屬性標籤功能 : 設定儲存格的垂直位置, 只適用於 <TD> 標籤標籤格式 : <TD ALIGN=" 垂直位置 " > 標籤特性 : 垂直位置有 3 種選項 TOP: 靠上 MIDDLE: 置中 BOTTOM: 靠下將楊貴妃的身材得分設為靠上對齊 <TITLE> 儲存格的 VALIGN 屬性 </TITLE>

60 <TABLE BORDER=3> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH><TH> 才藝 </TH></TR> <TR><TH HEIGHT=50> 楊貴妃 </TH><TD VALIGN="TOP">89</TD> <TD>92</TD></TR> <TR> <TH> 西施 </TH><TD ALIGN="CENTER">93</TD> <TD>90</TD></TR> </TABLE> BGCOLOR 背景顏色屬性標籤功能 : 設定儲存格的背景顏色標籤格式 : <TD BGCOLOR=#VALUE > 標籤特性 : 背景顏色的設定可參考節將才藝儲存格的背景顏色設為紅色, 字為白色 <TITLE> 儲存格的 BGCOLOR 屬性 </TITLE> <TABLE BORDER=3> <CAPTION><B>1997 年中國小姐選舉 </B></CAPTION> <TR><TH WIDTH=100> 姓名 </TH><TH> 身材 </TH> <TH BGCOLOR=#FF0000><FONT COLOR=#FFFFFF> 才藝 </FONT ></TH></TR> <TR><TH HEIGHT=50> 楊貴妃 </TH><TD VALIGN="TOP">89</TD> <TD>92</TD></TR> <TR> <TH> 西施 </TH><TD ALIGN="CENTER">93</TD> <TD>90</TD></TR> </TABLE>

61 5-6<CAPTION> 表格標題標籤功能 : <CAPTION> 標籤功能是標明表格的標題標籤格式 : <CAPTION ALIGN=TOP 或 BOTTOM >...</CAPTION> 標籤特性 : 為雙標籤且頇置於 <TABLE> 及 </TABLE> 中使用 ALIGN 屬性有 TOP 及 BOTTOM 兩種選項表格標題的應用, 以粗體顯示表格標題 <TITLE> 表格標題 </TITLE> <TABLE BORDER=3 WIDTH=60%> <CAPTION ALIGN=TOP><B>1997 年畢業旅行 </B></CAPTION> <TR> <TH></TH><TH> 第一天 </TH><TH> 第二天 </TH><TH> 第三天 </TH> </TR> <TR> <TH> 早上 </TH> <TD> 出發 </TD><TD> 南彎戲水 </TD><TD> 林邊海鮮 </TD></TR> <TR> <TH> 下午 </TH> <TD> 國道風光 </TD><TD> 關山夕照 </TD><TD> 賦歸 </TD> </TR> <TR><TH> 晚上 </TH> <TD> 墾丁 </TD><TD> 恆春夜遊 </TD><TD> 呼呼大睡 </TD> </TR>

62 </TABLE> 將表格標題至於表格下方 <TITLE> 將表格標題置於下方 </TITLE> <TABLE BORDER=3 WIDTH=60%> <CAPTION ALIGN=BOTTOM><B>1997 年畢業旅行 </B></CAPTION> <TR> <TH></TH><TH> 第一天 </TH><TH> 第二天 </TH><TH> 第三天 </TH> </TR> <TR> <TH> 早上 </TH> <TD> 出發 </TD><TD> 南彎戲水 </TD><TD> 林邊海鮮 </TD></TR> <TR> <TH> 下午 </TH> <TD> 國道風光 </TD><TD> 關山夕照 </TD><TD> 賦歸 </TD> </TR> <TR><TH> 晚上 </TH> <TD> 墾丁 </TD><TD> 恆春夜遊 </TD><TD> 呼呼大睡 </TD> </TR> </TABLE>

63 5-7 進階表格設計 ROWSPAN 及 COLSPAN 屬性標籤功能 : ROWSPAN 及 COLSPAN 屬性主要適用於合併儲存格, ROWSPAN 適用於向下延伸合併垂直儲存格 ( 列 ), COLSPAN 適用於向右延伸合併水平儲存格 ( 行 ) 標籤格式 : <TH ROWSPAN=N> 或 <TH COLSPAN=N> <TD ROWSPAN=N> 或 <TD COLSPAN=N> 標籤特性 : 需在 <TH> 或 <TD> 內宣告 N 表預合併之儲存格個數一個簡單表格的範例 <TITLE> 一個簡單的表格 </TITLE> <TABLE BORDER=1 WIDTH=40%> <TR><TD> 第 1 格 </TD><TD> 第 2 格 </TD><TD> 第 3 格 </TD></TR> <TR><TD> 第 4 格 </TD><TD> 第 5 格 </TD><TD> 第 6 格 </TD></TR> <TR><TD> 第 7 格 </TD><TD> 第 8 格 </TD><TD> 第 9 格 </TD></TR> <TR><TD> 第 10 格 </TD><TD> 第 11 格 </TD><TD> 第 12 格 </TD></TR> </TABLE>

64 使用 COLSPAN 屬性, 合併第 1 格第 2 格第 3 格 <TITLE>COLSPAN 屬性 </TITLE> <TABLE BORDER=1 WIDTH=40%> <TR><TD COLSPAN=3> 第 1 格 </TD></TR> <TR><TD> 第 4 格 </TD><TD> 第 5 格 </TD><TD> 第 6 格 </TD></TR> <TR><TD> 第 7 格 </TD><TD> 第 8 格 </TD><TD> 第 9 格 </TD></TR> <TR><TD> 第 10 格 </TD><TD> 第 11 格 </TD><TD> 第 12 格 </TD></TR> </TABLE> 使用 ROWSPAN 屬性, 合併第 4 格第 7 格第 10 格 <TITLE>COLSPAN 和 ROWSPAN 屬性 </TITLE> <TABLE BORDER=1 WIDTH=40%> <TR><TD COLSPAN=3> 第 1 格 </TD></TR> <TR><TD ROWSPAN=3> 第 4 格 </TD><TD> 第 5 格 </TD><TD> 第 6 格 </TD></TR> <TR><TD> 第 8 格 </TD><TD> 第 9 格 </TD></TR>

65 <TR><TD> 第 11 格 </TD><TD> 第 12 格 </TD></TR> </TABLE> 綜合範例應用 <TITLE>COLSPAN 和 ROWSPAN 屬性 </TITLE> <TABLE BORDER=10 WIDTH=500> <CAPTION><B> 澎湖旅遊行程表 </B></CAPTION> <TR><TH></TH><TH></TH><TH COLSPAN=3> 行程 </TH></TR> <TR><TH></TH><TH></TH><TH> 第一天 </TH><TH> 第二天 </TH> <TH> 第三天 </TH></TR> <TR><TH ROWSPAN=3> 時間 </TH><TH> 早上 </TH> <TD> 松山機場集合 </TD><TD> 風櫃聽濤 </TD><TD> 浮潛 </TD></TR> <TR><TH> 下午 </TH><TD> 進駐澎湖青年活動中心 </TD> <TD> 進駐吉貝 </TD><TD> 險礁拾貝 </TD></TR> <TR><TH> 晚上 </TH><TD> 海珍美味 </TD> <TD> 與月色海洋共舞 </TD><TD> 賦歸 </TD></TR> </TABLE><P>

巢狀表格標籤功能 : 表格中再定義表格標籤格式 : <TABLE> <TR><TD> <TABLE> <TR><TD> <TR><TD> </TABLE> </TD></TR> </TABLE> 標籤特性 : 需在 <TABLE> 和 </TABLE> 內再建立另一對 <TABLE> 和 </TABLE> 標籤一個簡單的巢狀表格 <TITLE> 一個簡單的巢狀表格 </TITLE>

66 巢狀表格標籤功能 : 表格中再定義表格標籤格式 : <TABLE> <TR><TD> <TABLE> <TR><TD> <TR><TD> </TABLE> </TD></TR> </TABLE> 標籤特性 : 需在 <TABLE> 和 </TABLE> 內再建立另一對 <TABLE> 和 </TABLE> 標籤一個簡單的巢狀表格 <TITLE> 一個簡單的巢狀表格 </TITLE> <TABLE BORDER=1 WIDTH=200> <CAPTION ALIGN=TOP> 這是一個巢狀表格 </CAPTION> <TR><TD ALIGN=CENTER VALIGN=MIDDLE HEIGHT=100> <TABLE BORDER=1 WIDTH=150> <CAPTION ALIGN=TOP> 巢狀內表 </CAPTION> <TR><TD> 內表 </TD><TD> 內表 </TD></TR> <TR><TD> 內表 </TD><TD> 內表 </TD></TR> </TABLE> </TD></TR>

67 </TABLE> 浮動表格標籤功能 : 文字繞表格顯示的功能標籤格式 : <TABLE BORDER=1 ALIGN= 位置 > 標籤特性 : </TABLE> 位置設定 <TITLE> 浮動表格 </TITLE> ALIGN=LEFT: 表格靠左, 文字靠右顯示 ALIGN=RIGHT: 表格靠右, 文字靠左顯示不加 ALIGN 屬性 : 表格靠上, 文字靠下顯示浮動表格資料的實例 <TABLE BORDER=10 WIDTH=440 ALIGN=LEFT> <CAPTION><B> 澎湖旅遊行程表 </B></CAPTION> <TR><TD ALIGN=CENTER VALIGN=MIDDLE HEIGHT=100> <TR><TH></TH><TH></TH><TH COLSPAN=3> 行程 </TH></TR> <TR><TH></TH><TH></TH><TH> 第一天 </TH><TH> 第二天 </TH> <TH> 第三天 </TH></TR>

68 <TR><TH ROWSPAN=3> 時間 </TH><TH> 早上 </TH> <TD> 松山機場集合 </TD><TD> 風櫃聽濤 </TD><TD> 浮潛 </TD></TR> <TR><TH> 下午 </TH><TD> 進駐澎湖青年活動中心 </TD> <TD> 進駐吉貝 </TD><TD> 險礁拾貝 </TD></TR> <TR><TH> 晚上 </TH><TD> 海珍美味 </TD> <TD> 與月色海洋共舞 </TD><TD> 賦歸 </TD></TR> </TABLE><P> <P> 左邊的是我們這一 <BR> 次畢業旅行的行程 <BR> 表, 地點是澎湖 <BR> 吉貝島及險礁, 來 <BR> 回的交通工具皆是 <BR> 飛機, 請大家星期 <BR> 二早上十點整在松 <BR> 山機場集合, 我們 <BR> 十一點上飛機, 預 <BR> 計十二點到達澎湖 <BR> 馬公機場, 到那邊 <BR> 後會有遊覽車接我 <BR> 們去澎湖青年活動中心, 接著便開始三天兩夜的澎湖之旅了 </P>

表格與文件排版的應用將文章寫在儲存格中, 但不顯示表格的邊框及內框線, 即利用無框表格來協助文字排版的技巧 <TITLE> 文字排版與表格 </TITLE> 表格與文件排版的應用 <TABLE WIDTH=60% CELLSPACING=10> <TR><TD VALIGN=TOP WIDTH=70> 資訊時代 </TD> <TD> 身處於這個資訊爆炸的時代中,

69 表格與文件排版的應用將文章寫在儲存格中, 但不顯示表格的邊框及內框線, 即利用無框表格來協助文字排版的技巧 <TITLE> 文字排版與表格 </TITLE> 表格與文件排版的應用 <TABLE WIDTH=60% CELLSPACING=10> <TR><TD VALIGN=TOP WIDTH=70> 資訊時代 </TD> <TD> 身處於這個資訊爆炸的時代中, 無論是在報章雜誌或是新聞媒體, 你都一定能聽到 Internet 這個英文字, 而他究竟代表著什麼意義, 又如何能讓許多人相繼投入, 挖掘其所蘊藏的豐富資訊, 這的確是一個值得玩味與探討的問題 </TD></TR> <TR><TD VALIGN=TOP WIDTH=70>Internet</TD> <TD> 在網際網路上, 我們可以使用許多的服務, 例如 : 電子布告欄檔案傳輸協定地鼠系統檔案搜尋系統網路遊戲及全球資訊網等等 </TD></TR> </TABLE>

70 5-8HTML4.0 新增的表格標籤表格結構化 <THEAD>... </THEAD> 此標籤用來定義表格的表頭, 表格中只能定義一個表頭區 <TFOOT>...</TFOOT> 此標籤用來定義表格的表尾, 表格中只能定義一個表尾區 <TBODY>...</TBODY> 此標籤用來定義表格的表體區, 在一張表格中可以定義多個表體區上述這 3 個標籤都需要被定義在 <TABLE>...</TABLE> 的標籤之內才會有意義的表格結構化 <TITLE> 表格結構化 </TITLE> <TABLE border="2"> <THEAD bgcolor="yellow"> </THEAD> <TFOOT> </TFOOT> <TR><TH> 月份 <TH> 黃金 <TH> 白銀 <TH> 銅鐵 <TR><TH colspan="4">peter 統計 <TBODY bgcolor="#fff5ee"> </TBODY> <TR><TH>1<TH>34.56<TH>123.2<TH> <TR><TH>2<TH>231.56<TH>12.24<TH>23.1 <TR><TH>3<TH>324.56<TH>235.2<TH> <TBODY bgcolor="#e0ffff"> </TBODY> <TR><TH>4<TH>4.56<TH>12.2<TH>23.3 <TR><TH>5<TH>434.26<TH>123.2<TH> <TR><TH>6<TH>34.6<TH>123.2<TH>235.1

71 </TABLE> 表格直行化 <COLGROUP span="n">... </COLGROUP> N 代表定義行的數目該標籤通常包含在 <TABLE> 與 <THEAD> 兩標籤之內, 主要是用來定義行的數目表格直行化 <TITLE> 以直行方式來控制表格 </TITLE> <TABLE border="2"> <COLGROUP span="4" width="100" align="left"> </COLGROUP> <THEAD align="center">

72 <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 </TH> </THEAD> <TFOOT align="center"> <TR><TH colspan="4">peter 統計 </TFOOT> <TBODY bgcolor="#ffff5ee"> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY bgcolor="#e0ffff"> <TR><TH>4</TH><TH>4.56</TH><TH>12.2</TH><TH>23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH>34.6</TH><TH>123.2</TH><TH>235.1</TH> </TBODY> </TABLE>

73 個別直行設定 <COL>...</COL> 該標籤用來設定表格中個別直行的屬性, 且必頇被包含在 <COLGROUP> 與 </COLGROUP> 中內個別直行設定 <TITLE> 個別直行的設定 </TITLE> <TABLE border="2"> <COLGROUP> <COL width="60"> <COL width="100" align="right"> <COL width="100"> <COL width="100" align="left"> </COLGROUP> <THEAD align="center"> </TH> </THEAD> <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 <TFOOT align="center"><tr><th colspan=4>peter 統計 </TH> </TFOOT>

74 <TBODY bgcolor="#ffff5ee"> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY bgcolor="#e0ffff"> <TR><TH>4</TH><TH>4.56</TH><TH>12.2</TH><TH>23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH>34.6</TH><TH>123.2</TH><TH>235.1</TH> </TBODY></TABLE>

75 直行中排列的調整 <COL align="char" char="*"> 其中 * 是任何符號直行中排列的調整 <TITLE> 直行中排列的調整 </TITLE> <TABLE border="2"> <COLGROUP> <COL width="60" align="left"> <COL width="100" align="char" char="."> <COL width="100"> <COL width="100"> </COLGROUP> <THEAD align="center"> <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 </TH> </THEAD> <TFOOT align="center"><tr><th colspan="4">peter 統計 </TH> </TFOOT> <TBODY bgcolor="#fff5ee"> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY bgcolor="#e0ffff"> <TR><TH>4</TH><TH> 14.56</TH><TH> 12.2</TH><TH> 23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH> 34.6 </TH><TH>123.2</TH><TH>235.1</TH> </TBODY></TABLE>

76 直行中顏色的設定將針對 <COL> <COLGROUP> <THEAD> <TFOOT> 與 <TBODY> 標籤對 bgcolor 背景顏色的設定優先順序作一比較直行中顏色的設定 <TITLE> 直行中顏色的設定 </TITLE> <TABLE border="2"> <COLGROUP bgcolor="red"> <COL width="60" bgcolor="#ededed"> <COL width="100" bgcolor="#ffffe0"> <COL width="100" bgcolor="#fff0f5"> <COL width="100" bgcolor="#f0fff0"> </COLGROUP> <THEAD bgcolor="#e0ffff"> <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 </TH> </THEAD>

77 <TFOOT bgcolor="#ffefdb"> <TR><TH colspan="4">peter 統計 </TH> </TFOOT> <TBODY> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY> <TR><TH>4</TH><TH>4.56</TH><TH>12.2</TH><TH>23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH>34.6</TH><TH>123.2</TH><TH>235.1</TH> </TBODY></TABLE>

78 表格外框邊線的設定 <TABLE border="n" frame=" 邊框型態 ">... </TABLE> 其中 frame 屬性的設定值如下 : void : 不顯示表格邊線 above: 只顯示出表格的上邊線 below: 只顯示出表格的下邊線 hsides: 只顯示出表格的上下邊線 vsides: 只顯示出表格的左右邊線 lhs: 只顯示出表格的左邊線 rhs: 只顯示出表格的右邊線 box: 會顯示出表格所有邊線 border: 會顯示出表格所有邊線表格外框邊線的設定 <TITLE> 表格外框線的設定 </TITLE> <TABLE border="2" frame="vsides"> <THEAD bgcolor="#e0ffff"> <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 </TH> </THEAD> <TFOOT bgcolor="#ffefdb"> <TR><TH colspan="4">peter 統計 </TH> </TFOOT> <TBODY> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY> <TR><TH>4</TH><TH>4.56</TH><TH>12.2</TH><TH>23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH>34.6</TH><TH>123.2</TH><TH>235.1</TH>

79 </TBODY> </TABLE> 表格的格框線設定 <TABLE border="n" rules=" 格框線型態 ">... </TABLE> 其中 rules 屬性的設定值如下 : rows: 只顯示橫列的格框線 cols: 只顯示直行的格框線 groups: 將配合 <COLGROUP> 標籤定義來顯示格框線 all: 顯示全部的格框線 none: 不顯示任何的格框線

80 表格的格框線設定 <TITLE> 表格內框隔線的設定 </TITLE> <TABLE border="2" frame="hsides" rules="rows"> <THEAD bgcolor="#e0ffff"> <TR><TH> 月份 </TH><TH> 黃金 </TH><TH> 白銀 </TH><TH> 銅鐵 </TH> </THEAD> <TFOOT bgcolor="#ffefdb"> <TR><TH colspan="4">peter 統計 </TH> </TFOOT> <TBODY> <TR><TH>1</TH><TH>34.56</TH><TH>123.2</TH><TH>334.31</TH> <TR><TH>2</TH><TH>231.56</TH><TH>12.24</TH><TH>23.1</TH> <TR><TH>3</TH><TH>324.56</TH><TH>235.2</TH><TH>253.31</TH> </TBODY> <TBODY> <TR><TH>4</TH><TH>4.56</TH><TH>12.2</TH><TH>23.3</TH> <TR><TH>5</TH><TH>434.26</TH><TH>123.2</TH><TH>733.31</TH> <TR><TH>6</TH><TH>34.6</TH><TH>123.2</TH><TH>235.1</TH> </TBODY> </TABLE>

81 5-9 自己動手做 Home Page 概範例說明論 : 在說明了表格的製作技巧及應用, 現在可利用這些標籤與技巧, 設計某圖書資訊公司一月份業績表格基本要求 : 一月份業績表背景圖形 :score.gif 文字顏色 : 黑色基本字型大小 :2 設計步驟 : 製作複雜表格的步驟先將文件本體標籤設定好, 再依需求將 7*5 的表格雛型作出, 且將 <TABLE> 標籤中的屬性設定好加上 ROWSPAN 及 COLSPAN 屬性, 合併儲存格

82 把多餘的儲存格刪除進行美化工作, 將特殊儲存格加上背景顏色及寬度限制, 並將標題美化, 表格置中等, 完成設計瀏覽成果評量與實作概論 : 在說明了表格的製作技巧及應用, 現在可利用這些標籤與技巧, 設計個人功課表基本要求 : 上學期課表, 格式如左圖各課程需使用背景顏色不同課程需用不同背景顏色, 相同課程需用相同背景顏色存檔為 :Labch5.html

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /