前段时间我给公司的外包设计同学分享了一下html和css的入门知识。现在放到网上来给有需要的同学分享。因为当初分享的对象都是设计师，所以也是整个系列PPT也是用设计师的思维来思考怎么把做好的视觉稿变成网页。
一共有6节PPT，内容比较简单。主要是想给他们打好基础，理顺概念。我并没有推荐他们去网上自己找些国人的资料来学，因为那些资料本身有很多问题（有些问题很严重，影响以后对代码的理解）。在经过2个月8节课每节2个半小时左右的课程后，他们每一个人都能独立写出自己平时做的页面代码了。当然代码质量可以逐步提高，但我想这是一个质的飞跃。他们能，你也可以。
可以在这篇网志上看下面的系列PPT，也可以点击PPT上的链接到slideshare上看。有一些配合PPT的例子源文件我都打包在一起，需要的话下载教程和源文件吧。
第一节：盒模型和css基本属性
第一节完完全全是入门知识，这里侧重于理清楚每个概念的渊源，以及和设计的相关性。
第二节：页面背景，头部
从设计师的角度讲怎么实现视觉稿里的图片背景，特别是网页的头部，从而引入一些常用的background, position, float等css属性。
第三节：margin, padding
第四节和第五节：ul, li
这节讲商品排列页面中最常用的ul和li标签。并延伸开来讲了一些如何配合Js来完成一些页面上的交互效果。
第六节：复习
温故知新。
可以打包下载系列PPT和对应的例子源文件。顺便说一下，我认为一个designer懂一点代码是好的，可以更好地做设计，做出更好的设计。
Paris
04/08/2010, 20:17
整理的很全面,深入浅出. 这些东西可以很好转化成商业价值.
shimu
04/08/2010, 20:44
@Paris – 表扬太高了，汗- -
David Yin
04/10/2010, 04:38
从你的留言链接过来，你的友链已经添加到我的Blog的右侧。
看到你的站点，很喜欢，到底是设计师的作品，很棒。
我认为，作为一个SEOer，懂一些代码和设计也是必要的。互相学习。
cheerego
04/10/2010, 21:02
很贊的站
一直也想从事有关网页设计平面设计的工作
可惜专业偏离的有点远，蛮羡慕你的
shimu
04/10/2010, 21:22
@cheerego – 其实有兴趣的话，自学也是十分方便的，现在网络上资讯这么发达啊。可以从鼓捣鼓捣自己博客的主题开始～
shimu
04/10/2010, 21:24
@David Yin – THX～小站的这次改版我也不是十分满意，以后会继续做更好的！
RenRengirl
04/11/2010, 01:14
设计很kool，赞一个
shimu
04/22/2010, 22:32
@RenRengirl – thx! 经常来玩哦～
carina
04/30/2010, 14:23
博主可以发一份这个教材去我邮箱么？提供的下载下不到哦，很不错的教程，想学习下！谢谢哦！
carina
04/30/2010, 14:24
邮箱：200684730@qq.com
shimu
04/30/2010, 19:12
@carina – 恩，已经发过去了～dropbox可能被墙了，所以你访问不了～
pizn
04/30/2010, 23:40
留言板好像隐藏了似的~
shimu
05/01/2010, 01:12
@pizn – 颜色比较深～～
Popo
05/16/2010, 10:58
i@z-po.com
下载不了了，希望能发一份给我 非常感谢。
shimu
05/16/2010, 13:16
@Popo 恩之前的下载链接是指向dropbox的，我更换一下。你可以到http://www.shimuuu.com/free-downloads 页面下载。
mask
05/18/2010, 14:14
您好：浏览到您的博客，很厉害~~~html和css的入门教程已经下载不了了，能不能发我一份呢~~~非常感谢~~~maskui@foxmail.com
shimu
05/18/2010, 18:54
@mask – 可以下载啊，这个页面 http://www.shimuuu.com/free-downloads