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

第一章 “新媒體，新設(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ū)目
后記