原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC
本系列将向大家讲解并演示如何从PSD图样逐步构建CSS页面的完整过程，我们将通过四张PSD图样系列的转换贯穿教程，在此过程中你差不多可以能体验到WordPress主题模板的制作。本教程涉及的知识点相当丰富，所以西米CC建议你不妨花几个小时的时间来学习、消化并理解它，相信你一定会有非常大的收获。
本教程涉及素材打包下载：
很久没更新博客了，工作忙不是借口，主要是因为最近对屏幕录像感冒了。在网上搜索CSS教程的时候发现一些视频，一目了然很直观，只可惜都是老外做的，以我贫瘠的英文水平，他罗哩巴嗦一大通也只能听懂那么两句。好在对CSS有些了解，所以还能勉强理解里面的内容，于是考虑把它们转载过来。最初的时候是想把这些视频加上字幕，之后因为格式转换、中文支持、智商低下等一系列原因放弃，开始考虑自己照章重录一遍，于是乎便卯上了屏幕录像软件。虽然以前也录过一些小视频，但要正儿八经搞起来也是几度让人濒临崩溃，好在最后总算找到了一个比较合适的软件，在画质、格式、体积的平衡上尚算OK。
下载地址还是Ziddu等一些国外网盘的，虽然速度不济搞得我上传了N次，好歹也是免费的主，可能下载起来比较吃力，最好的时段是上午。也想弄个国内的空间放一下，但是又不想掏腰包所以限制多多，本来用着纳米盘，可惜它的上传工具似乎有名无实，没一次成功过…佣金？何必说得那么直白嘛兄台。如果大家知道国内好点的网盘，不妨跟我推荐一下，以前试过一个宣称无限容量的好像是什么GOGOBOX，巨麻烦，每次那么搞难免望而却步。
PS一个牢骚，最近用彩虹QQ发现腾讯强制要求卸载了，哎哟这么大一个公司肚量却不是很大，人家好歹为了这码事搞了一个团队，就算影响了你官方的流量，如此封杀似乎有点钻牛角尖…现在就连微软的垄断都被撼动了，还死抱着独我一家的念头难免会惹人反感，看看网上有几个人是为腾讯的这种做法拍手称快的？我们这些普罗大众看不透也想不懂那些深层次商业运营的东东，普遍的理解程度也就只有“你腾讯是小器鬼”而已。何况臭皮匠的智慧是无穷的，这不网上一搜就有了破解方法：多开几个QQ，会提示卸载的就只有第一个号码而已。效果不大却又惹来骂名，不禁要学星爷来一句：何苦呢…何必呢…
不过现在发现QQ号码可以通过邮箱的形式申请…想知道我的炮灰Q么…ximicc@gmail.com 哈哈…
这系列视频教程预备分成三到四个部分，几经周折终于搞定了Part1，现在放出下载地址，其中分成SWF和EXE两种格式，分别打了压缩包。再次强调一下每个时段的下载速度可能有所差别，有时候甚至会打不开，如果真的觉得实用想要的，麻烦尝试不同的下载地址或时段：
From PSD to CSS —— CSS布局实战视频教程 Part 1 【SWF格式 36MB】
From PSD to CSS —— CSS布局实战视频教程 Part 1 【EXE格式 21MB】
取名朝花夕拾没有什么特别的意思，真要说的话，就是希望大家看了这一系列的教程之后，能够在学习CSS的道路上更快前进一步，早上看晚上就有收获，哈哈…在录制教程的过程中，加进了一些个人的理解和观点，不妥之处还请留言指正。
本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始…教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里我就直接给出图片素材的压缩包，以及网页最终效果图：
下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材：
第一集视频采用SWF格式录制，完工之后数了数居然有57M大小，这么搞下去就算网盘放得下，我的硬盘也没地方存电影了，所以在考虑第二集用WRF格式录。本集主要的内容是一些简单的前言引入、效果图布局解构，以及基本的HTML框架布局和样式设置，对于初学者而言内容也算比较多了，大概有20分钟左右…当然一定程度上也是因为我慢悠悠的语速拖延了时间 – -! …
视频录制分辨率为1024×768像素：视频截图001 视频截图002 【绝对清晰啊…】
DIV+CSS布局实战系列视频教程【Part1 – SWF格式 – 57.3MB】
重传到了Freakshare网盘上，需要倒计时90秒才能下载，需要的朋友耐心点吧…
Continue Reading →
