標題是一種識別,讓瀏覽者一眼就找到他們感興趣的文章,
或宣告文章的重點,甚至吸引觀看者閱讀,礙於各種客觀因素,
能運用的字型是有限的,英文字型至少還有Arial或Helvetica,
中文字只能用一個慘字形容,大概就細明體與標楷體兩種,
這時候就得以圖片的方式來取代標題了。
但是單純的圖片標籤會失去使用標題標籤的意義所在,
所以必須使用CSS來做圖像置換的工作,在增加標題文字可看性之下,
不犧牲掉標題標籤的特點,並可讓呈現圖片速度較慢的瀏覽者,
依舊能夠看到原先的標題文字。
1.首先使用類型選擇器將H1標籤樣式化,加入圖片,並設定高度:
h1 {
height:75px;
background-image:url(../image/heading.gif);
background-repeat:no-repeat;
}
但會發現文字跑到圖片上面來了:
2.在H1樣式裡加入文字縮排屬性,讓原本的標題文字移出視窗之外:
text-indent:-9999px;
然後文字就被移出視窗之外了(驚!被藏起來了!):
有時候網路塞車或是瀏覽者速度或其他不可抗拒之力,
圖片來不及或根本無法顯示,就只會看到一片空白:
把在第二步驟加入的那一行刪除,標題文字就又會跳回視窗裡了。
3.利用另外一塊標記來遮蓋原來的標題文字,在H1標記裡加入span標籤。
<h1>KIKCOCOPAPAYA<span></span></h1>
4.原來的 H1 類型選擇器作成的樣式,改成在h1之下包含span的後代選擇器樣式:
h1 span {
height:75px;
background-image:url(../image/heading.gif);
background-repeat:no-repeat;
}
5.再加上寬度、位置和邊緣距離設定:
h1 span{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-image:url(../image1heading.gif);
background-repeat:no-repeat;
}
完成:
範例網頁(把瀏覽器的顯示圖片關掉,可以看到底下的標題文字)
至於為什麼非得使用H1之類的標題標籤來設定,而不直接放文字圖片就好,
另外就是為了SEO(Search Engine Optimization)的關係,
搜尋引擎會將有H1標籤的關鍵字優先搜尋,增加在搜尋引擎曝光的機會,
而一些使用閱讀機來瀏覽網頁的瀏覽者,也能因為這樣減少閱讀障礙,
達到所謂的「無障礙網站設計」。
而為何不直接使用H1套用底圖,要用另外一個SPAN來遮住的原因,
如果使用H1,圖片就是H1區塊的背景,文字會出現在文字上(如上面範例所示),
另外使用一個SPAN加上絕對定位的屬性製成一個區塊來遮住,
一來文字不會出現在圖片上(因為CSS層疊原理),
文字也不會因為圖片而右移,而達到保留文字又遮住文字雙贏的效果。
留言列表