使用HTML創建導航欄與Photoshop

Question

在我的網站上我想要一個導航欄。我正在考慮在Photoshop中創建背景，然後將其作爲無序列表的背景（使用HTML顯示實際文本）來顯示條中的項目。這是最好的做法或在Photoshop中的項目上的文字？如果我以第二種方式做到這一點，我該如何做到這一點，因此圖片的每個不同部分都是可點擊的？

Answer 1

它是偉大的你問正確的問題，你是正確的問他們。 通過一切手段將圖片用作背景，但不要將文字作爲可以避免的圖片，尤其是在菜單中。 原因是兩個摺疊一個搜索引擎不會閱讀內容和第二個輔助功能屏幕閱讀器不能閱讀它，用戶不能通過瀏覽器放大文本。

您的標記可能看起來像這樣

.nav{ 
    background-image:url("bg.jpg"); 
    background-repeat:no-repeat; 
    width:yourwidth; 
    height:yourheight; 
    display:block; 
} 
.nav li{ 
    list-style:none; 
    float:left; 
    margin-left:20px; 
    margin-right:20px;} 

標記

<ul class="nav"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul>