公司网站首页要改版,前端是由我和另外一个同事负责,这次改版从页面头部、中间、底部,分三部分,分成三个阶段来制作,这点很同意,小面积的修改,更加让用户接收,随时有用户操作习惯的修改,也可以马上改过来。因为是在新团队的磨合中,每个模块我都添加有注释,不管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的微调、鼠标的形状等等。
最终预览页面:工厂网头部更换