从设计图到HTML页面时的注意点

从设计图到实现,在牺牲小细节的情况下,如何保持整体结构的一致性,是个需要注意的问题。

在Photoshop里做出的设计图,可以对:字体,大小,位置,边距,颜色做很细节的调整,而实现成HTML页面时,则因为浏览器排版和兼容性的问题,往往实现出的效果不那么尽如人意。

页面实现时要避免太随意的通过margin, padding来设置间距,大家喜欢用整数,如:5,10,20,来设置间距,然后大体看一下比例,这样虽然各个局部的比例大体是对的,但作为整体就会不那么一致,因为每个地方都差一点,合在一起就不好看了。

另一个需要注意的是字体问题,受限于浏览器可用字体的限制,有时只能用替代的字体,这时要注意字体的行高,间距,有必要的话,微调字符的间距,例如:Afric,这儿的fr靠的太近就不太好看,可以适当微调一下,例如:  Af<span class="char_r">r</span>ic,然后设置r的左边距:.char_r { margin-left: 2px;},当然这儿只适用于比较重要的标题等处的文字。

posted on 2010-06-24 23:27  ji yang  阅读(342)  评论(2编辑  收藏  举报

导航