怎样用好网页图像拼合技术？
有一些网页上的图片很美，但保存时提示"网页保存失败"，即
使保存下来，图像也成了片状的。
问：怎样用好网页图像拼合技术？
1.怎样把切成片的图像拼合起来？
2.怎样把切成片的图像在网页中能正常显示？
3.怎样点击图像不同局部，进入不同链接？
答：
只有把图像拼合技术看作是图像切片技术的逆过程，才能使拼
出的图像达到较高的质量，图像比较完美。
使用图像切片技术，有以下特点：
1.一些大的图像在网页上显示很慢，切片以后，可以加快显示。
2.对某些情况下，图像切片可能对产权有一定的保护作用。但也
有局限性，使用范围较小。
3.可以通过图像切片，分区建立链接。甚至可以起到菜单的作用，
直观方便。
图像切片的使用方法：
以大家熟悉的影视图像《大长今》为例，加以说明
一. 图像切片步骤：
1.进入ImadeReady系统。（Photoshop 自带的配套软件，网页功
能强）
2.打开文件：dcj.jpg
3.划分切片。
切片 |划分切片 显示对话框：
水平划分 纵向切片数 默认为 1,改为 6
每切片像素 默认值为图像的高480,改为 80 。
垂直划分 横向切片数 默认为 1,不变。
每切片像素 默认值为图像的宽640,不变 。
如果每片像素高度不相等，则应分片设置。
切片的显示和隐藏。
视图 |显示 |切片 或用 右键选择 "切片"。
4.存储优化结果。
文件 |优化结果存储为 |保存类型 默认值为"仅限图象"改为：
HTML和图像（*.html）。
选择你自己的保存目录及文件名，
如 dcj.html
5.用浏览器进行预览。
文件 |预览 |Iexplore 应显示正常。
在浏览器中，选择：
文件 |另存为 清选择你自己的保存目录及文件名，如 dcj.htm
二. 图像拼合步骤：
1.进入ImadeReady系统。
2.打开文件：打开上述 6个切片文件（dcj_01.jpg，dcj_02.jpg,...dcj_06.jpg）
3.新建文件和图层。
按 Ctrl+N 建新文件，设宽为 640,高为 480，
按 Ctrl+Shift+N 建新图层。
4.划分切片 切片 |划分切片 显示对话框：
水平划分 纵向切片数 默认为 1,改为 6
每切片像素 默认值为图像的高480,改为 80 。
垂直划分 横向切片数 默认为 1,不变。
每切片像素 默认值为图像的宽640,不变 。
5.分别选取。
切换到分图 选取移动工具，选取“显示变换框”，
复制 ( Ctrl+A, Ctrl+C)
切换到大图 粘贴（Ctrl+V)。
或者用鼠标将小图直接拉到大图中，放好位置即可。
图层 |合并可见图层
6.拼合和删除切片。
切片 |组合图片 。
切片 |删除 。
将大图切片，是为了保证拼合的质量。
拼合好以后，就应删除切片，否则图片无法保存为网页所需格
式。
7.保存文件。在 ImageReady 中，保存文件一般为 .psd 格式。
这时选择 文件 |转到 PhotoShop 中编辑
在PhotoShop 中，可以选择：图层 |合并可见图层
文件 |保存为Web页格式 然后选择jpg 格式。
HTML文件图象及脚本：
- 格式: JPEG
- 尺寸: 640w x 480h
- 大小:60.2K
- 图像: 6
- 设置:品质为60, 非连续的, 优化的打开
<html>
<head>
<title>dcj</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (dcj.jpg) -->
<table id="Table_01" width="640" height="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/dcj_01.jpg" width="640" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dcj_02.jpg" width="640" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dcj_03.jpg" width="640" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dcj_04.jpg" width="640" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dcj_05.jpg" width="640" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dcj_06.jpg" width="640" height="80" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
|
三. 怎样点击图像不同局部，进入不同链接？
脚本的修改：（以图像中间第3幅图片为例，点击图像的中间
部分，就可以显示出另一幅少年时代的图像）
修改前的图片脚本：
<TR>
<TD><IMG height=80 alt="" src="images/dcj_03.jpg"
width=640></TD></TR>
修改后的图片脚本：
<TR>
<TD><a href="draw/dcjx.jpg">
<IMG height=80 alt="" src="images/dcj_03.jpg"
width=640 border=0></TD></TR>
两者比较，只增加了一个链接。其中 border=0 用于隐去链接
的框线。
对于需要切片是大小不等的，如地图、动画等，可以根据范围，
划分好选区，在 ImageReady 中 选择 |从选区创建切片。
以选区作为切片，然后建立链接。拚图则反向操作。
选区可以变成切片。但Photoshop的选区形状可以是任意的，
而切片的形状是规则的不是任意的，这中间的差别部分就可能使链
接误导到别处。因此复杂的图形，如地图、动画等切片的布局是一
项难度较大的技巧问题。
关于切片拚图的操作。
详情请参阅附录：《Photoshop切片技巧资料摘编》
上述操作步骤，用的是 WindowsXP 下 ImadeReadyCS V8.01
中文版提示。如为 Windows98 下 ImadeReady V7.0 时，提示稍有
出入，功能不受影响。
附图：
拼合后图像 dcj.jpg ; 少年时代 dcjx.jpg
拼合后图像 
少年时代
图片资料来源：《网页素材库》
参阅：Photoshop切片技巧资料摘编
详见: yy05111.htm
河石 2004.10.25 编
黄河之滨 网站 ： http://hhstone.vip.sina.com
： http://www.hhstone.com
