《網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》項(xiàng)目一 網(wǎng)站與網(wǎng)頁賞析

網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析項(xiàng)目一

網(wǎng)站與網(wǎng)頁賞析項(xiàng)目目標(biāo)：能力目標(biāo)(1)分析網(wǎng)頁的配色方案。(2)分析網(wǎng)頁的版式結(jié)構(gòu)。(3)編寫簡(jiǎn)易的網(wǎng)頁賞析報(bào)告。知識(shí)目標(biāo)(1)網(wǎng)頁基礎(chǔ)知識(shí)(2)企業(yè)網(wǎng)頁的基本構(gòu)成(3)網(wǎng)店的構(gòu)成和頁面元素(4)常見的網(wǎng)頁版式及設(shè)計(jì)原則網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析任務(wù)1企業(yè)形象網(wǎng)站賞析【任務(wù)目標(biāo)】本任務(wù)的目標(biāo)是通過瀏覽“德百順”、“敬學(xué)教育”等企業(yè)的網(wǎng)站，來分析常見頁面布局、網(wǎng)站欄目構(gòu)成、色彩搭配等，以便為各類型企業(yè)規(guī)劃設(shè)計(jì)網(wǎng)站?！救蝿?wù)實(shí)施】1.分析“德百順”網(wǎng)站德百順電氣科技有限公司是一家從事金剛石膜研發(fā)和生產(chǎn)的高新技術(shù)企業(yè)，網(wǎng)站地址是，該網(wǎng)站主頁采用了簡(jiǎn)潔的“層疊式”頁面布局。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析圖1-1-1“德百順”企業(yè)LOGO和導(dǎo)航條圖1-1-2“德百順”輪播圖1圖1-1-3“德百順”輪播圖2網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析圖1-1-4“德百順”輪播圖3

這幾幅輪播圖簡(jiǎn)潔大方，以當(dāng)下很多電子電器類行業(yè)樂于采用的藍(lán)色調(diào)為基調(diào)，搭配溫情的綠色與黃色調(diào)，在大面積藍(lán)白色的襯托下能營(yíng)造出溫馨的生活氣息，打造自然干凈、上檔次的品牌形象。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析

頁面中間內(nèi)容分別是企業(yè)的介紹“關(guān)于德百順”，產(chǎn)品的介紹“產(chǎn)品展示”，和體現(xiàn)公司價(jià)值觀、產(chǎn)品使用情景，企業(yè)新聞的“視頻窗口”網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析

頁面底部是“了解產(chǎn)品”、“服務(wù)與支持”、“購(gòu)買流程”、“關(guān)注我們”和“聯(lián)系客服”及常見的版權(quán)申明。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析2.分析“敬學(xué)教育”網(wǎng)站廣州敬學(xué)教育科技有限公司，是一家提供教育咨詢服務(wù)的企業(yè)，業(yè)務(wù)涉及教育培訓(xùn)、、教育咨詢與策劃服務(wù)。圖1-1-7“敬學(xué)教育”主頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析圖1-1-12“敬學(xué)教育”輪播圖4

圖1-1-13“敬學(xué)教育”頁面中間內(nèi)容網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析

圖1-2-1“WIS”網(wǎng)店的Logo

圖1-2-2“WIS”網(wǎng)店的banner

圖1-2-3“WIS”網(wǎng)店的導(dǎo)航條網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析“WIS”網(wǎng)店的輪播圖網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析5“WIS”網(wǎng)店的活動(dòng)促銷圖網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析6.自定義內(nèi)容網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析傳統(tǒng)淘寶頁面部分

傳統(tǒng)淘寶頁面為“匡”字形布局，左邊欄目條較窄，提供客服信息和產(chǎn)品分類欄目，右邊主要是產(chǎn)品展示，提供產(chǎn)品圖片、特點(diǎn)、價(jià)格、銷量等信息。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析頁尾淘寶店鋪頁尾主要是店鋪版本、友情鏈接及網(wǎng)站相關(guān)的一些信息網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析任務(wù)3常見網(wǎng)頁版式賞析【任務(wù)目標(biāo)】本任務(wù)的目標(biāo)是通過瀏覽網(wǎng)頁的版式，來分析常見頁面版式、文字圖形的空間組合，體會(huì)如何設(shè)計(jì)好版面，使用戶有一個(gè)流暢的視覺體驗(yàn)?！救蝿?wù)實(shí)施】子任務(wù)1網(wǎng)站版式的設(shè)計(jì)與編排網(wǎng)頁的版式設(shè)計(jì)具有藝術(shù)性，其設(shè)計(jì)應(yīng)加強(qiáng)頁面的視覺效果、信息內(nèi)容的可視度和可讀性等。網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析1.重點(diǎn)突出

圖1-3-1沖浪板網(wǎng)站網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析2.平衡協(xié)調(diào)

圖1-3-2電子產(chǎn)品網(wǎng)站2.平衡協(xié)調(diào)網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析3.圖文并茂4.簡(jiǎn)潔清晰

網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析子任務(wù)2常見網(wǎng)頁版式賞析常見的網(wǎng)頁版式有：骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型等。1、骨骼型

圖1-3-4骨骼型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析2.滿版型頁面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。圖1-3-5滿版型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析3.分割型整個(gè)頁面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜，可以調(diào)整圖片和文案所占的面積，來調(diào)節(jié)對(duì)比的強(qiáng)弱。

圖1-3-6分割型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析4.中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。

圖1-3-7中軸型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析

5.曲線型圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。

圖1-3-8曲線型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析6.傾斜型頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目，如圖1-3-9所示。

圖1-3-9傾斜型網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析

7.對(duì)稱型對(duì)稱的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。左右對(duì)稱的頁面版式比較常見。四角型也是對(duì)稱型的一種，是在頁面四角安排相應(yīng)的視覺元素。四個(gè)角是頁面的邊界點(diǎn)，重要性不可低估。圖1-3-10對(duì)稱型網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析8.焦點(diǎn)型焦點(diǎn)型的網(wǎng)頁版式通過對(duì)視線的誘導(dǎo)，使頁面具有強(qiáng)烈的視覺效果。圖1-3-11焦點(diǎn)型網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析9.三角型網(wǎng)頁各視覺元素呈三角形排列。正三角形(金字塔型)最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感，如圖1-3-12所示。

圖1-3-12三角型網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目一網(wǎng)站與網(wǎng)頁賞析10.自由型自由型的頁面具有活潑、輕快的風(fēng)格。

圖1-3-13自由型

【項(xiàng)目總結(jié)】網(wǎng)頁設(shè)計(jì)是在網(wǎng)頁中通過文字、圖片、多媒體等形式向?yàn)g覽者傳遞信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行頁面美化與優(yōu)化的工作。一個(gè)優(yōu)秀的網(wǎng)站要有一個(gè)明確的主題。整個(gè)網(wǎng)站的內(nèi)容要圍繞這個(gè)主題來制作。賞析不同類型的優(yōu)秀電子商務(wù)網(wǎng)站頁面，有助于迅速提高網(wǎng)頁設(shè)計(jì)水平，也能激發(fā)設(shè)計(jì)靈感?！卷?xiàng)目檢測(cè)】一、練習(xí)題：1.選擇5