網(wǎng)頁設(shè)計

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