VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • css教程之切割效果图

切割效果图(相关css教程
基本框架搭建完毕后,下一步就是要分析每一块该怎么切图了。切图方法有多种,可以使用ps或fireworks自带的切片工具,也可以用QQ的截屏或者创建新文件,把需要的部分复制过来保存都可以,关键看个人喜好了。

用ps的切片工具的话,把需要切割的区域用切片工具切分,如果要设置图片的名称,请使用切片选择工具,然后在切片上双击,会弹出如下窗口,填写名字后确定即可。

切割完后,需要保存图片了,选择文件——存储为web和设备所用格式,在弹出的窗口中点击选中切片,然后在右侧可以设置当前切片的图片格式。这里有个技巧,一般小型色彩单一的图片,采用gif格式,照片类大型图片采用jpg,这样生成的图片既能保证质量,图片体积又小,详细了解可参看:http://www.aa25.cn/div_css/547.shtml


设置完图片的格式后,就可以存储了,这里选择到images的上一级目录就行了,ps会自动创建images目录并把图片文件放入,如果已存在,直接放入。在格式处选择仅限图像,如果选择html和图像,ps会自动生成一个表格式的网页,这个页面不是我们需要的,就不让它生成了;还有一个需要注意的地方就是选择所有用户切片,这样只把我们手动切割的图片保存下来,其它的就不保存了。保存后的图片如下所示,其中hot_bg.gif这张图片切割时没有隐藏上边的文字,一会儿在ps里再处理一下把文字抹掉。


目前所切的图片只是一部分,并没有把整个页面所需的图片全都切割下来,比如导航部分所用背景图片可以放到一张图片上,下面就用新建文件,然后用QQ截屏,粘贴过去的方法来创建。

分析一下上图的导航部分:1、两端的圆角;2、鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变;3、二级导航有鼠标划过时的状态。分析完之后,就需要把需要的图片整合到一张图片上了,整合的结果如下图,这个根据自己的需要进行整合。其实完全可以把其它一些小图标都整合在一张,但那样操作起来比较麻烦,所以我们还是归一下类,把相关的图标整合到一起。

接下来整合侧边栏的背景图片,分析发现侧边栏应用同样的样式,只不过高度有所不同,而且是四角都是圆角,所以只用一个通用的就可以满足所有侧边栏块的需求了。那么怎么制作这个通用的背景呢?从下图我们发现,标题的高度都是一样的,只不过是下边的内容高度不同而已,那么我们把下边内容的背景制作的足够长,超过可能出现的最大高度就可以满足需求了。
      
整合后的效果如上图,如果你现在还不明白为什么要这么做,那么一会儿写完样式表你就明白了。下面把三个图标也给切出来,如下图:

这些完事后,还有联系我们的图片和修饰小图标了。联系我们的图片如下,这里的图片和小图标要背景透明,这样才不会遮盖下面的背景。
 


相关教程