5-1 設定標題文字與文字格式 文字是網頁的基礎,不論是哪一種型態的網頁,都少不了文字。當然不同的文字需要透過不同的效果來區隔。就如同本書,章、節、大中小標題的文字都不同,程式碼、表格等的文字也會有差異。
設定標題文字 如果您用過文書處理軟體,那對文字的變化應該有基本的認識,包括標題文字、粗體、斜體、顏色、大小等,來美化文字的樣式。不論文件的內容為何,都少不了會利用標題文字來放大文字。
讓文字對齊 不論是網頁或是文書處理軟體,文字的走向預設都是由左至右、靠左對齊,而標題文字多半會設定置中對齊,部份特殊的文字會需要靠右對齊,底下就來看看讓文字對齊的標籤設定。
前面提過在設定標籤時,除了標籤還有屬性和值,而對齊的標籤就會用到屬性和屬性值,標籤可以有多個屬性,每個屬性之間利用空格來區隔。屬性值的內容多數會以『""』雙引號來括住,這個雙引號是可以被省略的,瀏覽器仍舊可以辨識。但筆者建議還是加上雙引號程式會比較清楚。當標籤需要設定屬性時,標籤的寫法如下: <標籤 屬性=屬性值> <標籤 屬性1="屬性值" 屬性2="屬性值" 屬性3="屬性值" 屬性4="屬性值">
分散對齊的顯示 文字的分散對齊效果只有透過Explorer和使用Explorer程式核心的瀏覽器才能夠顯示這個效果,部份瀏覽器軟體是無法顯示的。 除了上面的對齊設定外,另外還有一個讓文字對齊的標籤<Center> </Center>,此標籤會設定網頁文字或其他元件置於網頁中間,在結束標籤前,不論是標題、分隔線等都會置中。
5-2 水平線和顏色的設定 繼續介紹文字的各種變化之前,先來介紹分隔線這個標籤。這是一個比較特別的標籤,他會在網頁中加上線條用來區隔網頁的內容,但他又並非表格。最常使用水平線的位置就是標題文字底下,用以區隔標題和內文。所以筆者將水平線放在這裡介紹。
水平線的格式設定 當你要再網頁中加上水平線時,請在設定的文字之後的次行,加上<HR>標籤。顯示時在文字的底下就會加上一行分隔線。這裡所設定的分隔線是預設的分隔線樣式,當然分隔線也可以有各種不同的變化。例如將分隔線加寬、加高甚至對齊方式等設定。使用的屬性就是上面段落標籤對齊的『ALIGN』。
屬性與屬性值 在HTML語法中,不少設定的屬性是相同的,例如對齊ALIGN,不論你要對齊的是文字、分隔線或是圖片,都是使用同樣的屬性。或設定高度的SIZE和寬度的WIDTH也是相同。 設定分隔線的寬度與高度預設分隔線的寬度就是網頁文字的寬度,也會隨著瀏覽器的視窗大小而自動調整,你可以手動指定分隔線的寬度與高度。設定寬度的屬性為『WIDTH』、高度為『SIZE』。
設定對齊方式與平面水平線 水平線的對齊方式和段落文字的對齊方式是相同的設定方式,那甚麼是平面的水平線呢!看上圖當你設定水平線的高度後,會發現水平線是中空的,看起來不太像線條而像一個方塊。而平面的水平面就是實心的水平線,在<HR>標籤中加入『Noshade』這個屬性就可以將線條填滿。
色彩的設定 水平線預設的顏色是灰色,同樣可以透過標籤來指定水平線的色彩,其他文字的色彩也是同樣的設定方式。當您在要HTML中透過標籤來指定顏色時,要如何設定不同的顏色呢?在HTML中使用了二種方式來指定顏色,一個是透過RGB的屬性值;另一個則是指定顏色的名稱。
透過RGB屬性值指定顏色 如果您有使用過影像處理或繪圖軟體,就清楚何謂RGB,也就是所謂的三原色:紅色、綠色和藍色,透過這三種顏色的組合,來定義出各種不同的顏色。而RGB屬性值就是分別輸入代表紅、綠、藍的16進位數值,瀏覽器會自動辨識並轉換為正確的顏色。
利用顏色名稱來指定顏色 另一個設定顏色的方法是利用顏色的名稱來指定顏色碼,瀏覽器可以辨識的顏色名稱約一百四十多種,當您要將水平線顏色設定為綠色時,標籤的寫法如下: <HR width="300" color="green">
目前被定義的顏色名稱有140種,在本書的光碟中您可以找到顏色名稱網頁,來檢視每個顏色的名稱。隨著你所設定的物件不同,顏色的屬性會加上不同的位置,表5-1列出幾個HTML中用來設定顏色的標籤以及屬性,在後面會在一一說明如文字、網頁背景等的色彩設定方式。 底下的範例應用了前面二節的範例,來完成網頁的內容,請你先參考圖片試著寫出實作範例
5-3 格式化文字 前面介紹的標籤包括了文字的對齊和標題文字,而底下就來看看文字本身的變化。文字可以有怎麼樣的變化呢!若你經常使用文書處理軟體,那應該有基本的概念。例如將文字放大、縮小、套用字型、粗體、斜體等,在HTML標籤中讓文字變化的標籤和屬性實在不少,底下就來看看幾個最常用的設定。
設定文字的大小、色彩與字型 網頁文字當然可以自行設定色彩和大小,設定色彩的方式和設定分隔線的方式相同,如果您需要使用特別的文字,也可以設定字型。不過提醒您一點,如果瀏覽對方沒有安裝這個字型,是無法看到這個字型效果,瀏覽器會找一個相似的字型來顯示。所以一般在製作網頁時,中文字只會使用新細明體和標楷體這二種系統預設的中文字型。
設定文字的大小 設定文字大小的標籤有三個,用來將文字放大、縮小以及指定文字的大小,分別是: <SMALL>:將文字縮小顯示。 <BIG>:將文字放大顯示。 <FONT></FONT>:用來設定字體的大小。
文字色彩與字型的設定 當您要設定文字的色彩,也是同樣使用<FONT></FONT>標籤,加上COLOR屬性。您可以輸入文字的RGB色碼或顏色名稱,來設定文字的顏色,而設定字型則是利用FACE屬性。 <p><font color="#0033CC">預設文字色彩</font></p>
粗體、斜體效果文字效果 透過HTML文件來指定文字的格式時,隨著套用對象可將標籤分為二種,一種是用來設定樣式例如粗體、斜體效果,另一種則是具有特殊文字效果的標籤,例如程式碼、Email等,底下先來看第一種效果。
特殊定義的文字效果 在進行文書處理時會有部分的文字所使用的樣式是和內文必須作區隔的,例如程式,用來說明的注解等,這些文字的樣式在文書編輯軟體中常用有預設的樣式可以直接套用,在HTML中為了便於你使用這些特殊的文字,同樣也有不少對應的標籤可以使用。
5-4 項目文字 當你編輯文件時,最常用來排列文字的二種功能就是項目文字和表格。其實項目文字也具備表格的功能,只是不會產生格線。透過項目符號或編號來顯示資料,可以讓文件的內容更清楚,本節就來看看如何透過HTML語法來設定項目文字。
變更項目符號的樣式 項目符號所顯示的符號當然不只一種,那要如何變更項目符號的樣式呢,則得透過<UL>標籤的TYPE屬性來設定,常用的屬性值有三種。 disk:預設值也就是黑圓點。 square:方形。 circle:空心圓點。
自行定義項目的圖片 預設的項目符號實在不太好看,這時可以自行定義圖檔來變更項目符號的樣式,IMG SRC只要利用屬性來定義圖檔的超連結,就可以正確顯示。關於圖片的標籤設定在第七章會有詳細的說明。在光碟中也附了底下範例所使用的圖檔,直接開啟範例網頁就可以檢視程式碼和範例文字的顯示。
多層次項目文字 上述的範例中,項目文字都只有一層,你可以透過不同的項目符號來設定不同層次的文字。在程式中,分別使用的三個<UL></UL>標籤來區隔文字,第一個<UL >標籤下所定義的是第一層文字,第二個<UL>標籤所定義的是第二個標籤,透過這樣的巢狀標籤來顯示不同層次的文字。
設定編號項目符號 預設的編號是用阿拉伯數字來編號,底下是程式的範例和結果。 <body> <ol> <li>第一行編號 <li>第二行編號 <li >第三行編號 <li >第四行編號 </ol> </body>
變更編號方式的編號表示 編號的方式當然不只1、2、3而已,這樣文字不是太單調了嗎!同樣當要更改編號方式的顯示時,可以透過屬性TYPE來設定,編號方式的屬性值有五種,詳述如下: 1:數值編號,也就是預設值。 A:使用大寫英文字母來編號。 a:使用小寫字母來編號。 I:使用大寫的羅馬數字來編號。 i:使用小寫的羅馬數字來編號。
自行定義開始的編號 當您套用時預設都是從1開始編號,那如果我希望自行定義開始的編號,則得再加上START屬性來設定,在屬性後加上指定的起始編號。
<body> <ol start="10"> <li >第一行編號 <li >第二行編號 <li >第三行編號 <li>第四行編號 </ol> </body>
巢狀標籤 前面介紹的項目文字和編號文字都只有一層,若你使用過Word等軟體,就清楚項目文字或是編號文字會又有多層次的顯示,也就是列表底下還有一個列表,如同檔案總管的資料夾一樣,在根目錄底下建立資料夾,資料夾底下建立子資料夾。底下透過程式來說明巢狀標籤的寫法。
<body> <ol> <li> 第一層文字第一行 <li> 第一層文字第二行 <ul> <li> 第二層文字第一行 <li> 第二層文字第二行 </ul> <li> 第一層文字第三行 <li> 第一層文字第四行 </li> </ol> </body>
定義清單標籤 所謂的定義清單也就是將項目文字再區分層次,如同當您在Word套用項目符號時,可以利用縮排來區分層次,或是用大綱來區分編號的層次,而在HTML中則是利用定義清單來定義結構。定義清單標籤最主要是用來標示名詞,而在名詞之後也就是第二層文字則是用說明文字,例如書本後面的專有名詞就常使用這種方式來表達。
5-5 HTML文字的特殊設定 前面四節的設定多針對文字樣式的設定,還有一些特殊文字的輸入和文字特性等設定,一起在本節中說明。由於文字的相關變化實在不少,筆者無法將所有設定全部列出,只能針對常用的標籤進行說明。
顯示特殊字元的文字 當我們輸入程式碼時都透過<>這二個符號來顯示標籤,那你有沒有想過如果要在網頁中顯示『<』和『>』或是其他特殊符號時,要如何設定呢?這些特殊的符號當然要透過特別的標誌才能顯示。
特殊字元與語系的使用 若你的網頁使用的相當多特殊字元,那請你在輸入前先檢查網頁的語系設定,不少特殊字元只能在西歐語系的網頁中才能正常顯示,而一般網頁編輯軟體會將網頁設定為繁體中文語系,所以請先更改語系再進行輸入。
跑馬燈的文字效果 所謂的跑馬燈文字就是讓文字由右而左的在網頁中移動,不少人會在網頁中使用跑馬燈文字效果,特別是網站有重要事項要告知時。這也是最簡單的文字特效之一。不過這個特效只有Internet Explorer瀏覽器有支援,部分瀏覽器無法顯示此效果。