網(wǎng)切片與輸出

1、第14章 網(wǎng)頁切片與輸出網(wǎng)頁設(shè)計是近年來比較熱門設(shè)計類型，與其它類型平面設(shè)計不一樣，網(wǎng)頁因為其展現(xiàn)介質(zhì)不一樣，在設(shè)計制作過程中需要注意一些問題，比如顏色問題，文件大小問題等。當(dāng)我們打開一個網(wǎng)頁時，會自動從服務(wù)器上下載網(wǎng)站頁面上圖像內(nèi)容。那么圖像內(nèi)容大小在很大程度上能夠影響網(wǎng)頁瀏覽速度。所以在網(wǎng)頁內(nèi)容輸出時就需要設(shè)置適當(dāng)輸出格式以及圖像壓縮比率。網(wǎng)切片與輸出第1頁14.1 Web安全色Web安全色是指能在不一樣操作系統(tǒng)和不一樣瀏覽器之中同時正常顯示顏色。為何在設(shè)計網(wǎng)頁時需要使用安全色呢？這時因為網(wǎng)頁需要在不一樣操作系統(tǒng)下或在不一樣顯示器中瀏覽，而不一樣操作系統(tǒng)或瀏覽器顏色都有一些細微差異。所以確

2、保制作出網(wǎng)頁顏色能夠在全部顯示器中顯示相同效果是非常主要，這就需要我們在制作網(wǎng)頁時使用“Web安全色”。14.1.1 將非安全色轉(zhuǎn)化為安全色在“拾色器”中選擇顏色時，在所選顏色右側(cè)出現(xiàn) 警告圖標，就說明當(dāng)前選擇顏色不是Web安全色，如圖所表示。單擊該 圖標，即可將當(dāng)前顏色替換為與其最靠近Web安全色，如圖所表示。網(wǎng)切片與輸出第2頁14.1.2 在安全色狀態(tài)下工作在“拾色器”中選擇顏色時，勾選窗口左下角“只有Web顏色”選項，勾選之后，拾色器色域中顏色顯著降低，此時選擇顏色皆為安全色，如圖所表示。網(wǎng)切片與輸出第3頁14.2 網(wǎng)頁切片在網(wǎng)站設(shè)計工作中，頁面美化是至關(guān)主要一個步驟。頁面設(shè)計師在Pho

3、toshop中完成版面內(nèi)容編排后，并不能直接將整張網(wǎng)頁圖片傳到網(wǎng)絡(luò)上。而是需要將網(wǎng)頁進行“切片”?！扒衅笔菍D片轉(zhuǎn)化成可編輯網(wǎng)頁中間步驟，經(jīng)過切片能夠?qū)⑵胀▓D片變成DreamWeaver能夠編輯網(wǎng)頁格式。而且切片后圖片能夠更加快在網(wǎng)絡(luò)上傳輸。14.2.1什么是“網(wǎng)頁切片”“網(wǎng)頁切片”能夠簡單了解成將網(wǎng)頁圖片切分為一些小碎片過程。為了使網(wǎng)頁瀏覽流暢，在網(wǎng)頁制作中往往不會直接使用將整張大尺寸圖像。通常情況下都會將整張圖像“分割”為多個部分，這就需要使用到“切片技術(shù)”?！扒衅夹g(shù)”就是將一整張圖切割成若干小塊，并以表格形式加以定位和保留。如圖所表示為一個完整網(wǎng)頁設(shè)計圖片，如圖所表示為將網(wǎng)頁切片導(dǎo)出

4、后效果。網(wǎng)切片與輸出第4頁14.2.2 認識“切片工具”切片工具“隱藏”在裁剪工具組中，右鍵單擊工具組按鈕，在彈出列表中能夠看到兩種切片工具：“切片工具”和“切片選擇工具”。如圖所表示。單擊工具組中“切片工具” ，在選項欄中樣式列表內(nèi)能夠設(shè)置繪制切片方式，選擇“正?！蹦軌蚪?jīng)過在畫面中按住并拖動鼠標來確定切片大小。選“固定長寬比”能夠在后面“寬度”和“高度”輸入框中設(shè)置切片寬高比。選擇“固定大小”能夠在后面“寬度”和“高度”輸入框中設(shè)置切片固定大小。如圖所表示。假如當(dāng)前文檔包含參考線，單擊“基于參考線切片”按鈕能夠從參考線創(chuàng)建切片。網(wǎng)切片與輸出第5頁14.2.3 使用“切片工具”創(chuàng)建切片創(chuàng)建切片

5、右鍵單擊工具組，在其中單擊“切片工具” ，然后選項欄中設(shè)置“樣式”為“正常”。在圖像中按住鼠標左鍵并拖動鼠標，繪制出一個矩形框，如圖所表示。釋放鼠標左鍵以后就能夠創(chuàng)建一個用戶切片，而用戶切片以外部分將生成自動切片，如圖所表示。網(wǎng)切片與輸出第6頁切片選擇右鍵單擊工具組，在其中單擊“切片選擇工具” ，在圖像中單擊即可選中切片，如圖所表示。假如想同時選中多個切片，能夠按住“Shift”鍵同時單擊其它切片，如圖所表示。假如要移動切片，能夠使用“切片選擇工具” 選擇切片，然后按住鼠標左鍵并拖動鼠標即可。網(wǎng)切片與輸出第7頁14.2.4 基于參考線創(chuàng)建切片在包含參考線文件中能夠創(chuàng)建基于參考線切片。單擊工具箱

6、中“切片工具”按鈕，然后在選項欄中單擊“基于參考線切片”按鈕，如圖所表示。即可基于參考線劃分方式創(chuàng)建出切片，如圖所表示。網(wǎng)切片與輸出第8頁14.2.5 基于圖層創(chuàng)建切片選擇需要以其創(chuàng)建切片圖層，如圖所表示。執(zhí)行“圖層新建基于圖層切片”菜單命令，就能夠創(chuàng)建包含該圖層全部像素切片，如圖所表示。基于圖層創(chuàng)建切片以后，當(dāng)對圖層進行移動、縮放、變形等操作時，切片會跟隨該圖層進行自動調(diào)整，如圖所表示。刪除圖層后，基于該圖層創(chuàng)建切片會被刪除，（無法刪除自動切片）。網(wǎng)切片與輸出第9頁14.2.6 自動劃分切片使用“切片選擇工具” 單擊選擇一個切片，然后單擊選項欄中“劃分”按鈕，如圖所表示。打開“劃分切片”對話

7、框，勾選“水平劃分為”/“垂直劃分為”選項后，能夠在水平/垂直方向上劃分切片，設(shè)置切片數(shù)值。網(wǎng)切片與輸出第10頁14.2.7 切片編輯操作創(chuàng)建出切片還能夠進行復(fù)制、組合、刪除等操作，方便于得到適當(dāng)切片。復(fù)制切片使用“切片選擇工具”選擇切片，然后按住Alt鍵同時拖動切片，即可復(fù)制出相同切片。將多個切片組合為一個切片在組合切片之前，先使用“切片選擇工具”選擇多個切片，然后單擊鼠標右鍵在彈出快捷鍵菜單中執(zhí)行“組合切片”命令。所選切片即可組合為一個切片。刪除切片使用“切片選擇工具”選擇切片以后，單擊鼠標右鍵，在彈出菜單中選擇“刪除切片”命令，能夠刪除切片。也能夠按Delete鍵或Backspace鍵。

8、去除全部切片執(zhí)行“視圖去除切片”命令，能夠刪除全部用戶切片和基于圖層切片。鎖定切片執(zhí)行“視圖鎖定切片”菜單命令，能夠鎖定全部用戶切片和基于圖層切片。鎖定切片以后，將無法對切片進行移動、縮放或其它更改。再次執(zhí)行“視圖鎖定切片”即可取消鎖定。網(wǎng)切片與輸出第11頁14.2.8 提升：自動切片轉(zhuǎn)換為用戶切片“自動切片”無法進行優(yōu)化設(shè)置，只有“用戶切片”才能夠進行不一樣優(yōu)化設(shè)置。所以需要將“自動切片”轉(zhuǎn)換為“用戶切片”。首先選擇“切片選擇工具”，然后在“自動切片”上單擊，接著單擊選項欄中“提升”按鈕，如圖所表示。隨即“自動切片”能夠轉(zhuǎn)換為“用戶切片”，如圖所表示。網(wǎng)切片與輸出第12頁14.2.9 設(shè)置切

9、片選項使用“切片選擇工具”選擇某一切片，并在選項欄中單擊“為當(dāng)前切片設(shè)置選項”按鈕 ，能夠打開“切片選項”對話框，在這里能夠設(shè)置切片名稱、尺寸、URL、目標、等屬性設(shè)置。如圖所表示。網(wǎng)切片與輸出第13頁14.3 網(wǎng)頁翻轉(zhuǎn)按鈕網(wǎng)頁上通常都包含很多按鈕，而按鈕通常都有幾個不一樣狀態(tài)，比如按鈕空閑時、將光標放在按鈕上時、單擊按鈕時， 這些不一樣狀態(tài)下按鈕可能都展現(xiàn)出不一樣顏色或者不一樣樣式，來方便用戶了解當(dāng)前操作狀態(tài)，這就是“翻轉(zhuǎn)按鈕”。如圖和圖所表示。網(wǎng)切片與輸出第14頁要創(chuàng)建按鈕翻轉(zhuǎn)效果，最少需要兩個圖像，一個用于表示處于正常狀態(tài)圖像，另一個則用于表示處于更改狀態(tài)圖像。而創(chuàng)建按鈕翻轉(zhuǎn)方式則很多，

10、能夠經(jīng)過更改按鈕底色，更改按鈕上文字，也能夠更改按鈕上圖形，如圖和圖和圖所表示。網(wǎng)切片與輸出第15頁14.4 Web圖形輸出對于網(wǎng)頁設(shè)計師而言，在Photoshop中完成了網(wǎng)站頁面制圖工作后，需要對網(wǎng)頁進行切片，如圖所表示。創(chuàng)建切片后對圖像進行優(yōu)化能夠減小圖像大小，而較小圖像能夠使Web服務(wù)器愈加高效地儲存、傳輸和下載圖像。然后需要對切分為碎片網(wǎng)站頁面進行導(dǎo)出。執(zhí)行“文件導(dǎo)出存放為Web所用格式（舊版）”菜單命令，打開“存放為Web所用格式”窗口，在該窗口中能夠?qū)D像格式以及壓縮比率進行設(shè)置。如圖所表示。設(shè)置完成后單擊“存放”按鈕，選擇存放位置，接著我們會在設(shè)置存放位置看到導(dǎo)出為切片圖片文件，

11、如圖所表示。網(wǎng)切片與輸出第16頁14.4.1 使用預(yù)設(shè)輸出網(wǎng)頁對已經(jīng)切片完成網(wǎng)頁執(zhí)行“文件導(dǎo)出存放為Web所用格式（舊版）”菜單命令，打開“存放為Web所用格式”窗口，在窗口右側(cè)頂部單擊“預(yù)設(shè)”下拉列表，在其中能夠選擇內(nèi)置輸出預(yù)設(shè)，單擊某一項預(yù)設(shè)方式，然后單擊底部“存放”，如圖所表示。接著選擇儲存位置，如圖所表示。網(wǎng)切片與輸出第17頁14.4.2 設(shè)置不一樣儲存格式不一樣格式圖像文件其質(zhì)量與大小也不一樣，合理選擇優(yōu)化格式，能夠有效地控制圖形質(zhì)量?？晒┻x擇Web圖形優(yōu)化格式包含GIF格式、JPEG格式、PNG-8格式、PNG-24和WBMP格式。網(wǎng)切片與輸出第18頁14.5 導(dǎo)出為Zoomify“導(dǎo)出為Zoomify”命令用于導(dǎo)出高分辨JPEG文件和HTML文件，然后能夠?qū)⑦@些文件上載到Web服務(wù)器上，方便查看者平移和縮放該圖像更多細節(jié)，如圖所表示。該命令適合于需要對商品細節(jié)進行展示時使用。打開一個圖片，如圖所表示。執(zhí)行“文件導(dǎo)出Zoomif”菜單命令，能夠打開“ZoomifTM導(dǎo)出”對話框，