43个PSD转XHTML, CSS创建布局及导航辅导教程

Published at 7 months ago

我没有看到过关于这种清单的文章，于是，我就自己创建了一篇。作为一名设计师， web程序部分的编写一直是我最困难的部分。但现在有很多非常棒的辅导教程来指导我们怎么使用一些简单的XHTML + CSS去创建惊人的布局效果，他们会解释真正发生在事件背后的的每一个步骤。学习怎么正确地使用CSS，创建布局，忘掉表格布局，享受真正的CSS布局的 强大，然后, 良好地使用《43个PSD转XHTML, CSS辅导教程》！ 1.PSD 转 XHTML 教程 在这第一个视频博客网站中，我开始转变为使用Adobe Photoshop模式来创建真正的基于CSS的网站。这里聚集很多不同类型的人，我相信，随着时间的转移将会有更多的侧重点。 conversation-psd-to-xhtml-tutorial-css 2. 怎么创建水平滚动的网站 horizontally-scrolling-site 3. PSD 转 HTML, 一步步地构造网站设计 creatif-nettuts-from-psd-to-xhtml 4. Subcide: 从零开始创建CSS布局 subcide-web-layout-tutorial 5. 从零开始创建一个时尚的站点 - PSD+XHTML 教程 psd-vs-net-tutorial-convert 6. 4个简短的PSD 转 CSS教程 sanke-photograph-css-tutorial 7. 用Drupal创建The Killer乐队网站：6个部分教程系列 大量的通过Illustrator创建站点的辅导教程，Drupal编写的源代码，符合标准的XHTML和CSS。 完整的教程索引: 阅读第一部分 - 使用Illustrator设计页面 阅读第二部分 - 使用Illustrator切图 阅读第三部分 - XHTML 阅读第四部分 - Drupal 主题模板 阅读第五部分 -Drupal 管理 阅读第六部分 - 总结及附加资源 band-site-and-drupal-tutorial 8. 如何使用CSS创建性感的按钮 how-to-make-sexy-button 9. 讨人喜欢的水平菜单 在这快速指南，我将讨论如何建立一个工整的简单效果的菜单。我在liDock上作了配音，因为当鼠标移动到上面时，菜单的大小会随之缩放，就像OS-X上的节点(the dock on OS-X)，也是因为这是一个列表菜单。 css-menu-growing-dock 10. CSS 模板教程 free-css-tutorial 11. CSS渐变文字特效教程 css-gradient-text-effect 12. 怎么创建: CSS超大背景教程 large-background-css 13. PSD效果图转换成HTML your-logo-psd-to-xhtml 14. PSD切图 paper-business-psd-to-xhtml 15. 模糊背景效果 blurry-background-effect 16. 使用 CSS Sprites 教程 using-css-sprites 17. 手绘风格的 CSS 导航按钮 hand-drawn-css-navigation 18. 创建类似Crazy Egg价格列表效果的表格列高亮效果dinamically-highlighted-columns 19. CSS 菜单教程 n-design-cssmenu 20. Photoshop 教程 + 切片部分 + css 编码 这篇教程会教导您怎么使用Adobe Photoshop来创建整洁的、漂亮的垂直效果的菜单。 css-menu-blue 21. 切片模板和使用 CSS 编码 slice-a-template-and-code-it-using-css 22. 编码您的第一个PSD教程 code-psd-tutorial 23. 通过简单的工作完成复杂的 CSS 布局 generico 24. 使用CSS固定您的页脚 sticky-footers 25. 教你如何转换 PSD 为 xHTML - 视频教程 some-event-convert-psd-to-xhtml 26. 高级CSS导航 advanced-css-navigation 27. 教程：编码布局 tutorial-coding-a-layout 28. 植入式的整体风格切换 - 了解如何切换风格 invasion-to-body-switchers 29. 浮动教程 - 循序渐进式的 float-tutorial 30. CSS 切片教程: 选择正确的布局 css-slicing-guide 31. 使用Prototype和Scriptaculous创建简单、智能的手风琴效果 accordion-tutorial 32. CSS Sprites + 圆角 rounded-box 33. 3个简单的步骤编码实现圆角 css-globe-3simple-steps-code-rounded 34. 精通CSS样式教程 lorem-ipsum-inc 35. 转换的Photoshop图样: 第二部分，第一章 some-website-tutorial 36. CSS垂直导航秀 vertical-navigation-tutorial-teaser 37. CSS固定页脚背景图 footer-background-that-work-tutorial 38. 3栏布局简单介绍 3-column-layouts 39. CSS实现两列布局 2-column-layout 40. CSS布局技巧 – 实现 100% 高度 css-layout-tehnique-100-percent-height 41. 附带“行为”文件的CSS垂直菜单 vertical-css-menu 42. 圆滑的设计规范 - HTML sleek-shiny-design-tutorial 43. 突破CSS盒布局 breaking-out-from-box 好了，现在您应该已经对创建标准兼容的XHTML + CSS布局有了非常深刻的基础。应用这些技术，在日后，我应该还会发布一篇关于Photoshop布局的辅导文章。

#CSS

@http://item.feedsky.com/~feedsky/alibuybuy/~7125141/211742485/5233840/1/item.html