我看过一些这方面的书，还有一本英文的，也有很多年的实践经验，虽然不怎么成功但是我确实比较熟练了，无论是从空白做起，还是利用内容管理系统，都可以举一反三。
设计网站前请拿出一根笔，一张纸，罗列出以下的东西。
- 首先确定一个网站的内容，面向群体，像我的网站就是自己写着博客玩的，主题是记录技术的学习吧。
- 然后确立一种叫信息架构（IA）的东西，也就是类似站点地图，一个网站的结构，比如一个博客有首页、相册、关于、文章等几个大版块，大版块分为几个小版块。
- 接着，可以画出一种线框图，就是一个网站的草图，用方框和线组成。描述一个网站的布局，发挥自己的想象。如果帮别人做网站可以先画出线框图，省得做好之后和别人的想法相去甚远，浪费自己的功夫。
- 下一步可以画出效果图，利用photoshop或者fireworks，然后切片，取出所需的素材。我就省去了绘制线框图，直接绘制了一个类似效果图的简略的图，然后直接开始了，因为我想追求简洁简单。
- 设计配色时可以利用kuler工具，也可以利用我的微博应用（还没做完）http://adacolor.sinaapp.com/
下边就是我的草图:
利用切片工具切图，或者去色重新制作，不仅代码要考虑到重用性，素材也要考虑到重用性。下边我就介绍一下，节约是美的素材节省策略。
我设计的主要是以圆角矩形为主的风格，但是图形边界永远是直角的，只有利用透明的像素看起来是圆角，为了照顾ie6浏览器，我选择gif图片，由于我去色不多，我gif8位就足够了。除了bmp其他的格式都经过压缩的，所以它们的大小和颜色数量有着很大的关系，超过了和图片尺寸的关系。
一个圆角矩形，我分为三部分，上边，中间，下边。中间使用CSS的背景颜色，也就是我只需制作上下部分。如下所示：
边栏的矩形也是如此，后来我发现这样太平凡了，我稍稍做了一点美工用photoshop画笔轻描边缘，然后利用加深简单工具制作光线从左上到右下的效果，试图模仿玉石的感觉。
接下来就是设计xhtml+CSS的html页面了，最好要符合w3c标准，考虑到多浏览器支持，到底考虑不考虑ie6呢，到底多大尺寸合适呢？需要经过调查网站将来的用户群，比如我觉得学生们多数用笔记本，分辨率宽1300多，那么我的网页主体区域就1000px左右，既然Discuz选择960px默认宽，那么我也做960宽度吧。博客分两栏，最好按照黄金比设计。
下边是效果图，纪念一下，将来换模板了也没事。
最后再介绍一个更加节省的构造几乎“任意”大小圆角矩形的方法，分为五部分，顶部分两半，左边是一个一端圆角一端直角的图形，而且比较长，右边也一样，然后利用css设置背景的显示大小，或者指定overflow隐藏，制作可以自由宽度的顶部，同理下边也一样。