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. 没有图片

    2011.01.10

    自定义WordPress登录页面Logo

    通常自己设计WordPress主题,很少把后…

  2. 没有图片

    2010.05.18

    用FeedBurner同步国内空间博客到Twitter

    最受欢迎的微博Twitter已被天朝拒之墙外…

  3. 没有图片

    2010.05.15

    用自定义域给WordPress添加关键词

    给WordPress添加关键词,大家都知道使…

  4. 没有图片

    2010.06.10

    Adobe Dreamweaver CS5 新增功能

    Adobe CS5系列软件于2010年4月发…

  5. 没有图片

    2011.03.02

    iPad2发布会将于3月3日凌晨开始,期待降价

    消息称,iPad2将于2011年月3日凌晨召…

  6. 没有图片

    2013.05.23

    Centos yum 安装 xcache 教程

    Xcache是一个开源的操作码缓存器/优化器…

评论

还没有评论。