文章投稿 | 加入收藏 | 繁體中文
网站首页 | 站长之家 | 业界新闻 | 网站运营 | 联盟资讯 | IDC资讯 | 免费资源 | 站长学院 | 站长工具 | 站长手册 | 站长论坛
┫当前位置:网站首页 > 站长学院 > 网页设计 > 教程:PSD网页模板从切图到网页生成 > 正文

教程:PSD网页模板从切图到网页生成

作者:good  来源:本站整理  时间:2008-3-20 13:40:51  字体:  欢迎投稿

鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:www.id89.com

step1:在PhotoShop中打开设计稿,选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧: 大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:www.id89.com

step2:在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择: www.id89.com

我们来看看红线所标识的1,2,3部分,将1所示的切片工具选中,然后点选2所示的图片,在3所示的地方选择色值,如果色彩单一可以选择尽量小的色值位;(为什么要这样??)答案:这样会大大减小文件的大小,同时又能比较好的保持图片的色彩;设置好后点OK输出文件,这里的文件包括了一个htm和images文件夹,如图:

这里候你的页面才算完成了一半,接下来在Dreamweaver里建立站点:

step3:定义站点:

在图示左边的site name中为站点起一个名字,如example

然后在下面的local root folder中选择我们刚才导出的站点所以的文件夹;站点建好后在site map中我们看到:

(为什么要建立站点?)建立站点可以使我们养成一种很好的习惯,就是把一个网站所包含的文件,文件夹有条理的放在一起,同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没

[1] [2] 下一页

热门排行
精彩推荐
文章评论
昵 称:    验证码:
内 容:
 
关于我们 - 公司动态 - 联系我们 - 友情链接 - 广告服务 - 版权声明 - 网站地图 - 网站帮助
Copyright © 2003-2009 ID89.COM All Rights Reserved
备案/许可证编号:粤ICP备08035961号