43个PSD转CSS/XHTML教程实例

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是 什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是 div,很明显是无法达到语义化标准的。在国外xHTML+CSS(DIV+CSS)也可以叫做PSD2XHTML。

以下是43个PSD to XHTML及CSS教程:

1.将 PSD 源文件转换 XHTML 教程

DIV+CSS教程

2.叫你如何创建水平滚动网站布局

xHTML+CSS教程

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

DIV+CSS实例教程

4.从零开始创建CSS布局

xHTML+CSS实例

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程,已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页
DIV-CSS

6.4个简单的教程教你将PSD制作成CSS HTML

DIV+CSS教程

7.使用Drupal创建Killer乐队网站:6篇系列教程

这是个非常棒的关于使用Illustrator制作页面,Drupal(世界最著名的CMS系统之一)编码,符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
第二部分:使用Illustrator切图
第三部分:写xHTML
第四部分:Drupal主题模板
第五部分:Drupal管理
第六部分:总结和一些附加资源

xHTML+CSS教程

8.教你如何使用CSS创建性感的按钮

DIV+CSS实例教程

9.很酷的水平菜单悬停变大效果

xHTML+CSS实例

10.CSS模板教程

DIV-CSS

11.控制文本渐变效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.将PSD效果图转换成HTML

DIV+CSS实例教程

14.PSD切图和页面的实现

xHTML+CSS实例

15.模糊背景效果

DIV-CSS

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

DIV+CSS教程

17.手绘风格CSS导航按钮

xHTML+CSS教程

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

DIV+CSS实例教程

19.CSS菜单教程

xHTML+CSS实例

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

DIV-CSS

21.为网页模版切片并用CSS编码

DIV+CSS教程

22.为你的第一个PSD网页效果图编码教程

xHTML+CSS教程

23.使用简单的操作完成复杂的CSS布局实例

DIV+CSS实例教程

24.使用CSS来让你的页脚固定

xHTML+CSS实例

25.教你如何将PSD转换成xHTML-视频教程

DIV-CSS

26.高级CSS导航实例教程

DIV+CSS教程

27.教程:为你的DIV+CSS布局编码

xHTML+CSS教程

28.教你如何为网页变换样式

DIV+CSS实例教程

29.浮动教程

xHTML+CSS实例

30.CSS切片教程:选择正确的布局

DIV-CSS

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

DIV+CSS教程

32.CSS Sprites + 圆角

xHTML+CSS教程

33.简单3步制作圆角布局

DIV+CSS实例教程

34.CSS样式教程

xHTML+CSS实例

35.转换Photoshop效果图

DIV-CSS

36.制作CSS纵向菜单

DIV+CSS教程

37.使用CSS固定页脚背景图

xHTML+CSS教程

38.一个简单的散列布局启蒙教程

DIV+CSS实例教程

39.两列布局CSS教程

xHTML+CSS实例

40.CSS布局技巧:完成100%高度

DIV-CSS

41.附带一个’behavior’文件的纵向CSS菜单

DIV+CSS教程

42.光滑的设计,HTML实例

xHTML+CSS教程

43.DIV+CSS布局教程

DIV+CSS实例教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话,我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。

作为一个 Web 设计师,精通 CSS 是绝对必要的而且对于 Web 开发也是必须的。 良好的 CSS 编写习惯可以帮助你节省时间,并且能更好地进行网站的后期维护使得运行速度更快,从而节约带宽。下面是收集的6个非常有用的 CSS 资源网站,包括 CSS 学习技巧、CSS 文章、CSS 高级文档等。

A List Apart

A List Apart 是一个非常有用的 CSS 资源文章,发布了来自很多优秀设计师的 CSS 文章、 CSS 教程、技巧等内容。而且你还可以从中学到很多的练习经验。
Delicious | CSS Bookmaking Topics

通过 Delicious 的 Bookmark 书签功能,你可以找到其他设计师分享或是订阅的有关 CSS 的文章,更方便地搜集和学习 CSS 技术,并能及时地了解 CSS 领域的高级应用和发展。
CSS Basics

CSS Basics 提供了18章涵盖必备的 CSS 技巧(包括 CSS 类、 CSS ID、 CSS Position 和 CSS Fonts 等等)。你可以选择在线学习,也可以下载所有章节的 PDF 文档到自己的电脑。
W3Schools

W3Schools ,对于 Web 设计师来说可能就完全不会陌生了,很多的 Web 设计者都是从这里开始自己的 CSS 和 XHTML 的自学旅程的。W3Schools 提供非常完善的免费 CSS 学习资源,帮助你从新手升级为专业设计,而且你还可以找到很多有用的 CSS 实例、文档和在线小测验,更好地帮助你掌握和熟悉。
SitePoint

SitePoint 提供非常优质的 CSS 参考文档,而且对于很多的 CSS 教程都附带有 Demo 演示,所以,你可以在线测试 CSS 代码的具体表现。
CSS Dog

CSS Dog 是又一个值得推荐的学习 CSS 和 XHTML 的资源站。网站内容由浅入深地教你如何掌握 CSS 和 XHTML 等前端技术,非常值得收藏

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2010.06.05

    UCWEB手机浏览器 For Symbian 7.20

    UCWEB(优视浏览器)是由优视动景开发的一…

  2. 没有图片

    2010.09.07

    Adobe CS 5 全系列软件+破解高速下载

    自从上次把我的笔记本重新安装了之后,就想用上…

  3. 没有图片

    2010.07.22

    WordPress类苹果主題 – LuKoo

    主題名稱 Theme Name﹕LuKoo …

  4. 没有图片

    2010.06.04

    非常棒的jQuery滑块代码Slider Deck Lite

    今天找到一个非常棒的jQuery Slide…

  5. 没有图片

    2010.12.21

    和谐中国14个经典问题,看你能答出来几个

    第1题:为什么有人从几千米高直接跌落到千米左…

  6. 没有图片

    2010.09.15

    好的教育

    好的教育应该是让你自由寻找那些有意义的事情,…

评论

还没有评论。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!