先打開photoshop設(shè)計好你的網(wǎng)頁背景,，如圖所示,，如何設(shè)計這樣的頁面我就不講了，不屬于該經(jīng)驗的內(nèi)容,，下面就是要介紹如何將這樣的圖片轉(zhuǎn)換問網(wǎng)頁,。

在工具欄選擇【切片工具】,，大部分人的工具欄只顯示裁剪工具，右鍵單擊裁剪工具就能看到切換工具,，選擇它即可,。

屬性欄進行設(shè)置，先來設(shè)置樣式,，有三種樣式可供選擇,，正常樣式、固定長寬比,、固定大小,。

正常模式下，鼠標拖動可以繪制一個矩形的切片,，切片的大小和長寬比都是任意的,，點擊切片就會使切片的邊框變成棕褐色（如下面第二幅圖），并出現(xiàn)八個控制點（如下面第三幅圖,，拖動控制袋可以任意的改變切片的大?。硗?，直接拖動切片也可以改變切片的位置,。

固定長寬比模式下，拖動鼠標可以繪制切片,，切片的大小是任意的,，但是切片的長寬比是固定不變的。為了方便,，一般長寬比和圖像的的長寬比是相同的,。怎樣知道圖像的長寬比呢，參考下面第二幅圖,，在圖像--圖像大小下,，打開圖像大小對話框，這里你可以找到圖像的寬度和高度,。

固定大小模式下,，切片的長和寬都是你設(shè)定的，不會改變,，如圖所示,，點擊一下鼠標就可以繪制一個切片，我繪制的這些切片都是一樣大小的,。選中一個切片,，切片變成棕色的邊框，并出現(xiàn)了八個控制點,，拖動控制點也可以改變切片的大小,。

一般將圖片切割成網(wǎng)頁的時候,，我們可以使用一種簡便的方法，切換到任意一種模式下,，右鍵單擊圖像,，然后在打開的右鍵菜單中，選擇【劃分切片】,，打開劃分切片的對話框,。

設(shè)置將圖片切分為水平4個切片，垂直5個切片,，點擊確定按鈕,，下面第二幅圖就是我們建立這個切片。這是建立切片最快的速度了,。

拖動控制點可以改變整行或者整列的寬度和高度,。

除此之外，我們還可以對某個切片進行進一步的切割,，右鍵單擊某個切片，然后選擇【劃分切片】,，打開劃分切片對話框,，設(shè)置橫向和縱向的切片個數(shù)，如圖所示

最后,，一個關(guān)鍵的設(shè)置就是,，右鍵單擊某個切片，然后在打開的右鍵菜單中選擇【編輯切片選項】,，打開切片選項對話框,。

在這里你要設(shè)置的有切片的名稱，這個名稱也就是網(wǎng)頁圖片的名稱,，默認系統(tǒng)給出的名稱即可,。設(shè)置url，也就是圖片的鏈接,，在網(wǎng)頁上點擊圖片就能打開這個鏈接,；目標在動態(tài)圖片中需要設(shè)置，即加載URL時的楨,，在靜態(tài)的圖片中不需要設(shè)置,；信息文本也就是鼠表放在網(wǎng)頁上的圖片上的時候，出現(xiàn)在瀏覽器底部狀態(tài)欄的文字信息,；Alt標記就是鼠標放在圖片上,，自動出現(xiàn)在圖片周圍的文字。設(shè)置好這些參數(shù)以后點擊確定按鈕,。

最后就是要保存html文件了,，在菜單欄上執(zhí)行：文件--存儲為web和設(shè)備所用格式

在打開的對話框中,，點擊【雙聯(lián)】你會看到兩個圖片，上面這個是處理前的原圖,，下面這個是處理后的圖片,，你可以對比兩個效果以后再保存圖片。

設(shè)置格式為jpeg,，其他參數(shù)參考下面的這幅圖,，一般默認系統(tǒng)給出的參數(shù)即可。點擊儲存按鈕,。

最關(guān)鍵的步驟就是在這里,，設(shè)置格式為【html和圖像】，然后點擊保存按鈕,。

你會看到保存后有兩個文件,，一個是圖片文件夾，一個是html文件,，雙擊打開html就可以看到一個網(wǎng)頁了,。

用dreamweaver打開網(wǎng)頁文件可以對齊進行進一步的編輯。