**章 “新媒體，新設(shè)計(jì)”——網(wǎng)頁(yè)設(shè)計(jì)概述**節(jié) WWW：Web概述Web如何工作：客戶／服務(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)三、Wel)設(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í)而建：用戶，用戶，用戶UCD：以用戶為中心的設(shè)計(jì)用戶模型三、“類型片”：定義站點(diǎn)類型站點(diǎn)類別四、站點(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)：邏輯與組織常見站點(diǎn)結(jié)構(gòu)類型四、界面：規(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è)面需求的描述：線框圖三、精彩看得見：頁(yè)面效果圖四、站點(diǎn)的藍(lán)圖：網(wǎng)站計(jì)劃書網(wǎng)站計(jì)劃書的主要內(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．盡可能了解你的用戶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)、線、面——網(wǎng)頁(yè)布局設(shè)計(jì)中的形態(tài)要素1．點(diǎn)2．線3．面造型與風(fēng)格三、關(guān)于空白網(wǎng)頁(yè)中的空白主動(dòng)留白與被動(dòng)空白四、常用布局方法和類型1．自由型布局2．規(guī)整型布局分割網(wǎng)格布局第三節(jié) 技術(shù)與實(shí)現(xiàn)一、表格布局表格布局的分析與規(guī)劃二、DIV+CSS：符合Web標(biāo)準(zhǔn)的布局方法1．觀察與分析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è)配色類型第二節(jié) 網(wǎng)頁(yè)色彩設(shè)計(jì)一、網(wǎng)頁(yè)色彩的選用1．站點(diǎn)類型和主題“不破不立”——打破常規(guī)使用色彩2．用戶需求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)畫1．GIF動(dòng)畫2．Flash動(dòng)畫和交互媒體Flash動(dòng)畫及交互媒體作品的創(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)常用控件類型一、表單的可用性設(shè)計(jì)二、表單外觀：標(biāo)準(zhǔn)與個(gè)性思考與練習(xí)第六章 “他山之石，可以攻玉”——綜合案例分析附錄一常用HTML參考附錄二常用CSS參考附錄三網(wǎng)絡(luò)安全色參考網(wǎng)站參考書目后記