網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)案例教程

前言

　　隨著Internet的迅猛發(fā)展，網(wǎng)絡(luò)正在逐步替代傳統(tǒng)媒體，成為人們工作和生活中相互溝通的平臺(tái)，同時(shí)在世界范圍內(nèi)對(duì)商業(yè)、廣告業(yè)、信息業(yè)和通信業(yè)產(chǎn)生了深遠(yuǎn)的影響。通過(guò)利用網(wǎng)絡(luò)資源，企業(yè)可以宣傳產(chǎn)品，政府可以發(fā)布政策法規(guī)，學(xué)?？梢詾閷W(xué)生提供教學(xué)信息，各網(wǎng)絡(luò)公司大力開(kāi)發(fā)門(mén)戶(hù)網(wǎng)站等。為了使網(wǎng)站能夠吸引越來(lái)越多的用戶(hù)，需要運(yùn)用好網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的知識(shí)，這就要求網(wǎng)頁(yè)學(xué)習(xí)者和從業(yè)者補(bǔ)充更多藝術(shù)設(shè)計(jì)方面的知識(shí)，加強(qiáng)這方面的訓(xùn)練。網(wǎng)頁(yè)視覺(jué)傳達(dá)與布局設(shè)計(jì)成為網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)方面必備的理論學(xué)習(xí)課程?！　【W(wǎng)頁(yè)視覺(jué)傳達(dá)與布局設(shè)計(jì)是通過(guò)諸多領(lǐng)域的知識(shí)啟迪靈感，同時(shí)針對(duì)網(wǎng)站整體設(shè)計(jì)發(fā)展而產(chǎn)生的一門(mén)新藝術(shù)設(shè)計(jì)門(mén)類(lèi)，是以信息網(wǎng)絡(luò)為媒介和載體的綜合性藝術(shù)，是與以往任何一種藝術(shù)形式都不同的互動(dòng)媒體藝術(shù)。它具有與傳統(tǒng)媒體相同的美學(xué)規(guī)律，同時(shí)在網(wǎng)頁(yè)技術(shù)的支持下，互動(dòng)性更強(qiáng)，更加人性化?！　”緯?shū)所要闡述的觀點(diǎn)是優(yōu)秀的網(wǎng)站設(shè)計(jì)高手應(yīng)該同時(shí)具有理性與感性思維模式。從前期的網(wǎng)站整體創(chuàng)意策劃到網(wǎng)站的構(gòu)成要素；從對(duì)各個(gè)網(wǎng)頁(yè)中的色彩、圖形、文字、版式的風(fēng)格控制，到后臺(tái)的網(wǎng)頁(yè)代碼的實(shí)現(xiàn)，都是整個(gè)網(wǎng)站設(shè)計(jì)的基石?！　”窘滩膬?nèi)容分為7章，從相關(guān)基礎(chǔ)知識(shí)介紹開(kāi)始，逐步遞進(jìn)，最后以案例解析結(jié)束?！　〉趌章網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)概述，包括了課程性質(zhì)與任務(wù)、課程內(nèi)容和要求、教學(xué)建議、教學(xué)時(shí)間分配及網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)一些特點(diǎn)與原則?！　〉?章網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)要素，是本書(shū)的重點(diǎn)之一，主要介紹網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)基本要素及網(wǎng)頁(yè)應(yīng)用要素的構(gòu)成?！　〉?章CI網(wǎng)頁(yè)中企業(yè)形象識(shí)別，是本書(shū)的重點(diǎn)之二，介紹網(wǎng)頁(yè)中企業(yè)形象識(shí)別的應(yīng)用。根據(jù)市場(chǎng)狀況、企業(yè)自身情況的綜合分析，做出符合企業(yè)自身需求的網(wǎng)頁(yè)設(shè)計(jì)計(jì)劃。　　第4章網(wǎng)頁(yè)美工設(shè)計(jì)制作，主要針對(duì)如何把理論貫穿于網(wǎng)頁(yè)視覺(jué)的制作過(guò)程中，達(dá)到一定的視覺(jué)美觀。網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的制作是理性和感性的結(jié)合，是現(xiàn)代媒體的發(fā)展趨勢(shì)。視覺(jué)信息的處理不再是單純地停留在靜態(tài)和動(dòng)態(tài)兩個(gè)方面，而是升級(jí)為交互的方式，這就要求網(wǎng)頁(yè)設(shè)計(jì)師具有藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的審美的同時(shí)也要具有計(jì)算機(jī)學(xué)科的嚴(yán)謹(jǐn)?！　〉?章HTML網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)和第6章CSS層疊樣式表設(shè)計(jì)基礎(chǔ)，主要是介紹如何把具體的視覺(jué)元素通過(guò)網(wǎng)頁(yè)語(yǔ)言表現(xiàn)出來(lái)?！　〉?章美工設(shè)計(jì)全案解析，主要介紹美工前期的設(shè)計(jì)流程與后期網(wǎng)頁(yè)語(yǔ)言的整體的結(jié)合?！　”緯?shū)由天津交通運(yùn)輸部管理干部學(xué)院王華、錢(qián)哨編著，黃少波參與了部分章節(jié)的編寫(xiě)。本書(shū)在編寫(xiě)過(guò)程中得到了電子工業(yè)出版社與社會(huì)各界朋友的大力支持和幫助，筆者在此由衷地感謝！

內(nèi)容概要

本書(shū)源于視覺(jué)傳達(dá)專(zhuān)業(yè)與計(jì)算機(jī)專(zhuān)業(yè)教學(xué)一線教師們多年的隨堂講義和授課心得，全面系統(tǒng)地介紹了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)概述，網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)要素及網(wǎng)頁(yè)應(yīng)用要素的構(gòu)成，CI網(wǎng)頁(yè)中企業(yè)形象識(shí)別，網(wǎng)頁(yè)美工設(shè)計(jì)制作，HTML網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)，CSS層疊樣式表設(shè)計(jì)基礎(chǔ)，以及網(wǎng)頁(yè)美工設(shè)計(jì)全案解析，其中應(yīng)用了大量的國(guó)內(nèi)外知名企業(yè)網(wǎng)站典型案例。    全書(shū)由淺入深，層層深入地講解了視覺(jué)元素基礎(chǔ)知識(shí)到高級(jí)階段網(wǎng)站具體布局知識(shí)。

書(shū)籍目錄

第1章  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)概述  1.1  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)教學(xué)  1.2  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)概述    1.2.1  互聯(lián)網(wǎng)的起源    1.2.2  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)定義    1.2.3  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)要點(diǎn)    1.2.4  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)特點(diǎn)    1.2.5  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的原則第2章  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)要素  2.1  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)基礎(chǔ)要素    2.1.1  網(wǎng)頁(yè)視覺(jué)創(chuàng)意方法    2.1.2  視覺(jué)基礎(chǔ)元素  2.2  文字篇    2.2.1  文字的演變和發(fā)展    2.2.2  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)中的基本字體    2.2.3  網(wǎng)頁(yè)中文字設(shè)計(jì)原則    2.2.4  文字的版式編排    2.2.5　網(wǎng)頁(yè)文字的色彩處理    2.2.6　網(wǎng)頁(yè)文字情感因素  2.3  圖形(圖像)篇    2.3.1  圖形(圖像)概述    2.3.2  網(wǎng)頁(yè)設(shè)計(jì)中的圖形(圖像)存在形式    2.3.3　網(wǎng)頁(yè)中圖形(圖像)文件格式    2.3.4  網(wǎng)頁(yè)圖形創(chuàng)意設(shè)計(jì)  2.4  色彩篇    2.4.1  色彩的基本原理    2.4.2  Web中色彩管理    2.4.3　網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)中色彩的作用    2.4.4  色彩情感  2.5  版式設(shè)計(jì)篇    2.5.1  版式設(shè)計(jì)原理    2.5.2  版式設(shè)計(jì)法則    2.5.3  常用的版式第3章  CI網(wǎng)頁(yè)中企業(yè)形象識(shí)別  3.1  CI概述    3.1.1  CI的形成與歷史沿革    3.1.2  CI的概念    3.1.3  CI的價(jià)值  3.2  CI系統(tǒng)構(gòu)成與相互關(guān)系    3.2.1  CI系統(tǒng)構(gòu)成要素    3.2.2  MI、BI、VI之間的相互關(guān)系    3.2.3  CI設(shè)計(jì)原則    3.2.4  CI功能  3.3　網(wǎng)絡(luò)CI策劃與設(shè)計(jì)    3.3.1  明確形象建設(shè)的目的與動(dòng)因    3.3.2  設(shè)計(jì)調(diào)查    3.3.3  形象識(shí)別定位    3.3.4  標(biāo)志設(shè)計(jì)    3.3.5  網(wǎng)頁(yè)形象視覺(jué)設(shè)計(jì)第4章  網(wǎng)頁(yè)美工設(shè)計(jì)制作  4.1  網(wǎng)頁(yè)美工設(shè)計(jì)工具    4.1.1  選擇適合的設(shè)計(jì)軟件    4.1.2  網(wǎng)頁(yè)美工設(shè)計(jì)工具——Photoshop    4.1.3  Web圖像的生成  4.2  網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)中元素制作    4.2.1  網(wǎng)頁(yè)圖標(biāo)設(shè)計(jì)    4.2.2  網(wǎng)頁(yè)logo圖標(biāo)    4.2.3  網(wǎng)頁(yè)banner制作    4.2.4  網(wǎng)頁(yè)導(dǎo)航菜單的制作  4.3  首頁(yè)設(shè)計(jì)制作    4.3.1  首頁(yè)設(shè)計(jì)的原則    4.3.2  首頁(yè)設(shè)計(jì)案例制作第5章  HTML網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)  5.1  HTML基礎(chǔ)知識(shí)    5.1.1  Dreamweaver軟件與網(wǎng)頁(yè)設(shè)計(jì)準(zhǔn)備    5.1.2  HTML的頁(yè)面(PAGE)標(biāo)記(TAGS)    5.1.3  字體(FONT)標(biāo)記(TAGS)    5.1.4  文字布局(TEXT STYLE)標(biāo)記(TAGS)    5.1.5  文字列表    5.1.6  圖像(IMAGE)標(biāo)記(TAGS)  5.2  HTML的表格設(shè)計(jì)與布局    5.2.1  表格(TABLE)標(biāo)記(TAGS)    5.2.2  表格設(shè)計(jì)進(jìn)階  5.3  HTML的表單設(shè)計(jì)    5.3.1  表單基礎(chǔ)    5.3.2  表單進(jìn)階  5.4  HTML的框架結(jié)構(gòu)    5.4.1  框架結(jié)構(gòu)基礎(chǔ)    5.4.2  框架結(jié)構(gòu)進(jìn)階  5.5  HTML的文字移動(dòng)和背景音樂(lè)    5.5.1  文字移動(dòng)(Marque)    5.5.2  背景音樂(lè)第6章  CSS層疊樣式表設(shè)計(jì)基礎(chǔ)  6.1  Web標(biāo)準(zhǔn)歷史與發(fā)展    6.1.1  W3C技術(shù)架構(gòu)    6.1.2  了解CSS的應(yīng)用本質(zhì)和優(yōu)點(diǎn)    6.1.3  網(wǎng)頁(yè)的表現(xiàn)與分離  6.2  CSS基礎(chǔ)知識(shí)    6.2.1  XHTML基礎(chǔ)    6.2.2  XHTML頭部的meta標(biāo)簽    6.2.3  第一個(gè)CSS樣式設(shè)計(jì)    6.2.4  CSS的語(yǔ)法結(jié)構(gòu)    6.2.5  CSS的類(lèi)型    6.2.6  CSS的標(biāo)簽    6.2.7  XHTML的書(shū)寫(xiě)規(guī)范    6.2.8  如何將樣式表加入到網(wǎng)頁(yè)    6.2.9  CSS基本的書(shū)寫(xiě)順序及規(guī)范    6.2.10  CSS的優(yōu)先級(jí)    6.2.11  CSS的計(jì)量單位  6.3  CSS網(wǎng)頁(yè)布局(Inside CSS Layout)  6.4  網(wǎng)頁(yè)布局基礎(chǔ)    6.4.1  布局頁(yè)面的基本步驟    6.4.2  網(wǎng)頁(yè)布局基礎(chǔ)綜合實(shí)訓(xùn)  6.5  CSS容器屬性    6.5.1  盒模型的概念    6.5.2  邊界屬性的概念    6.5.3  綜合實(shí)訓(xùn)——網(wǎng)站首頁(yè)CSS實(shí)戰(zhàn)設(shè)計(jì)第7章  美工設(shè)計(jì)全案解析  7.1  企業(yè)應(yīng)用型網(wǎng)站規(guī)劃與設(shè)計(jì)    7.1.1  建設(shè)網(wǎng)站前的市場(chǎng)分析    7.1.2  建設(shè)網(wǎng)站的目的及功能定位    7.1.3  網(wǎng)站技術(shù)解決方案    7.1.4  網(wǎng)站內(nèi)容規(guī)劃    7.1.5  網(wǎng)頁(yè)設(shè)計(jì)    7.1.6  網(wǎng)站維護(hù)    7.1.7  網(wǎng)站測(cè)試    7.1.8  網(wǎng)站發(fā)布與推廣  7.2  網(wǎng)頁(yè)的切割技巧分析  7.3  門(mén)戶(hù)類(lèi)型網(wǎng)站全案分析    7.3.1  門(mén)戶(hù)類(lèi)網(wǎng)站    7.3.2  AOL網(wǎng)站的美工制作過(guò)程    7.3.3  AOL網(wǎng)站的切割實(shí)訓(xùn)案例    7.3.4  AOL網(wǎng)站的CSS設(shè)計(jì)實(shí)例  7.4  企業(yè)類(lèi)型網(wǎng)站全案分析    7.4.1  惠好公司網(wǎng)站    7.4.2  惠好公司(Weyerhaeuser)網(wǎng)站美工制作過(guò)程  7.5  功能類(lèi)型網(wǎng)站全案分析  7.6  休閑類(lèi)型網(wǎng)站全案分析附錄A  習(xí)題參考答案參考文獻(xiàn)

章節(jié)摘錄

　　3.媒體綜合　　媒體綜合是指在網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)中綜合應(yīng)用多種媒體視聽(tīng)元素，主要有文字、圖像、聲音、視頻等。網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)是一門(mén)新光的綜合媒體視覺(jué)藝術(shù)，它的綜合性體現(xiàn)在媒體的多樣化上?！　‰S著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平臺(tái)的多媒體文件格式的推廣，必將促使視覺(jué)設(shè)計(jì)者綜合運(yùn)用多種媒體元素來(lái)設(shè)計(jì)網(wǎng)頁(yè)，以滿(mǎn)足和豐富瀏覽者對(duì)網(wǎng)絡(luò)信息傳輸質(zhì)量的要求。目前國(guó)內(nèi)網(wǎng)頁(yè)已經(jīng)出現(xiàn)了模擬三維的操作界面，在數(shù)據(jù)壓縮技術(shù)的改進(jìn)和流（Stream）技術(shù)的推動(dòng)下，Internet網(wǎng)上出現(xiàn)實(shí)時(shí)的音頻和視頻服務(wù)，如在線音樂(lè)、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。因此，多種媒體的綜合運(yùn)用是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn)之一，是未來(lái)的發(fā)展方向?！　?.終端可變　　終端可變指的是網(wǎng)頁(yè)顯示效果會(huì)隨著顯示終端的變化而出現(xiàn)變化，這些變化網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)者是不可控的。與傳統(tǒng)印刷、影視藝術(shù)的不同之處，就在于網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)顯示的終端是不確定的。網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)顯示終端包括軟件（瀏覽器）和硬件（顯示器）兩個(gè)部分，不同的用戶(hù)會(huì)使用不同的顯示終端。例如，同一個(gè)網(wǎng)頁(yè)，在Windows操作系統(tǒng)下的Internet Explorer瀏覽器與Mac操作系統(tǒng)下的Safari瀏覽器中的顯示效果可能是不一樣的。頁(yè)面的功能也可能出現(xiàn)兼容問(wèn)題，就算是同一個(gè)瀏覽器軟件，由于不同的版本也同樣會(huì)出現(xiàn)顯示效果不一樣的情況。

媒體關(guān)注與評(píng)論

我國(guó)現(xiàn)今的設(shè)計(jì)教育面臨著前所未有的發(fā)展機(jī)遇，如何加快培養(yǎng)出更多符合專(zhuān)業(yè)發(fā)展要求和社會(huì)需求的優(yōu)秀的復(fù)合型人才，是長(zhǎng)期以來(lái)在該領(lǐng)域教育工作者面前的重要課題。由我院視覺(jué)傳達(dá)專(zhuān)業(yè)教師和計(jì)算機(jī)專(zhuān)業(yè)教師通力合作編寫(xiě)的這部教材的目的正在于此?！毒W(wǎng)頁(yè)視覺(jué)設(shè)計(jì)案例教程》集合了目前視覺(jué)傳達(dá)設(shè)計(jì)專(zhuān)業(yè)與計(jì)算機(jī)設(shè)計(jì)專(zhuān)業(yè)的主要課程，課程之間相互依托，形成了合理的、獨(dú)具特色的課程體系，已經(jīng)在多年的教學(xué)實(shí)踐中得到了具體的體現(xiàn)，收到了良好的效果。同時(shí)也真誠(chéng)地希望本書(shū)問(wèn)世后，能夠聽(tīng)到各位專(zhuān)家、學(xué)者的寶貴意見(jiàn)?！　　煌ㄟ\(yùn)輸部管理干部學(xué)院副院長(zhǎng) 劉衛(wèi)民、本書(shū)深入淺出詳解基礎(chǔ)知識(shí)，配有大量精美圖例：在網(wǎng)頁(yè)美術(shù)設(shè)計(jì)方面還同步介紹了工具的使用，理論與實(shí)踐較好的結(jié)合，對(duì)日后工作有較好的指導(dǎo)作用。本書(shū)內(nèi)容豐富系統(tǒng)，又有實(shí)踐指導(dǎo)作用，會(huì)令初學(xué)者受益匪淺，是一本非常實(shí)用的教材?！　　A源潤(rùn)通（北京）科枝有限公司項(xiàng)目經(jīng)理 鄭玉升

編輯推薦

　　國(guó)家人力資源和社會(huì)保障部，國(guó)家工業(yè)和信息化部信息專(zhuān)業(yè)技術(shù)人才知識(shí)更新工程指定教材，全國(guó)軟件專(zhuān)業(yè)人才設(shè)計(jì)與開(kāi)發(fā)大賽指定參考教材?！　〗逃扛呗毟邔?zhuān)計(jì)算機(jī)類(lèi)專(zhuān)業(yè)教學(xué)指導(dǎo)委員會(huì)高職高專(zhuān)計(jì)算機(jī)類(lèi)專(zhuān)業(yè)2010年度立項(xiàng)課題“校企合作下的計(jì)算機(jī)類(lèi)專(zhuān)業(yè)人才培養(yǎng)方案研究”課題成果教材?！　【W(wǎng)絡(luò)課程、教學(xué)課件、電子教案、習(xí)題答案、練習(xí)素材等立體化教學(xué)資源支持，選用此教材的任課老師可獲贈(zèng)考試系統(tǒng)一套(含題庫(kù))。

圖書(shū)封面

評(píng)論、評(píng)分、閱讀與下載

---

    網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)案例教程 PDF格式下載

---