网站首页 > 网页制作之切图的技巧

网页制作之切图的技巧

一般的网站制作步骤大体上为:设计效果图–》切图+制作静态html模板–》嵌套至CMS,其中,切图固然是很简朴的一个步骤,但其中也有良多技巧,以下是我个人总结出来的几点。

 

总体上,掌握一个原则,能用css写的,果断不要用图片。经验告诉我们,首页图片良多的网站打开会很慢,一是由于图片多,需要下载的文件体积就增大,二是每一个图片下载都会对服务器有一个哀求,增大了浏览器与服务真个交互次数,假如能把纯色的部门用css来写,而不由于省事直接切图,就会极大进步网站的运行效率,我最早开始学习制作网站时,就想当然的以为怎么样能加快制作速度就怎么来,于是把一个导航条的背景直接切成图片,后来老板看到我写的 html代码,告诉我不能这么干,用div定义好宽和高设置背景色和边框,一行代码就搞定。假如碰到有渐变色的背景,可以沿着与渐变色相同方向切一个像素的条纹,用css中background的repeat-x或repeat-y来自动填充。

 

对于有圆角的导航条图片,可以将两边的圆角部门单独切出来,中间假如有渐变色,也是只切一个像素的条纹,切出来的三个条纹可以合并到一张图片里(上、中、下),使网页中使用的时候用css中的positon属性来定位图片泛起的位置。

 

在切割效果图的过程中,对于图片的保留格局也有讲究,一般来说,用图像工具(如photoshop)制作的色彩绚丽的按钮或图标一般都存成png格局,而用相机拍摄的风景或人物、物体图像多用jpg格局保留,gif一般用来存储含有简朴动画效果的图像,另外需要留意一点的是,假如图片中使用了透明效果,要存储成png-8的格局,png的其他格局要么不支持透明,要么保留时文件要大良多,png-8是”性价比”最高的。

图标一般用png格局

对于用作背景或衬托效果的颜色较多的图片,保留图片时尽可能从清楚度和图片大小中找到一个平衡,既保证图片尽可能小又不失真,这点就要凭个人经验了,由于每个人的尺度不同,千万不能不压缩图片直接放上去,然后靠width和height来进行限制,这样做是自欺欺人,浏览器会先把大图片下载到本地,然后用样式强制将它压缩,显示不但不会更清晰,反而会失真,曾经我就碰到过有个网站首页都打开了,唯有一个局部是个空缺的方形,过了好几秒才加载出来一张图片,好奇的下载了这张图片,竟然有2M多……这一点不光是首页切图,在网站的内容上传时最好也要养成良好的习惯,特别是新闻的配图,现在的相机效果越来越好,拍出来的图片动不动好几兆,一定要对图片尺寸进行处理后再上传,一般处理图片的宽度为500-600像素之间,高度自动等比例即可。

 

切好图片的命名也要养成良好的习惯,最好的命名习惯就是见名知意,我见多数网站的图片使用切图工具软件批量切割的,命名很不规范,好比 index_01、index_02、index_02_01等有规则但无意义的图片,也许你说图片命名本身的意义并不是很大,由于这个名字只有浏览器加载的时候才会用,但是,对于一个扩展性强的网站来说,在进行改版和维护的时候,假如要更换某些网站图片,就需要一个一个从浏览器中右键查看图片地址,记下每一个长长的没有规律的图片名称,这会让技术职员十分崩溃(也可能就是你自己),所以,在保留图片时就给它写上有意义的名字是很必要的。

 

以上是个人总结的在网站切图时的一些技巧,但愿对泛博菜鸟级的或者想从事网站制作行业的朋友一些建议,欢迎学习交流!

天之南专业提供:无锡seo、无锡网站优化、无锡网站建设、SEO优化软件、百度快速排名软件、超级外链工具、原创文章生成软件等,助企业轻松网站排名!
COPYRIGHT © 2011 cntzn.com 无锡seo 版权所有. All rights reserved. | Email :support@cntzn.com 无锡网站优化
苏ICP备17051233号 powered by 天之南 服务支持: