專業 HTML 網頁設計

P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

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

3.1　段落編排 • 網頁中的任何文字段落，預設皆以靠左對齊並隨著瀏覽器視窗的寬度自動換列，同時會忽略【Enter】鍵所造成的換列以及忽略多餘空白字元。 • 範例3-1： • 內容執行結果 • 當調整瀏覽器視窗大小後，瀏覽器會自動幫<body>的內容換列顯示，而不會在下方出現水平捲動軸。 • 執行結果

3.1.1  • 標籤是一個獨立標籤(空標籤)，它可以讓文章按照我們想要的方式換列，不會因為瀏覽器視窗的大小而影響了文章排版的段落順序。 • 範例3-2： • 內容執行結果

3.1.2 • 、標籤則是一個成對標籤，凡被包含在標籤內的所有資料都不會因為瀏覽器寬度不足而產生自動換列的現象。 • 範例3-3： • 內容執行結果

3.1.3<pre> • 在範例3-1的執行結果中，瀏覽器會將連續的半形空白字元，以一個空白字元來取代。 • 解決的方法有三種： • (1)使用<pre>、</pre>成對標籤來包裝資料。 • (2)使用全形空白字元。 • (3)使用特殊字元『』來代替半形空白字元。

3.1.3<pre> • <pre>、</pre>標籤則是一個成對標籤，它可以保留原始文字排版。例如：不忽略空白字元、ENTER鍵所產生的換列不會被忽略等。 • 範例3-4： • 內容執行結果

3.1.4 • 標籤是一個獨立標籤(空標籤)也是成對標籤，它可以產生一個段落現象。 • 所產生的段落現象與 所產生的換列現象是不一樣的，它除了會換列之外，還會多出一個空白列，用來與下一段落做區隔。 • 標籤以成對標籤格式出現時，被包含的文字會被當作同一個段落，該段落與後面的文字間會產生換列與空白列的現象。

3.1.4 • 標籤以獨立標籤出現時，則標籤出現處會產生換列與空白列的現象。 • 範例3-5： • 內容執行結果

3.1.5  • 處理單純的空白字元，可以利用『』來代替半形空白字元。 • 『』是一個非換列符號，不過一般在實務上，也可以利用兩個『』來代替一個半形空白字元。 • 範例3-6： • 內容執行結果

3.1.6　全形空白字元 • 直接使用全形空白字元來解決超過1個以上半形空白字元被瀏覽器忽略的問題，這是因為全形空白字元被視為特殊文字的一種。 • 瀏覽器將忠實地把字元反映在視窗中，而1個全形字元的寬度=2個半形字元的寬度。 • 範例3-7： • 內容執行結果

3.1.7　特殊字元 • 具有特殊意義的字元，這些特殊字元若加到網頁時，瀏覽器無法正確顯示該字元。 • 詳細的特殊字元對照表如下： • 範例3-8：內容執行結果 • 範例3-9：內容執行結果

3.1.8<blockquote> • <blockquote>、</blockquote>是成對標籤，標籤內的文字會向右縮排5格空白字元，並且可以透過巢狀的<blockquote>標籤達到向右縮排10格、15格、20格以上的空白字元效果。 • 範例3-10： • 內容執行結果 • 範例3-11： • 內容執行結果

3.1.9<address> • HTML特別規劃使用<address>標籤來表示書信專用的頭尾格式，並且只要搭配<blockquote>標籤就可以完成一個正式的書信格式。 • <address>標籤具有幾項特色： • (1)字型會以斜體顯示。 • (2)開頭與結尾處會自動換列，因此符合信件的名稱、簽名或地址的描述。 • 範例3-12： • 內容執行結果

3.1.10<center> • <center>、</center>是成對標籤，在<center>與</center>之內的所有文字都會置中對齊，且可放置於<body>標籤內的任何位置。 • 範例3-13： • 內容執行結果

3.1.11<xmp> • 特殊字元『<』與『>』來代表標籤的『<』與『>』，可以看到某些標籤格式，並且這些標籤不會被瀏覽器解讀。 • 凡是被<xmp>標籤所包含的所有內容，瀏覽器都不會加以解讀，而直接輸出在網頁中。

3.1.11<xmp> • 【Enter】鍵所造成的換列以及半形空白字元若放在<xmp>標籤之內，不會被忽略。 • 範例3-14： • 內容執行結果

3.2　線條<hr> • <hr>標籤為獨立標籤，可產生一個橫向線條，線條前後會自動換列，以形成一條獨立的橫向線條。 • 線條的粗細、長短以及位置都可透過屬性來設定，這些屬性所代表的涵義如下表所列：

3.2　線條<hr> • 範例3-15： • 內容執行結果

3.2.1<hr> - size屬性 • 其實線條的粗細可以改變，只要透過size屬性就可以完成了。 • 範例3-16： • 內容執行結果

3.2.2<hr> - width屬性 • 透過width屬性的設定，可以任意變換線條的長度，設定width屬性的方法有兩種： • (1)按照瀏覽器寬度的比例(百分比)來設定，稱為相對設定，會隨著瀏覽器視窗寬度的改變而影響線條的實際長度。 • (2)絕對設定，我們可以直接設定線條的像素點(pixel)，不會隨著瀏覽器視窗的寬度而改變。 • 範例3-17： • 內容執行結果 <hr width="M%"> M介於1到100。 <hr width="N"> N是像素點(pixel)。

3.2.3<hr> - align屬性 • 橫向線條也可以透過常見的align屬性改變線條的對齊方式，對齊方式一共有3種，分別是靠左對齊、置中對齊、靠右對齊。 • 屬性值： • left：線條靠左對齊。 • center：線條置中對齊。(預設值) • right：線條靠右對齊。 • 範例3-18： • 內容執行結果

3.2.4<hr> - noshade • 當線條比較粗的時候，線條中央是空白的，如此可以造成浮雕的效果，這種現象稱為線條的陰影。 • 若要將陰影取消，只要設定noshade屬性就可以達成。noshade屬性是一個特殊的屬性，由於只有設定與非設定兩種狀態，因此在HTML中noshade屬性並沒有屬性值。 • 範例3-19： • 內容執行結果

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

本章習題

專業 HTML 網頁設計