用PS切图和输出网页

关于PHOTOSHOP切图的问题,其实不是什么大问题,可是最近很多人都在问我。干脆写个教程吧~~(以下步骤均在PS7中进行,PS6版本和7略有不同,请自行琢磨)

切图的好处,第一,是要控制单张图片的大小。把大图片切割成几个小图片,有利于浏览者尽快看到你的网页。第二,为了使排版不受到网页制作软件的限制。

我们先用PS做好以下图片(这个你爱怎么做就怎么做啦,在PS里没有排版的限制,不用考虑太多的)
点击在新窗口中浏览此图片
【图8.1】
图片做好了,我们开始切图,使用PS中的切割工具:
点击在新窗口中浏览此图片
【图8.2】
对于画面的切割,总体的原则是要保证每个切片控制在一定大小内(一般10K以内)。注意我上面切割的图,标号(1)的区域是菜单,标号(2)的区域是打算放内框架的部分。在下面的部分里,我们将学到这两个区域的用途。
切好图片之后,我们通过菜单的“文件”-“存储为web所用格式”,打开“存储为web所用格式”窗口。
点击在新窗口中浏览此图片
【图8.3】
点击在新窗口中浏览此图片
【图8.4】
点击在新窗口中浏览此图片
【图8.5】

JPG格式一般适用于颜色较多,尤其是有渐变色的图片,一般品质为60就可以。GIF格式适用于颜色较少的图片,颜色可以选择128、64、32、16等。
选择切片格式和品质的原则,就是在浏览器中看起来和压缩前变化不大。点击【图8.6】中的小三角,选择弹出菜单中的“编辑输出设置”。弹出【图8.7】的输出设置窗口。
点击在新窗口中浏览此图片
【图8.6】
点击在新窗口中浏览此图片
【图8.7】

在【图8.7】中,其他的设置都不用管。点击“下一个”,切换到【图8.7】的页面, 注意这里的“将图像放进文件夹”。这个选项的意思就是,如果你把图片的html文件保存为example.html,那么切掉的小图片就保存在于example.html同目录的images文件夹中。大家试试看就知道了。
最后,点击【图8.3】中的“存储”,就跳出保存文件的窗口了。我们现在把文命名为example.html,存放在合适的位置。

好,现在关闭PS,打开DW。打开刚才保存的example.html文件。我们可以看到,其实这个图片是被保存在表格中的。现在我们需要重新回顾【图8.2】中的两个切割区域了。
区域(1),这个是菜单,是要在各个菜单选项上做上链接的。选择区域(1)的图片,在属性框里,我们选择“热点切割”工具,在图片上划出热点链接区域。见【图8.9】。
点击在新窗口中浏览此图片
【图8.8】
点击在新窗口中浏览此图片
【图8.9】

【图8.9】就是区域(1)被热点切割后在DW中显示的样子。选择蓝色的热点,就可以在属性中定义超级链接、替换文本等。

点击在新窗口中浏览此图片
【图8.10】
然后我们看区域(2),我们注意到,其实这个区域图片是一张纯白色的图片,没有任何内容,我们可以直接把这张图片删去。删掉后就可以在单元格中直接输入文字了。这里要注意的是,不要轻易使用回车,否则可能会打乱整个表格的。
点击在新窗口中浏览此图片
【图8.11】

一般来说,我们习惯于在区域(2)做一个内框架,就是把一个网页嵌在内部,并且有滚动条。
查看example.html的源代码,找到区域(2)这里的代码部分,
<TD ROWSPAN=5>
<IMG SRC="images/example_4.gif" WIDTH=28 HEIGHT=250 ALT=""></TD>
<TD ROWSPAN=4></TD>
<TD ROWSPAN=5>
<IMG SRC="images/example_6.gif" WIDTH=42 HEIGHT=250 ALT=""></TD>

在<TD ROWSPAN=4>和</TD>间插入内框架的代码:
<iframe
border=1 frameborder=0 framespacing=0 height=100% marginheight=0
marginwidth=0 name=new_date noResize scrolling=yes
src="news.html" width=100% vspale="0"></iframe>


其中,news.html就是内部框架要应用的网页。你可以按照实际情况来修改。内框架的边框大小、颜色、是否显示滚动条等都可以设置。对滚动条定义一下风格,就可以于这个图片统一了(IE5.5以上支持)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值