網(wǎng)頁設計

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