專業 HTML 網頁設計

專業專業 HTMLHTML 網頁設網頁設計計

陳錦輝陳錦輝

HTML/DHTML/CSS/JavaScript

P303

22

第四章　網頁背景與文字排版第四章　網頁背景與文字排版 4.1 4.1 版面排版版面排版 (<body>)(<body>) 4.2 4.2 文字排版文字排版 4.3 4.3 多功能文字排版多功能文字排版 ()() 4.4 4.4 網頁網頁 DIYDIY

33<body> 常用屬性列表

屬性屬性屬性值屬性值功能說明功能說明章節章節負面負面bgcolorbgcolor 顏色表示法顏色表示法用來設定網頁背景顏色。用來設定網頁背景顏色。 4.1.14.1.1 負面負面backgroundbackground 圖片路徑及檔名圖片路徑及檔名用來設定網頁背景圖片。用來設定網頁背景圖片。 4.1.24.1.2 負面負面texttext 顏色表示法顏色表示法用來設定網頁文字顏色。用來設定網頁文字顏色。 4.1.34.1.3 負面負面

bgpropertiesbgproperties fixedfixed 用來固定網頁背景圖片，用來固定網頁背景圖片，使得不隨垂直捲軸移動。使得不隨垂直捲軸移動。 4.1.44.1.4 非標準非標準

leftmarginleftmargin 距離距離 (pixels)(pixels) 用來設定網頁內容與瀏覽用來設定網頁內容與瀏覽器左邊界的距離。器左邊界的距離。 4.1.54.1.5 非標準非標準

4.14.1 　版面排版　版面排版 (<body>)(<body>)

本節將更深入地介紹本節將更深入地介紹 <<body>body> 控制標籤，並且透控制標籤，並且透過過 <<body>body> 標籤的眾多屬性來改變整個網頁的背標籤的眾多屬性來改變整個網頁的背景。以下是景。以下是 <<body>body> 標籤的常用屬性列表：標籤的常用屬性列表：

44圖 4-1 6 位數 16 進制的顏色表示法

4.1.14.1.1 <body> - bgcolor<body> - bgcolor 屬性屬性背景顏色所依靠的是背景顏色所依靠的是 <<body>body> 標籤的標籤的 bgcolorbgcolor 屬性，屬性，

來設定想要的顏色。來設定想要的顏色。

在在 HTMLHTML 中，顏色的表示方法可以分為兩大類：中，顏色的表示方法可以分為兩大類： (1)(1) 英文表示法英文表示法 (( 或稱為關鍵字表示法或稱為關鍵字表示法 )) ，也就是直接，也就是直接

以顏以顏色的英文名稱加以設定。色的英文名稱加以設定。

55

(2)16(2)16 進制表示法，以進制表示法，以 66 位數位數 1616 進制的數值來表示顏進制的數值來表示顏色，表示法『色，表示法『紅紅、、綠綠、、藍藍』』 33 原色的調色方式原色的調色方式

所構所構成。成。

前兩位數代表的是前兩位數代表的是『『紅色紅色』』的成分、中間兩位數代表的成分、中間兩位數代表的是的是『『綠色綠色』』的成分、最後兩位數代表的是的成分、最後兩位數代表的是『『藍色藍色』』的成分，數值由的成分，數值由 000~255000~255 ，也就是，也就是 1616 進制的進制的 00~00~FFFF 。。

其中成分越高者數值越大，因此，就像調水彩一樣，其中成分越高者數值越大，因此，就像調水彩一樣，當我們改變了當我們改變了 33 原色的比例之後，就會形成許多種顏原色的比例之後，就會形成許多種顏色，總共的變化應該有色，總共的變化應該有 1677721616777216 種顏色。種顏色。

4.1.14.1.1 <body> - bgcolor<body> - bgcolor 屬性屬性

66

圖 4-2 常見的顏色及顏色表示法

4.1.14.1.1 <body> - bgcolor<body> - bgcolor 屬性屬性

77

4.1.14.1.1 <body> - bgcolor<body> - bgcolor 屬性屬性範例範例 4-14-1 ：：

內容執行結果內容執行結果

範例範例 4-24-2 ：：內容執行結果內容執行結果

88

4.1.24.1.2 <<body> - backgroundbody> - background 屬屬性性

透過透過 <<body>body> 標籤的標籤的 backgroundbackground 屬性可以將某一屬性可以將某一張圖片設定為網頁的背景圖片。張圖片設定為網頁的背景圖片。

為了避免瀏覽器無法接受某些圖片格式，因此圖為了避免瀏覽器無法接受某些圖片格式，因此圖片格式最好選用片格式最好選用 JPEG(.jpg)JPEG(.jpg) 及及 GIF(.gif)GIF(.gif) 格式的圖格式的圖檔。檔。

範例範例 4-34-3 ：：內容內容執行結果執行結果

99

4.1.34.1.3 <<body> - textbody> - text 屬性屬性使用使用 <body><body> 的的 texttext 屬性可變更所有的文字顏色，屬性可變更所有的文字顏色，

顏色的設定方法同樣有顏色的設定方法同樣有 1616 進制表示法與關鍵字表進制表示法與關鍵字表示法兩種。示法兩種。

1010

4.1.4 <4.1.4 <body> - bgpropertiesbody> - bgproperties

只要將只要將 <<body>body> 標籤的標籤的 bgpropertiesbgproperties 屬性設為屬性設為『『 fixedfixed 』，』，背景圖片就不會隨著垂直捲軸移動。背景圖片就不會隨著垂直捲軸移動。

只對於只對於 IEIE 瀏覽器生效，瀏覽器生效， NetscapeNetscape 瀏覽器則不支瀏覽器則不支援該屬性。且該屬性並非援該屬性。且該屬性並非 HTML/XHTMLHTML/XHTML 的標準的標準屬性。屬性。

1111

4.1.54.1.5 <<body> - leftmarginbody> - leftmargin 屬性屬性 <<body>body> 標籤可以設定網頁的上邊界、左邊界與瀏標籤可以設定網頁的上邊界、左邊界與瀏

覽器視窗的距離。覽器視窗的距離。

leftmarginleftmargin 可設定文件內容左邊界至瀏覽器左邊界可設定文件內容左邊界至瀏覽器左邊界的距離。的距離。

1212

4.1.64.1.6 <<body> - topmarginbody> - topmargin 屬性屬性 TopmarginTopmargin 可以設定文件內容上邊界至瀏覽器上可以設定文件內容上邊界至瀏覽器上

邊界的距離。邊界的距離。

1313

4.24.2 　文字排版　文字排版除了可以透過除了可以透過 <<body>body> 的的 texttext 屬性來設定整個網屬性來設定整個網

頁文字的顏色之外，針對網頁中個別文字的部分，頁文字的顏色之外，針對網頁中個別文字的部分，也可以利用許多的也可以利用許多的 HTMLHTML 控制標籤來設定文字的控制標籤來設定文字的字型變化。字型變化。

在在 HTMLHTML 中，一般字型的設定可以分為兩大類標中，一般字型的設定可以分為兩大類標籤：實體字型控制標籤與邏輯字型控制標籤。籤：實體字型控制標籤與邏輯字型控制標籤。

這兩種標籤同樣都可以達到某些字型的設定，如這兩種標籤同樣都可以達到某些字型的設定，如下表：下表：

1414

效果效果標籤標籤標籤類型標籤類型

粗體粗體<………….…..…...b>………….…..…... 實體字型控制標籤實體字型控制標籤<……….strong>………. 邏輯字型控制標籤邏輯字型控制標籤

斜體斜體

<………….…………i>………….………… 實體字型控制標籤實體字型控制標籤<…………...…em>…………...… 邏輯字型控制標籤邏輯字型控制標籤<<var>……….……..</var>var>……….……..</var> 邏輯字型控制標籤邏輯字型控制標籤<<cite>……….…….</cite>cite>……….…….</cite> 邏輯字型控制標籤邏輯字型控制標籤

底線底線 <…………………..u>………………….. 實體字型控制標籤實體字型控制標籤

刪除線刪除線<<s>……………….….</s>s>……………….….</s> 實體字型控制標籤實體字型控制標籤<<strike>…………</strike>strike>…………</strike> 邏輯字型控制標籤邏輯字型控制標籤

細小字型細小字型 <<tt>…………….…….</tt>tt>…………….…….</tt> 實體字型控制標籤實體字型控制標籤HTML 字型設定標籤

4.24.2 　文字排版　文字排版

1515

4.2.14.2.1 <<h?>(h?>( 文字標題標籤文字標題標籤 ))

HTMLHTML 設計了設計了 66 種的標題控制標籤，分別是種的標題控制標籤，分別是<<h1>h1> 、、 <h2><h2> 、、 <h3><h3> 、、 <h4><h4> 、、 <h5><h5> 、、 <h6><h6>，，統稱為統稱為 <<h?>h?> 文字標題標籤。文字標題標籤。

<<h?>h?> 中的數字與標題字型大小恰好成反比，也就中的數字與標題字型大小恰好成反比，也就是說，當數字越大時，字型卻越小。是說，當數字越大時，字型卻越小。

除了會將字型的大小產生變化，字體也會加粗，除了會將字型的大小產生變化，字體也會加粗，<<h?>h?> 開始前與結束後都會產生自動換列現象，以開始前與結束後都會產生自動換列現象，以突顯標題。突顯標題。

1616

屬性屬性 alginalgin 可以設定標題對齊方式。可以設定標題對齊方式。屬性值：屬性值：

leftleft ：：標題靠左對齊。標題靠左對齊。 (( 預設值預設值 )) centercenter ：：標題置中對齊。標題置中對齊。 rightright ：：標題靠右對齊。標題靠右對齊。


4.2.14.2.1 <<h?>(h?>( 文字標題標籤文字標題標籤 ))

1717

<b> 、、 與與 <strong> 、、 都是成對標都是成對標籤，在起始標籤至結束標籤內的文字會以粗體顯籤，在起始標籤至結束標籤內的文字會以粗體顯示。示。


4.2.24.2.2 <b> 、、

1818

4.2.34.2.3<i> 、、 、、 <var><var> 、、 <cite><cite>

 、、 ，， 、、 ，， <var><var> 、、 </var></var> ，，<cite><cite> 、、 </cite></cite> 都是成對標籤，在起始標籤至結都是成對標籤，在起始標籤至結束標籤內的文字會以斜體顯示。束標籤內的文字會以斜體顯示。

1919

 、、 是成對標籤，在起始標籤至結束標籤是成對標籤，在起始標籤至結束標籤內的文字會加上底線顯示。內的文字會加上底線顯示。


4.2.44.2.4 <u>

2020

<<s>s> 、、 </s></s> 與與 <<strike>strike> 、、 </strike></strike> 都是成對標都是成對標籤，在起始標籤至結束標籤內的文字中間會加上籤，在起始標籤至結束標籤內的文字中間會加上一條水平線，加上這條水平刪除線可以當作改錯一條水平線，加上這條水平刪除線可以當作改錯之用。之用。


4.2.54.2.5 <<s>s> 、、 <strike><strike>

2121

4.2.64.2.6 <<tt>tt>

<<tt>tt> 、、 </tt></tt> 是成對標籤，在起始標籤至結束標籤是成對標籤，在起始標籤至結束標籤內的文字會略為縮小。內的文字會略為縮小。

2222

<<big>big> 、、 </big></big> 是成對標籤，在起始標籤至結束是成對標籤，在起始標籤至結束標籤內的文字會被放大一級。例如：原本字型大標籤內的文字會被放大一級。例如：原本字型大小等級為小等級為 33 ，就會被放大為等級，就會被放大為等級 44 的字型大小。的字型大小。

範例：範例：內容內容執行結果執行結果

4.2.74.2.7 <<big>big>

2323

<small> 、、 是成對標籤，在起始標籤至是成對標籤，在起始標籤至結束標籤內的文字會被縮小一級。例如：原本字結束標籤內的文字會被縮小一級。例如：原本字型大小等級為型大小等級為 33 ，就會被縮小為等級，就會被縮小為等級 22 的字型大的字型大小。小。


4.2.84.2.8 <small>

2424

<sub> 、、 是成對標籤，在起始標籤至結束是成對標籤，在起始標籤至結束標籤內的文字被顯示成下標。標籤內的文字被顯示成下標。


4.2.94.2.9 <sub>

2525

<sup> 、、 是成對標籤，在起始標籤至結束是成對標籤，在起始標籤至結束標籤內的文字會被顯示成上標。標籤內的文字會被顯示成上標。


4.2.104.2.10 　　 <sup>

2626

4.2.114.2.11 　　 <<blink>blink>

<sup> 、、 是成對標籤，在起始標籤至結束是成對標籤，在起始標籤至結束標籤內的文字會被顯示成上標。標籤內的文字會被顯示成上標。

2727

特殊標籤特殊標籤字型效果字型效果

<<address>..</address>address>..</address> 字體較細並且為斜體，開始前與結束後會自動換列，適合用來表示住字體較細並且為斜體，開始前與結束後會自動換列，適合用來表示住址或址或 EmailEmail 。。 (( 第三章中亦有介紹第三章中亦有介紹 ))

<code>.………</code><code>.………</code> 字體較細且較大，並且字元間距也加寬了，適合用來表示程式碼。字體較細且較大，並且字元間距也加寬了，適合用來表示程式碼。<dfn>……………</dfn><dfn>……………</dfn> 定義某段文字時使用。定義某段文字時使用。<kbd>…..………</kbd><kbd>…..………</kbd> 字體較細且較大，並且字元間距也加寬了。字體較細且較大，並且字元間距也加寬了。<q>….………….…</q><q>….………….…</q> 為某段文字做說明時使用。為某段文字做說明時使用。<samp>……...</samp><samp>……...</samp> 字體較細且較大，並且字元間距也加寬了，適合用來表示某些訊息。字體較細且較大，並且字元間距也加寬了，適合用來表示某些訊息。

罕用的字型標籤列表

4.2.124.2.12 　特殊字型標籤　特殊字型標籤除了上述的標籤之外，除了上述的標籤之外， HTMLHTML 尚有一些較少用到尚有一些較少用到

的特殊字型標籤，其功能如下表：的特殊字型標籤，其功能如下表：

2828

4.2.134.2.13 　　 <<basefont>basefont> 在設定文字大小時，可以直接指定字型大小的等在設定文字大小時，可以直接指定字型大小的等

級，所以比起級，所以比起 <<big>big> 、、 來得更加方便許來得更加方便許多。多。

<<basefont>basefont> 標籤也可以配合下一節所介紹的標籤也可以配合下一節所介紹的<font> 標籤產生更多樣的字型變化。標籤產生更多樣的字型變化。

2929

<font> 標籤的特色是，只需要一個標籤就改變文標籤的特色是，只需要一個標籤就改變文字的『大小』、『顏色』、『字體』。字的『大小』、『顏色』、『字體』。

使用使用 <font> 標籤設定字體時，由於許多字體並非標籤設定字體時，由於許多字體並非瀏覽器本身所擁有，因此必須要瀏覽者的電腦中瀏覽器本身所擁有，因此必須要瀏覽者的電腦中裝有該字體，才能夠正確地以我們所希望的字體裝有該字體，才能夠正確地以我們所希望的字體顯示於瀏覽器中，否則就會改以電腦預設字體顯顯示於瀏覽器中，否則就會改以電腦預設字體顯示。示。

4.34.3 　多功能文字排版　多功能文字排版 ()()

3030

sizesize 屬性可以用來設定文字大小等級，它有兩種屬性可以用來設定文字大小等級，它有兩種設定方法：絕對設定與相對設定。設定方法：絕對設定與相對設定。

絕對設定指的是直接指定文字大小的等級絕對設定指的是直接指定文字大小的等級 (( 由由 1~1~77)) ，相對設定則是針對目前字型大小相對放大或，相對設定則是針對目前字型大小相對放大或縮小幾個等級，而目前字型大小則是由縮小幾個等級，而目前字型大小則是由 <font> 標標籤或籤或 <<basefont>basefont> 標籤的作用範圍決定。標籤的作用範圍決定。



4.3.14.3.1 < - sizefont> - size 屬性屬性

3131

colorcolor 屬性可以用來設定文字的顏色，它同樣可以屬性可以用來設定文字的顏色，它同樣可以使用使用 1616 進制顏色表示法及關鍵字顏色表示法來設進制顏色表示法及關鍵字顏色表示法來設定屬性值。定屬性值。


4.3.24.3.2 < - colorfont> - color 屬性屬性

3232

透過透過 faceface 屬性來設定文字的字體屬性來設定文字的字體 (( 或稱為字型或稱為字型 )) ，，例如：標楷體、仿宋體等等。例如：標楷體、仿宋體等等。


4.3.34.3.3 < - facefont> - face 屬性屬性

3333

4.44.4 　網頁　網頁 DIYDIY

請翻閱至請翻閱至 18.418.4 節，在節，在 18.418.4 節中，將原本單調的節中，將原本單調的DIYDIY 網頁改造成一個有漂亮背景以及各種字型變網頁改造成一個有漂亮背景以及各種字型變化的網頁。化的網頁。

3434

本章習題本章習題

專業 HTML 網頁設計

Documents

Transcript of 專業 HTML 網頁設計