網(wǎng)頁(yè)設(shè)計(jì)

內(nèi)容概要

　　《高等教育“十二五”全國(guó)規(guī)劃教材·中國(guó)高等院校設(shè)計(jì)專(zhuān)業(yè)系列教材：網(wǎng)頁(yè)設(shè)計(jì)》作者憑借嫻熟的專(zhuān)業(yè)設(shè)計(jì)經(jīng)驗(yàn)與大量的第一手案例，系統(tǒng)講解從客戶(hù)到溝通、從草圖到提案、從簽單到完工提交的設(shè)計(jì)全過(guò)程。作者盡心傳授設(shè)計(jì)密招，獨(dú)家披露許多深入的知識(shí)點(diǎn)，而絕對(duì)人氣的高校教學(xué)經(jīng)驗(yàn)又使深度講解不浮于表面，讓讀者有身臨其境之感?！按蠹矣^(guān)點(diǎn)”邀請(qǐng)著名設(shè)計(jì)師群體評(píng)判設(shè)計(jì)的細(xì)節(jié)，避免以偏概全的表達(dá)，啟發(fā)學(xué)生深入思考。

作者簡(jiǎn)介

　　周年國(guó)，1999年畢業(yè)于上海交通大學(xué)圖形技術(shù)與CAD研究所，獲碩士學(xué)位，同年任教于上海交通大學(xué)媒體與設(shè)計(jì)學(xué)院設(shè)計(jì)系。長(zhǎng)期從事數(shù)字媒體設(shè)計(jì)的教學(xué)與科研工作，主要研究方向?yàn)椋壕W(wǎng)絡(luò)媒體設(shè)計(jì)、數(shù)字圖形圖像設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)、界面設(shè)計(jì)、體驗(yàn)設(shè)計(jì)等。曾主持過(guò)的項(xiàng)目有：上海市政府部門(mén)的電子政務(wù)網(wǎng)站設(shè)計(jì)、上海交通大學(xué)媒體與設(shè)計(jì)學(xué)院網(wǎng)站設(shè)計(jì)、上海交通大學(xué)美國(guó)電影研究中心網(wǎng)站設(shè)計(jì)等。發(fā)表的論文有：《界面設(shè)計(jì)：人機(jī)溝通的藝術(shù)》、《以體驗(yàn)為先導(dǎo)——體驗(yàn)經(jīng)濟(jì)條件下設(shè)計(jì)的新思維》、《形態(tài)的數(shù)字化生成及特點(diǎn)淺析》、《內(nèi)容、結(jié)構(gòu)及界面——Web設(shè)計(jì)的三要素》、《新媒體新體驗(yàn)新設(shè)計(jì)——淺析基于數(shù)字媒體的信息設(shè)計(jì)與傳播》等。

書(shū)籍目錄

第一章 “新媒體，新設(shè)計(jì)”——網(wǎng)頁(yè)設(shè)計(jì)概述第一節(jié) WWW：Web概述Web如何工作：客戶(hù)／服務(wù)器（Client／Server）結(jié)構(gòu)瀏覽器：進(jìn)入Web世界的窗口第二節(jié) Web設(shè)計(jì)：新媒體，新設(shè)計(jì)一、網(wǎng)站與網(wǎng)頁(yè)二、用、美、爽：Web設(shè)計(jì)的三目標(biāo)三、Web設(shè)計(jì)流程四、分工與合作：Web設(shè)計(jì)團(tuán)隊(duì)如何成為一名網(wǎng)頁(yè)設(shè)計(jì)師？第三節(jié) “工欲善其事，必先利其器”——網(wǎng)頁(yè)設(shè)計(jì)技術(shù)概述一、HTHL和XHTML：網(wǎng)頁(yè)標(biāo)記語(yǔ)言1.HTHL簡(jiǎn)介2.HTHL的語(yǔ)法特征HlHL標(biāo)簽的嵌套HTHL空白文檔結(jié)構(gòu)3.×HTML二、CSS：級(jí)聯(lián)樣式表1.CSS的語(yǔ)法特征CSS語(yǔ)法示例2.CSS的使用3.樣式的繼承與沖突：級(jí)聯(lián)三、Web標(biāo)準(zhǔn)：XHTL+CSS四、DHTML：動(dòng)態(tài)HTHL思考與練習(xí)第二章 “謀定而動(dòng)”——網(wǎng)站整體設(shè)計(jì)第一節(jié) 明確站點(diǎn)的目標(biāo)與需求設(shè)計(jì)與需求一、建站意圖：為什么要建立一個(gè)網(wǎng)站？網(wǎng)站項(xiàng)目相關(guān)人員二、為誰(shuí)而建：用戶(hù)，用戶(hù)，用戶(hù)UCD：以用戶(hù)為中心的設(shè)計(jì)用戶(hù)模型三、“類(lèi)型片”：定義站點(diǎn)類(lèi)型站點(diǎn)類(lèi)別四、站點(diǎn)目標(biāo)：行動(dòng)的指南第二節(jié) 站點(diǎn)整體規(guī)劃與設(shè)計(jì)一、內(nèi)容：站點(diǎn)的內(nèi)涵與價(jià)值所在多媒體綜合傳播為站點(diǎn)準(zhǔn)備內(nèi)容二、功能：不再只是內(nèi)容功能驅(qū)動(dòng)與內(nèi)容驅(qū)動(dòng)交互設(shè)計(jì)功能流程圖三、架構(gòu)：邏輯與組織常見(jiàn)站點(diǎn)結(jié)構(gòu)類(lèi)型四、界面：規(guī)劃與設(shè)計(jì)網(wǎng)站界面構(gòu)成網(wǎng)頁(yè)界面的構(gòu)成元素五、視覺(jué)：形象與風(fēng)格站點(diǎn)的設(shè)計(jì)風(fēng)格第三節(jié) 技術(shù)與實(shí)現(xiàn)一、創(chuàng)意與探索：設(shè)計(jì)草圖與原型1.草圖2.原型二、頁(yè)面需求的描述：線(xiàn)框圖三、精彩看得見(jiàn)：頁(yè)面效果圖四、站點(diǎn)的藍(lán)圖：網(wǎng)站計(jì)劃書(shū)網(wǎng)站計(jì)劃書(shū)的主要內(nèi)容思考與練習(xí)第三章 “從紙張到屏幕”——網(wǎng)頁(yè)空間與布局第一節(jié) 究竟該多大：網(wǎng)頁(yè)空間探密一、屏幕尺寸與瀏覽器窗口1.顯示器屏幕尺寸2.瀏覽器窗口尺寸二、關(guān)于滾動(dòng)1.避免過(guò)多滾屏2.避免在兩個(gè)方向上滾動(dòng)屏幕第一屏水平設(shè)計(jì)與垂直設(shè)計(jì)三、確定頁(yè)面尺寸1.盡可能了解你的用戶(hù)2.頁(yè)面尺寸設(shè)計(jì)策略最低顯示標(biāo)準(zhǔn)是多少？3.固定寬度和可變寬度設(shè)計(jì)“裁剪”瀏覽器空間第二節(jié) 化有限為無(wú)限：網(wǎng)頁(yè)布局設(shè)計(jì)一、網(wǎng)頁(yè)布局原理1.平衡與穩(wěn)定2.焦點(diǎn)與主次網(wǎng)頁(yè)空間與視覺(jué)關(guān)注度3.秩序與統(tǒng)一“少就是多”4.對(duì)比與變化二、點(diǎn)、線(xiàn)、面——網(wǎng)頁(yè)布局設(shè)計(jì)中的形態(tài)要素1.點(diǎn)2.線(xiàn)3.面造型與風(fēng)格三、關(guān)于空白網(wǎng)頁(yè)中的空白主動(dòng)留白與被動(dòng)空白四、常用布局方法和類(lèi)型1.自由型布局2.規(guī)整型布局分割網(wǎng)格布局第三節(jié) 技術(shù)與實(shí)現(xiàn)一、表格布局表格布局的分析與規(guī)劃二、DIV+CSS：符合Web標(biāo)準(zhǔn)的布局方法1.觀(guān)察與分析2.切片與輸出3.定位與實(shí)現(xiàn)示例：DIV+CSS布局三、框架思考與練習(xí)第四章 “遠(yuǎn)看色，近看花”——網(wǎng)頁(yè)色彩設(shè)計(jì)第一節(jié) 色彩傳遞印象：網(wǎng)頁(yè)色彩基礎(chǔ)一、色彩的三要素色調(diào)二、生理、心理和文化：色彩的感覺(jué)和聯(lián)想1.色彩的感覺(jué)和印象2.色彩的聯(lián)想和象征3.色彩的文化與認(rèn)知三、色彩的表現(xiàn)四、對(duì)比與調(diào)和：網(wǎng)頁(yè)配色原理1.色彩的對(duì)比2.色彩的調(diào)和3.網(wǎng)頁(yè)配色類(lèi)型第二節(jié) 網(wǎng)頁(yè)色彩設(shè)計(jì)一、網(wǎng)頁(yè)色彩的選用1.站點(diǎn)類(lèi)型和主題“不破不立”——打破常規(guī)使用色彩2.用戶(hù)需求3.企業(yè)標(biāo)準(zhǔn)色二、網(wǎng)頁(yè)色彩計(jì)劃1.支配與強(qiáng)調(diào)：主色、輔助色與強(qiáng)調(diào)色2.整體與局部：欄目色彩的規(guī)劃三、網(wǎng)頁(yè)中的色彩1.背景色2.多媒體元素色彩3.文字色彩第三節(jié) 技術(shù)與實(shí)現(xiàn)一、屏幕色彩：加色混合二、網(wǎng)絡(luò)安全色三、網(wǎng)頁(yè)色彩設(shè)置思考與練習(xí)第五章 “細(xì)節(jié)決定成敗”——網(wǎng)頁(yè)元素設(shè)計(jì)第一節(jié) 文字與排版一、網(wǎng)頁(yè)文字與排版基礎(chǔ)1.網(wǎng)頁(yè)字體屏幕閱讀與字體2.網(wǎng)頁(yè)排版網(wǎng)頁(yè)字號(hào)大小的設(shè)置二、網(wǎng)頁(yè)字體設(shè)計(jì)1.網(wǎng)頁(yè)字體的選用2.網(wǎng)頁(yè)中的字體三、技術(shù)與實(shí)現(xiàn)1.用CSS設(shè)置字體2.用圖形實(shí)現(xiàn)網(wǎng)頁(yè)字體設(shè)計(jì)第二節(jié) 圖形元素設(shè)計(jì)一、圖形的作用1.表現(xiàn)頁(yè)面內(nèi)容2.增添頁(yè)面美感圖片的選擇與頁(yè)面的主題二、網(wǎng)頁(yè)中的圖形1.照片與插圖2.背景與底紋整體背景與局部背景3.站點(diǎn)標(biāo)志4.網(wǎng)頁(yè)圖標(biāo)三、技術(shù)與實(shí)現(xiàn)1.網(wǎng)頁(yè)圖形的特點(diǎn)2.網(wǎng)頁(yè)圖形的格式及優(yōu)化3.網(wǎng)頁(yè)圖形制作工具網(wǎng)頁(yè)圖形的制作與優(yōu)化4.在網(wǎng)頁(yè)中插入圖形第三節(jié) 多媒體元素設(shè)計(jì)一、聲音和視頻下載播放與流式播放1.聲音和視頻文件格式2.在網(wǎng)頁(yè)中添加聲音和視頻二、動(dòng)畫(huà)1.GIF動(dòng)畫(huà)2.Flash動(dòng)畫(huà)和交互媒體Flash動(dòng)畫(huà)及交互媒體作品的創(chuàng)作第四節(jié) 導(dǎo)航元素設(shè)計(jì)一、三個(gè)問(wèn)題：導(dǎo)航的功能我在哪兒？我能去哪兒？我從哪里來(lái)？二、導(dǎo)航的布局三、導(dǎo)航媒介與形式四、個(gè)性化導(dǎo)航設(shè)計(jì)五、技術(shù)與實(shí)現(xiàn)：超鏈接超鏈接示意圖URL超鏈接的創(chuàng)建使用Dreameaver創(chuàng)建圖像映象第五節(jié) 表單與控件表單及HTHL實(shí)現(xiàn)常用控件類(lèi)型一、表單的可用性設(shè)計(jì)二、表單外觀(guān)：標(biāo)準(zhǔn)與個(gè)性思考與練習(xí)第六章 “他山之石，可以攻玉”——綜合案例分析案例1 http://www.taorestaurant.com案例2 www.howblue.com案例3 http://www.bmw.com案例4 http://www.ninebridges.co.kr案例5 http://www.ksdb.co.kr案例6 www.afrc.com思考與練習(xí)附錄一 常用HTML參考附錄二 常用CSS參考附錄三 網(wǎng)絡(luò)安全色參考網(wǎng)站參考書(shū)目后記

編輯推薦

　　20％傳統(tǒng)教學(xué)內(nèi)容+30％最新教育理念+50％經(jīng)典案例解析與設(shè)計(jì)項(xiàng)目實(shí)訓(xùn)。　　本系列教材均以國(guó)內(nèi)藝術(shù)與設(shè)計(jì)專(zhuān)業(yè)的一線(xiàn)教育專(zhuān)家為主力作者，充分契合藝術(shù)與設(shè)計(jì)教育改革的需要，致力于培育能夠與設(shè)計(jì)產(chǎn)業(yè)無(wú)縫對(duì)接的人才，在結(jié)構(gòu)上以教材的學(xué)術(shù)性、系統(tǒng)性為基礎(chǔ)，綜合了教輔書(shū)的功能性與實(shí)用性，以及工具書(shū)信息龐大的優(yōu)勢(shì)，對(duì)傳統(tǒng)教材的編寫(xiě)體例與要求進(jìn)行大幅度改革，將20％的傳統(tǒng)教學(xué)內(nèi)容、30％的最新教育理念和50％的經(jīng)典案例解析與設(shè)計(jì)項(xiàng)目實(shí)訓(xùn)完美融合?！　”鞠盗薪滩牡某霭嫦祰?guó)內(nèi)藝術(shù)與設(shè)計(jì)院校教改成就的全景呈現(xiàn)，對(duì)于國(guó)內(nèi)藝術(shù)與設(shè)計(jì)教育的發(fā)展意義深遠(yuǎn)。

圖書(shū)封面

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

---

    網(wǎng)頁(yè)設(shè)計(jì) PDF格式下載

---