本文主要講解如何使用Photoshop切片，導(dǎo)出HTML，并實(shí)現(xiàn)圖片切換效果
下圖是該教程中的圖片滑動(dòng)部分的效果圖
打開PSD文件,找尋該部分的圖層，如下所示（題外話，在制作PSD的時(shí)候，合理的安排圖層的順序和分組，對(duì)后面的PSD轉(zhuǎn)HTML的工作要省心不少）
用切片工具在圖片滑動(dòng)欄附近切出一個(gè)切片，在該切片上右鍵選擇編輯切片選項(xiàng)，在彈出的對(duì)話框中，進(jìn)行如下的設(shè)置
打開圖層面板，隱藏相關(guān)的圖層，如下圖所示
點(diǎn)擊：文件 > 存儲(chǔ)為web和設(shè)備所用的格式，圖片格式選擇PNG-24，點(diǎn)擊存儲(chǔ)按鈕，在彈出的對(duì)話框中，選擇HTML和圖像
這是第一次導(dǎo)出切片，目的是獲得圖片滑動(dòng)欄的背景。用PS打開剛才導(dǎo)出圖片中的背景圖片
用魔棒工具，容差設(shè)置為10，點(diǎn)擊當(dāng)中的背景，按Delete刪除當(dāng)中的背景。將圖片保存為frame.png
將left arrow組復(fù)制到新的文件，移到左上角，設(shè)置合理的大小
將該文件保存為left.png
類似的復(fù)制right arrow組，將文件保存為right.png
將radio buttons復(fù)制到新的文件，移到左上角，設(shè)置合理的大小，將文件分別保存為current.png和pagination.png
current.png
pagination.png
至此，圖片滑動(dòng)欄的圖片就全部準(zhǔn)備好了。（本教程只實(shí)現(xiàn)圖片滑動(dòng)部分）
現(xiàn)在，開始制作圖片滑動(dòng)效果
在VS2010中打開剛才導(dǎo)出的網(wǎng)頁，如下圖所示：
其中03.png的部分就是剛才圖片滑動(dòng)部分
按照之前的教程部分，對(duì)該網(wǎng)頁進(jìn)行修改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PSD轉(zhuǎn)HTML——SlideShow</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
:focus { outline:0; }
img { border:none;}
#container { width:620px;
height:360px;
margin:0 auto;
position:relative;
z-index:0;
}
#frame { position:absolute;
z-index:110;
width:620px;
height:360px;
}
#slides { position:absolute;
z-index:100;
}
.slides_container { width:600px;
overflow:hidden;
position:relative;
left:10px;
top:10px;
display:none;
}
.slides_container a,.slides_container a img { width:600px;
height:320px;
display:block;
}
#slides .next,#slides .prev { position:absolute;
top:148px;
left:-17px;
display:block;
z-index:200;
}
#slides .next { left:594px;}
.pagination { margin:20px auto 0px;
width:100px;
}
.pagination li { float:left;
margin:0 5px;
list-style:none;
}
.pagination li a { display:block;
width:10px;
height:0px;
padding-top:30px;
background-image:url(images/pagination.png);
float:left;
overflow:hidden;
}
.pagination li.current a {background-image:url(images/current.png);}
</style>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" ></script>
<script src="Scripts/slides.min.jquery.js" type="text/javascript" ></script>
<script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#slides').slides({
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
</head>
<body >
<table id="__01" width="1200" height="1900" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="3"><img src="images/01.jpg" width="1200" height="185" alt="" /></td></tr>
<tr><td rowspan="2"><img src="images/02.jpg" width="450" height="1715" alt="" /></td>
<td>
<!--下面是修改部分-->
<!--圖片滑動(dòng)塊區(qū)域—>
<div id="container">
<!--滑動(dòng)區(qū)域-->
<div id="slides">
<!--滑動(dòng)塊背景-->
<img src="images/frame.png" alt="Frame" id="frame" />
<!--上一個(gè)/下一個(gè)按鈕，兩個(gè)圖片超鏈接—>
<a href="#" class="prev"><img src="images/left.png" alt="" /></a>
<a href="#" class="next"><img src="images/right.png" alt="" /></a>
<!--滑動(dòng)圖片，一個(gè)Div，若干圖片超鏈接-->
<div class="slides_container">
<a href="1.html"><img alt="1" src="images/1.jpg" /></a>
<a href="2.html"><img alt="2" src="images/2.jpg" /></a>
<a href="3.html"><img alt="3" src="images/3.jpg" /></a>
<a href="4.html"><img alt="4" src="images/4.jpg" /></a>
<a href="5.html"><img alt="5" src="images/5.jpg" /></a>
</div>
</div>
</div>
<!--上面是修改部分—>
</td>
<td rowspan="2"><img src="images/04.jpg" width="130" height="1715" alt="" /></td>
</tr>
<tr><td><img src="images/05.jpg" width="620" height="1355" alt="" /></td></tr>
</table>
</body>
</html>
下面是滑動(dòng)欄效果圖
效果不錯(cuò)，非常完美。不過要注意的是在PS中切片導(dǎo)出的網(wǎng)頁中，少了<!DOCTYPE>標(biāo)簽和html標(biāo)簽對(duì)xml空間的定義，還需要手動(dòng)添加。沒有這兩個(gè)，做出的效果會(huì)有所差別。
喜歡 
頂
難過
囧
圍觀
無聊
