網(wǎng)站建設(shè) 網(wǎng)站頁面設(shè)計(jì)

06模塊-網(wǎng)站頁面設(shè)計(jì)

在網(wǎng)站的制作之前需要對(duì)網(wǎng)站進(jìn)行總體設(shè)計(jì)，這個(gè)設(shè)計(jì)就包括對(duì)網(wǎng)站外觀頁面的設(shè)計(jì)。網(wǎng)站的外觀頁面是呈現(xiàn)給用戶的第一信息，也是最直觀的信息，是網(wǎng)站的重要組成部分。網(wǎng)站頁面的設(shè)計(jì)可以是局部設(shè)計(jì)，也可以使用photoshop進(jìn)行整體設(shè)計(jì)，通過切片工具存儲(chǔ)轉(zhuǎn)換成網(wǎng)頁文件。本模塊以“易購商城”為具體案例，詳細(xì)講述了在photoshop中設(shè)計(jì)網(wǎng)站頁面效果圖的步驟，并最終將整個(gè)頁面效果圖切片生成網(wǎng)頁文件。能力目標(biāo)1．能獨(dú)立設(shè)計(jì)網(wǎng)站的主頁面和子頁面。2．能熟練的運(yùn)用photoshop工具對(duì)設(shè)計(jì)的頁面切片。3．能利用photoshop工具制作網(wǎng)站中的GIF小動(dòng)畫。知識(shí)目標(biāo)1．網(wǎng)站LOGO的設(shè)計(jì)制作。2．網(wǎng)站頁面的設(shè)計(jì)制作。3．photoshop切片使用方法。4．photoshop中制作GIF小動(dòng)畫。任務(wù)1網(wǎng)站標(biāo)志設(shè)計(jì)任務(wù)背景網(wǎng)站標(biāo)志設(shè)計(jì)也稱網(wǎng)站LOGO設(shè)計(jì)，LOGO是網(wǎng)站的標(biāo)志和名片，其它網(wǎng)站鏈接鏈接本網(wǎng)站通常是通過網(wǎng)站LOGO鏈接。因此LOGO是網(wǎng)站形象的重要體現(xiàn)，具有重要的地位和作用。網(wǎng)站的標(biāo)志LOGO一般會(huì)在網(wǎng)站的各級(jí)頁面中固定位置顯示，因此，在網(wǎng)站的頁面設(shè)計(jì)中，第一個(gè)任務(wù)就是要根據(jù)網(wǎng)站的內(nèi)容和特色設(shè)計(jì)網(wǎng)站標(biāo)志LOGO。任務(wù)要求1．網(wǎng)站LOGO設(shè)計(jì)要簡單明晰。2．網(wǎng)站LOGO應(yīng)能夠體現(xiàn)網(wǎng)站的主題和特色。【技術(shù)要領(lǐng)】使用photoshop中的鋼筆工具繪制曲線；運(yùn)用選區(qū)等基本工具完成LOGO字母元素的設(shè)計(jì)制作；運(yùn)用photoshop中的基本操作實(shí)現(xiàn)LOGO的整體調(diào)整。【解決問題】網(wǎng)頁LOGO的設(shè)計(jì)制作?！緫?yīng)用領(lǐng)域】網(wǎng)頁頁面設(shè)計(jì)。任務(wù)分析“易購商城”是一個(gè)商品銷售網(wǎng)站，標(biāo)志的設(shè)計(jì)本著“易購”的含義，采用圖形與文字相結(jié)合的方式，使用了“易購”的字母“e”和“G”來設(shè)計(jì)，以整個(gè)網(wǎng)站的主色調(diào)橙色作為基色來進(jìn)行設(shè)計(jì)?！耙踪徤坛恰本W(wǎng)站LOGO的設(shè)計(jì)首先使用photoshop中的鋼筆工具繪制出裝飾氣泡，然后運(yùn)用選區(qū)工具繪制LOGO的字母元素“e”和“G”。最后使用文字工具加上“易購”字符，并調(diào)整整個(gè)LOGO，保存文件。重點(diǎn)和難點(diǎn)

1．運(yùn)用鋼筆工具繪制裝飾氣泡輪廓，并對(duì)其進(jìn)行調(diào)整填充。

2．使用橢圓選區(qū)工具、單行選區(qū)工具和加減選區(qū)完成“e”和“G”字母元素的制作。網(wǎng)站logo效果圖任務(wù)2網(wǎng)頁導(dǎo)航設(shè)計(jì)任務(wù)背景網(wǎng)站的導(dǎo)航是網(wǎng)站的地圖，網(wǎng)站導(dǎo)航是使用者搜索尋找信息的重要依據(jù)，為網(wǎng)站設(shè)計(jì)清晰的導(dǎo)航是網(wǎng)站設(shè)計(jì)的基本要求。因此，在網(wǎng)站的頁面設(shè)計(jì)中，第二個(gè)任務(wù)就是要規(guī)劃網(wǎng)站，將網(wǎng)站的信息分門別類，為網(wǎng)站設(shè)計(jì)制作清晰的導(dǎo)航目錄。任務(wù)要求1．網(wǎng)站導(dǎo)航分類清晰，方便使用。2．網(wǎng)站導(dǎo)航能夠從用戶角度出發(fā)，方便用戶搜索信息，為用戶使用提供幫助反饋信息?！炯夹g(shù)要領(lǐng)】使用photoshop中的鋼筆工具繪制曲線區(qū)域作為導(dǎo)航的背景；運(yùn)用圓角矩形工具繪制導(dǎo)航菜單的襯底；運(yùn)用文字工具輸入導(dǎo)航內(nèi)容?！窘鉀Q問題】網(wǎng)頁導(dǎo)航的設(shè)計(jì)制作。【應(yīng)用領(lǐng)域】網(wǎng)頁頁面設(shè)計(jì)。任務(wù)分析“易購商城”網(wǎng)站設(shè)計(jì)以橙色為主要基調(diào)，運(yùn)用流線型的曲線區(qū)域作為導(dǎo)航的襯底，菜單導(dǎo)航是在流線底下方用圓角矩形作為襯底設(shè)計(jì)制作，服務(wù)信息導(dǎo)航使用形象的圖片加文字設(shè)計(jì)而成，導(dǎo)航效果清晰易操作。首先使用鋼筆工具繪制流線型的區(qū)域，然后使用文字工具將菜單導(dǎo)航的內(nèi)容輸入進(jìn)去，并使用圓角矩形工具作為菜單導(dǎo)航的襯底。將服務(wù)信息導(dǎo)航的相關(guān)圖片進(jìn)行處理，調(diào)整大小和位置，并使用文字工具輸入服務(wù)信息導(dǎo)航的內(nèi)容，調(diào)整位置完成導(dǎo)航的制作。重點(diǎn)和難點(diǎn)

1．運(yùn)用鋼筆工具繪制主色調(diào)曲線區(qū)域，并對(duì)其進(jìn)行調(diào)整填充。

2．使用自由變換調(diào)整圖片大小。網(wǎng)站導(dǎo)航效果圖任務(wù)3主頁欄目設(shè)計(jì)任務(wù)背景網(wǎng)站主頁欄目是呈現(xiàn)網(wǎng)站信息的重要區(qū)域，可以適當(dāng)?shù)倪M(jìn)行底紋邊框的裝飾，在此區(qū)域中可以適當(dāng)根據(jù)網(wǎng)站內(nèi)容信息的分類運(yùn)用簡單大方的底紋和線條對(duì)信息進(jìn)行分塊，使整個(gè)網(wǎng)站更加美觀。任務(wù)要求1．主欄目以襯托凸顯網(wǎng)站信息內(nèi)容為出發(fā)點(diǎn)，設(shè)計(jì)簡單大方。2．主欄目的設(shè)計(jì)要區(qū)域明晰，方便用戶使用?！炯夹g(shù)要領(lǐng)】使用photoshop中的圓角矩形工具繪制底紋；運(yùn)用選區(qū)混合運(yùn)算繪制不規(guī)則形狀圖；使用定義圖案命令來定義圖案，并使用圖案填充工具進(jìn)行圖案填充?！窘鉀Q問題】網(wǎng)頁主欄目的設(shè)計(jì)制作?！緫?yīng)用領(lǐng)域】網(wǎng)頁頁面設(shè)計(jì)。任務(wù)分析“易購商城”主頁面中欄目設(shè)計(jì)主要分為“特價(jià)促銷”區(qū)域和“推薦商品”區(qū)域。在這兩個(gè)區(qū)域中繼續(xù)秉承整個(gè)網(wǎng)站的流線型設(shè)計(jì)風(fēng)格，以橙色為主色調(diào)。首先使用圓角矩形工具繪制“特價(jià)促銷”區(qū)域底紋，使用加減選區(qū)工具對(duì)底紋進(jìn)行混合運(yùn)算，產(chǎn)生半框效果；然后使用文字工具輸入“特價(jià)促銷”，導(dǎo)入SALE小圖標(biāo)和售后員圖片；使用圓角矩形工具繪制“推薦商品”區(qū)域底紋，運(yùn)用選區(qū)制作圓角細(xì)線，完成欄目設(shè)計(jì)。重點(diǎn)和難點(diǎn)1．將矢量圖層?xùn)鸥窕D(zhuǎn)換成普通圖層。2．運(yùn)用選區(qū)工具和混合運(yùn)算選區(qū)制作不規(guī)則的圖形。3．定義圖案，并使用圖案填充工具。主要欄目效果圖任務(wù)4網(wǎng)頁左側(cè)模塊設(shè)計(jì)任務(wù)背景“易購商城”中網(wǎng)站左側(cè)包含登陸模塊、搜索模塊和商品銷售排行。任務(wù)要求能夠清晰的呈現(xiàn)各個(gè)模塊內(nèi)容?！炯夹g(shù)要領(lǐng)】使用圖案填充工具填充虛線分割三個(gè)模塊；使用文字工具輸入模塊名稱?！窘鉀Q問題】網(wǎng)頁左部模塊設(shè)計(jì)?！緫?yīng)用領(lǐng)域】網(wǎng)頁頁面設(shè)計(jì)。任務(wù)分析“易購商城”網(wǎng)站左側(cè)包含登陸模塊、搜索模塊和產(chǎn)品銷售排行三部分，三個(gè)模塊在一個(gè)大的圓角矩形底上呈現(xiàn)，為了使網(wǎng)站簡單清晰大方，采用簡單的虛線隔開。首先使用photoshop中的圖案填充工具填充出虛線作為分割線；然后使用文字工具輸入模塊的名稱。重點(diǎn)和難點(diǎn)單行選框工具的圖案填充方法。網(wǎng)站左側(cè)欄目效果圖任務(wù)5網(wǎng)頁切片制作任務(wù)背景在photoshop中將整個(gè)網(wǎng)站頁面設(shè)計(jì)完成后，可以通過photoshop中的切片工具對(duì)整個(gè)頁面切塊，并存儲(chǔ)成web所有格式，實(shí)現(xiàn)圖片與網(wǎng)頁之間的轉(zhuǎn)換。任務(wù)要求1.清晰網(wǎng)頁中固定表格和活動(dòng)表格部分，清晰網(wǎng)頁中的熱區(qū)鏈接。2.切片要精確無誤。3.存儲(chǔ)格式要正確無誤?！炯夹g(shù)要領(lǐng)】使用標(biāo)尺和參考線工具將圖片分區(qū)域；使用切片工具將整個(gè)頁面切割；使用存儲(chǔ)web所用格式命令將頁面存儲(chǔ)為網(wǎng)頁格式?！窘鉀Q問題】圖片到網(wǎng)頁頁面銜接?！緫?yīng)用領(lǐng)域】網(wǎng)頁的切片。任務(wù)分析切片和存儲(chǔ)web所用格式命令，能實(shí)現(xiàn)photoshop和Dreamwaver之間的轉(zhuǎn)換，在整個(gè)網(wǎng)站界面設(shè)計(jì)實(shí)現(xiàn)后，需要進(jìn)一步使用相應(yīng)工具實(shí)現(xiàn)圖片向網(wǎng)頁的轉(zhuǎn)換。本任務(wù)首先使用標(biāo)尺和參考線將整個(gè)網(wǎng)頁的頁面進(jìn)行區(qū)域劃分，然后使用切片工具來分割區(qū)域，最后將切好的頁面進(jìn)行存儲(chǔ)，存儲(chǔ)為web和設(shè)備所用格式。重點(diǎn)和難點(diǎn)

1．切片的思路和精準(zhǔn)度。

2．存儲(chǔ)的格式與方法。網(wǎng)站切片效果圖實(shí)訓(xùn)photoshop中Gif動(dòng)畫的制作

實(shí)訓(xùn)目的通過使用photoshop中的動(dòng)畫窗口幀變化，結(jié)合圖層的顯示隱藏功能，在photoshop中制作簡單的網(wǎng)頁GIF小動(dòng)畫，達(dá)到美化網(wǎng)頁的效果。本實(shí)訓(xùn)目的在于讓學(xué)生使用photoshop中的動(dòng)