動態(tài)網(wǎng)站設(shè)計第03講課件

總學(xué)時：96（課內(nèi)84）6授課教師：劉坤電子信箱：聯(lián)系電話：答疑時間：周2本次課程教學(xué)內(nèi)容：項目三

網(wǎng)站主頁設(shè)計與制作子項目3-1主頁布局、效果圖設(shè)計與制作任務(wù)2將布局好的主頁使用Photoshop切片工具進行切片處理及保存。（重點）

本次課程教學(xué)目標：能力目標：會使用Photoshop切片工具對主頁效果圖進行切片處理；會進行切片的屬性設(shè)置；會將切片處理后的文件進行存儲管理及網(wǎng)頁效果的預(yù)覽。知識目標：知道網(wǎng)頁布局原則；了解常見的網(wǎng)頁布局形式；知道色彩設(shè)計原則；任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存

【任務(wù)分析】

用Photoshop繪制好主頁效果圖后，若直接將其制作成網(wǎng)頁，由于圖片較大，會造成圖片下載時間長，瀏覽速度慢。為了加快下載速度、方便瀏覽，可以通過Photoshop自帶的切片工具把效果圖切成N多個部份。這樣，單個圖片的體積就會相對變小，從而可以節(jié)省網(wǎng)頁下載時間，加快網(wǎng)頁瀏覽速度。

本任務(wù)是使用Photoshop自帶的切片工具對制作完成的主頁效果圖進行切片，并將其保存為網(wǎng)頁形式的文件。子項目3-1主頁布局、效果圖設(shè)計與制作（一）利用Photoshop切割網(wǎng)頁圖片應(yīng)遵循的原則

1、最好依靠參考線。切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào)，有效避免“留白”和“爆邊”。2、Logo和Banner必切。如果效果圖中存在Logo和Banner,我們必須切片這部分，主要是為預(yù)先設(shè)計的Logo和Banner留下空間，在DreamWeaver整合時最好不用Logo和Banner的切片，而是直接用Logo和Banner原文檔，這是提高Logo和Banner效果的需要。任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存3、虛線和轉(zhuǎn)角形狀必切。虛線和轉(zhuǎn)角形狀在DreamWeaver不能實現(xiàn)，只能使用Photoshop切片。4、漸變必切。這也是DreamWeaver實現(xiàn)不了的。5、大圖必切。大的圖像必須切分成均勻圖，這樣可以提高網(wǎng)頁下載速度。6、特殊文字效果必切。除黑體和宋體外，其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體，其它字體瀏覽器也可能不兼容。

任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存（二）切片的種類

1、切片的分類依據(jù)切片是否是自動生成而劃分為如下兩類：（1）用戶切片：用戶使用切片工具創(chuàng)建的切片（圖標為藍色）。

（2）自動切片：用戶在創(chuàng)建切片時由軟件自動形成的切片（圖標為灰色）。

2、兩種切片的區(qū)別任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存3、自動切片轉(zhuǎn)換為用戶切片

建議在進行效果圖切片處理時，都切分成用戶切片。也可以將自動切片轉(zhuǎn)換成用戶切片。方法有兩種：法一：選擇這個切片，使用切片選項工具欄中【提升到用戶切片】按鈕，如圖所示。法二：右擊選擇的自動切片，在彈出的快捷菜單中選擇“提升到用戶切片”命令。任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存利用Photoshop中的切片工具對下發(fā)的網(wǎng)頁效果圖進行切片處理

將C盤根目錄下的exercise1.psd和exercise2.psd文件進行切片處理。準備工作：在站點文件夾ClassWeb下新建文件夾exercises1和exercises2

（一）exercise1.psd進行切片處理的步驟1、利用PhotoshopCS打開exercise.psd文件;2、選取左側(cè)工具箱里的切片工具，如下圖所示：任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存注意這里選項的選取任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存4、切割的導(dǎo)航條按鈕：由于導(dǎo)航條上各按鈕大小基本相同，選取切片工具選項工具欄中的“切片樣式”為固定大小，設(shè)置寬度為“115px”，高度為“42px”，如圖所示。注意將切片和被切對象對齊。切的時候要小心，可放大圖像，避免切片之間重疊。提示：若切割的過程中發(fā)現(xiàn)切片錯誤，使用鍵盤上的【delete】鍵刪除當前選區(qū)。

標題部分切片效果圖任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存6、將上方產(chǎn)生的一些自動切片提升為用戶切片，并將為單色的切片進行處理，處理方法同切片02，這樣在輸出成網(wǎng)頁后將由透明占位符和同色背景色代替，加快網(wǎng)頁速度。任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存7、切割圖像左下角部分（牡丹所在部分），經(jīng)觀察發(fā)現(xiàn)，圖層的大小正好與切片的大小一致，如果某個圖層的范圍正好是要切割的大小，則選中要切割的圖層，執(zhí)行“圖層”→“基于圖層的切片”命令，從而完成切片的切割。8、采用合適的方法完成“墨妙亭”、“弇山堂”和“版權(quán)所有”區(qū)域的切割。

提示：一定要使用“放大工具”檢查各切片間是否有重疊現(xiàn)象。切片練習(xí)效果圖任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存9、完成導(dǎo)航欄中【休閑】按鈕的超鏈接。超鏈接的設(shè)置方法有多種，在完成切片的切割后，可以完成其超鏈接工作。方法：選取工具欄中的“切片選取工具”，雙擊【休閑】按鈕所在的切片，彈出“切片選項”對話框，并在對話框內(nèi)完成參數(shù)的設(shè)置，由于“休閑”頁面還未完成，這里我們設(shè)置空鏈接（#），目標為_blank，表示在新窗口中打開該鏈接

。任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存11、按下【保存】按鈕后，即可在exercises文件中產(chǎn)生一個網(wǎng)頁文件exercieses1.html，及一個保存切片圖片文件的文件夾images。打開images文件夾，不難發(fā)現(xiàn)各切片圖片文件名有數(shù)字序號01、02……等作為標記。12、啟動Dreamweaver8，在Dreamweaver8中打開exercise1.html，按下【F12】鍵進行效果圖預(yù)覽。任務(wù)2使用Photoshop切片工具對主頁進行切片處理及保存1、將C盤根目錄下的exercises2.psd文件進行切片處理，并將切片處理好的文件以exercise