网站地图    收藏   

主页 > 入门引导 > 经验分享 >

HTML页面编写的点点感受小结_心得技巧_网页制作

来源:自学PHP网    时间:2015-02-05 11:34 作者: 阅读:

[导读] 在公司同事中学到了不少的经验,也总结出来了自己的一套开发步骤...

在公司同事中学到了不少的经验,也总结出来了自己的一套开发步骤
进入口碑也已经有三四个月的时间了,感觉在工作过程中收获最大的是在编写HTML页面上,从视觉稿到网页DEMO,没办法,基本都在做这样的工作。从最初的wap整站、杭州首页、bug需求到广州首页、上海首页、店铺大全等页面改版,到当下的口碑卡频道首页改版的DEMO的编写。心情从最初的烦躁、枯燥的调试到轻松自如,到当下的信手拈来、游刃有余,摆脱了IE6、7 Fuck bug的束缚,每次尝试到不用写一个hack来完成整个页面布局的滋味,记忆犹新。

在公司同事中学到了不少的经验,也总结出来了自己的一套开发步骤:

整体分析页面布局
归纳统一、分类,切图(CSS Sprites)
拆分模块、规划HTML结构、规划并编写CSS
组合成页面(得益于YUI的页面布局生成器组件)
第一步:整体分析页面布局。
当拿到视觉稿的时候,不是着手去想怎么编写HTML、CSS代码,而是先从整体上分析页面的布局,观察页面各个模块的间距差别、划分header,body,footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等,之后再细化到每个模块的布局,从外到内,逐步细化。可以说,这一步是非常关键的,它给了下面将要进行的代码编写一个整体的框架布局。

第二步:归纳统一、分类,切图(CSS Sprites)
整体分析过后,就是归类、组合模块的时候了。这一步还是的需要从整体来看,分析页面哪些模块的样式相似(常见的就是ul列表,以及一些图文编排),包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类,这为接下来编写CSS代码大有好处,可以最大化的精简CSS代码。

第三步:拆分模块、规划HTML结构、规划并编写CSS
在前期工作都做了之后,这步就改到了动手写代码的时候了,我喜欢将每个模块或者列拆分开来编写,这样做的好处是我可以先不管整体布局,从HTML语意化的角度架构HTML结构,此时HTML代码较少,在编写CSS以及查看HTML代码的时候不用花费太多时间了(痛恨HTML代码多了,上下拉滚动条,累人!)

第四步:组合成页面。
在每个模块都编写好之后,借助页面布局生成器(幸亏有了它,效率第一啊!缺点是HTML结构复杂,-_-),将每个拆分的模块整合起来,同时也清理CSS文件的代码,整合CSS代码也有一些些技巧的:在CSS Sprites里设置HTML元素的背景的时候,把全部的元素都写在一处:

/* 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了,代码整洁,结构清晰,重构维护成本小。还有一点就是慎用margin,在IE6、7下margin会引发很多问题,所以在编写CSS和规划HTML布局的时候,需要考虑到需要使用margin还是使用padding,各有各的好处,margin能保持HTML结构比较简洁,而padding原理是在当前HTML元素的子元素中设置padding来实现布局(当然也可以在当前元素下,但是它会改变宽度和高度,需要重新调整宽高)。所以我的经验是:在模块的HTML和CSS编写方面,都会尽量使用padding,特别是涉及到float的时候,使用padding会避免很多问题。有句话说的好:既然明知道这样做会引发bug,那就尽量不这样做。

上面的开发步骤因人而已,偶是喜欢并且习惯这样的一个思索开发过程,正在体验它的乐趣。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论