DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 符合WEB標准的網頁圖像的代碼精簡
符合WEB標准的網頁圖像的代碼精簡
編輯:CSS詳解     
遵循Web標准的思想,網頁要表現出一種親和力。那麼,針對殘障用戶來說,其“閱讀”器可不能讀取圖像上傳遞的信息的。

所以我們會采用一種Using Background-Image to Replace Text的方法,也就是將圖像以背景圖像的方式“插入”網頁顯示,同時為了讓殘障人士能了解該部分信息,顯示該圖像的區域用文本加以說明;但又為了讓正常人不為既看到背景圖像又看到圖像上的文本而混淆,所以我們又將這些文本隱藏。

或許我們也會說我們可以給圖像加alt、加title,這樣正常用戶能看得見,殘障用戶也“閱讀”到。不過,我們再想想,Web標准還推薦使用合理的XHTML文檔結構,對於插入圖像這樣一個“實體”,插入到網頁是什麼圖像就是什麼圖像了,當我們需要替換圖像時,我們修改Html文件,若有很多頁面呢(我批量改_-!)。所以這部分圖像的插入就“親和力”和“擴展性”而言,都建議使用“背景圖像”+“隱藏文本”的方法。當然對於圖像熱區鏈接我們另做討論。

說的都不大理解,還是舉例子。

有這樣的一張圖像,我們要插入到網頁顯示,那麼正常情況下我是使用“<img />”標簽的

[Ctrl+A 全部選擇進行拷貝 提示:可先修改部分代碼,再點擊運行]  

其中,因為浏覽器可能顯示不了圖像中文本的字體樣式,所以我們做成圖像顯示在網頁中。在當我們需要為這種圖像中的文本新做另外一種字體的圖像,那麼現在來解決新圖像的顯示,我們就必須要修改Html文檔。而一旦我采用了CSS定義背景圖像之後,這些問題都迎刃而解。


[Ctrl+A 全部選擇進行拷貝 提示:可先修改部分代碼,再點擊運行]  

所以,我們開始感受到這種方式的“好”,並以此應用到新的網頁設計中去。當然,為了盡量精簡我們的Html代碼,我還可以這樣:


[Ctrl+A 全部選擇進行拷貝 提示:可先修改部分代碼,再點擊運行]  

直接定義 text-indent: -10000px; 將文本顯示在屏幕分辨率以外的區域。

=======================================

今天向老友問了個問題,“關於一個效果……圖像是用<div>包含一下呢還是直接<img /> ”。

隨即否定:不要為了表現添加標簽,也不要為表現用IMG插入圖片,表現的內容,不放到CSS裡去,怎麼談分離。

頁面全部完成後,把CSS去掉,看看頁面,應該是很純的,全是內容,沒有一點兒表現的成份在裡面。

於是如醍醐灌頂,恍然大悟,遂搜索整理並理解得此文。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved