Blog设计 网页设计之处女作
发布时间：2010-12-06 17:19:58 作者：佚名 
我要评论
我要评论入行7年了，一直做程序和项目管理，美工这水是从来没趟过，但是每天被美工耳濡目染，再加上嵌套页面时被IE6、Firefox等浏览器的兼容折磨的死去活来，使得本人已具备了一定的网页设计基础，随着公司网站的全面改版，终于下定决心，自己搞一个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，欢迎各位大侠前来拍砖！
相关文章
今天的文章，我们将分享15个可以学习编程的网站，这些网站上提供了很多编程教程，图书以及编程练习，希望对你有用2024-11-02- 这篇文章主要介绍了web开发中的长度单位主要包括px,pt，em等,需要的朋友可以参考下2023-08-06
- px单位是绝对单位，一般用于pc端网页开发,因为是绝对单位所以在移动端上的使用体验并不是很好,rem它是描述相对于当前根元素字体尺寸，是相对单位,它可以根据根元素的变换而2023-08-06
WEB前端优化必备js/css压缩工具YUI-compressor详解与集成用法
压缩工具层次不穷，各有优点，选择适合的压缩工具为将来做项目开发使用是一件很重要的事情！！在这介绍YUI-compressor,需要的朋友可以参考下2023-06-21- 浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作2023-05-01
- 本文为大家整理了常用的文件对应的MIME类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
这篇文章介绍了postman中form-data、x-www-form-urlencoded、raw、binary的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-28- 国际组织制定了可以容纳世界上所有文字和符号的字符编码方案，称为Unicode，是通用字符集Universal Character Set的缩写，用以满足跨语言、跨平台进行文本转换、处理的要求2021-11-27
- 这篇文章主要介绍了前端实现字符串GBK与GB2312的编解码(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-12-02
这篇文章主要介绍了告别硬编码让你的前端表格自动计算,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-27
最新评论