下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

DIV+ CSS网页制作流程

作者:课课家教育     来源: http://www.kokojia.com点击数:1444发布时间: 2019-03-19 11:07:52

标签: DIV+ CSSweb开发CSS经验

Web开发

       对于很多刚刚学习完css理论,想在DIV+CSS制作中一显身手的人来说。最大的问题莫过于空有一身理论,却不知到该从哪些方面开始入手。为了解决这个问题,我们课课家网站总结了一些DIV+CSS网页制作流程,下面让我们一起进行今天的学习吧!

DIV+ CSS网页制作流程_DIV+ CSS_web开发_CSS经验_课课家

  一、分析美工图

  在网页制作之前,我们通常预先设计出网页的大致效果,画出美工图。所以对网页美工图进行分析是我们 DIV+CSS制作的首要任务。因为如果少了这个步骤,将会导致你接下来布局出现凌乱。美工图,我们可以从以下三方面进行分析:

  1、网页结构

  我们可以先分析网页的左右、上下构造,实现整体布局把握,然后为了便于我们拆分布局,可再对一些重要部分进行重点分析,如网页头部,主体核心内容、底部版权等。

  2、分析素材

  分析完结构后,接下来我们要分析图片类型。即哪些是内容图片,哪些是背景素材。

  3、特效分析

  如果网页中有特效,我们就要考虑自己能否实现,如何实现?如果我们觉得自己实现这些特效的把握不大,可以寻找对应的特效代码嵌入,这个时候就要求平时多收集常用CSS+JS特效,便于布局运用。

  通过以上3点的分析,我们要做到对整体框架如何布局,网页如何拆分结构、局部是否有难点等心中有数。

  二、切出素材 

  接下来,我们就要根据第一步分析,切出网页中图片、网页素材等,然后导出切片。

      图片一般使用GIF格式,如果是图片有半透明一般导出PNG格式,图片内容一般导出为jpg格式。

  三、引入初始化模板 

  为了节约每次开发CSS项目时候准备时间,我们不妨考虑引入一份初始化css模板。初始模板包括了CSS文件(style.css)、html文件(index.html)、存放图片images文件夹。

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

  这一步很简单,就是将网页素材图片拷入新建项目的images文件夹内。

  五、开始布局 

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

  比如头部,大致上我们可以先定义最外层div盒子,即设置好css布局居中,css宽度等,然后布局头部上下结构情况,接着是设置局部左右框架,最后布局内容。(左右布局一般使用css float样式)

  至于局部布局,我们以设置左右框架为例,正确的做法是先布局最外层盒子,在跟着布局左右结构2个盒子,然后再回到左侧盒子,开始布局左侧内容。切记不要布局最外层盒子后,没有布局左右结构盒子,就直接开始布局左侧及左侧内容。这种做法很容易造成布局混乱与布局错误。

  在布局时候如果不确定自己布局是否正确是否兼容,可以在布局时候边布局边在一个浏览器中测试兼容,这样做有助于使我们及时发现问题并进行解决。

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

  网页布局完后,就进行最后常用浏览器兼容性测试,最后调整修改完善。

  以上就是我们课课家网站为大家总结的DIV+CSS制作的六大流程,不知道DIV+CSS制作从何入手的朋友,不妨参考一下。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程