1、先打開photoshop設計好你的網(wǎng)頁背景，如下圖所示，至于要選擇什么樣的圖片可以自己選擇，下面就是要介紹如何將這樣的圖片轉換成網(wǎng)頁。
2、在工具欄選擇【切片工具】，大部分人的工具欄只顯示裁剪工具，右鍵單擊裁剪工具就能看到切換工具，選擇它即可。
3、屬性欄進行設置，先來設置樣式，一般來說，有三種樣式可供選擇，正常樣式、固定長寬比、固定大小。
4、正常模式下，拖動鼠標可以繪制一個矩形的切片，切片的大小和長寬比都是任意的，如下圖所示：
點擊切片就會使切片的邊框變成棕褐色，如下圖所示：
并出現(xiàn)八個控制點，拖動控制袋可以任意的改變切片的大小，如下圖所示，另外，直接拖動切片也可以改變切片的位置。
5、在固定長寬比模式下，拖動鼠標可以繪制切片，切片的大小是任意的，但是切片的長寬比是固定不變的。為了方便，一般長寬比和圖像的的長寬比是相同的，如下圖所示：
那么，我們怎樣才能知道圖像的長寬比呢？如下圖所示，在圖像--圖像大小下，打開圖像大小對話框，這里你可以找到圖像的寬度和高度。
6、固定大小模式下，切片的長和寬都是你設定的，不會改變，如圖所示，點擊一下鼠標就可以繪制一個切片，我繪制的這些切片都是一樣大小的。選中一個切片，切片變成棕色的邊框，并出現(xiàn)了八個控制點，拖動控制點也可以改變切片的大小。
7、一般將圖片切割成網(wǎng)頁的時候，我們可以使用一種簡便的方法，切換到任意一種模式下，右鍵單擊圖像，然后在打開的右鍵菜單中，選擇【劃分切片】，打開劃分切片的對話框。
8、設置將圖片切分為水平4個切片，垂直5個切片，點擊確定按鈕，如下圖所示：
下面第幅圖就是我們建立的切片，馬海祥覺得這是建立切片最快的速度了。
9、拖動控制點可以改變整行或者整列的寬度和高度，如下圖所示：
10、除此之外，我們還可以對某個切片進行進一步的切割，右鍵單擊某個切片，然后選擇【劃分切片】，打開劃分切片對話框，設置橫向和縱向的切片個數(shù)，如圖所示：
11、最后，一個關鍵的設置就是，右鍵單擊某個切片，然后在打開的右鍵菜單中選擇【編輯切片選項】，打開切片選項對話框，在這里你要設置的有切片的名稱，這個名稱也就是網(wǎng)頁圖片的名稱，默認系統(tǒng)給出的名稱即可。
設置url，也就是圖片的鏈接，在網(wǎng)頁上點擊圖片就能打開這個鏈接；目標在動態(tài)圖片中需要設置，即加載URL時的楨，在靜態(tài)的圖片中不需要設置；信息文本也就是鼠表放在網(wǎng)頁上的圖片上的時候，出現(xiàn)在瀏覽器底部狀態(tài)欄的文字信息；Alt標記就是鼠標放在圖片上，自動出現(xiàn)在圖片周圍的文字。如下圖所示：
設置好這些參數(shù)以后，點擊確定按鈕即可。
12、最后就是要保存html文件了，在菜單欄上執(zhí)行：文件--存儲為web和設備所用格式，如下圖所示：
13、在打開的對話框中，點擊【雙聯(lián)】你會看到兩個圖片，上面這個是處理前的原圖，下面這個是處理后的圖片，如下圖所示，你可以對比兩個效果以后再保存圖片。
14、一般來說，將格式設置為jpeg比較好（在此，大家不妨看下馬海祥博客的《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》相關介紹），其他參數(shù)參考下面的這幅圖，一般默認系統(tǒng)給出的參數(shù)即可，如下圖所示，點擊儲存按鈕。
15、最關鍵的步驟就是在這里，設置格式為【html和圖像】，然后點擊保存按鈕，如下圖所示：
16、你會看到保存后有兩個文件，一個是圖片文件夾，一個是html文件，雙擊打開html就可以看到一個網(wǎng)頁了。
如果再有什么需要改動的，可用dreamweaver打開網(wǎng)頁文件，進一步進行編輯。
馬海祥博客點評：
使用此方法雖然能把大圖轉換成多個小圖，加快網(wǎng)頁打開的速度，但也會導致網(wǎng)頁附帶的圖片過多，所以，當網(wǎng)站大量使用此方法的時候，一定要注意圖片路徑的設置分類，以免需要修改時，找不到對應的圖片。
