在中國，很多前端開發初學者都會把xHTML+CSS頁面制作說成DIV+CSS，甚至很多人都還不知道xHTML+CSS是什麼意思，隻知道盲目的追求DIV+CSS，但在國外，是沒有DIV+CSS這個概念的，很明顯如果單從字面上去了解，DIV+CSS的網頁就要全都是div，很明顯是無法達到語義化标準的。請把”DIV+CSS”這個詞從腦子中删除，用”xHTML+CSS”替代吧！
今天向大家推薦43個執行個體xHTML+CSS(DIV+CSS)網頁及導航布局教程，在國外也可以叫做PSD2XHTML。如果你是以為網頁設計師，可能會對将自己的效果圖實作成語義化的xHTML頁面感到頭痛，還有一些CSS初學者對于xHTML+CSS處于懵懂狀态，希望大家通過這43個”DIV+CSS”執行個體教程學習到語義化xHTML+CSS布局的精髓，即使你已經成為高手，我也相信其中有你值得學習的地方。
感興趣的話也可以看看這個執行個體的設計教程，已譯成中文
<a href="http://blog.bingo929.com/a-sleek-high-end-web-design.html">網頁設計教程:使用Photoshop設計一個高檔時尚的網頁</a>
這是個非常棒的關于使用Illustrator制作頁面，Drupal(世界最著名的CMS系統之一)編碼，符合标準的xHTML+CSS
完整教程索引:
<a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-1-design/" target="_blank">第一部分:使用Illustrator設計頁面</a>
<a href="http://blog.bingo929.com/Read%20Part%202%20-%20Slicing%20it%20Illustrator" target="_blank">第二部分:使用Illustrator切圖</a>
<a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-3-xhtml/" target="_blank">第三部分:寫xHTML</a>
<a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-4-theming-drupal/" target="_blank">第四部分:Drupal主題模闆</a>
<a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-5-drupal-admin/" target="_blank">第五部分:Drupal管理</a>
<a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-6-additional-functionality-and-resources/" target="_blank">第六部分:總結和一些附加資源</a>
19.CSS菜單教程
這個教程将教你使用Photoshop制作簡潔的縱向菜單。
如果你能把這些xHTML+CSS(DIV+CSS)執行個體教程看一遍的話，我相信你一定會擁有紮實的基礎來使用符合Web标準的xHTML+CSS實作更加進階的布局。
本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/09/21/2183272.html，如需轉載請自行聯系原作者