用切片工具切出上面分出的那些區(qū)域，注意切片與切片之間不能相交，也不能有間隙，仔細(xì)點(diǎn)調(diào)整好。切片的時(shí)候大小不合適可以隨時(shí)調(diào)整大小，方法和使用變形工具類似。

<點(diǎn)圖片看大圖>

切片完成之后想調(diào)整還可以用切片選擇工具重新選擇任意切片然后調(diào)整，這句話像不像在念經(jīng)。。。

然后存儲(chǔ)為web所用格式，快捷鍵就不說了，你懂的。格式選擇JPG，尺寸不要?jiǎng)?，點(diǎn)存儲(chǔ)，文件名先隨便，格式選僅限圖像，默認(rèn)設(shè)置，所有切片。

<點(diǎn)圖片看大圖>

這里其實(shí)有個(gè)小支線任務(wù)，格式可以選擇HTML和圖像，PS會(huì)幫你生成一個(gè)網(wǎng)頁，不過那個(gè)太LOW了，咱大俠們不屑一顧，嗯，不管你們信不信反正我信了。

保存后打開你存的文件夾，PS有生成一個(gè)images文件夾，表改這位夾兄的名字喲，實(shí)際上網(wǎng)站保存圖片的文件夾都叫這個(gè)名字。打開images文件夾，我們可以看到切好的圖。

然后分別給它們命名，簡單點(diǎn)可以1234，復(fù)雜點(diǎn)就是為了SEO和可維護(hù)性考慮，命名得語義化，例如LOGO，就命名首頁-頭部-logo，home_top_logo。這樣的話在其他地方用的另外尺寸的logo就不會(huì)和這個(gè)logo搞混。

命名好后，把images文件夾整個(gè)復(fù)制到網(wǎng)頁文件所在位置，這點(diǎn)很重要?jiǎng)e忘記喲。

然后我們回到DW，在HTML中，有兩種方法插入圖片，先讓我們試試第一種，直接在頁面插入。

看到那個(gè)img標(biāo)簽了嗎，那就是直接插入一張圖片的意思，格式反正你記住就這么寫就行，src后面的引號(hào)里的是圖片文件的相對(duì)位置，這里的意思就是與網(wǎng)頁文件同級(jí)的文件夾images里的1.jpg。相對(duì)位置的理解得練習(xí)一段時(shí)間，不過不難放心。

除了相對(duì)位置，還有絕對(duì)位置，你百度一張圖片右鍵屬性可以看到地址那里有一長串的網(wǎng)址，把那個(gè)復(fù)制下來替換掉相對(duì)地址就行，不過網(wǎng)站一般沒有用到這個(gè)的時(shí)候，這個(gè)先不深究。