切片的導(dǎo)出電子課件

電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作Design

and

Creation

of

E-commerce

WebPages

切片的導(dǎo)出主講人：傅俊THISIS導(dǎo)入：基礎(chǔ)任務(wù)分析切片的導(dǎo)出切片的注意事項(xiàng)Content導(dǎo)入-基礎(chǔ)任務(wù)分析本次任務(wù)是承接前面的農(nóng)產(chǎn)品電商形象展示網(wǎng)站的首頁(yè)效果圖切片，繼續(xù)完成切片并且導(dǎo)出。通過(guò)任務(wù)實(shí)施掌握Photoshop的切片的導(dǎo)出以及相關(guān)注意事項(xiàng)。切片的導(dǎo)出完成后的切片可以圖片形式導(dǎo)出也可以包含在網(wǎng)頁(yè)形式導(dǎo)出，但是都不是直接通過(guò)“文件|導(dǎo)出|導(dǎo)出為…”菜單命令導(dǎo)出，而是選擇“文件|導(dǎo)出|存儲(chǔ)為Web所用格式（舊版）…”命令切片的導(dǎo)出

在“存儲(chǔ)為Web所用格式”對(duì)話框中，可以通過(guò)“抓手工具”、“縮放工具”、“切片選擇工具”等來(lái)選擇切片，右側(cè)主要是對(duì)不同圖片格式的優(yōu)化設(shè)置。點(diǎn)選“存儲(chǔ)”按鈕后，在“將優(yōu)化結(jié)果存儲(chǔ)為”的對(duì)話框中，可以選“僅限圖像”、“僅限HTML”和“HTML和圖像”，切片可以為“所有切片”、“所有用戶切片”和“選中的切片”。切片的注意事項(xiàng)1.切片選擇工具的使用

切片選擇工具主要用于選擇切片并可對(duì)切片進(jìn)行排列、提升、劃分等相應(yīng)操作。在切片選擇工具選項(xiàng)欄最前面的四個(gè)是調(diào)整切片的堆疊順序，有“置為頂層”、“前移一層”、“后移一層”和“置為底層”?？稍谟卸鄬忧衅瑫r(shí)，進(jìn)行指定和調(diào)整。注意的是，無(wú)法排列自動(dòng)切片的堆疊順序。切片的注意事項(xiàng)2.切片如何使用

從瀏覽器窗口中頁(yè)面顯示沒(méi)有問(wèn)題，但實(shí)際該頁(yè)面是由各圖片文件切片拼成，可以通過(guò)Dreamweaver打開(kāi)，在拆分視圖可以看到整個(gè)頁(yè)面的布局混亂，只是簡(jiǎn)單的拼接，如圖所示。作為實(shí)際的網(wǎng)頁(yè)使用，只需要采用用戶切片然后通過(guò)HTML5+CSS3來(lái)進(jìn)行頁(yè)面布局。電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作Design

and

Creationof

E-commerce

webpage