?咨詢郵箱：
淘寶裝修ps圖片如何轉換為html網頁格式
發表日期：2015-11-22 20:54?? 文章編輯：350模板官網小編 ?? 瀏覽次數：
淘寶裝修ps圖片如何轉換為html網頁格式導入到淘寶店鋪模板里？下面350裝修平臺小編就給大家詳細講解下操作圖文教程。
制作網頁前，還是得通過ps軟件將版面設計好，再運用切片工具將平面轉成網頁，別小看這工具，光是這工具就已經幫你完成了八、九成，接下來只要再用Dreamweaver略作編排，就已大功告成！但接下來的部分，只為各位介紹怎么樣從Photoshop中所製作好的平面稿轉成網頁格式，至于Dreamweaver的部分，就留給大家去學習啦！
步驟/方法：第一步：先打開photoshop設計好你的網頁背景，如圖所示，如何設計這樣的頁面我就不講了，不屬于該經驗的內容，下面就是要介紹如何將這樣的圖片轉換問網頁。
第二步：在工具欄選擇“切片工具”，大部分人的工具欄只顯示“裁剪工具”，右鍵單擊“裁剪工具”就能看到“切換工具”，選擇它即可。
第三步：屬性欄進行設置，先來設置樣式，有三種樣式可供選擇，正常樣式、固定長寬比、固定大小。
第四步：正常樣式下，鼠標拖動可以繪制一個矩形的切片，切片的大小和長寬比都是任意的，點擊切片就會使切片的邊框變成棕褐色，并出現八個控制點，拖動控制袋可以任意的改變切片的大小，另外，直接拖動切片也可以改變切片的位置。
第五步：固定長寬比模式下，拖動鼠標可以繪制切片，切片的大小是任意的，但是切片的長寬比是固定不變的。為了方便，一般長寬比和圖像的的長寬比是相同的。在圖像的“圖像大小”下，打開“圖像大小”對話框，這里你可以找到圖像的寬度和高度。
第六步：固定大小模式下，切片的長和寬都是你設定的，不會改變，點擊一下鼠標就可以繪制一個切片，我繪制的這些切片都是一樣大小的。選中一個切片，切片變成棕色的邊框，并出現了八個控制點，拖動控制點也可以改變切片的大小。
第七步：一般將圖片切割成網頁的時候，我們可以使用一種簡便的方法，切換到任意一種模式下，右鍵單擊圖像，然后在打開的右鍵菜單中，選擇“劃分切片”，打開劃分切片的對話框。
第八步：設置將圖片切分為水平4個切片，垂直5個切片，點擊確定按鈕。這是建立切片最快的速度了。
第九步：拖動控制點可以改變整行或者整列的寬度和高度。
第十步：除此之外，我們還可以對某個切片進行進一步的切割，右鍵單擊某個切片，然后選擇“劃分切片”，打開劃分切片對話框，設置橫向和縱向的切片個數。
第十一步：最后，一個關鍵的設置就是，右鍵單擊某個切片，然后在打開的右鍵菜單中選擇“編輯切片選項”，打開切片選項對話框。
第十二步：在這里你要設置的有切片的名稱，這個名稱也就是網頁圖片的名稱，默認系統給出的名稱即可。設置url，也就是圖片的鏈接，在網頁上點擊圖片就能打開這個鏈接；目標在動態圖片中需要設置，即加載URL時的楨，在靜態的圖片中不需要設置；信息文本也就是鼠標放在網頁上的圖片上的時候，出現在瀏覽器底部狀態欄的文字信息；Alt標記就是鼠標放在圖片上，自動出現在圖片周圍的文字。設置好這些參數以后點擊確定按鈕。
第十三步：最后就是要保存html文件了，在菜單欄上執行：文件--存儲為web和設備所有格式。
第十四步：在打開的對話框中，點擊“雙聯”你會看到兩個圖片，上面這個是處理前的原圖，下面這個是處理后的圖片，您可以對比兩個效果以后再保存圖片。
第十五步：設置格式為jpeg，其他參數參考下面的這幅圖，一般默認系統給出的參數即可。點擊儲存按鈕。
第十六步：最關鍵的步驟就是在這里，設置格式為“html和圖像”，然后點擊保存按鈕。
第十七步：你會看到保存后有兩個文件，一個是圖片文件夾，一個是html文件，雙擊打開html就可以看到一個網頁了。
第十八步：用dreamweaver打開網頁文件可以對其進行進一步的編輯。
標簽： ? ?
如沒特殊注明，文章均為350模板官網原創,轉載請注明來自http://www.daartisan.cn//zxzs/375.html