Blog设计网页设计之处女作

178 阅读 0 评论 118 点赞

我是靠谱客的博主光亮电源，最近开发中收集的这篇文章主要介绍Blog设计网页设计之处女作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

笔者设计的第一个网页，如下图:

入行7年了，一直做程序和项目管理，美工这水是从来没趟过，但是每天被美工耳濡目染，再加上嵌套页面时被IE6、Firefox等浏览器的兼容折磨的死去活来，使得本人已具备了一定的网页设计基础，随着公司网站的全面改版，终于下定决心，自己搞一个Blog的界面出来。

怎么说也是个做过程序的，界面的美观度，尤其是代码不能太寒酸了，于是参考了不少牛X的Css框架，选定了一个轻量级的开始下手。

万事开头难，Div+Css布局还不太明白是咋回事，不过大概知道就是把层float来float去的，于是在框架的基础上开始float。左右结构，两列布局，定宽高，左右浮动，很快页面框架就出来了，貌似挺简单的昂。

第二步，往框架里填内容，头像放进去了，不太好看，于是乎就想，弄个圆角吧，可是博客的头像是用户传的，用户可不会自己弄圆角的，看来还是的用样式控制，上网一查，我天，CSS的好麻烦，还的弄4个DIV鼓捣半天，放弃之，找现成的吧，Google搜出来个《圆角框组件--冰极峰》一看代码Js的，国产，写的也很是不赖，提供多种圆角的实现方式，调用简单，就用它了，头像的圆角问题解决之。

第三步：选项卡效果，Blog的类别切换想用选项卡的效果实现，怎么弄呢？答案就是 ------- Jquery，现成的用惯了谁还自己折腾啊，上网一搜，出来一大片，甄别、筛选，最后决定用个简单的，能实现切换和淡入淡出效果，代码往里一扔，样式和图片稍作调整，哦了，真不可思议，是我太有才了还是本身就这么简单。

第四步：加点动态效果吧，个人比较喜欢花里胡哨的东西，看见网站上飞来飞去的效果就挺高兴，可是博客里有什么可花哨的呢，还真没有，于是乎，在最下面团队成员处搞个小效果吧，还是那句话：现成的用惯了谁还自己折腾啊，翻开以前整理的Jquery特效，终于找见一个能派上用场的，效果看着还挺牛X的，这个玩意看着好看，不过整起来还挺费劲，不过终于还是搞定了，看看效果吧。

第五步：注册、登录按钮，列表等内容，这个简单，三下五除二就弄完了，开始离开IE7挑战其他浏览器的兼容性，IE6一打开，我靠，页面变的面目全非、惨不忍睹，这可咋整，难道我做的界面就这么脆弱么？不能啊，把CSS的知识库打开，什么IE6的3像素Bug，Firefox的专用样式等等等等，这才开始现学，学完发现已经第二天下午了，不能白学啊，改吧，这才一点一点调整样式，终于，在第三天晚上整完了，长出一口气，几个浏览器表现基本一致了，一个页面搞了3天半，比我们的美工效率简直差了十万八千里，不过还是有不少细节处理是可圈可点的，一股莫名的成就感油然而生，看着自己的处女大作，喜极而泣！

作为一个web程序员，不懂CSS和JS是可悲的，而作为一个美工，对程序和JS框架不闻不问也是同样可悲的，程序和美工交集的地带有很多工作需要做，也有很多细节需要处理，就是因为意识到这一点，笔者才硬着头皮去搞界面，最后的事实也证明，由熟悉程序的人设计出来的界面，由于在设计时就大量考虑了程序员在嵌套页面时会遇到的困难和不利因素，并提前将其优化，使得程序员嵌套代码时事半而功倍，大量节省了开发成本和调试时间，现在的企业已经越来越讲究协同和衔接，想要填补程序和美工衔接的空白地带，还需要各位同仁在对方的领域里多一点涉足和研究，同时也多一点理解和支持，别小看这一点点进步，它带给你的可能会是质的提升。

目前该界面程序已经嵌套完毕并上线测试，访问地址http://blog.transnal.com，欢迎各位大侠前来拍砖！