本文摘自PHP中文网,作者藏色散人,侵删。
html切图是指将设计好的PSD文稿转化成html的工作,利用DIV+CSS将设计文稿以网页的形式表现出来;切图的“切”指的是将设计文稿中的图片根据布局的需要,利用ps的切片工具将图像在文稿中分离出来,配合DIV+CSS完成静态页面的制作。
本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。
在网站制作的过程中,切图是指将设计好的PSD文稿转化成html的工作,利用DIV+CSS将设计文稿以网页的形式表现出来,切图的切指的是将设计文稿中的图片根据布局 的需要,利用Photoshop的切片工具将图像在文稿中分离出来,配合DIV+CSS完成静态页面的制作。
切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,首先处理的是什么类型的页面图片型(EDM 或活动着陆页等)、图文型(门户网站或电商网站等)、界面型(Web App 等),把图片切出来这个过程是叫切片。
第二个是体积,所以切图时候一定注意少用图片工具,采用div+css布局更能减小网页体积是表现与内容分离。
切,代表前端!
切图工具
主流是dreamweaver、photoshop软件,还有sketch、firework等,低端QQ切图,网页切图等。
切图目的
为前端编程者带来方便,提高效率,让网页稿有了交互性,实现你平时看到的各种各样的功能。画面浏览速度快,有利于优化。
更多详细的HTML/css知识,请访问HTML视频教程栏目!
以上就是html切图是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
在Html中如何点出head标签?head标签中包含的元素有哪些?
Html area标签是什么意思?Html area标签的用法详解
更多相关阅读请进入《Html》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者