设定标题文字与文字格式.pptVIP

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標籤中讓文字變化的標籤和屬性實在不少，底下就來看看幾個最常用的設定。 設定文字的大小、色彩與字型 網頁文字當然可以自行設定色彩和大小，設定色彩的方式和設定分隔線的方式相同，如果您需要使用特別的文字，也可以設定字型。不過提醒您一點，如果瀏覽對方沒有安裝這個字型，