星期三, 2月 27, 2008

關於HTML標籤 H1

關於HTML標籤 H1
對於搜尋引擎而言,HTML標籤

會影響他的排名,所以在製作網頁時,一頁的網頁最好只使用一個

標籤,這樣搜索引擎會認為他是重要的字串,而影響網頁的排序,避免在同一網頁中,做過多的設定。

因此在網站當中,網站的名稱或LOGO就可以

來描述,如果是用圖片來顯示,則可用隱藏文字的手法來製作。

應該如何以CSS把文字換成圖片?沒有完美的解決方案,能用,但是要小心。

方法一:Fahrner圖片置換(FIR:Fahrner Image Replacement)
以CSS的background或background-image屬性把文字換成圖片。

HTML語法如下:

這是標題文字



CSS語法如下:

#replace_h1 { width: 300px; height: 29px; /*指定背景*/ background: url(img/bg_replaceh1.gif) no-repeat;}

#replace_h1 span{ display: none; /*隱藏文字*/ }

優點:不支援CSS的看到文字,支援的看到圖片

缺點:螢幕朗讀程式可能會遇到問題、必須加一組無意義的、關閉瀏覽器顯示圖片功能,並支援部份CSS時,可能文字與圖片會皆空白。

方法二:Leahy/Langridge圖片置換(LIR)Seamus Leahy、Stuart Langridge
HTML語法如下:

Leahy/Langridge Image Replacement



CSS語法如下:

#lir{ padding: 90px 0 0 0; overflow: hidden; background: url(lir.gif) no-repeat; height: 0px !important; /*給大多數瀏覽器*/ height /**/: 90px; /*給IE5用*/ }

優點:不用、螢幕閱讀可行。

缺點:關閉瀏覽器顯示圖片功能,並支援部份CSS時,可能文字與圖片會皆空白、外框模型補丁。

方法三:Phark法Mike Rundle
HTML語法如下:

H1標題,顯示圖片隱藏文字的作法



CSS語法如下:

#h1_img{ height: 29px; text-indent: -9999px; background: url(img/bg_replaceh1.gif) no-repeat; margin: 25px 10px 0px 0px; }

這是目前採用最多的方法。
張貼留言