專業 HTML 網頁設計

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

陳錦輝陳錦輝

HTML/DHTML/CSS/JavaScript

P303

22

第三章整齊的網頁第三章整齊的網頁 3.1 3.1 段落編排段落編排 3.2 3.2 線條線條 (<hr>)(<hr>) 3.3 3.3 網頁網頁 DIYDIY

33

3.13.1 　段落編排　段落編排網頁中的任何文字段落，預設皆以靠左對齊並隨網頁中的任何文字段落，預設皆以靠左對齊並隨

著瀏覽器視窗的寬度自動換列，同時會忽略著瀏覽器視窗的寬度自動換列，同時會忽略【【 EnterEnter 】】鍵所造成的換列以及忽略多餘空白字鍵所造成的換列以及忽略多餘空白字元。元。

範例範例 3-13-1 ：：內容內容執行結果

當調整瀏覽器視窗大小後，瀏覽器會自動幫當調整瀏覽器視窗大小後，瀏覽器會自動幫<<body>body> 的內容換列顯示，而不會在下方出現水平的內容換列顯示，而不會在下方出現水平捲動軸。捲動軸。執行結果執行結果

44

3.1.13.1.1 

< br> 標籤是一個獨立標籤標籤是一個獨立標籤 (( 空標籤空標籤 )) ，它可以讓，它可以讓文章按照我們想要的方式換列，不會因為瀏覽器文章按照我們想要的方式換列，不會因為瀏覽器視窗的大小而影響了文章排版的段落順序。視窗的大小而影響了文章排版的段落順序。

範例範例 3-23-2 ：：內容內容執行結果執行結果

55

3.1.23.1.2 　　 

<nobr> 、、 標籤則是一個成對標籤，凡被標籤則是一個成對標籤，凡被包含在包含在 <nobr> 標籤內的所有資料都不會因為瀏覽標籤內的所有資料都不會因為瀏覽器寬度不足而產生自動換列的現象。器寬度不足而產生自動換列的現象。


66

在範例在範例 3-13-1 的執行結果中，瀏覽器會將連續的半的執行結果中，瀏覽器會將連續的半形空白字元，以一個空白字元來取代。形空白字元，以一個空白字元來取代。

解決的方法有三種：解決的方法有三種： (1)(1) 使用使用 <<pre>pre> 、、 </pre></pre> 成對標籤來包裝資料。成對標籤來包裝資料。 (2)(2) 使用全形空白字元。使用全形空白字元。 (3)(3) 使用特殊字元『使用特殊字元『 & nbsp; 』』來代替半形空白字元。來代替半形空白字元。

3.1.33.1.3 　　 <pre><pre>

77

3.1.33.1.3 　　 <pre><pre>

<<pre>pre> 、、 </pre></pre> 標籤則是一個成對標籤，它可以標籤則是一個成對標籤，它可以保留原始文字排版。例如：不忽略空白字保留原始文字排版。例如：不忽略空白字元、元、 ENTERENTER 鍵所產生的換列不會被忽略等。鍵所產生的換列不會被忽略等。


88

3.1.43.1.4 　　 

<p> 標籤是一個獨立標籤標籤是一個獨立標籤 (( 空標籤空標籤 )) 也是成對標籤，也是成對標籤，它可以產生一個段落現象。它可以產生一個段落現象。

 所產生的段落現象與所產生的段落現象與 < br> 所產生的換列現象所產生的換列現象是不一樣的，它除了會換列之外，還會多出一個是不一樣的，它除了會換列之外，還會多出一個空白列，用來與下一段落做區隔。空白列，用來與下一段落做區隔。

<p> 標籤以成對標籤格式出現時，被包含的文字標籤以成對標籤格式出現時，被包含的文字會被當作同一個段落，該段落與後面的文字間會會被當作同一個段落，該段落與後面的文字間會產生換列與空白列的現象。產生換列與空白列的現象。

99

3.1.43.1.4 　　 

<p> 標籤以獨立標籤出現時，則標籤以獨立標籤出現時，則 <p> 標籤出現處標籤出現處會產生換列與空白列的現象。會產生換列與空白列的現象。


1010

3.1.53.1.5 　　

處理單純的空白字元，可以利用『處理單純的空白字元，可以利用『 & nbsp; 』』來代來代替半形空白字元。替半形空白字元。

『『 & nbsp; 』』是一個非換列符號，不過一般在實務是一個非換列符號，不過一般在實務上，也可以利用兩個『上，也可以利用兩個『 & nbsp; 』』來代替一個半形來代替一個半形空白字元。空白字元。


1111

直接使用全形空白字元來解決超過直接使用全形空白字元來解決超過 11 個以上半形個以上半形空白字元被瀏覽器忽略的問題，這是因為全形空空白字元被瀏覽器忽略的問題，這是因為全形空白字元被視為特殊文字的一種。白字元被視為特殊文字的一種。

瀏覽器將忠實地把字元反映在視窗中，而瀏覽器將忠實地把字元反映在視窗中，而 11 個全個全形字元的寬度形字元的寬度 =2=2 個半形字元的寬度。個半形字元的寬度。


3.1.63.1.6 　全形空白字元　全形空白字元

1212

3.1.73.1.7 　特殊字元　特殊字元具有特殊意義的字元，這些特殊字元若加到網頁具有特殊意義的字元，這些特殊字元若加到網頁

時，瀏覽器無法正確顯示該字元。時，瀏覽器無法正確顯示該字元。

詳細的特殊字元對照表如下：詳細的特殊字元對照表如下：

範例範例 3-83-8 ：：內容執行結果範例範例 3-93-9 ：：內容執行結果

特殊字元特殊字元特殊字元實體參考符號特殊字元實體參考符號<< &<lt;

>> >>

"" ""

&& &&

1313

3.1.83.1.8 　　 <blockquote><blockquote>

<<blockquote>blockquote> 、、 </blockquote></blockquote> 是成對標籤，標是成對標籤，標籤內的文字會向右縮排籤內的文字會向右縮排 55 格空白字元，並且可以格空白字元，並且可以透過巢狀的透過巢狀的 <<blockquote>blockquote> 標籤達到向右縮排標籤達到向右縮排 1010格、格、 1515 格、格、 2020 格以上的空白字元效果。格以上的空白字元效果。

範例範例 3-103-10 ：：內容執行結果


1414

3.1.93.1.9 　　 <address><address>

HTMLHTML 特別規劃使用特別規劃使用 <<address>address> 標籤來表示書信標籤來表示書信專用的頭尾格式，並且只要搭配專用的頭尾格式，並且只要搭配 <<blockquote>blockquote> 標標籤就可以完成一個正式的書信格式。籤就可以完成一個正式的書信格式。

<<address>address> 標籤具有幾項特色：標籤具有幾項特色： (1)(1) 字型會以斜體顯示。字型會以斜體顯示。 (2)(2) 開頭與結尾處會自動換列，因此符合信件的名稱、開頭與結尾處會自動換列，因此符合信件的名稱、

簽名或地址的描述。簽名或地址的描述。


1515

3.1.103.1.10 　　 <center><center>

<center><center> 、、 </center></center> 是成對標籤，在是成對標籤，在 <center><center>與與 </center></center> 之內的所有文字都會置中對齊，且之內的所有文字都會置中對齊，且可放置於可放置於 <body><body> 標籤內的任何位置。標籤內的任何位置。


1616

3.1.113.1.11 　　 <xmp><xmp>

特殊字元『特殊字元『 &<lt; 』』與『與『 &>gt; 』』來代表標籤的來代表標籤的『『 << 』與『』與『 >> 』，可以看到某些標籤格式，並且』，可以看到某些標籤格式，並且這些標籤不會被瀏覽器解讀。這些標籤不會被瀏覽器解讀。

凡是被凡是被 <<xmp>xmp> 標籤所包含的所有內容，瀏覽器都標籤所包含的所有內容，瀏覽器都不會加以解讀，而直接輸出在網頁中。不會加以解讀，而直接輸出在網頁中。

1717

3.1.113.1.11 　　 <xmp><xmp>

【【 EnterEnter 】】鍵所造成的換列以及半形空白字元若鍵所造成的換列以及半形空白字元若放在放在 <<xmp>xmp> 標籤之內，不會被忽略。標籤之內，不會被忽略。

範例範例 3-143-14 ：：內容執行結果內容執行結果

1818

3.23.2 　線條　線條 <hr><hr>

<<hr>hr> 標籤為獨立標籤，可產生一個橫向線條，線標籤為獨立標籤，可產生一個橫向線條，線條前後會自動換列，以形成一條獨立的橫向線條。條前後會自動換列，以形成一條獨立的橫向線條。

線條的粗細、長短以及位置都可透過屬性來設定，線條的粗細、長短以及位置都可透過屬性來設定，這些屬性所代表的涵義如下表所列：這些屬性所代表的涵義如下表所列：

1919

3.23.2 　線條　線條 <hr><hr>


屬性屬性屬性值屬性值功能說明功能說明章節章節負面負面sizesize 數字數字用來設定線條的粗細用來設定線條的粗細 (( 預設值為預設值為 22)) 3.2.13.2.1 負面負面

widthwidth 百分比或點數百分比或點數用來設定線條的長度用來設定線條的長度 (( 預設值為預設值為100%100%))

3.2.23.2.2 負面負面

alignalign leftleft 、、 centercenter 、、 rigrightht

用來設定線條的位置用來設定線條的位置 (( 預設值為預設值為center)center) 3.2.33.2.3 負面負面

noshadenoshade 無無用來取消線條的陰影用來取消線條的陰影 3.2.43.2.4 負面負面

2020

3.2.13.2.1 　　 <hr> - size<hr> - size 屬性屬性其實線條的粗細可以改變，只要透過其實線條的粗細可以改變，只要透過 sizesize 屬性就屬性就

可以完成了。可以完成了。


2121

3.2.23.2.2 　　 <hr> - width<hr> - width 屬性屬性透過透過 widthwidth 屬性的設定，可以任意變換線條的長屬性的設定，可以任意變換線條的長

度，設定度，設定 widthwidth屬性的方法有兩種：屬性的方法有兩種： (1)(1) 按照瀏覽器寬度的比例按照瀏覽器寬度的比例 (( 百分比百分比 )) 來設定，稱為相來設定，稱為相

對設定，會隨著瀏覽器視窗寬度的改變而影響線條的對設定，會隨著瀏覽器視窗寬度的改變而影響線條的實際長度。實際長度。

(2)(2) 絕對設定，我們可以直接設定線條的像素點絕對設定，我們可以直接設定線條的像素點(pixel)(pixel) ，，不會隨著瀏覽器視窗的寬度而改變。不會隨著瀏覽器視窗的寬度而改變。


<hr width="N"> N是像素點(pixel)。

<hr width="M%"> M介於 1到 100 。

2222

3.2.33.2.3 　　 <hr> - align<hr> - align 屬性屬性橫向線條也可以透過常見的橫向線條也可以透過常見的 alignalign 屬性改變線條的屬性改變線條的

對齊方式，對齊方式一共有對齊方式，對齊方式一共有 33 種，分別是靠左對種，分別是靠左對齊、置中對齊、靠右對齊。齊、置中對齊、靠右對齊。屬性值：屬性值：

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


2323

當線條比較粗的時候，線條中央是空白的，如此當線條比較粗的時候，線條中央是空白的，如此可以造成浮雕的效果，這種現象稱為線條的陰影。可以造成浮雕的效果，這種現象稱為線條的陰影。

若要將陰影取消，只要設定若要將陰影取消，只要設定 noshadenoshade 屬性就可以屬性就可以達成。達成。 noshadenoshade 屬性是一個特殊的屬性，由於只屬性是一個特殊的屬性，由於只有設定與非設定兩種狀態，因此在有設定與非設定兩種狀態，因此在 HTMLHTML 中中noshadenoshade 屬性並沒有屬性值。屬性並沒有屬性值。


3.2.43.2.4 　　 <hr> - noshade<hr> - noshade

2424

3.33.3 　網頁　網頁 DIYDIY

請翻閱至請翻閱至 18.318.3 節，這次將整理網頁內容，加入節，這次將整理網頁內容，加入 、、 <hr/><hr/> 等標籤，使得等標籤，使得 DIYDIY 網頁看起來更整網頁看起來更整齊。齊。

2525

本章習題本章習題

專業 HTML 網頁設計

Documents