薇思庭HTML

HTML 網頁製作
大綱
 基本概念
 使用工具
 基本語法介紹
 進階語法介紹
這門課將會使用到的工具
 記事本、瀏覽器（ IE
）
 隨時隨地使用瀏覽器的檢視原始檔
基本概念－名詞解釋
 Internet
簡單的說也就是國際網路，提供全世界所有的使用者使用網路資
源，特點是完全沒有國境的限制；最早在 60 年代被美國國防部
作為軍事用途，沒想到在短短的幾十年就有如此蓬勃的發展！
 WWW(World Wide Web) 全球資訊網
目前當紅的網路服務，別於其他網路服務， WWW 不但結合了
Internet 上的所有資源外，它的多媒體表現方式更讓人目不暇給
！
 HTML(Hyper Text Markup Language. 超文件標註語言）
製作ＨｏｍｅＰａｇｅ的語言，是一種標記語言。
 Hypertext
超文件
超文件是指在文件中包含有鏈結到其他文件的能力，通常是利用不同
顏色或加底線的字，此外當滑鼠移到這些字上時會由箭頭變成手指狀
，使用者只需經由滑鼠點取，便可鏈結到其他相關的文件。除了超文
件的鏈結外，ＨＴＭＬ編輯出來的超文件同時具備展現多媒體的能力
，因為文件可加入圖片、聲音、及動畫及等效果。
 Hyperlink 超連結
即「超鏈結」，是將滑鼠移到在附有超連結的圖片或文字上，按一下左
鍵，就可以立刻連到這個超連結所指定的內部網頁或者是其他網站上的位置去瀏
覽。
 HomePage 利用ＨＴＭＬ寫成，可以用瀏覽器看到的超文件。中文翻做
【首頁】、【家頁】、【烘培雞】、【烘培機】、或【烘培姬】。
 Browser 瀏覽器 (IE 、 Netscape)
 HTTP (Hyper Text Transmission Protocol. 超文件傳
輸協定）
 ISP (Internet Service Provider)
網路服務公司的統稱，以出租數據線路的方式提供使用者使用國
際網路的服務；目前國內較著名的廠商有 Hinet ， Seednet 等等
．
 FTP (File Transfer Protocol) ：
TCP/IP 用來做檔案傳輸的一種應用層的通信協定
 TCP/IP
控制協定 / 網際網路協定 (Transmission Control
Protocol/Internet Protocol) 是目前 Internet 所使用的網
路通訊協定標準。
 URL(Uniform Resource Locator)
在ＷＷＷ的世界裡，大家統一都用ＵＲＬ來說明地址。Ｕ niform
Ｒ esource Ｌ ocator 中文翻成『一致資源定位器』。ＵＲＬ格
式分成兩部份，第一個部份用來指定存取方式，第二個部份用來
指定位址，兩者之間以： // 符號隔開。如下所示 :
scheme://host.domain[:port]/path/filenam
以下是一常見的ＵＲＬ格式。
http://www.csie.nctu.edu.tw
gopher://gopher.csie.nctu.edu.tw
ftp://nctuccca.nctu.edu.tw
telnet://bbs.csie.nctu.edu.tw/
news:tw.bbs.comp.www
mailto:jglee@csie.nctu.edu.tw
基本概念－網頁編寫軟體
 一般文件編輯程式（如：記事本、
Word 、 Excel 、 PowerPoint… ）
 文件式網頁編輯程式（如： HTMLabc、 HotDog
…. ）
 所見即所得網頁編輯程式（如：
MicroSoft FrontPage、 Macromedia Dreamwaver…)
HTML 入門語法
網頁組成元素
 文字
 圖片
 超連結
 網址
網站建置流程
（二頁以上的網頁才叫網站）
 主題選定
 架構決定
 工具取得
 網頁編寫
 網頁空間
 網頁上傳
 網頁更新
HTML 標註的格式
 通常 HTML 的標註是以成對的方式出現
的，其格式如下：
 ＜標註名稱「屬性名稱＝參數… ]> 內容＜ / 標註名稱＞
 凡是在 < 標註 > 和 </ 標註＞之間的內容均會受到這個標註
的影響
 但是有少部份的標註，加上結尾標註反而覺得累贅，因此在習慣
上也有不加結尾標註的。其格式如下：
 < 標註名稱 >
基本概念－
HTML 文件基本架構
<html> 以 <html>
<head> 開頭
<title> 文件標題 </title> 表頭區
　:
</head>
<body>
　:
主體區
　:
</body>
</html> 以 </html>
結尾
HTML 語法： <HTML>…</HTML>
說明：宣告此文件為 HTML 文件與結束 HTML 文件 .
HEAD 語法： <HEAD></HEAD>
說明：標示 HTML 文件標頭的開始與結束，可省略不寫 .
標題語法： <TITLE>…</TITLE>
說明：用來設定 HTML 文件的標題名稱，這個標題會在瀏覽器的左上方
顯
示出來 .
背景語法： <BODY>…</BODY>
屬性：
背景圖片： BACKGROUND=” 圖檔所在之 URL”
背景顏色： BGCOLOR=”#RRGGBB” ， R 、 G 、 B=0 ～ F
文字顏色： TEXT=”#RRGGBB” ， R 、 G 、 B=0 ～ F
超連結顏色： LINK=”#RRGGBB” ， R 、 G 、 B=0 ～ F
瀏覽過超連結顏色： VLINK=”#RRGGBB” ， R 、 G 、 B=0 ～ F
使用中超連結顏色： ALINK=”#RRGGBB” ， R 、 G 、 B=0 ～ F
HTML 文件基本架構
【練習一】
<HTML>
<HEAD><TITLE> 我是標題 </TITLE></HEAD>
<BODY TEXT="#808080" LINK="#008000" VLINK="blue" ALINK="yellow">
<Center>This is a test!!<br>
<a href=http://www.sinica.edu.tw>Sinica 中央研究院 </a>
</Center>
</BODY>
</HTML>
基本語法介紹 - 背景顏色
 設定文件背景顏色
 RGB 值 - RR GG BB 表示紅綠藍三色的十六進制
數值。
每種顏色的十六進制數值為 00 到 FF 之間。
某些顏色的 RGB 值也可以用名稱表示 :
 顏色表、色彩識別器、網頁調色盤、
色碼轉換器、色票產生器 ……
【練習】
<html>
<head>
<title> 背景顏色 </title>
</head>
<body bgcolor=#rrggbb>
</body>
</html>
基本語法介紹 - 超連結
語法： <A HREF=” 欲連結檔案之 URL” >…</A>
說明：
在 WWW 中使用 URL （ Uniform Resource Locator ）來指出一個在
網路上的文件或檔案的地址。
URL 的基本語法：網路協定 ://URL 地址 [:PORT]/PATH/FILE
網路協定可以是 File 、 HTTP 、 Gopher 、 WAIS 、 News 及
Telnet 。
【練習】
<HTML>
<head>
<title> 超連結練習 </title>
</head>
<BODY>
<a href=“http://www.sinica.edu.tw”> 中央研究院 </a>
</BODY>
</HTML>
基本語法介紹－使用超連結傳送電子郵件
 可使用超連結的設定來指定電子郵件的
收件人的電子郵件位址。
 【語法】
 <a href=mailto: 電子郵件位址 > 內容
</a>
【練習】
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=Big 5">
<TITLE> 使用超連結來傳送電子郵件 </TITLE>
</HEAD>
<BODY>
<P> 請將對此網頁內容的意見或感想，
<A
HREF="mailto:service@gate.sinica.edu.tw">service@gate.sinica.edu
.tw</A>
傳送至此電子郵件帳號。
</P>
</BODY>
</HTML>
基本語法介紹 - 部分文字顏色
 文字顏色表示法
 COLOR=“#RRGGBB” ， R 、 G 、 B=0 ～ F
【練習】
<HTML>
<BODY>
<CENTER>
<FONT SIZE="7" COLOR="FF0000"> 紅色字
</FONT><BR>
<FONT SIZE="7" COLOR="00FF00"> 綠色字
</FONT><BR>
<FONT SIZE="7" COLOR="0000FF"> 藍色字
</FONT><BR>
<FONT SIZE="7" COLOR="#000000"> 黑色字
</FONT><BR>
</CENTER>
</BODY>
</HTML>
基本語法介紹 - 字體大小變化
設定字體的大小，通常用於標題處。
語法：
<Hi>…</Hi> ， I=1…6, <H1></H1> 是最大的字， <H6></H6>
是最小的字
【練習】
<HTML>
<BODY>
<CENTER>
<H1> 一號字 </H1>
<H2> 二號字 </H2>
<H3> 三號字 </H3>
<H4> 四號字 </H4>
<H5> 五號字 </H5>
<H6> 六號字 </H6>
</CENTER>
</BODY>
</HTML>
基本語法介紹 - 字體大小變化
設定字體的大小，通常用於文字變化。
語法： <FONT>…</FONT>
屬性：
• 文字大小： SIZE=“n” ， n=1…7
【練習】
<HTML>
<BODY>
<CENTER>
<FONT SIZE="1"> 一號字 </FONT><BR>
<FONT SIZE ="2"> 二號字 </FONT><BR>
<FONT SIZE ="3"> 三號字 </FONT><BR>
<FONT SIZE ="4"> 四號字 </FONT><BR>
<FONT SIZE ="5"> 五號字 </FONT><BR>
<FONT SIZE ="6"> 六號字 </FONT><BR>
<FONT SIZE ="7"> 七號字 </FONT><BR>
</CENTER>
</BODY>
</HTML>
基本語法介紹 - 字體樣式
– 設定字體樣式
語法： <B>…</B>
說明：這對標籤是用來將標示符號內的文字以粗體字顯示。
語法： <I>…</I>
說明：這對標籤是用來將標示符號內的文字以斜體字顯示。
語法： <U>…</U>
說明：這對標籤是用來將標示符號內的文字以有加底線的文字顯示
【練習】
<HTML>
<BODY>
<CENTER>
<FONT SIZE="6">
一般字 <BR>
<B> 粗體字 </B><BR>
<I> 斜體字 </I><BR>
<U> 加底線 </U><BR>
</FONT>
</CENTER>
</BODY>
</HTML>
基本語法－水平線
 水平線的顏色與版面的背景色相關，如白色底
色水平線為灰色，粉紅色底色水平線則為紅色。
此外，水平線的長度，寬度和位置還可以再設
定：
 水平線的寬度，＜ hr size=N ＞ (N 為
1,2,3,....) 。
 長度＜ hr width=N% ＞ (N 為 1,2,.....99) 。
 畫面位置＜ hr align=left ＞ (left 可替換為
center 、 right)
 水平線的顏色 <hr color=#rrggbb>
【練習】
<HTML>
<head>
<title> 水平線練習 </title>
</head>
<BODY>
<HR ALIGN="left" WIDTH=60% SIZE=3>
<hr width=50 size=5 align="right">
</BODY>
</HTML>
基本語法介紹 - 圖片
– 圖片
– 【語法】
– <IMG SRC=” 圖檔 URL” alt=“ 替代文字” width=*
height=* >…</IMG>
– 屬性：
– SRC = “ 圖形檔檔名”
– Alt 是為了在瀏覽器中指定代替圖片顯示的文字。
– Width 寬度
– Height 高度
【練習】
<HTML>
<head>
<title> 圖形展示 </title>
</head>
<BODY>
<img src="http://www.sinica.edu.tw/~nick/images/000.gif"> 包子 I </img>
<br>
<img src=“images/001.gif“ alt= 會動的包子 width=“90” height=“20%”>
包子 II </img>
</BODY>
</HTML>
基本語法介紹－背景圖片
 欲在瀏覽器畫面上看到可美觀的畫面時可使用下列語法來加入圖
片。但由於所讀取進來的圖片會以連續的方式來顯焉，無法作部
分的顯示或在中途變更設定。因此，儘可能地避免使用檔案過大
的圖片檔。
 【語法】
 <body background=“ 圖檔名稱” >…</body>
【練習】
<html>
<head>
<title> 背景 </title>
</head>
<body background=images/blue.jpg>
</body>
</html>
基本語法介紹－段落
 該標題靠左對齊 : <Hn ALIGN = LEFT>...</Hn> ( 預設值 )
 該標題置中對齊 : <Hn ALIGN = CENTER>...</Hn>
 該標題靠右對齊 : <Hn ALIGN = RIGHT>...</Hn>
 該段內文靠左對齊 : <P ALIGN = LEFT>...</P> ( 預設值 )

 該段內文置中對齊 : <P ALIGN = CENTER>...</P>
 該段內文靠右對齊 : <P ALIGN = RIGHT> ...</P>
【練習】
<HTML>
<HEAD>
<TITLE> 歸去來辭 </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = CENTER><FONT COLOR = RED>
歸去來辭　　　－－陶淵明 </FONT></H1>
余家貧，耕植不足以自給。幼稚盈室，缾無儲粟。生生所資，未見其術。親故多余為長
吏，脫然有懷，求之靡途。 ... <HR><BR>
<P ALIGN = CENTER><FONT COLOR=BLUE> 歸去來兮！田園將蕪胡不歸？ <BR>
既自以心為形役，奚惆悵而獨悲？ <BR> 悟已往之不諫，知來者之可追； <BR>
實迷途其未遠，覺今是而昨非。 <BR> 舟遙遙以輕颺，風飄飄而吹衣。 <BR>
問征夫以前路，恨晨光之熹微。 <BR><BR>
乃瞻衡宇，載欣載奔，僮僕歡迎，稚子候門。 <BR> 三徑就荒，松菊猶存。
<BR>...</FONT></P>

</BODY>
</HTML>
基本語法介紹－列表
HTML 提供一些列表式的標籤可以做出簡單列表。
有編號列表 (Ordered List)
語法：
<OL>
<LI> 文字序列一
<LI> 文字序列二
…
</OL>
說明：在每一個序列之前自動加上由 1. 開始的數字編號 .
無編號列表（ Unordered List ）
語法：
<UL>
<LI> 有序文字一
<LI> 有序文字二
…
</UL>
說明：在每一個序列之前自動加上‧的符號 .
基本語法介紹－列表
敘述式列表 (Definition List)
語法：
<DL>
<DT> 文字或 <DD> 文字
…
</DL>
說明：簡單的項目格式編排，使用 <DT> 可以讓字不縮排以表示
為上一層，
<DD> 會讓字往右縮排表示成下一層
有編號列表【練習】
<HTML>
<BODY>
<CENTER>
<OL>
<LI><FONT SIZE=”7”> 第一列 </FONT>
<LI><FONT SIZE=”7”> 第二列 </FONT>
<LI><FONT SIZE=”7”> 第三列 </FONT>
</OL>
</CENTER>
</BODY>
</HTML>
無編號列表【練習】
<HTML>
<BODY>
<CENTER>
<UL>
<LI><FONT SIZE=”7”> 第一列 </FONT>
<LI><FONT SIZE=”7”> 第二列 </FONT>
<LI><FONT SIZE=”7”> 第三列 </FONT>
</UL>
</CENTER>
</BODY>
</HTML>
敘述式列表【練習】
<HTML>
<BODY>
<CENTER>
<DL>
<DT><FONT SIZE=”2”> 第一列 </FONT>
<DD><FONT SIZE=”2”> 第二列 </FONT>
<DD><FONT SIZE=”2”> 第三列 </FONT>
<DT><FONT SIZE=”2”> 第四列 </FONT>
<DD><FONT SIZE=”2”> 第五列 </FONT>
<DD><FONT SIZE=”2”> 第六列 </FONT>
</DL>
</CENTER>
</BODY>
</HTML>
基本語法補充
– 其他標籤
語法： 
說明：由  所夾起來的文字內容將會被視為註解瀏覽
器不會顯示在畫面上。
語法： <P>…</P>
說明：用來表示段落
語法： <CENTER>…</CENTER>
說明：將標籤所作用的文字給置中對齊。
語法： <BR>
說明：換行
【練習】
<html>
<body>

<P> 段落 </P>
<CENTER> 置中對齊 </CENTER>
<p> 這是一個換行的測試如果有 <BR><BR> 就會換行 </p>
</body>
</html>
基本語法補充
– 特殊字元
– HTML 中有四個字元（ < 、 > 、 & 、”）是有特殊意義的，不能夠向一般的
字
– 或符號正常顯示。因此如果要在瀏覽器上面顯示這四個字元就要使用下述
– 的表示法來取代，這樣瀏覽器才能夠正常的顯示（ < 、 > 、 & 、”）四個字
– 元。此外還有空白碼（ space ）一般的瀏覽器在顯示一個空白碼時是正常
– 的，但是在連續好幾個空白碼的情況時，瀏覽器是會當作一個空白碼來顯
– 示，此時就必須要使用其他的表示法來取代空白碼，瀏覽器才能正確的顯
– 示。
–
– 字元表示法
– < <
– > >
– & &
– “ "
– space
HTML 進階語法
進階語法－表格
 <TABLE> 產生表格
 <TABLE BORDER> 產生有框線的表格
<CAPTION> 表格標題
 <TH> 定義欄位標題
 <TR> 定義橫列
 <TD> 定義橫列中的資料
【練習】
<HTML>
<head>
<title> 表格練習 </title>
</head>
<BODY>
<TABLE BORDER=5>
<TR><TH> 標題一 </TH ><TH > 標題二 </T H></TR>
<TR><TD> 第一格 </TD><TD> 第二格 </TD></TR>
<TR><TD> 第三格 </TD><TD> 第四格 </TD></TR>
</TABLE>
</BODY>
</HTML>
進階語法－框架
 框架 (Frame) 的主要功能在允許一個瀏覽器視窗可以分割成多
個小視窗，每個小視窗用來容納各別的 HTML 檔案。格式如下
：
 <HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<FRAMESET 屬性 >
<FRAME SRC=" 第一個小視窗所要讀入的 HTML 檔案 ">
<FRAME SRC=" 第二個小視窗所要讀入的 HTML 檔案 ">
...
</FRAMESET>
</HTML>
1. 首先，右邊的這個視窗，一共分
為 1 、 2 、 3 三個框架，每一
個框架，各有其顯示的內容分別
是 a.htm 、 b.htm 、 c.htm 三個
檔案。然而左下角的那個
index.htm 是做什麼用的？
2. 原來，左下角的這個檔案
index.htm ，就是要告訴電腦，我
們要將畫面分割成這樣，也就是
說，所有 Frame 的標籤，其實
都只擺在 index.htm 這個檔案
裡。
3. 這樣明白了？總之，您要分割
幾個框框，就一定會有幾個對應
的 html 檔案，另外，還會多一個
檔案是來告訴電腦要如何分割的。
（也就是例中的 index.htm 檔
啦！）
 COLS="120,*"
就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可
以切成三個，很簡單只要寫成 COLS="30,*,50" （數字隨便您自
己調整啦！），依此類推，四個以上當然就是四組數字啦！
 ROWS=“120,*”
就是橫向切割畫面，也就是將畫面上下分開，切法同上。
 scrolling="no"
設定是否要顯示捲軸， YES 是要顯示捲軸， NO 是無論如何都不
要顯示， AUTO 是視情況顯示。
 noresize
設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參
數，使用者可以很容易的拉動框架，改變其大小。
【練習】
<HTML>
<HEAD>
<TITLE> 框窗實作 </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="http://www.sinica.edu.tw/" >
　 <FRAMESET ROWS="100,*">
　　 <FRAME SRC="http://www.pchome.com.tw">
　　 <FRAME SRC="http://www.yam.com">
　 </FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
【練習】
<html>
<head>
<title> 多重頁框 </title>
</head>
<frameset rows="30%,*"> 
<frame src="top.htm" >
<frameset cols="30%,*">
<frame src="right.htm">
</frameset>
</frameset>
</html>
進階語法－自動換頁
 當你的網頁想要自動連結到其他網頁。
 【語法】
<meta http-equiv=“refresh” content=“time”; url=“ 欲連接網址 ">
【練習】
<HTML>
<HEAD>
<TITLE> 自動換頁 </TITLE>
<meta http-equiv="refresh" content="5;url=http://www.sinica.edu.tw">
</HEAD>
<BODY>
五秒鐘後將自動連向中央研究院首頁；若五秒鐘後無法連結。
請按下列連結，謝謝！
<a href=http://www.sinica.edu.tw>http://www.sinica.edu.tw</a>
</BODY>
</HTML>
進階語法－背景音樂
 【語法】
 <EMBED SRC="mid/rain.mid" WIDTH=145 HEIGHT=60 AUTOSTART=TRUE|FALSE
HIDDEN=TRUE|FALSE LOOP=TRUE|FALSE|VALUE></EMBED>
 此語法用以設定背景音樂，此語法可放在 BODY 中任
何位置，在放置的地方會出現一個播放音樂的小視窗。
WIDTH 用以設定小視窗之寬度， HEIGHT 設定小視窗
之高度，如果不要顯示小視窗，可設 WIDTH=2
HEIGHT=0
 （最好不要設成 WIDTH=0 HEIGHT=0 ），或設
HIDDEN=TRUE 。 AUTOSTART=TRUE 表示首頁一
讀進來就播放背景音樂（相對值是 FALSE ，待使用者
按下 PLAY 之後才會播放音樂）。 LOOP=TRUE 表
示循環播放不停止， LOOP=2 表示播放二次，其餘類
推。
【練習】
<html>
<head>
<title> 背景音樂 </title>
<head>
<body>
<EMBED SRC=” http://www.tacocity.com.tw/ala/midi/ct/ct4/honor.mid"
WIDTH=145 HEIGHT=60 autostart=false></embed>
</body>
</htm>
進階語法－跑馬燈
 當我們在參觀別人的網頁時，是否常看
到跑來跑去的圖片或文字呢？其實很簡
單就可以做出來囉！
 【語法】
 <MARQUEE behavior=alternate width=100%><IMG
SRC=“images/005.gif” border=0><FONT color=#0bcdef> 圖片和文字都
可以呦！ </FONT></MARQUEE>
 BEHAVIOR 屬性可以控制跑馬燈的捲動效果。
 SLIDE 效果使文字捲進來後碰到邊界後，就停下來，不再移動了。
ALTERNATE 效果使文字在限定的範圍內左右二邊交替移動。
 WIDTH 屬性可以控制跑馬燈的出現長度。
 LOOP 則可控制跑馬燈捲動的次數。
 DIRECTION 屬性可以控制跑馬燈的捲動方向。
【練習】
<html>
<head>
<title> 跑馬燈 </title>
</head>
<body>
<MARQUEE BEHAVIOR=ALTERNATE width=50%>
<IMG SRC="http://www.sinica.edu.tw/~nick/images/005.gif"
border=0>
<FONT color=#0bcdef> 圖片和文字都可以呦！
</FONT></MARQUEE>
<MARQUEE DIRECTION=LEFT> 我往左跑 </MARQUEE><P>
<MARQUEE DIRECTION=RIGHT> 我往右跑 </MARQUEE><P>
</body>
</html>
進階語法－ CSS 介紹
 超連結去底線
 【語法】
 1. 在 <head>…</head> 加入下列語法
 <style>
 a{text-decoration:none}
 </style>
 2. 在 <body>…</body> 加入下列語法
 <a style="text-decoration: none" href=" 網址 "> 連結名稱 </a>
【練習】
<html>
<head>
<title>CSS 應用 </title>
<style>
a{text-decoration:none}
</style>
</head>
<body>
<a style=“text-decoration: none“ href=“http://www.sinica.edu.tw”> 中央
研究院 </a>
</body>
</html>
進階語法－加入 JavaScript
 七彩流星
七彩流星原始碼 I
 <html>
 <head>
 <title></title>  document.write('</div></div>');
 </head>  ini=1;
 <body>  gstep=1;
 <script language="JavaScript">  function iMouse(){
 
layer.left=Xdelay+180*Math.cos((5*Math.  </script>
sin((currStep-  </body>
15.99)/10))+i*70)*Math.sin((currStep)/10)  </html>
*Math.cos((currStep+i*25)/10);
 }
 currStep+=step;
 }
進階語法－加入 JavaScript
 最後更新日期【練習】
 <html>
 <head>
 <title> 最後更新日 </title>
 </head>
 <body>
 <script language="JavaScript">
 
 </script>
 </body>
 </html>
網頁配色
色彩所傳遞的意義
熱情、浪漫、火焰、活力、憤怒、暴力、侵略，紅色
在很多文化中代表的是停止或危險的訊號，用於警告
或禁止一些動作。
創造、謎、忠誠、神秘、稀有，紫色在某些文化中與
死亡有關。
忠誠的、安全、科技、理智、速度、保守、寧靜、冷
漠、悲傷。
自然、穩定、健康、新鮮、成長、忌妒，在北美文化
中，綠色代表的是「行與環保意識有關，也經常被連
結到有關財政方面的事物。
網頁配色
色彩所傳遞的意義
明亮、光輝、疾病、懦弱。
能力、精緻、現代感、死亡、病態、邪惡。
純潔、天真、潔淨、真理、和平、冷淡、貧乏，白色
在中華文化中也代表著死亡的顏色。
補充說明
四種主要的互補色為：
1‧ 黑色與白色
2‧ 淺粉藍色與紅色
3‧ 亮綠色與粉紅色
4‧ 藍色與黃色
如何選擇最適當的色彩組合
色彩調和原理：
1‧ 同色調和：單一顏色，只是深淺、色
調及明暗度不同。
2‧ 近似色調和：使用鄰近的顏色或在色
環上很接近的顏色做調和。
3‧ 互補色調和：使用色環上兩個相對的
顏色做調和。這樣的顏色組合通常
可
以提供最大程度的對比感覺，但若
過
份使用使會流於誇大。
如何選擇最適當的色彩組合
色彩調和原理：
4‧ 對比色調和：使用一種顏色，再加上
其互補色旁邊的兩個顏色做調和
。對
比色調和能提供比互補色調和較
柔和
的對比。
5‧ 三角調和：使用色環上三個等距離的
顏色。
6‧ 雙互補調和：使用兩組互補顏色。
THE END

薇思庭HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

薇思庭HTML

Uploaded by

Copyright:

Available Formats

HTML 網頁製作

 該段內文靠左對齊 : <P ALIGN = LEFT>...</P> ( 預設值 )

You might also like