当前位置:首页 > 建站流程 > 详情
sousuo
sousuo

网站制作环节第3步:前端架构(切图)

上传时间:2019-12-10              浏览次数:332

网站的前端架构也叫切图,就是把网站从设计稿变成代码+素材的形式,而不是大家理解的把图片切成小碎片。为了加快网站开发进度,一般网站前端制作的过程是确认一个页面就开始做一个页面。比如说确认了首页的设计稿,我们就开始制作网站首页,内页确认完就开始制作内页。

相对于把一个设计图分割成几个小图片那样简单粗暴的“切图方式”,我们所说的网站前端架构实际上是把设计稿转化成DIV+CSS架构的HTML文件、CSS文件、JS前端程序文件,这样的网站切图主要有以下几方面的好处:

1、页面特效更丰富

2、加载速度更快

3、更利于搜索引擎抓取

写成代码的方式,就可以做很多交互特效,而不是一个死板的图片。而且尽可能地把文字都做成html中的文字这样搜索引擎抓取识别度更好。再进行网站前端架构的时候主要有三个步骤:

第一步:素材处理

PS文件里有一些素材,是需要做成一个一个的小图片的,还有一些图片可能不在设计稿里也需要进行一些处理,比如说尺寸大小的处理,压缩等等。

第二步:div+css架构

html书写过程就是一个div+css架构的过程。

第三步:增加CSS3特效

网站上部分细节需要用到css3的动态特效。这个在制作网页的时候有的就会写好,还有一些会在做好之后再增加。

第四步:增加JS特效

js和css3相互替代,但是有各有特色,所以根据网站的情况来进行JS特效的架构和调优。

第五步:兼容性测试

网站前端开发一定要注意兼容性,要在各大浏览器上表现出色才行。

以上四个步骤并不是完全割裂开的。考虑到开发效率,我们不会把四个过程流水线操作,也不会分成4个人来做,而是同一个人操作,这样在书写的时候有些模块是直接全部都处理好的,包括特效都是在书写的时候就做好的。

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们