HTML网页页面撰写的点点体会小结

2021-03-22 04:36 jianzhan
进到口碑也早已有34个月的時间了,觉得在工作中全过程中获得最大的是在撰写HTML网页页面上,从视觉效果稿到网页页面DEMO,没法,基础都在做这样的工作中。从最开始的wap整站、杭州市主页、bug要求到广州市主页、上海市主页、店面大全等网页页面改版,到当下的口碑卡频道主页改版的DEMO的撰写。情绪从最开始的心烦、枯燥乏味的调节到轻轻松松轻松,到当下的信手拈来、得心应手,解决了IE6、7 Fuck bug的拘束,每次尝试到无需写1个hack来进行全部网页页面合理布局的味道,记忆力犹新。

在企业朋友初中到了很多的工作经验,也总结出来了自身的1套开发设计流程:

总体剖析网页页面合理布局
梳理统1、归类,切图(CSS Sprites)
拆分控制模块、整体规划HTML构造、整体规划并撰写CSS
组成成网页页面(得益于YUI的网页页面合理布局转化成器组件)
第1步:总体剖析网页页面合理布局。
当拿到视觉效果稿的情况下,并不是下手去想如何撰写HTML、CSS编码,而是先从总体上剖析网页页面的合理布局,观查网页页面各个控制模块的间隔区别、区划header,body,footer、CSS Sprites、切图事宜、网页页面色彩、情况怎样设定这些,以后再细化到每一个控制模块的合理布局,由外到内,逐渐细化。能够说,这1步是是非非常重要的,它给了下面即将开展的编码撰写1个总体的架构合理布局。

第2步:梳理统1、归类,切图(CSS Sprites)
总体剖析之后,便是分类、组成控制模块的情况下了。这1步還是的必须从总体看来,剖析网页页面哪些控制模块的款式类似(普遍的便是ul目录,和1些图文编排),包含色调、款式、装饰、情况、宽度、padding、margin、border这些。将类似的控制模块的款式分类,这为接下来撰写CSS编码大有益处,能够最大化的精简CSS编码。

第3步:拆分控制模块、整体规划HTML构造、整体规划并撰写CSS
在早期工作中都做了以后,这步就改到了动手能力写编码的情况下了,我喜爱将每一个控制模块或列拆分起来撰写,这样做的益处是我能够先无论总体合理布局,从HTML语意化的角度构架HTML构造,此时HTML编码较少,在撰写CSS和查询HTML编码的情况下无需花销太多時间了(讨厌HTML编码多了,左右拉翻转条,累人!)

第4步:组成成网页页面。
在每一个控制模块都撰写好以后,依靠网页页面合理布局转化成器(多亏有了它,高效率第1啊!缺陷是HTML构造繁杂,-_-),将每一个拆分的控制模块整合起来,另外也清除CSS文档的编码,整合CSS编码也是有1些些技能的:在CSS Sprites里设定HTML元素的情况的情况下,把所有的元素都写在1处:

/* background url */
.rhs-bd,.business-join h1,.yk-mod-content .business-join p a,.business-open-flow ul,.business-case-list ul li,
.kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li,
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}

这样相应的元素只必须设定background-position就OK了,编码干净整洁,构造清楚,重构维护保养成本费小。也有1点便是慎用margin,在IE6、7下margin会引起许多难题,因此在撰写CSS和整体规划HTML合理布局的情况下,必须考虑到到必须应用margin還是应用padding,都有各的益处,margin能维持HTML构造较为简约,而padding基本原理是在当今HTML元素的子元素中设定padding来完成合理布局(自然还可以在当今元素下,可是它会更改宽度和高宽比,必须再次调剂宽高)。因此我的工作经验是:在控制模块的HTML和CSS撰写层面,都会尽可能应用padding,非常是涉及到到float的情况下,应用padding会防止许多难题。有句话说的好:既然明了解这样做会引起bug,那就尽可能不这样做。

上面的开发设计流程因人罢了,偶是喜爱而且习惯性这样的1个思考开发设计全过程,正在体验它的快乐。