網(wǎng)頁視覺設計案例教程

前言

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

內(nèi)容概要

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

書籍目錄

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

章節(jié)摘錄

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

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

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

編輯推薦

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

圖書封面

評論、評分、閱讀與下載

---

    網(wǎng)頁視覺設計案例教程 PDF格式下載

---