欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

DIV CSS制作重要步骤经验介绍

div css制作步骤介绍divcss5经验篇

DIVCSS5总结CSS制作重要步骤供大家学习与参考。

一、分析带切美工图   -   TOP

在CSS制作前对网页美工图分析是必不可少的,少了分析会让你接下来布局凌乱。我们分析也应该遵循整体到局部、从外到内、从上到下,分析内容:

1、网页结构
分析网页结构,让自己有数如何布局网页框架,比如分析网页左右、上下结构构造,便于整体布局把握

比如重要的 头部、内容部分、底部版权
内容部分是什么结构,可以如何拆分布局。

2、分析需要切出图片素材
分析网页美工图那些是作为网页背景、那些是内容图片。

作为网页背景图片,如果是背景不重复的一般是隐藏遮挡背景图片上的内容再整体切出,如果是可以平铺重复显示背景,我们如何切出减少素材大小。

3、特效分析
如果网页中有特效,我们如何实现,自己会那没问题,也可以找特效嵌入,这个时候就要求平时多收集常用CSS+JS特效(CSS特效CSS模块),便于布局运用。

4、整体把握
通过整体、局部分析应该做到对此网页CSS布局心中有数,整体框架如何布局,网页如何拆分结构布局、局部是否有难点,难点解决等都要做到心中有数。

二、切出素材   -   TOP

根据第一步分析,切出网页中图片、网页素材等,PS导出切片。

一般图片GIF格式,如果是图片有半透明一般导出PNG格式(ie6 png透明解决),图片内容一般导出为jpg格式。

三、引入DIVCSS5初始化模板   -   TOP

将拷贝一份divcss5初始化模板,命名好文件夹项目名。提供的初始化css模板,包括了CSS文件(style.css)、HTML文件(index.html)、放图片images文件夹,已经对应新建好常用文件夹结构。

CSS模板

四、将切出网页图片素材放入初始化模板   -   TOP

我们将网页素材图片考入新建项目的images文件夹内。

五、开始从上到下、从外到内布局   -   TOP

1、基础修改设置
一般使用DW软件打开index.html,首先进行基本设置,比如根据网页美工图使用PS获得文字颜色、背景颜色,对css中设置字体颜色、背景颜色、如果背景是图片中设置好CSS背景图片。

2、布局把握
一般是从上到下布局,从外到内布局,先布局同级最大结构框架,再局部布局。

比如,头部,我们就开始布局头部最外层div盒子,设置好css布局居中css宽度等,再布局头部上下结构情况,再分别设置局部左右框架最后布局内容(左右布局一般使用css float样式)。

比如左右结构内容,一般是先布局最外层盒子,在跟着布局左右结构2个盒子,然后再回到左侧盒子,开始布局左侧内容。新手不要布局最外层盒子后,就开始布局左侧及左侧内容而右侧结构都没有设置布局,如果这样很容易造成布局混乱与布局错误。

重要:一定先最外层,如何对应左侧和右侧盒子大框架布局了,再回到左侧或右侧开始从上到下布局局部。

以上布局把握布局步骤让您在布局时候有条有理,不易造成布局混乱无从下手。

同时在布局时候可能一般不确定自己布局是否正确是否兼容,可以在布局时候边布局边在一个浏览器中测试兼容,新手千万不要在软件中布局完网页才测试,这样很容易造成错误兼容问题找不到原因。在布局中测试可以发现问题解决问题,让DIV+CSS网页兼容更好。

布局时候可能您会遇到:
css命名
css hack

六、测试css兼容,完成布局   -   TOP

网页布局完后,就进行最后常用浏览器兼容性测试,最后调整修改完善,这样一个从网页美工图到css制作完成的html网页就完成。

希望以上DIVCSS5总结常见重要布局步骤对大家学习与布局有用,网页布局总体思维布局方法一定要善于总结。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r498.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-05-10 10:54 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。