学习网页制作的朋友，在学习别人制作的网页时，经常会看到下面的这张图片：

图一

上面的图片是网页设计师将一个页面的图片集中到一张图上，然后根据网页内容的需要调取图片某一处的图标，那么如何确定这一张图片上的某一位置呢，我的作法是用photoshop确定，当然高手可能会有更加好的简单的方法，但我是用这一方法的，下面就开始说一下如何去做：

一、用photoshop打开上面的图片，我们可以查看该图片的尺寸是：高度是288像素，宽度是108像素。知道了他的尺寸，我们就可以按ctrl+a全选(见图二左侧图)，然后点击菜单栏的-选择-变换选区(见图二右侧图)。

图二

二、我们点击菜单栏下面的这一个图标

，将方位点选到右下角，这样我们就看到了X、Y、W、H这四个参数。分别是：108.0px、288.0px、100%、100%，这就是整个图片的参数，下面我们要做的是确定某一处的参数，见图四，我们来确定一下箭头所指的图标的位置，用鼠标拖动下面的小方框，一直移动到那个图标的上方，

我们看到了X、Y、W、H这四个参数。分别是：108.0px、145.0px、100%、50.3%，那么这就是我们需要的参数了，也就是我们要的图标的起始位置了，有像素数，也有百分数，在制作网页时，你用像素也可，用百分数也行呀，呵呵。

我们可以再试着，拖动一下右边的小方框，看看这四个参数的再变化

我们看到了X、Y、W、H这四个参数。分别是：70.0px、145.0px、64.8%、50.3%，是不是很简单的就取得了起始位置呢?下一步就是在网页中应用图片了。

由于文笔太差，有不明白的地方，可以留言……

本文欢迎转载，转载请注明出处：站长学习网-www.zxx6.com。

评论 (0) All

登陆 还没注册？