个人网站建设教程(二):切片和布局
.................................................................................................................................................................
上篇文章(个人网站建设教程(一):photoshop制作网页效果图)讲解了如何用Photoshop制作网页效果图,那么怎么把这个网页效果图转化成可以在Dreamwever里面编辑的网页呢,接下来要讲解的是后两个步骤:切片和布局。
首先要将效果图进行切割,就是把大的效果图切割成小的图片,然后对每一个图片进行编辑,其实这个过程也可以在Photoshop中进行,也可以使用新的软件Firework,由于Firework是专门为网页作图创作的软件,所以在切片方面更加有优势,不仅可以切割效果图还可以优化每个图片,所以我们选择在Firework里面切图。
在切割图片之前要注意,在Photoshop中导出效果图的时候要保存成png格式,然后用Firework打开这个png图片。
切割方法:先横向切成几行,在细分切成块。保证切出网页中需要多次修改的区域,比如文字、导航等。切片工具位于工具栏web里面:切割时按住鼠标左键从左上方拖到右下方就是一个矩形区域。
1、切成两行
2、切出左边导航区域
3、细化切割区域
切好后导出网页HTML文件和图片,导出之前先把文件保存,方便后期修改。Ctrl+A全选,执行文件>导出,导出到你想要保存的地方,底下三个选项全都打勾。
选择浏览,在站点内新建一个文件夹images,点击导出。
打开文件夹,双击 htm文件,就可以在浏览器中打开网页了,所有切割的图像都会保存在images文件里面。
然后用Dreamwever打开这个htm文件,自动生成的页面是由表格布局的,接下来就可以修改每一个元素了。
本文链接:个人网站建设教程(二):切片和布局
转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。
特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
...........................................................................................................................................................
发表评论
要发表评论,您必须先登录。