安排文字段落与版面.ppt

第 2 章 安排文字段落與版面 本章提要 2-1 控制文章段落 2-2 設定文字標題與對齊方式 2-3 應用範例 2-1 控制文章段落 在上章的內容中, 我們以 body 標籤示範了幾個簡單的例子, 這些例子內的文字以網頁的形式在瀏覽器中顯示時, 不會依照編時所安排的段落格式, 該換行時沒有換行, 該空一行時也不會空行, 該空格時好像也沒有空格。 這是因為在瀏覽器中, 文件的段落格式 (包含文句、段落的換行與空格) 一律必須透過HTML 標籤來安排。以下我們就要介紹幾個控制文字段落、版面的標籤, 讓我們可以自由安排網頁的文字。 2-1-1 強制換行－br 在瀏覽網頁時, 文字會隨著瀏覽器的視窗大小而自動換行。不過如此一來, 每個人瀏覽我們的網頁時看到的版面就可能都不相同。如果我們希望自行安排文字版面, 可以用 br 標籤強制定換行。br 標籤使用的方式很簡單, 只須在要換行的地方 (通常是一行的最後面) 加上 br 標籤, 則瀏覽器就會先換行, 再顯示後續的文字, 例如： 2-1-1 強制換行－br 2-1-2 文字分段－p 就像我們寫文章習慣會分段落, 當然在 HTML 裏也有讓文字分段的 p 標籤。p標籤和 br 標籤有什麼不同呢？p 標籤除了換行之外, 瀏覽器還會多空一行空白, 再接著顯示後面的文字。 2-1-2 文字分段－p 上例中也可在段落的結束處加上結尾的 /p 標籤, 但不加也無妨。根據官方文件指出, 若加上 /p 明確標出段落的結尾, 可加快顯示該頁內容的速度。 2-1-3 依文字原來格式排列－pre 如果希望瀏覽器能依文字原來的排列情形來顯示, 又不想一行行地加上 br 或 p 標籤, 則可將這些文字前後加上 pre.../pre 標籤, 如此文字就不會擠成一團了。 2-1-4 加上分隔線－hr 很多網頁為了使內容更清晰, 會用一條橫線(Horizontal Rule) 分隔文件中不同的段落, 使段落更為分明。只需在要加上分隔線的地方加上 hr 標籤, 在顯示時此處就會出現一條分隔線。例如： 2-1-4 加上分隔線－hr 2-2 設定文字標題與對齊方式 學會如何安排簡單的段落格式後, 接下來介紹如何改變文件中的文字顯示效果。在HTML 中用於文字顯示的標籤非常多, 本節先從最簡單、最常用的標題介紹起。 2-2-1 設定文字標題 －h? 這個標題並非瀏覽器視窗標題列中所顯示的標題 (用 title 定義), 而是平常在文章中, 像章節名稱之類的標題。設定標題的標籤共有 6 個, 分別是 h1、h2、...h6。數字愈大, 所顯示的文字愈小： 2-2-1 設定文字標題 －h? 請注意！使用 h? 標題標籤時, 不需要加上 p 或 br 來分段或換行, 瀏覽器會將標題部分當成獨立的一段。 2-2-2 設定文字對齊方向 －p align 預設在瀏覽器中, 文字都是由左一直顯示到右, 每一行都是靠左邊對齊的。如果您希望文字改成置中或靠右對齊, 可在段落標籤 p 中加上屬性來設定。 p 標籤有個 ALIGN 屬性用來設定文字對齊的方向, 可設定的值有 LEFT (靠左對齊, 這也是預設值)、CENTER (置中對齊)、RIGHT (靠右對齊) 三種。 2-2-2 設定文字對齊方向 －p align 瀏覽器會將 p align=... 之後的文字都以指定的對齊方式顯示, 例如： 2-2-2 設定文字對齊方向 －p align 請注意！一旦設定了某種對齊方式後, 例如設定了靠右對齊, 除非出現另一個 p align=... 改變其他對齊方向, 否則文件中所有文字都會靠右對齊。此外, 若遇到 hr、h? 等代表獨立段落的標籤時, 文字的對齊方向則會回到預設的靠左對齊, 例如： 2-2-2 設定文字對齊方向 －p align 2-2-3 文字置中對齊－center 另外還有一個對齊中央的標籤 center, 其效果也是讓所有的文字向中間對齊。不同於 p align=center, 在 center 到 /center 間的文字, 不會因 h 或 hr 的出現而變回預設的向左對齊, 用法如下： 2-2-3 文字置中對齊－center hr標籤的變化 上述的 align 屬性也可用在 hr 中, 此外 hr 還有另外幾個屬性可以設定, 請見下例： hr標籤的變化 2-3 應用範例 本章學習了不少新的標籤, 只要好好善用, 也足以做出一個不錯的純文字文件。不一定用許多圖案來美化 HTML 文件, 有時整齊美觀的文件更能提供豐富的資訊給使用者。以下來看一個應用實例： 2-3 應用範例 2-3 應用範例 * 著作權所有 ? 旗標出版股份有限公司 * * *