單元七 : 網頁規劃與製作 第一章 : 教學目標與教學方法第二章 :HTML 從零開始第三章 : 如何建立文字排版第四章 : 清單的設計第五章 : 直線與表格的製作第六章 : 超鏈結的應用第七章 : 如何插入圖形實作題 : 網頁設計實作相關規定
第一章 : 教學目標與教學方法 教學目標 教學方法 1. 具備將資訊技能與生活的應用 結合 2. 具備資訊社會所需之網路倫理 與法律常識 3. 了解數位內容與數位學習方法 具備網頁規劃概念與實作網頁素養 1. 將教材製作成網頁 ( 或投影 片 ), 並架設一教學網站, 供老 師上課教學及學生課後學習 2. 每單元結束後, 皆會進行評量與 程式設計練習, 測試學生之學習 成果 3. 架設一實習專用之伺服器平 台, 並為每位學生規劃一個人 Web & FTP Site 空間, 供置放學 生作業 老師評量作業及同學參靠觀摩 第二章 :HTML 從零開始 2-1 HTML 文件編輯器 概論 : HTML 文件是一種標籤語言, 其格式為 ASCII, 即純文字檔, 所以可用任何純文字編輯器來編輯 在編輯時, 我們可以先定義一些文件的基本設定, 如文件標題 文件本體的 一些屬性 ( 色彩 背景 字型大小 超鏈結顏色等 ) 等等 種類 : 純文字編輯器 :Windows 所提供的記事本 U1traEdit 網頁輔助編輯器 :FrontPage Express FrontPage 2000 Word Netscape 的編輯器 Dreamweaver
使用網頁製作輔助軟體? 優點 : 可快速製作出整個網頁, 甚至是網站的架構及一些效果 缺點 : 1. 所製作的 HTML 文件, 不易了解且難以直接維護 2. 無法設計動態網頁, 降低網際網路的功能 2-2 HTML 文件基本架構 相關敘述 1. <!> 文件註解 2. 宣告為 HTML 文件 3. 標頭宣告 4. <TITLE> 文件標題 5. 文件本體的設定 基本架構 <!-- ========================== --> <!-- HTML 文件實例 --> <!-- ========================== --> <html> <head> <title> 名稱 </title> </head> <body> 文件內容 </body> </html> 文件註解 : 1. <!-- 表文件註解的開始, 2. --> 表文件註解結束 3. 可至於文件任何位置 <!-- ========================== --> <!-- HTML 文件實例 --> <!-- ========================== --> <html> <head> <title> 名稱 </title> </head> <body> 文件內容 </body> </html>
宣告 HTML 文件 : <!-- ========================== --> <!-- HTML 文件實例 --> 1. <html> 表 HTML 文件的開始, <!-- ========================== --> 2. </html> 表 HTML 文件的結束 <html> 3. HTML 文件粗分為 <head> o 標頭宣告 <title> 名稱 </title> o 文件本體 </head> 兩部分 <body> 文件內容 </body> </html> 標頭宣告 : <!-- =================== --> <!-- 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> 文件本體的設定 : <!-- ========================== --> <!-- HTML 文件實例 --> 1. <body> 至 </body> 間為文件本體的 <!-- ========================== --> 部分 <html> 2. 設計完成之 HTML 文件需透過瀏 <head> 覽器觀賞 <title> 名稱 </title> </head> <body> 文件內容 </body> </html>
2-3 自己動手做 Home Page 2-3-1 範例說明 概論 : 本節的目的是讓讀者能親自動手製作一個特定主題的 Web Page, 例如 : 個 人的網頁或某特定領域的網頁,( 有關於音響或相機等等的 Web Page), 此後的每一章皆會將該章所提到的語法標籤應用到 Web Page 的製作上, 一步一步來建構心中的夢幻國度 製作 Web Page 的第一步便是選擇主題, 在此例中, 將以 歡迎光臨聯合出版社 為主題, 介紹其出版的書籍, 公司的歷史及未來的目標, 讀者們亦可選擇另一個主題跟著做 步驟 : STEP1 宣告 HTML 文件及檔頭宣告 STEP2 加入文件標題 STEP3 加入文件註解及文件內容 2-3-2 評量與實作 概論 : 在說明了網頁 (HTML) 文件的基本架構 標籤及寫法, 現在可利用此基本架構, 設計 500 字左右之個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景 求學經過與經歷 ( 幹部 得獎... ) 興趣與休閒 生涯規劃 未來期許與展望 修讀課程 ( 上 本學期選課 ) 住宿環境與聯絡方式 ( 住址 電話 手機 mail... ) 設計步驟 : 鍵入上述基本資料, 不需任何排版與美化 檢視成果
第三章 : 如何建立文字排版 3-1 排版標籤 說 <BR> 文字斷列 不含 <BR> 文字斷列的實例 <TITLE> 普通格式的文件 </TITLE> 空山不見人 但聞人語響 反景赴山林 復照清苔上 空山不見人但聞人語響反景赴山林 復照清苔上 明 : 瀏覽器讀入 HTML 文件時, 只會判別標籤及文字, 並不會判別換 列符號 (Enter), 所以文字會被視為同一列輸出 所以與編輯 HTML 文件的判別方式並不相同 改進 : 使用文字斷列標籤 :<BR> 或 <br> 標籤功能 : 強迫文字斷列, 讓文字依設計者的規劃斷列, 不因瀏覽器視窗大小 而亂了所要呈現的順序 標籤特性 : 單一標籤, 不需使用終止標籤 標籤格式 : <BR> 或 <br> 加上 <BR> 文字斷列標籤的實例 <TITLE> 文字斷列標籤的應用 </TITLE> 空山不見人 <BR> 但聞人語響 <BR> 反景赴山林 <BR> 復照清苔上 <BR> 空山不見人 但聞人語響 反景赴山林 復照清苔上
說 改 <NOBR> 關閉文字斷列 普通段落文件的輸出實例 ( 依視窗大小自動將文字斷列 ) <TITLE> 普通格式的文件 </TITLE> 空山不見人 但聞人語響 反景赴山林 復照清苔上 朝辭白帝彩雲間, 千里江陵一日還 兩岸猿聲啼不住, 輕舟已過萬重山 空山不見人, 但聞人語響 反景赴 山林, 復照清苔上 朝辭白帝彩雲 間, 千里江陵一日還 兩岸猿聲啼 不住, 輕舟已過萬重山 明 : HTML 文字段落會依瀏覽器實際視窗寬度自動調整每一列可顯示的字元數, 亦即不同的視窗寬度將使每一列有不同的文字數 進 : 使用關閉瀏覽器自動文字斷列標籤 標籤功能 : 1. 關閉由瀏覽器依其視窗大小自動將文字斷列的功能 2. 若依列無法顯示所有文字, 瀏覽器視窗將自動產生水平捲軸來瀏覽文件上其餘的文字 標籤特性 : 為雙標籤, 需使用 : 起始標籤 <NOBR> 終止標籤 </NOBR> 標籤格式 : <NOBR>...</NOBR>
關閉由瀏覽器依其視窗大小 自動將文字斷列的功能的實例 <TITLE> 普通格式的文件 </TITLE> <NOBR> 空山不見人 但聞人語響 反景赴山林 復照清苔上 朝辭白帝彩雲間, 千里江陵一日還 兩岸猿聲啼不住, 輕舟已過萬重山 </NOBR> <P> 段落標籤功能 : 在文章段落後面, 加上一個段落標籤, 瀏覽器在觀賞時, 會出現一 空白列 標籤特性 : 為單一標籤 標籤格式 :...<P> 段落標籤的應用, 凡是有 <P> 段落標籤出現處會又一空白列出現 <TITLE> 段落標籤 </TITLE> 我是天空裡的一片雲, 偶爾投影在你的 波心,<BR> 你不必訝異, 更無頇歡欣, 在轉瞬間消 滅了蹤影.<P> 你我相逢在黑夜的海上, 你有你的, 我 有我的方向,<BR> 我是天空裡的一片雲, 偶爾投影在你的 波心, 你不必訝異, 更無頇歡欣, 在轉瞬間消 滅了蹤影. 你我相逢在黑夜的海上, 你有你的, 我 有我的方向, 你記得也好, 最好你忘掉, 交會時互放的光芒...
你記得也好, 最好你忘掉, 交會時互放的光芒...<P> <PRE> 原始文字樣式 文字斷列的應用 <TITLE> 文字斷列 </TITLE> 李白 <BR> 朝辭白帝彩雲間,<BR> 千里江陵一日還 <BR> 兩岸猿聲啼不住,<BR> 輕舟已過萬重山 <BR> 說 李白 朝辭白帝彩雲間, 千里江陵一日還 兩岸猿聲啼不住, 輕舟已過萬重山 明 : 文字斷列標籤 <BR>, 雖可自動換列, 但因為瀏覽器無法判別超過一個以上的半形空白字元, 故上例中李白左邊的空白字元, 在瀏覽器 中無法顯示出來 改進 : 使用原始文字樣式標籤 <PRE> 標籤功能 : 讓文件在瀏覽器中所呈現的效果與在編輯時所看到的一樣, 且省略 了每一列輸入 <BR> 的麻煩 標籤特性 : 為雙標籤 : 文章前加起始標籤 <PRE> 文章結束加終止標籤 </PRE> 標籤格式 : <PRE>...</PRE> 原始文字樣式標籤的應用 <TITLE> 普通格式的文件 </TITLE> <PRE> 李白 朝辭白帝彩雲間, 李白 朝辭白帝彩雲間, 千里江陵一日還 兩岸猿聲啼不住, 輕舟已過萬重山
千里江陵一日還 兩岸猿聲啼不住, 輕舟已過萬重山 </PRE> 說 非斷列符號 明 : 視窗內的排版格式會依視窗寬度來調整, 此項功能在 IE5.5 及 NetScape4.5 這兩種瀏覽器中, 有不一樣的效果 IE5.5 瀏覽器 : 調整規則較單純 a. 以視窗寬度將文字換列顯示, 讓所有文字皆可在視窗中出現 b. 使用關閉視窗文字斷列標籤 <NOBR>, 關閉文字斷列功能, 改由水平捲軸瀏覽全部文字 NetScape4.5 瀏覽器 : 調整規則較複雜 a. 以視窗寬度將文字換列顯示, 讓所有文字皆可在視窗中出現 b. 若其文字編碼採 Western(ISO-8859-1), 在視窗寬度變動時, 依原始文件中空白字元的位置調整 c. 若其文字編碼採 Traditional Chinese(BIG5), 則調整規則與 IE5.5 相同 更改視窗寬度, 以了解空白字元在 NetScape4.5 中, 對文件排版的影響 <TITLE> 空白字元與排版 </TITLE> 我是天空裡的一片雲偶爾投影在你的 波心 <BR> 你不必訝異更無頇歡欣在轉瞬間消 滅了蹤影 <P> 你我相逢在黑夜的海上你有你的我 有我的方向 <BR> 你記得也好最好你忘掉交會時互放 的光芒 <P> 改 我是天空裡的一片雲偶爾投影在你的 波心 你不必訝異更無頇歡欣在轉瞬間消 滅了蹤影 你我相逢在黑夜的海上你有你的我 有我的方向 你記得也好最好你忘掉交會時互放的光芒 進 : 使用 非斷列符號, 取代空白字元
符號功能 : 讓 NetScape4.5 瀏覽器會用空白字元取代 符號, 且不會依空白字元和視窗寬度調整文字排版, 改由水平捲軸瀏覽全部文字 符號特性 : 在文件欲使用半形空白字元處, 以特殊符號 取代 符號格式 : 非斷列符號的應用 <TITLE> 非斷列符號 </TITLE> 我是天空裡的一片雲   偶爾投影 在你的波心 <BR> 你不必訝異   更無頇歡欣   在轉瞬間消滅了蹤影 <P> 你我相逢在黑夜的海上   你有你 的   我有我的方向 <BR> 你記得也好   最好你忘掉   交會時互放的光芒 <P> 我是天空裡的一片雲偶爾投影在你的 波心 你不必訝異更無頇歡欣在轉瞬間消 滅了蹤影 你我相逢在黑夜的海上你有你的我 有我的方向 你記得也好最好你忘掉交會時互放的光芒 空白字元與排版 在兩個字串間空 6 個空白字元 <TITLE> 空白字元 </TITLE> 我是天空裡的一片雲 在你的波心 說 改 功 特 偶爾投影 我是天空裡的一片雲偶爾投影在你的 波心 明 : 上例中, 在 我是天空裡的一片雲 和 偶爾投影在你的波心 間 空了 6 個空白字元, 但執行時只剩 1 個空白字元 進 : 使用全形空白字元取代半形空白字元 能 : 讓編輯器所空的字元與瀏覽器所產生的結果相同 性 : 一個全形空白字元等於兩個半形空白字元
個全形空白字元的應用 <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> 之間的文字, 會向右邊縮
排空出 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
<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> 標題靠右對齊
<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> 水調歌頭 明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒 起舞弄清影, 何似在人間
<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> 水調歌頭 明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年?
<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> 水調歌頭 明月幾時有? 把酒問青天, 不知天上宮闕, 今夕是何年? 我欲乘風歸去, 唯恐瓊樓玉孙, 高處不勝寒 起舞弄清影, 何似在人間
<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>
高處不勝寒 <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
<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> 明月幾時有 把酒問青天高處不勝寒
<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> 花自飄零水自流一種相 思兩處閒愁
<FONT SIZE=+2> 兩處 </FONT> <FONT SIZE=+3> 閒愁 </FONT> B. 更改字型顏色 標籤格式 : <FONT COLOR=#VALUE>...</FONT> 標籤特性 : 為雙標籤 1. 起始標籤 : <FONT COLOR=#VALUE> a. VALUE 之前一定要加 # 符號 b. VALUE 值在 00 00 00 至 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> 月下獨酌 花間一壺酒 獨酌無相親 舉杯邀明月 對影成三人
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 文件要使用某段文字做說明時, 可用此標籤, 其效果與從
瀏覽器上所看到的相同 標籤格式 : <SAMP>...</SAMP> 標籤功能 : 用來標明訊息文字, 所呈現的字體較一般字大 細且字元間距較寬 標籤格式 : <CODE>...</CODE> 標籤功能 : 用來說明一些程式碼, 其字體與 <SAMP> 標籤相同 標籤格式 : <KBD>...</KBD> 標籤功能 : 字體與 <SAMP> 標籤相同 標籤格式 : <VAR>...</VAR> 標籤功能 : 其字體較一般字體細且為斜體 標籤格式 : <ADDRESS>...</ADDRESS> 標籤功能 : 可用來說明 E-mail 或住址 電話之類的文字, 其字體較一般字體細且為斜體 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 留取丹心照汗青!
<VAR>this is a test string 人生自古誰無死? </VAR><BR> <ADDRESS> this is a test string 留取丹心照汗青! </ADDRESS><BR> 3-5 特殊符號 在 HTML 文件中, 有些符號和部分的關鍵字元相同, 故瀏覽器會將這些符 號視為關鍵字而予以忽略不顯示出來 為解決此一問題,HTML 文件會用其他表示法, 來取代這些特殊符號 特殊符號 HTML 表示法 < < 或 < > > 或 > " " 或 " & & 或 & 特殊符號的測試 <TITLE> 特殊符號的測試 </TITLE> 10 > 5<BR> 10 < 20<BR> 10 > 5 10 < 20 3-6 再談 BGCOLOR 背景顏色適當地在 內加上一些屬性設定, 有如在空白的舞台上搭起背景, 讓 Web Page 更有看頭 標籤格式 : <BODY BGCOLOR=#VALUE > 標籤特性 : VALUE 值的設定, 可參考 3-3-11-2 節標籤功能 : 網頁背景顏色預設為白色, 可用 BGCOLOR 屬性更改之
背景顏色的測試 <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 值的設定, 可參考 3-3-11-2 節
標籤功能 : 網頁上之文字顏色預設為黑色, 可用 TEXT 屬性更改文字顏色 文字顏色的應用 <TITLE> 文字顏色的應用 </TITLE> <BODY BACKGROUND="../../images/ch3/back.gif " TEXT=#FF0000> <center> <h2> 望江南 </h2> 多少恨, 昨夜夢魂中 <BR> 還似舊時遊上苑,<BR> 車如流水馬如龍,<BR> 花月正春風!<P> </center> 3-7 自己動手做 Home Page 3-7-1 範例說明 概論 : 在說明了文字排版 特殊效果標籤及 標籤的屬性設定, 現在可利用這些標籤, 對 2-6 節的網頁設計 DIY 進行排版及修飾的動作 基本要求 :. 背景圖形 :back.gif. 文字顏色 : 黑色. 基本字型大小 :4. 文件內容向右縮排
修飾前 修飾後 概 評量與實作 論 : 在說明了文件的排版 格式及文字效果等標籤及寫法, 現在可利用 這些標籤, 修改美化 CH2 所設計之個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景 求學經過與經歷 ( 幹部 得獎... ) 興趣與休閒 生涯規劃 未來期許與展望 修讀課程 ( 上 本學期選課 ) 住宿環境與聯絡方式 ( 住址 電話 手機 mail... ) 設計步驟 : 修改 CH2 所設計之個人簡介的網頁, 利用本章所介紹之各種標籤加以排版與美化 檢視成果
第四章 : 清單的設計 清單 : 所傳達的訊息是以一條一條且整齊的方式呈現 將某些選項式文字敘述以清單來方式表達, 可以使的整份文件更易讓人接受 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)
選項清單之 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)
選項清單以不同符號表示 <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)
</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)
<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 來更改符號種類 清單資料會向右縮排, 上下文件間也會空一列 標籤功能 : 以實心圓點符號開頭, 整齊的條列出夾在起始及終止標籤之間, 所 包含的項目名稱
比較 <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> 標籤後填入說明此標題的內容 標籤功能 : 適用於, 有一份文件分成好幾項, 每一向都有標題和說明內容
說明式清單使用實例 <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 月
<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
<DD> 看圖例學 Excel 2000 中文版 <DT> 精通系列 <DD> 精通 HTML <DD> 精通 DyanmicHTML <DD> 精通 VB 6.0 <DD> 精通 VC++ 6.0 </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 中文版
<LI> 看圖例學 Windows 2000 中文版 <LI> 看圖例學 Microsoft Office 2000 中文版 </OL> TYPE 數字型式屬性設定 標籤功能 : 計數符號除了阿拉伯數字 ( 預設 ) 外, 還有英文及羅馬字母, 可供 TYPE 屬性設定選用 標籤格式 : <OL TYPE=T> <LI>..... <LI>... </OL> 標籤特性 : T 值及代表意義如下 TYPE=1: 數字, 如 1 2 3... 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 中文版
</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
<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++ 6.0 <LI> 精通 VB 6.0 </OL> </UL> <LI>Windows 系列 <UL> <LI> 作業系統系列 魁工作室好書推薦 : 精通系列 o o 網頁設計 Windows 系列 o o 1. 精通 HTML 2. 精通 DynamicHTML 程式語言系列 1. 精通 VC++ 6.0 2. 精通 VB 6.0 作業系統系列 1. 看圖例學 Windows 98 中文版 2. 看圖例學 Windows Office 系列 2000 中文版 1. 看圖例學 Microsoft Word 2000 中文版 2. 看圖例學 Microsoft Excel 2000 中文版
<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 鍵入基本資料 (http://splab.dee.nuu.edu.tw/iliteracyunit7/html/diy/ch4/diy4-2.htm ) 利用清單標籤將各項資料作適當分配 利用第三章的文字技巧及效果標籤進行美化工作 設計完成, 瀏覽成果 (http://splab.dee.nuu.edu.tw/iliteracyunit7/html/diy/ch4/diy4.htm )
評量與實作 概論 : 在說明了各式清單文件的標籤及寫法, 現在可利用這些標籤與技巧, 設計個人簡介的網頁 ( 1 Page ) 基本要求 : 家庭背景 求學經過與經歷 ( 幹部 得獎... ) 興趣與休閒 生涯規劃 未來期許與展望 修讀課程 ( 上 本學期選課 ) 住宿環境與聯絡方式 ( 住址 電話 手機 mail... ) 設計步驟 : 修改 CH3 所設計之個人簡介的網頁, 利用清單標籤將各項資料作適當分配, 利用第三章的文字技巧及效果標籤進行美化工作 檢視成果 第五章 : 直線與表格的製作 5-1 直線製作 直線 : 除了可分割不同的主題資訊外, 同時也具有美觀大方的效果 <HR> 直線標籤 標籤格式 : <HR> 標籤特性 : 為單一標籤, 沒有終止標籤 所產生之直線物件會自動依所在位置調整寬度 標籤功能 : 代表一直線
加上直線處理的應用 <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 四 種屬性, 供設計網頁時彈性使用 )
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> 明月幾時有 把酒問青天
明月幾時有 <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> 高處不勝寒 何似在人間 (http://splab.dee.nuu.edu.tw/iliteracyunit7/h tml/ch5/ex5-3.htm ) 明月幾時有 把酒問青天 高處不勝寒 何似在人間 NOSHADE 無陰影屬性標籤功能 : 關閉直線顯示陰影的功能, 以實心直線顯示 ( 當厚度大於 1 時 ) 標籤格式 : <HR SIZE=N NOSHADE> N > 1 無陰影屬性的應用 明月幾時有 <TITLE> 無陰影屬性線條 </TITLE> 把酒問青天 明月幾時有 <BR> 高處不勝寒
<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>, 一次相當於可建立一數個表格行, 也就是一個儲存格
一般均是將 <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>
<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>
建立多列多行資料的表格 <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> <!-- 邊框厚度改成 10 --> <TR><TD> 明月 </TD> <TD> 美人 </TD> <TD> 醇酒 </TD></TR> <TR><TD> 聯大 </TD> <TD> 同學 </TD> <TD> 最愛 </TD></TR> </TABLE> WIDTH 寬度屬性 標籤功能 : 設定整個表格寬度 標籤特性 : 寬度 ( 長度 ) 單位分成兩種絕對單位 : 以 pixel ( 螢幕上的點 ) 表示
標籤格式 : 相對單位 : 以螢幕寬度的百分比 % 表示, 會隨瀏覽器視窗寬度大小而變化 建議使用相對單位 預設為恰好可容納表格資料的寬度 儲存格的寬度 = 總寬度 / 行數, 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 的應用 <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
會與 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 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: 靠右
將表格的對齊方式, 分別設為靠左 置中與靠右對齊 <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>
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 寬度屬性 標籤功能 : 設定儲存格寬度 標籤特性 : 寬度 ( 長度 ) 單位分成兩種 絕對單位 : 以 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>
<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> <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> 楊貴妃 </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>
<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 > 標籤特性 : 背景顏色的設定可參考 3-3-11-2 節 將才藝儲存格的背景顏色設為紅色, 字為白色 <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>
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>
</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>
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>
使用 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>
<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> <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>
</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>
<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> 身處於這個資訊爆炸的時代中, 無論是在報章雜誌或是新聞媒體, 你都一定能 聽到 Internet 這個英文字, 而他究竟代表著什麼意義, 又如何能讓許多人相繼投入, 挖掘其所蘊藏的豐富資訊, 這的確是一個值得玩味與探討的問題 </TD></TR> <TR><TD VALIGN=TOP WIDTH=70>Internet</TD> <TD> 在網際網路上, 我們可以使用許多的服務, 例如 : 電子布告欄 檔案傳輸協定 地鼠系統檔案搜尋系統 網路遊戲及全球資訊網等等 </TD></TR> </TABLE>
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>334.31 <TR><TH>2<TH>231.56<TH>12.24<TH>23.1 <TR><TH>3<TH>324.56<TH>235.2<TH>253.31 <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>733.31 <TR><TH>6<TH>34.6<TH>123.2<TH>235.1
</TABLE> 表格直行化 <COLGROUP span="n">... </COLGROUP> N 代表定義行的數目 該標籤通常包含在 <TABLE> 與 <THEAD> 兩標籤之內, 主要是用來定義行的數目 表格直行化 <TITLE> 以直行方式來控制表格 </TITLE> <TABLE border="2"> <COLGROUP span="4" width="100" align="left"> </COLGROUP> <THEAD align="center">
<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>
個別直行設定 <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>
<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>
直行中排列的調整 <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>
直行中顏色的設定 將針對 <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>
<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>
表格外框邊線的設定 <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>
</TBODY> </TABLE> 表格的格框線設定 <TABLE border="n" rules=" 格框線型態 ">... </TABLE> 其中 rules 屬性的設定值如下 : rows: 只顯示橫列的格框線 cols: 只顯示直行的格框線 groups: 將配合 <COLGROUP> 標籤定義來顯示格框線 all: 顯示全部的格框線 none: 不顯示任何的格框線
表格的格框線設定 <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>
5-9 自己動手做 Home Page 概 範例說明 論 : 在說明了表格的製作技巧及應用, 現在可利用這些標籤與技巧, 設 計某圖書資訊公司一月份業績表格 基本要求 : 一月份業績表 背景圖形 :score.gif 文字顏色 : 黑色 基本字型大小 :2 設計步驟 : 製作複雜表格的步驟 先將文件本體 標籤設定好, 再依需求將 7*5 的表格雛型作 出, 且將 <TABLE> 標籤中的屬性設定好 加上 ROWSPAN 及 COLSPAN 屬性, 合併儲存格
把多餘的儲存格刪除 進行美化工作, 將特殊儲存格加上背景顏色及寬度限制, 並將標題 美化, 表格置中等, 完成設計瀏覽成果 評量與實作 概論 : 在說明了表格的製作技巧及應用, 現在可利用這些標籤與技巧, 設計個人功課表 基本要求 : 上學期課表, 格式如左圖 各課程需使用背景顏色不同課程需用不同背景顏色, 相同課程需用相同背景顏色 存檔為 :Labch5.html