網(wǎng)切片與輸出

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

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

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

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

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

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

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

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

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

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

11、如圖所表示。網(wǎng)切片與輸出第16頁14.4.1 使用預(yù)設(shè)輸出網(wǎng)頁對(duì)已經(jīng)切片完成網(wǎng)頁執(zhí)行“文件導(dǎo)出存放為Web所用格式（舊版）”菜單命令，打開“存放為Web所用格式”窗口，在窗口右側(cè)頂部單擊“預(yù)設(shè)”下拉列表，在其中能夠選擇內(nèi)置輸出預(yù)設(shè)，單擊某一項(xiàng)預(yù)設(shè)方式，然后單擊底部“存放”，如圖所表示。接著選擇儲(chǔ)存位置，如圖所表示。網(wǎng)切片與輸出第17頁14.4.2 設(shè)置不一樣儲(chǔ)存格式不一樣格式圖像文件其質(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ù)器上，方便查看者平移和縮放該圖像更多細(xì)節(jié)，如圖所表示。該命令適合于需要對(duì)商品細(xì)節(jié)進(jìn)行展示時(shí)使用。打開一個(gè)圖片，如圖所表示。執(zhí)行“文件導(dǎo)出Zoomif”菜單命令，能夠打開“ZoomifTM導(dǎo)出”對(duì)話框，