項(xiàng)目15網(wǎng)頁設(shè)計(jì)項(xiàng)目引入:優(yōu)秀的網(wǎng)站必定有獨(dú)具特色的網(wǎng)頁設(shè)計(jì)，美觀的網(wǎng)頁更能吸引瀏覽者的目光。設(shè)計(jì)人員在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，要對頁面進(jìn)行編排。本項(xiàng)目以生活家居類網(wǎng)站為例，講解網(wǎng)頁的設(shè)計(jì)方法和制作技巧。項(xiàng)目目標(biāo)了解網(wǎng)頁設(shè)計(jì)的概念了解網(wǎng)頁的構(gòu)成元素了解網(wǎng)頁的分類掌握網(wǎng)頁的設(shè)計(jì)思路掌握網(wǎng)頁的制作技巧技能目標(biāo)

掌握生活家居類網(wǎng)站首頁的制作方法

掌握生活家居類網(wǎng)站詳情頁的制作方法素養(yǎng)目標(biāo)

培養(yǎng)對網(wǎng)頁的創(chuàng)意設(shè)計(jì)能力

培養(yǎng)對網(wǎng)頁的審美與鑒賞能力網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。網(wǎng)頁實(shí)際上是一個(gè)文件，存放在計(jì)算機(jī)或服務(wù)器中。網(wǎng)頁是通過統(tǒng)一資源定位符（UniformResourceLocator，URL）來識別與存取的，當(dāng)用戶在瀏覽器中輸入網(wǎng)址后，計(jì)算機(jī)會運(yùn)行一段程序，網(wǎng)頁文件隨之被傳送到計(jì)算機(jī)中，然后通過瀏覽器解釋。相關(guān)知識——網(wǎng)頁設(shè)計(jì)概述任務(wù)15.1制作生活家居類網(wǎng)站首頁

任務(wù)分析任務(wù)效果任務(wù)制作艾利佳家居是一個(gè)具有設(shè)計(jì)感的現(xiàn)代家具品牌，現(xiàn)為拓展公司業(yè)務(wù)、擴(kuò)大規(guī)模，需要開發(fā)線上購物平臺。要求為該品牌設(shè)計(jì)網(wǎng)站首頁，網(wǎng)頁要契合品牌風(fēng)格，體現(xiàn)出品牌簡約的特點(diǎn)。在設(shè)計(jì)思路上，本任務(wù)采用簡潔的網(wǎng)頁設(shè)計(jì)，使產(chǎn)品的展示主次分明，讓人一目了然；合理搭配顏色，給人品質(zhì)感；整體設(shè)計(jì)清新自然，易使消費(fèi)者，產(chǎn)生購買欲望。本任務(wù)將使用移動工具添加素材圖片，使用橫排文字工具、“字符”控制面板、矩形工具和橢圓工具制作banner和導(dǎo)航條，使用圖層樣式、矩形工具和橫排文字工具制作網(wǎng)頁內(nèi)容和底部信息。15.1.1任務(wù)分析本任務(wù)設(shè)計(jì)的最終效果參看云盤中的“Ch15/效果/制作生活家居類網(wǎng)站首頁.psd”。15.1.2任務(wù)效果效果圖15.1.3任務(wù)制作制作流程任務(wù)15.2制作生活家居類網(wǎng)站詳情頁

任務(wù)分析任務(wù)效果任務(wù)制作艾利佳家居是一個(gè)具有設(shè)計(jì)感的現(xiàn)代家具品牌，現(xiàn)為拓展公司業(yè)務(wù)、擴(kuò)大規(guī)模，需要開發(fā)線上購物平臺。要求為該品牌設(shè)計(jì)網(wǎng)站首頁，設(shè)計(jì)要符合產(chǎn)品的宣傳主題，能體現(xiàn)出平臺的特點(diǎn)。在設(shè)計(jì)思路上，通過簡約的頁面設(shè)計(jì)，給人直觀的印象，易于閱讀；產(chǎn)品的展示主次分明，讓人一目了然，促進(jìn)銷售；顏色的運(yùn)用合理，給人品質(zhì)感；整體設(shè)計(jì)清新自然，給人以好感，便使其產(chǎn)生購買欲望。本任務(wù)將使用“置入嵌入對象”命令置入圖片，使用圓角矩形工具、矩形工具和直線工具繪制基本形狀，使用橫排文字工具添加文字，使用剪貼蒙版添加宣傳產(chǎn)品。15.2.1任務(wù)分析本任務(wù)設(shè)計(jì)的最終效果參看云盤中的“Ch15/效果/制作生活家居類網(wǎng)站詳情頁.psd”。15.2.2任務(wù)效果效果圖15.2.3任務(wù)制作制作流程使用“置入嵌入對象”命令置入圖片，使用圓角矩形工具、矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具添加產(chǎn)品信息，使用剪貼蒙版添加宣傳產(chǎn)品。項(xiàng)目實(shí)踐1——制作生活家居類列表頁效果圖使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用剪貼蒙版調(diào)整圖片顯示區(qū)域，使用橫排文字工具添加介紹文字，使用矩形工具繪制基本形狀。項(xiàng)目實(shí)踐2——制作中式茶葉官網(wǎng)首頁效果圖使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用剪貼蒙版調(diào)整圖片顯示區(qū)域，使用橫排文字工具添加產(chǎn)品詳情，使用矩形工具和橢圓工具繪制基本形狀。課后習(xí)題1——制作中式茶葉官網(wǎng)詳情頁效果圖使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命