網站建設 網站頁面設計

06模塊-網站頁面設計

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

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

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

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

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

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

2．存儲的格式與方法。網站切片效果圖實訓photoshop中Gif動畫的制作

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