网页重构：公司网站小面积改版

公司网站首页要改版，前端是由我和另外一个同事负责，这次改版从页面头部、中间、底部，分三部分，分成三个阶段来制作，这点很同意，小面积的修改，更加让用户接收，随时有用户操作习惯的修改，也可以马上改过来。因为是在新团队的磨合中，每个模块我都添加有注释，不管JS、后端都能清晰的明白栏目的结构，减少项目的BUG，增加团队的工作效率。

 

一、合理的html结构和标签

这次改版，我前期想了很多，如何能延长项目的使用时间，如何让栏目的移植更好，在制作的时侯，把width层和padding border层分开，在以前用到一个div的，现在变成两个div，这样的嵌套，在改变外层宽度的时侯，内层的内边距不变，加大栏目的适用性。交互效果，尽量不影响页面的宽度和高度。合理掌握h1-h6 p strong em small b(html5使用 <b> 标签定义文本中更重要的部分)html标签语义化页面，减少嵌套的结构层，代码行数越少体积就越小，想办法减少网页代码的行数。

 

二、尽可能少的使用css images

能通过代码或字符实现的，就不用图片去解决。比如这次实现的三角形，就是用的◆符号来实现的，既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。

 

三、尽量使用CSS3等新技术

这次在左侧菜单和鼠标触发三角形，都有旋转的样式，满足高级浏览器的视觉，在IE下则是不会动。提升高端用户的体验效果，照顾低端用户的功能需求，这才是循环渐进、预留退路。技术人员不能一味的追求高端的技术，也要了解公司的市场、面向的用户群体、销售的对象。

 

四、对图片的优化处理

网页背景图片采用css sprites技术，但在制作的时侯，放弃把背景类图片都拼合到一张大图上，而是按功能栏目来划分，比如，在导航那里用的图片，在其它频道可能就用不到，拆分的更细，尽可能在加载页面时，减少图片请求数。

图片储存转为png8格式，这是个减小图片体积的好办法。Png8有gif的所有特点，但是相比gif，png8的优势是alpha透明和更优的压缩。总之一句话，尽可能的减少图片加载时间和阻塞时间。

 

五、LOGO的处理

网站的LOGO是img标签的加载，并做出优化，在加载不上图片的时侯，会显示下面的H1文字，默认图片覆盖文字，并在img上面添加height和width参数，即使图片暂时无法显示，页面上也会预留空位，继续加载后面的内容。对后期的维护，不用img标签，换成其它的SWF或整个背景的替换，也不用修改html代码和css样式表，减少后期的操作。取除a标签的虚线，减少视觉的影响。

 

提前预览页面：工厂网头部更换

 

啰嗦两句，设计师在制作项目效果图的时侯，请把握好细节的操作，这次我就发现有很多1像素或几像素的差别，这就让人很为难，连最基本的辅助线都没有，把好多交互效果层都隐藏掉，这样让前端人员很难发现，除非是配合默契的团队，他已经很了解你的工作习惯了。不是非要扣这像素的差别,而是对项目的态度，如果设计出来的效果图都不细致，又如何让前端做出细致的html页面呢？

 

后期的美化和细节的处理

领导看过，不太满意小三角形用字符集的效果，最后决定还是用成图片，在IE下没有旋转的效果，但箭头要直向下，对样式进行调整。有对细节进行美化，比如左右距离的相等、1px-5px的微调、鼠标的形状等等。

 

最终预览页面：工厂网头部更换