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

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

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

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

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

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

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

1．切片的思路和精準度。

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

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