|
§ body (background/link/vlink color)<body bgcolor | background text link vlink alinkleftmargin topmargin marginwidth marginheight> [說明]: 網頁底色或底紋指定 -- bgcolor : 網頁底色(注意:顏色用六位十六進位代碼,且前加 #) -- background : 網頁底紋 (給圖檔名) -- bgproperties = "fixed" : 背景不隨scrollbar移動 (只適用於IE) -- text : 網頁文字顏色 -- link : 網頁Anchor顏色 -- vlink : 網頁被點過的 Anchor顏色 -- leftmargin = n : body內容距window左邊之距離 (只適用於IE) -- topmargin = n : body內容距window右邊之距離 (只適用於IE) -- marginwidth = n : body內容距window之橫向間距 (只適用於Netscape) -- marginheight = n : body內容距window之縱向間距 (只適用於Netscape) Example 1: (底色為白色、link為藍色) <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink=#8e2323 alink="#3299cc">
§ color (十六進位顏色表)顏色表(一): (十六進位顏色表) **** Table of RGB Color (1)顏色表(二): (十六進位顏色表) **** Netscape 216 Colors (2) 顏色單字表(三): (十六進位顏色單字表) 顏色單字表(四): (十六進位顏色表) 顏色表(五):
§ ol (Different Types)<ol type=a|a|i|i|1 value>[說明]: 各種有序號列式
Example 1:
<ol type=A>
<lh><i>special centers in tnua</i></lh>
<li>technological arts center</li>
<li>trditional arts center</li>
<li>performance arts center</li>
<li>computer center</li>
</ol>
 § ul (Different Types)<ul type=square|disc|circle value>[說明]: 各種無序號列式 (只適用Netscape)
Example 1:
<ul type=square>
<lh><i>special centers in tnua</i></lh>
<li>technological arts center</li>
<li>trditional arts center</li>
<li>performance arts center</li>
<li>computer center</li>
</ul>
§ p & align<p align=left, right, center>[說明]: 空行後的文字對位指令
Example 1:
Thinking of you at this beautiful holiday.<p align=left>
Merry Christmas & Happy New Year!</p>
Example 2:
Thinking of you at this beautiful holiday.<p align=right>
Merry Christmas & Happy New Year!</p>
Merry Christmas & Happy New Year!
Example 3:
Thinking of you at this beautiful holiday.<p align=center>
Merry Christmas & Happy New Year!</p>
Merry Christmas & Happy New Year! § font size & color<font size | color | face>[說明] : 文字大小、顏色、字型指定 -- size : 文字大小 (-6 ~ +6) -- color : 文字顏色 -- face : 文字字型 (中文除明體、細明體外，盡量不定義其它字體)
Example 1 :
Example 2 :
Example 3 :
Example 4 : § Image Size<img src="url" align | width | height | border | vspacehspace | alt> [說明] : 可指定圖檔的高度、寬度，圖與文字之垂直間距 -- vspcae : 圖與文字之垂直間距 -- hspcae : 圖與文字之水平間距 -- width : 圖檔寬度 -- height : 圖檔高度 -- alt : 說明用
§ Color & Multiple Table<table border bordercolor cellspacing cellpaddingbgcolor rowspan colspan width height valign> [說明] : 可設定巢狀式表格及多色表格 -- border = n : Table框邊大小 -- bordercolor : Table框邊顏色 -- cellspacing = n : Table內部隔線寬度 -- cellpadding = n : Table內文字與隔線間距 -- colspan=n : Table跨行設定 -- rowspan : Table跨列設定 -- width : Table的寬度 -- height : Table的高度 -- align = left, middle, right : Table的橫向對位 -- valign = top, center, bottom : Table的縱向對位 -- nowrap : Cell中的文字不斷行 (至於 TD 中) Example 1: Table內不同行的顏色設定
Example 2: 巢狀表格
Example 3: Span-tables: colspan 跨行表格
Example 4: Span-tables: rowspan 跨列表格
Example 5: 無邊的有色表格
<table border="0" width="400" bgcolor=#ffffff> <tr bgcolor="#588ccc"><td><font color="#ffffff">課 程</font></td></tr> <tr><td>電腦繪圖與影像處理</td></tr> <tr> bgcolor=#eeeeee><td>WWW Home Page 的設計 </td></tr> <tr><td>電腦網路的基本概念與應用</td></tr> <tr bgcolor="#588ccc"><td><font color="#ffffff">著 作</font></td></tr> <tr><td>內縮與賁張</td></tr> <tr bgcolor=#eeeeee><td>樹林裡放風箏</td></tr> <tr><td>我們不只是數字</td></tr> <tr bgcolor=#eeeeee><td>往、網、魍、惘、枉</td></tr> <tr bgcolor="#588ccc"><td><font color="#ffffff">興 趣</font></td></tr> <tr><td>不 務 正 業</td></tr> <tr bgcolor=#eeeeee><td>到 處 流 浪</td></tr> </table>
Example 6: 表格的框邊顏色設定
<table bordercolor=#aa0000 border=10>
<tr><td>衣索匹亞</td>
<td>索馬利亞</td>
</tr>
<tr><td>南斯拉夫</td>
<td>保加利亞</td>
</tr>
</table>
Example 7: 利用VALIGN及WIDTH來達到文章對位之效果
<table width="500" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="130" valign="top">
<a href="http://techart.tnua.edu.tw/1_labs/digiart.html">數位藝術實驗室</a></td>
<td width="20"></td>
<td width="350" valign="top">
數位藝術實驗室主要宗旨乃將積極開拓數位藝術各類型創作
之可能性，包括數位影像／動畫、多媒體創作、互動裝置、
網路藝術、互動裝置與公共空間結合等創作之可能性，未來
藉著數位藝術實驗室之設置積極開發不同互動式介面技術。C<p> </td>
</tr>
<tr>
<td width="130" valign="top">
<a href="http://techart.tnua.edu.tw/1_labs/digimusic.html">電腦音樂實驗室</a></td>
<td width="20"></td>
<td width="350" valign="top">
電腦音樂、科技音樂是全球樂壇之大勢所趨，沒有電腦音樂
方面的先進發展，臺灣將繼續無法打入國際創作樂壇。作為
臺灣的一個電腦音樂專業研發組織，我們配合教育部所推展
的「教學卓越計畫」提出「電腦音樂創意支援計畫」，並擴
大成立「電腦音樂」實驗室。<p></td>
</tr>
</table>
Example 8: 利用 Table 來作畫面構成 coing2002.zip
§ Field & Legend[說明] :<fieldset>...</fieldset>標籤會在區塊的外圍，加上矩形的邊框，若加上Background-color的屬性，可以使區塊的設定更為明顯！
Example 1 :
<div style="width:80%"> <fieldset align=right> <legend>【花想】關渡花卉藝術節</legend> 隨著花序的輪替、十二節氣的轉換，人的感情世界感受到外在環境的影響 ，變得豐富而遼闊。文人雅士只賞花卉，常將自己幻化為花卉，結合文學 的表述、藝術的展現昇華了花的想像空間，其悲喜交織、變化萬千的姿容 ，與人的情感相共鳴，激發文學家與藝術家的創作。不僅文人雅士如此， 即使是普羅大 眾，也常因花生活變得多采多姿。<p> 人類的藝文活動透過以花為主題的詮釋，更 能展現藝文的精神層次，而花 也因與藝文創作相結合，留下更多想像的空間。 </fieldset> <p> <fieldset> <legend>2003/4/17</legend> <p>以花之手，推開春天與大地，先放一點雲與鳥兒進來，再讓世界遼闊出去…… </fieldset> <p> </div>Example 2 :
§ Fragment Indentifiers[說明] : Page頁內的連結 (適合用在講義的網頁撰寫)
Example 1 : 連到同一網頁的某段落文章 (注意:上面link需 #，下面被link不需要#; 上面link用HREF，下面被link用NAME) Example 2 : 連到不同網頁的某段落文章 <a href="http://techart.tnua.edu.tw/~suchu/www/java.html#Java(4)"> 連到另一份Java講義中的"Java公司精彩例子"</a> 連到Java講義中的"Java精彩例子" § Image Mapping[說明] : 圖檔不同位置的Links-- shape = rect : mapping 的範圍為矩形, mapping中需給矩形左上角與右下角之 座標位置 -- shape = polygon : mapping 的範圍為多邊形, mapping中需給每頂點之座標位置 -- shape = circle : mapping 的範圍為圓形, mapping中需給半徑及圓心之座標位置
(圖形mapping需先定義)
<map name="xxxx">
<area shape=rect coords="x1,y1,x2,y2" href="url-1">
<area shape=polygon coords="x1,y1,x2,y2 x3,y3 ... ,xn,yn"
href="url-2">
<area shape=circle coords="x1,y1,r" href="url-2">
<area shape=default href="url-n">
<area shape=some-area nohref">
</map>
(圖形link先前定義的mapping)
<img src="url" usemap="#xxxx">
§ frame<frameset cols|rows frameborder=0 border=0bordercolor framespacing=0 framepadding=0> [說明] : 把視窗切成大小不同的子視窗 -- frameset : 切割定義 -- cols | rows = "300,*" 或 "20%,*" : 縱向 | 橫向切割 為300pixels (*表示剩 下的),或用螢幕百分比表示 -- frameborder = 0 border= n : 定義frame的邊界寬度 (前forIE, 後for Netscape) -- bordercolor : frame的邊界顏色 -- framespacing = n : 文字距邊界之間距 -- framepadding = n : frame 與 fame 間距 <frame src="url" name="frame-name" scrolling="yes/no/auto" noresize marginwidth="value" marginheigh="value"> [說明] : 每個frame -- frame : 每個frame的內部定義 -- name : frame的名字 (可供TARGET使用) -- src=xxx.html : frame中要連結那個網頁 -- scrolling="yes/no/auto" : frame中要不要scrollbar -- noresize : frame中允不允許被變更size -- marginwidth = n, marginheigh = n : frame內部文字距左邊邊界與上 面邊界的間距 (for IE)
用了body就不能用frame;用了frame就不能用body。 在Frame中,Link的TARGET描素: "_blank" : load this link into a new unnamed windows "_self" : load this link over itself "_parent" : load this link into its parent (範例) "_top" : load this link into top level § iframe (內部隔頁)<iframe name="xxxx" src="xxxx.html"style="left:80px; top:200px; position:absolute; z-index:1; width:160; height:108"> </iframe> [說明] : 在視窗內部切成大小不同的子視窗 -- name : 子視窗的名稱 -- src : 子視窗的網頁來源 -- left : 子視窗在瀏覽器的左邊位置 -- top : 子視窗在瀏覽器的上邊位置 -- width | height : 子視窗的大小 -- More 解說
§ Meta (需放於 HEAD 內)<meta http-equiv="Refresh" content="2;url=http://techart.tnua.edu.tw">[說明]: 1. 使一網頁停留幾秒後自動切換到另一網頁， 或瀏覽時間超過設定時間，必須重新reload <meta http-equiv="Refresh" content="sec; url=url"> [說明]: 2. 宣告網頁內的文字模式 <meta name="AUTHOR" content="作者名稱"> [說明]: 3. 宣告網頁內的作者 <meta name="description" content="網頁描述"> [說明]: 4. 宣告網頁內容綱要 <meta name="keywords" content="網頁keyword"> [說明]: 5. 宣告網頁關鍵字
Example 1: (從一網頁自動跳到另一網頁, 目的: 用於網址更動告知)注意：此 Big5的文字模式，可使文字自動縮排。但若在 English Windows (即使灌有楓橋、南極星中文系統)則只會看到"口口口口口..."的中文字。 最好在English Windows 下所使用的 Browser 安裝有 Big5字型。) Example 4: (目的：宣告網頁內的作者、內容綱要、關鍵字) § Bookmark Icon (需放於 HEAD 內)<link rel="SHORTCUT ICON" href="My.ico"><link rel="SHORTCUT ICON" href="http://techart.tnua.edu.tw/~suchu/CowDisk.ico">
[說明]: 1. My.ico為自己準備local的Icon圖檔
Example 2: 連結式的呼叫 WORD xxx.doc 檔案 Click here
Powerpoint檔案 <a href=powerpoint_file.ppt>powerpoint_file.ppt</a>
(※注意：需要 Shockwave 的plugin軟體)
Example 2 : 隱藏式展示 Flash File ball.html
(※注意：需要 Flash Player 的plugin軟體)
〝連結式〞的呼叫 多媒體檔案〝互動式播放〞
1. Sound-example (WAV聲音檔 xxx.wav)
2. Avi-example (AVI影像檔 xxx.avi) (王敬聰 提供)
3. QuickTime-example (QuickTime影像檔 xxx.mov)
4. Mpeg-example (Mpeg影像檔 xxx.mpg)
範例一 ： FRAME的使用
範例二 ： ASCC 中研院電算中心 (用TABLE來對位)
範例三 ： 台灣人文社會電子影音數位博物館 (用TABLE來對位)
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
沒有設任何參數的標準表示
