CSS Sprites的优势与切图方法

CSS Sprites的优势与切图方法

众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。(现在各大门户网站都在这样使用)   下面是一张样图: 本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使用CSS Sprite的时候的一些最佳实践。 不要等到你完成切片之后才开始sprite. 如果你边切图边写CSS,然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中,你就不得不完全重写你的CSS,你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合,就会比较容易些。 把图片放到它要显示的地方的相对的地方 这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如,如果我们希望一个图片出现在一个元素的左侧: 将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话,当你通过CSS移动背景图片的位置的时候,基本上不可能有其它的小图片意外的出现在它的附近。使用Sprit…

Continue reading

PSD网页切图制作HTML全过程教程

PSD网页切图制作HTML全过程教程

今天的这个教程,教大家如何把psd页面利用div+css切割成html页面,这类的教程,本站做的一直都很少,大多讲的都比较零碎的一些东西,在今后,我们将慢慢发布翻译出更多这类的教程,供大家学习,转载请著名来源,以及站码翻译,谢谢…. 首先看看效果 下面的图片就是效果图,切割出来后,可能头部和底部会宽点….. 新建文件夹 开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为index.html,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名为style.css文件。如下图: 打开index.html文件。在head标签顶部,添加链接到您的样式表(style.css)。你可以使用下面的代码。 <link href=”style.css” rel=”stylesheet” type=”text/css” /> 头部的代码如下面: <!DOCTYPE html PUBLIC “-//W3C//…

Continue reading

切图小贴士-教程分享

切图小贴士-教程分享

来源:uimaker.com   作者:mux     用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图、精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果哦! 我们经常会做一个俗称“点九”的切图,什么是“点九”呢?“点九”是Android平台处理图片的一种特殊的形式,由于文件的扩展名为:“.9.png”,所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下,发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸,而保留像素精细度、渐变质感和圆角的原大小,实现多分辨率下的完美显示效果,同时减少不必要的图片资源,可谓切图利器。 “点九”的制作工具为“draw9patch”,具体制作步骤这里不多讲了,插播小贴士第一条:舍弃这个制作工具吧,减少繁琐的步骤,不要再每张图片都拖到工具里画啦!直接用ps+铅笔就可以画哦。 “点九”的学问当然很大,但Android切图不仅需要清楚“点九”的…

Continue reading

手机网站的宽度自适应

如何设置使得手机网站的宽度能够自动适应手机屏幕的大小呢?下面介绍两种方法解决这个问题。 方法一: 在网页的<head>中增加如下这段代码,可以让网页的宽度自动适应手机屏幕的宽度。 <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” /> 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0 :表示初始的缩放比例 minimum-scale=0.5 :表示最小的缩放比例 maximum-scale=2.0 :表示最大的缩放比例 user-scalable=yes :表示用户是否可以调整缩放比例 如果希望打开网页就自动以原始比例显示,不允许用户修改的话,则将以上代码修改为: <meta name=”viewport” content=”width=device-width, initial-scale=1.…

Continue reading