DIVCSS制作的步骤有哪些

本篇内容主要讲解“DIV CSS制作的步骤有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“DIV CSS制作的步骤有哪些”吧!

创新互联主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务宁洱,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

一、分析带切美工图  

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

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

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

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

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

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

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

二、切出素材   

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

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

三、引入DIVCSS5初始化模板   

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

CSS模板

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

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

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

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

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

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

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

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

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

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

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

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

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

到此,相信大家对“DIV CSS制作的步骤有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


新闻名称:DIVCSS制作的步骤有哪些
文章源于:http://pwwzsj.com/article/jspsec.html