个人网站建设教程:切片和布局

http://www.itjxue.com  2015-05-24 22:41  来源:IT教学网  点击次数: 

  上篇文章讲解了如何用Photoshop制作网页效果图,那么怎么把这个网页效果图转化成可以在Dreamwever里面编辑的网页呢,接下来要讲解的是后两个步骤:切片和布局。
  首先要将效果图进行切割,就是把大的效果图切割成小的图片,然后对每一个图片进行编辑,其实这个过程也可以在Photoshop中进行,也可以使用新的软件Firework,由于Firework是专门为网页作图创作的软件,所以在切片方面更加有势,不仅可以切割效果图还可以优化每个图片,所以我们选择在Firework里面切图。
  在切割图片之前要注意,在Photoshop中导出效果图的时候要保存成png格式,然后用Firework打开这个png图片。
切割方法:
先横向切成几行,在细分切成块。保证切出网页中需要多次修改的区域,比如文字、导航等。切片工具位于工具栏web里面:切割时按住鼠标左键从左上方拖到右下方就是一个矩形区域。
1、切成两行
2、切出左边导航区域
3、细化切割区域
  切好后导出网页HTML文件和图片,导出之前先把文件保存,方便后期修改。Ctrl+A全选,执行文件>导出,导出到你想要保存的地方,底下三个选项全都打勾。
  选择浏览,在站点内新建一个文件夹images,点击导出。
  打开文件夹,双击 htm文件,就可以在浏览器中打开网页了,所有切割的图像都会保存在images文件里面。
  然后用Dreamwever打开这个htm文件,自动生成的页面是由表格布局的,接下来就可以修改每一个元素了。

(责任编辑:IT教学网)

更多