網站建設 網站頁面設計課件.ppt

《網站建設 網站頁面設計課件.ppt》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

1、06模塊-網站頁面設計在網站的制作之前需要對網站進行總體設計，這個設計就包括對網站外觀頁面的設計。網站的外觀頁面是呈現(xiàn)給用戶的第一信息，也是最直觀的信息，是網站的重要組成部分。網站頁面的設計可以是局部設計，也可以使用photoshop進行整體設計，通過切片工具存儲轉換成網頁文件。本模塊以“易購商城”為具體案例，詳細講述了在photoshop中設計網站頁面效果圖的步驟，并最終將整個頁面效果圖切片生成網頁文件。能力目標1．能獨立設計網站的主頁面和子頁面。2．能熟練的運用photoshop工具對設計的頁面切片。3．

2、能利用photoshop工具制作網站中的GIF小動畫。知識目標1．網站LOGO的設計制作。2．網站頁面的設計制作。3．photoshop切片使用方法。4．photoshop中制作GIF小動畫。任務1網站標志設計任務背景網站標志設計也稱網站LOGO設計，LOGO是網站的標志和名片，其它網站鏈接鏈接本網站通常是通過網站LOGO鏈接。因此LOGO是網站形象的重要體現(xiàn)，具有重要的地位和作用。網站的標志LOGO一般會在網站的各級頁面中固定位置顯示，因此，在網站的頁面設計中，第一個任務就是要根據網站的內容和特色設計網站標

3、志LOGO。任務要求1．網站LOGO設計要簡單明晰。2．網站LOGO應能夠體現(xiàn)網站的主題和特色?！炯夹g要領】使用photoshop中的鋼筆工具繪制曲線；運用選區(qū)等基本工具完成LOGO字母元素的設計制作；運用photoshop中的基本操作實現(xiàn)LOGO的整體調整。【解決問題】網頁LOGO的設計制作。【應用領域】網頁頁面設計。任務分析“易購商城”是一個商品銷售網站，標志的設計本著“易購”的含義，采用圖形與文字相結合的方式，使用了“易購”的字母“e”和“G”來設計，以整個網站的主色調橙色作為基色來進行設計?！耙踪徤坛?/p>

4、”網站LOGO的設計首先使用photoshop中的鋼筆工具繪制出裝飾氣泡，然后運用選區(qū)工具繪制LOGO的字母元素“e”和“G”。最后使用文字工具加上“易購”字符，并調整整個LOGO，保存文件。重點和難點1．運用鋼筆工具繪制裝飾氣泡輪廓，并對其進行調整填充。2．使用橢圓選區(qū)工具、單行選區(qū)工具和加減選區(qū)完成“e”和“G”字母元素的制作。網站logo效果圖任務2網頁導航設計任務背景網站的導航是網站的地圖，網站導航是使用者搜索尋找信息的重要依據，為網站設計清晰的導航是網站設計的基本要求。因此，在網站的頁面設計中，第二

5、個任務就是要規(guī)劃網站，將網站的信息分門別類，為網站設計制作清晰的導航目錄。任務要求1．網站導航分類清晰，方便使用。2．網站導航能夠從用戶角度出發(fā)，方便用戶搜索信息，為用戶使用提供幫助反饋信息?！炯夹g要領】使用photoshop中的鋼筆工具繪制曲線區(qū)域作為導航的背景；運用圓角矩形工具繪制導航菜單的襯底；運用文字工具輸入導航內容?！窘鉀Q問題】網頁導航的設計制作?！緫妙I域】網頁頁面設計。任務分析“易購商城”網站設計以橙色為主要基調，運用流線型的曲線區(qū)域作為導航的襯底，菜單導航是在流線底下方用圓角矩形作為襯底設計制

6、作，服務信息導航使用形象的圖片加文字設計而成，導航效果清晰易操作。首先使用鋼筆工具繪制流線型的區(qū)域，然后使用文字工具將菜單導航的內容輸入進去，并使用圓角矩形工具作為菜單導航的襯底。將服務信息導航的相關圖片進行處理，調整大小和位置，并使用文字工具輸入服務信息導航的內容，調整位置完成導航的制作。重點和難點1．運用鋼筆工具繪制主色調曲線區(qū)域，并對其進行調整填充。2．使用自由變換調整圖片大小。網站導航效果圖任務3主頁欄目設計任務背景網站主頁欄目是呈現(xiàn)網站信息的重要區(qū)域，可以適當?shù)倪M行底紋邊框的裝飾，在此區(qū)域中可以適當

7、根據網站內容信息的分類運用簡單大方的底紋和線條對信息進行分塊，使整個網站更加美觀。任務要求1．主欄目以襯托凸顯網站信息內容為出發(fā)點，設計簡單大方。2．主欄目的設計要區(qū)域明晰，方便用戶使用。【技術要領】使用photoshop中的圓角矩形工具繪制底紋；運用選區(qū)混合運算繪制不規(guī)則形狀圖；使用定義圖案命令來定義圖案，并使用圖案填充工具進行圖案填充?！窘鉀Q問題】網頁主欄目的設計制作?！緫妙I域】網頁頁面設計。任務分析“易購商城”主頁面中欄目設計主要分為“特價促銷”區(qū)域和“推薦商品”區(qū)域。在這兩個區(qū)域中繼續(xù)秉承整個網站的

8、流線型設計風格，以橙色為主色調。首先使用圓角矩形工具繪制“特價促銷”區(qū)域底紋，使用加減選區(qū)工具對底紋進行混合運算，產生半框效果；然后使用文字工具輸入“特價促銷”，導入SALE小圖標和售后員圖片；使用圓角矩形工具繪制“推薦商品”區(qū)域底紋，運用選區(qū)制作圓角細線，完成欄目設計。重點和難點1．將矢量圖層柵格化轉換成普通圖層。2．運用選區(qū)工具和混合運算選區(qū)制作不規(guī)則的圖形。3．定義圖案，并使用圖案填充工具。主