文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

DIV+ CSS网页制作流程

lzzyok小宝贝

lzzyok小宝贝

2024-04-23 23:35

关注

       对于很多刚刚学习完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制作从何入手的朋友,不妨参考一下。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     425人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     198人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     158人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     236人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     61人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯