Heim >Web-Frontend >HTML-Tutorial >记:Tmall活动页面开发_html/css_WEB-ITnose

记:Tmall活动页面开发_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:30:24912Durchsuche

一、年轻的我      

      “无人不成商”,如果一个电子商务网站想要做起来,搞活动时必不可少的(引入流量、提高用户黏度、活跃网站氛围),今天打折,明天送红包。

      (立秋活动,右)

      作为一个前端,我当然要从技术的角度来讲一下活动页面怎么做,怎么做?刚到,天猫的时候第一个任务就是要做一个(关于立秋食材)的活动页面。由于,太年轻了,跟着我的前任,来到设计师妹纸的屏幕下晃了两眼,嗯,不错,真漂亮,呵呵(可以意会)。言归正传,当时觉得这个页面挺简单的啊,不就切个图嘛,一两天随便玩嘛,还是太年轻。

      前两天我一点也不急,淡定中。直到大限将至,开始整了。前面,很是顺利,框架几下子就搭起来了,接着就切图往里面填素材(要求每张图片的大小不超过50k)。切着切着,觉着不对劲,ps玩过但没有这么玩过,后果就是起来感觉不行,重切,不行,重切,下一张,不行,重切....最最麻烦的是页头(下面细诉难点),切了一天怎么都有空隙,不得不求教前辈了。不知不觉,时间就要到了,设计师,看了设计稿后,是这样的......,好吧,你把要改的地方写个文档。后来,要放到线上的预发环境,我又发现了一个问题,就是图片的本地链接要换成线上的,靠,这个不是坑爹吗(几十张图啊)?我试着问了一些前辈,他们说没有这样的工具(实际上是有的,怪我问错人了)。好吧,于是我又自己随手写了一个图片链接自动替换的工具...后面的事不再细说,这就是成长的代价啊。(沟通不足,切在不了解环境的前提下盲目自信,还是太年轻啊)。

二、“我要打十个!”

      后来,做了些活动页面,慢慢的有了些体会。总结一下吧,

      活动页面,往往量是非常大的,而且有很多个性化,据活动组的同学说(一周可以达到上百个),“我要打十个!”是经常回荡在他们中间的一句话。

      活动页面涉及到几个很重要的部分,构图、图片、组件(包含模板)。

1、构图

      当你拿到一个psd,你怎么下手切图?这就是构图的过程,可以通过拉出辅助线来帮助构图,在使用切片工具将大图分隔为几个划定的小图。我着重介绍最麻烦的页头切割, 

      方式一,中分:

      

      特点:布局比较容易,但是切图时很难精确,(就算精确)两个背景间也很难完全吻合,此时会有缝隙出现。解决这个问题需要在切割时,多切几个像素。

      方式二,水平: 

      

       特点:切图简单,但是布局相对复杂,需要的dom元素也较多。

       注:(这里存在两种布局方式,将图片作为背景,或者使用absolute,50%布局,或者对避免图片间的空隙有很大作用。)

       布局:contianer{width:100%;backgorund:url center;}

              或者 inner{pos:absolute;left:50%;margin-left:-(width/2)px;}

       当然,还有更多其他的方式。 

3、图片: 

      1)、常用图片格式,为gif,jpg,png(png8,png24)。对于活动的背景图,期色彩通常不会特别的艳丽,这种情况下使用gif将会有更好的效果,其质量趋近于jpg的最高品质,当前大小却相当于jpg的中等品质。 (中等品质下图片已经模糊了)

     2)、使用web图片格式(ps,ctrl+alt+s),同一种格式将拥有更小的图片大小。 

     3)、透明

             在移动端采用Png8来完成透明,质量小,且支持良好。

             在PC端,除IE6外采用Png32来完成透明,IE6下则使用Png8,其次是Gif。 

三、组件、模板

      组件、模板复用可以加快页面开发速度,而活动的个性化较低,重复度较高(固定导航,图片热区,tab切换,投票,分享),如果做好了组件和模板的沉淀,那么搭建页面框架,添加功能就会非常的容易。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn