我沒有看到過關於這種清單的文章，於是，我就自己創建了一篇。作爲一名設計師， web程序部分的編寫一直是我最困難的部分。但現在有很多非常棒的輔導教程來指導我們怎麼使用一些簡單的XHTML + CSS去創建驚人的佈局效果，他們會解釋真正發生在事件背後的的每一個步驟。學習怎麼正確地使用CSS，創建佈局，忘掉表格佈局，享受真正的CSS佈局的 強大，然後, 良好地使用《43個PSD轉XHTML, CSS輔導教程》！
1.PSD 轉 XHTML 教程
在這第一個視頻博客網站中，我開始轉變爲使用Adobe Photoshop模式來創建真正的基於CSS的網站。這裏聚集很多不同類型的人，我相信，隨着時間的轉移將會有更多的側重點。
2. 怎麼創建水平滾動的網站
3. PSD 轉 HTML, 一步步地構造網站設計
4. Subcide: 從零開始創建CSS佈局
5. 從零開始創建一個時尚的站點 - PSD+XHTML 教程
6. 4個簡短的PSD 轉 CSS教程
7. 用Drupal創建The Killer樂隊網站：6個部分教程系列
大量的通過Illustrator創建站點的輔導教程，Drupal編寫的源代碼，符合標準的XHTML和CSS。
完整的教程索引:
閱讀第一部分 - 使用Illustrator設計頁面
閱讀第二部分 - 使用Illustrator切圖
閱讀第三部分 - XHTML
閱讀第四部分 - Drupal 主題模板
閱讀第五部分 -Drupal 管理
閱讀第六部分 - 總結及附加資源
8. 如何使用CSS創建性感的按鈕
9. 討人喜歡的水平菜單
在這快速指南，我將討論如何建立一個工整的簡單效果的菜單。我在liDock上作了配音，因爲當鼠標移動到上面時，菜單的大小會隨之縮放，就像OS-X上的節點(the dock on OS-X)，也是因爲這是一個列表菜單。
10. CSS 模板教程
11. CSS漸變文字特效教程
12. 怎麼創建: CSS超大背景教程
13. PSD效果圖轉換成HTML
14. PSD切圖
15. 模糊背景效果
16. 使用 CSS Sprites 教程
17. 手繪風格的 CSS 導航按鈕
18. 創建類似Crazy Egg價格列表效果的表格列高亮效果
19. CSS 菜單教程
20. Photoshop 教程 + 切片部分 + css 編碼
這篇教程會教導您怎麼使用Adobe Photoshop來創建整潔的、漂亮的垂直效果的菜單。
21. 切片模板和使用 CSS 編碼
22. 編碼您的第一個PSD教程
23. 通過簡單的工作完成複雜的 CSS 佈局
24. 使用CSS固定您的頁腳
25. 教你如何轉換 PSD 爲 xHTML - 視頻教程
26. 高級CSS導航
27. 教程：編碼佈局
28. 植入式的整體風格切換 - 瞭解如何切換風格
29. 浮動教程 - 循序漸進式的
30. CSS 切片教程: 選擇正確的佈局
31. 使用Prototype和Scriptaculous創建簡單、智能的手風琴效果
32. CSS Sprites + 圓角
33. 3個簡單的步驟編碼實現圓角
34. 精通CSS樣式教程
35. 轉換的Photoshop圖樣: 第二部分，第一章
36. CSS垂直導航秀
37. CSS固定頁腳背景圖
38. 3欄佈局簡單介紹
39. CSS實現兩列布局
40. CSS佈局技巧 – 實現 100% 高度
41. 附帶“行爲”文件的CSS垂直菜單
42. 圓滑的設計規範 - HTML
43. 突破CSS盒佈局
好了，現在您應該已經對創建標準兼容的XHTML + CSS佈局有了非常深刻的基礎。應用這些技術，在日後，我應該還會發布一篇關於Photoshop佈局的輔導文章。