《跟我一起做J2EE版Blog–jPress》7（前端设计，第一个博客主题）

    花开两朵，各表一枝。上一节打通第一个struts2的action后，我们开始设计jPress的第一个默认主题，我不是UI视觉设计师，我也没有太多的艺术细菌，对配色也一窍不通，但是这并不妨碍我们能够基于CSS3和DIV以及更丰富的HTML5来设计一款风格不错，兼容良好的高质量主题。只要有Firefox以及众多的开发者插件，借鉴和模仿专业的视觉设计大师的WEB作品是一件很容易的事情。我很喜欢我现在WordPress的主题，所以我们第一个主题就是模仿这款WordPress上的Admired主题。如下图：

    具体的前端技术设计流程这里无法进行详细的阐述，我只能谈谈在前端设计中使用到的工具以及技巧。首先最好使用Mozilla Firefox浏览器，并配合着IE9++，再下载一个 IETestr进行IE9以下各版本的调试（尤其要针对IE6，IE6是我们永远的痛，不过根据现在的站点分析报告，IE6占比已经很小了）。在firefox中，我推荐如下的几款插件，Web Developer,CSSViewer,firebug,Rainbow。好了，有了这四个足够了， Web Developer是开发者插件集，包含很多常用的工具，可以将页面中所涉及内部和外部的CSS全部罗列出来供你Ctrl+F，此外还提供标尺功能，方便你测量间距像素； CSSViewr可视化显示每一个元素的所有CSS计算样式，已经停止开发了，而且firefox10以上又不让安装，所以要下载一个作者提供的取消验证的版本； firebug可以提供JS脚本单步调试，而且有页面性能分析（可以配合雅虎提供的YSLOW插件帮助优化页面性能）； Rainbow可以取色，分析站点配色方案，这一点对毫无艺术细菌的我来说特别有用，我连#000000到#ffffff格式RGB红绿蓝调色都没概念。
    对于blog系统、商业形象网站，社交分享网站等大多数WEB应用来说，布局都可以分为heaer、content、footer这三个大部分，其他我们还可以定义一些nav、siderbar、entries之类的DIV元素。设计过程中最好是组装形式的设计，元素与元素之间的结构依赖程度尽量降到最低，将来我们使用freemarker（对于php,jsp来说一样）时就可以使用include标签来自定义的引用了。曾经一段时间比较流行从左至右全页面布局，随着终端用户的屏幕越来越大，这种全屏布局很快被淘汰，人们希望自己访问的文字固定在某个特定的位置以方便记忆，不希望上次看到的文字随屏幕大小改变，其位置发生改变，于是一些固定宽度的框架开始流行起来，我们看到的人人，facebook以及twitter都是固定宽度的，其中以 960CSS网格框架最为流行。
    此外，CSS3正在越来越广泛的被接受，各种现代浏览器都内置了自己的CSS3解决方案。曾几何时让UI设计师为止着迷的渐变和圆角，现在不再需要定义若干个DIV和background来解决了，直接使用CSS3就可以做到，下面是一段我所制作的圆角和渐变CSS：

#nav-bar {
background: #0281d4; /* IE6 分级支持 */
background: -moz-linear-gradient(top, #0281d4 0%, #026bb0 100%); /* 渐变 FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0281d4), color-stop(100%, #026bb0)); /* 渐变 Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0281d4 0%, #026bb0 100%); /* 渐变 Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0281d4 0%, #026bb0 100%); /* 渐变 Opera11.10+ */
background: -ms-linear-gradient(top, #0281d4 0%, #026bb0 100%); /* 渐变 IE10 */
background: linear-gradient(top, #0281d4 0%, #026bb0 100%); /* 渐变 W3C */
border: 1px solid #0274BE;	/* IE6 分级支持 */
-moz-border-radius: 7px;	/* 圆角 FF3.6+ */
-webkit-border-radius: 7px;	/* 圆角 chrome safari */
border-radius: 7px;			/* 圆角 W3C */
-moz-box-shadow: 0 1px 3px #555;	/* 外阴影 FF3.6+ */
-webkit-box-shadow: 0 1px 3px #555;	/* 外阴影 chrome safari */
box-shadow: 0 1px 3px #555;			/* 外阴影 W3C */
}

    CSS3中hover伪类的灵活运用帮你减少了很多JS脚本，下面是一段动画伸缩的CSS：

#searchInput {
height:30px;
width:120px;
background:url(../images/search.png) no-repeat 5px 6px;
border:1px solid rgb(221,221,221);
padding-left:28px;
font:normal 14px Arial;
color:#888888;
border-radius:2px;
-moz-border-radius:2px;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
}

    总之因为HTML以及CSS的明文客户端解析方式，大多数情况下我们都可以模仿和借鉴自己喜欢的各种设计和特效，来弥补程序员先天的美工不足，如果你在photoshop，firework上有更深的造诣那是最好的了，如果没有，配合上述的几款软件以及所向披靡的Dreamweaver，再发挥一点点小小的创意，程序猿们也能制作出很好的视觉设计。
    最后我把我设计的这套皮肤的样式打个包，就是一个index.html和三四个CSS文件，有兴趣的可以下载参考一下。 http://www.flyding.com/wp-content/uploads/ckfinder/files/960.zip