• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > 个人网站建设教程(二):切片和布局

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

.................................................................................................................................................................

上篇文章(个人网站建设教程(一):photoshop制作网页效果图)讲解了如何用Photoshop制作网页效果图,那么怎么把这个网页效果图转化成可以在Dreamwever里面编辑的网页呢,接下来要讲解的是后两个步骤:切片和布局。

首先要将效果图进行切割,就是把大的效果图切割成小的图片,然后对每一个图片进行编辑,其实这个过程也可以在Photoshop中进行,也可以使用新的软件Firework,由于Firework是专门为网页作图创作的软件,所以在切片方面更加有优势,不仅可以切割效果图还可以优化每个图片,所以我们选择在Firework里面切图。

在切割图片之前要注意,在Photoshop中导出效果图的时候要保存成png格式,然后用Firework打开这个png图片。
切割方法:先横向切成几行,在细分切成块。保证切出网页中需要多次修改的区域,比如文字、导航等。切片工具位于工具栏web里面:切割时按住鼠标左键从左上方拖到右下方就是一个矩形区域。

Slice and layout1
1、切成两行

Slice and layout2
2、切出左边导航区域

Slice and layout3
3、细化切割区域

Slice and layout4

切好后导出网页HTML文件和图片,导出之前先把文件保存,方便后期修改。Ctrl+A全选,执行文件>导出,导出到你想要保存的地方,底下三个选项全都打勾。

Slice and layout5

选择浏览,在站点内新建一个文件夹images,点击导出。

Slice and layout6
打开文件夹,双击 htm文件,就可以在浏览器中打开网页了,所有切割的图像都会保存在images文件里面。

Slice and layout7
然后用Dreamwever打开这个htm文件,自动生成的页面是由表格布局的,接下来就可以修改每一个元素了。

Slice and layout8

本文链接:个人网站建设教程(二):切片和布局

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流