靈活Web設(shè)計

譯者序
前言
致謝
第1章 理解靈活布局
1.1 布局類型
1.1.1 固定寬度：固定像素
1.1.2 可變布局或不固定布局：根據(jù)視口調(diào)整
1.1.3 彈性：與文本大小相適
1.1.4 混合布局
1.2 可變布局和彈性布局帶來的挑戰(zhàn)
1.2.1 擺脫網(wǎng)格束縛：進(jìn)行設(shè)計非舒適區(qū)域
1.2.2 告別像素的完美性
1.2.3 讓設(shè)計看上去很大或是很小
1.2.4 處理文本溢出的問題
1.2.5 處理水平滾動條的問題
1.2.6 在彈性框中適配固定寬度的內(nèi)容
1.2.7 更長的設(shè)計時間和測試時間
1.2.8 瀏覽器缺陷
1.3 為頁面選擇合適的布局類型
1.3.1 固定寬度布局
1.3.2 可變布局
1.3.3 彈性布局
第2章 設(shè)計靈活布局的方法
2.1 靈活布局的設(shè)計原理
2.1.1 避免：包含文本的內(nèi)容采用固定高度
2.1.2 避免：不規(guī)則形狀
2.1.3 避免：與不能擴(kuò)展的圖像相匹配的文字
2.1.4 避免：固定寬度和全寬度內(nèi)容
2.1.5 規(guī)劃：超出原始尺寸的圖像
2.1.6 規(guī)劃：設(shè)計位于最大寬度之外的白色區(qū)域
2.1.7 規(guī)劃：折成多行的并排放置的項(xiàng)
2.2 設(shè)計前和設(shè)計后：我們的非兼容設(shè)計和固定的設(shè)計
第3章 準(zhǔn)備網(wǎng)頁設(shè)計
3.1 創(chuàng)建圖像版式
3.1.1 設(shè)置畫布尺寸
3.1.2 使用圖層和頁面來管理版式
3.1.3 非破壞性編輯技術(shù)
3.2 針對靈活設(shè)計對圖形進(jìn)行切片處理
3.2.1 為切片創(chuàng)建多個單獨(dú)的文件
3.2.2 切分方框
3.3 站點(diǎn)創(chuàng)建練習(xí)：為構(gòu)建站點(diǎn)準(zhǔn)備BeechwoodAnimalShelter版式
3.3.1 在版式中導(dǎo)航
3.3.2 為頁眉創(chuàng)建切片
3.3.3 為主頁創(chuàng)建切片
3.3.4 為步驟頁創(chuàng)建切片
3.3.5 導(dǎo)出圖像
第4章 創(chuàng)建可變布局結(jié)構(gòu)
4.1 為CSS布局準(zhǔn)備頁面
4.1.1 通用頁面的創(chuàng)建步驟
4.1.2 為本章 實(shí)例準(zhǔn)備頁面
4.2 使用浮動創(chuàng)建可變欄
4.2.1 使用浮動創(chuàng)建欄位并且匹配側(cè)邊緣
4.2.2 通過浮動所有對象創(chuàng)建欄
4.2.3 使用浮動和負(fù)邊緣創(chuàng)建欄位
4.3 禁止布局橫跨整個視口
4.3.1 更改欄位寬度
4.3.2 指定側(cè)邊緣
4.3.3 為包裝器指定百分比寬度
4.4 站點(diǎn)創(chuàng)建練習(xí)：創(chuàng)建Shelter的內(nèi)頁布局結(jié)構(gòu)
4.4.1 準(zhǔn)備頁面
4.4.2 添加基本樣式
4.4.3 創(chuàng)建雙欄布局
4.4.4 減少雙欄的寬度
第5章 創(chuàng)建彈性布局結(jié)構(gòu)
5.1 將尺寸換成em
5.1.1 em的定義
5.1.2 嵌套em度量
5.1.3 有選擇性地采用em度量
5.2 使用浮動創(chuàng)建彈性欄
5.2.1 復(fù)習(xí)：本章 實(shí)例
5.2.2 使用浮動創(chuàng)建欄位與匹配側(cè)邊緣
5.2.3 通過浮動所有元素來創(chuàng)建欄
5.3 站點(diǎn)創(chuàng)建練習(xí)：創(chuàng)建Shelter的主頁布局結(jié)構(gòu)
5.3.1 準(zhǔn)備頁面
5.3.2 添加基礎(chǔ)樣式
5.3.3 創(chuàng)建欄
第6章 規(guī)范靈活性
6.1 創(chuàng)建混合布局
6.1.1 固定側(cè)邊欄搭配可變居中欄位
6.1.2 帶彈性居中欄的固定側(cè)邊欄
6.2 添加最小和最大寬度
6.2.1 保護(hù)你的用戶.設(shè)計和內(nèi)容
6.2.2 選擇min-width和max-width值
6.2.3 使用min-width和max-width屬性
6.2.4 IE6和更早版本的瀏覽器中的不兼容
6.3 限制靈活性的其他方式
6.3.1 使用overflow屬性
6.3.2 讓欄位下移
6.4 站點(diǎn)創(chuàng)建練習(xí)：限制Shelter的頁面的靈活性
6.4.1 修改Programs頁面
6.4.2 修改主頁面
第7章 設(shè)置文字間距
7.1 匹配度量單位
7.1.1 可變布局間隔
7.1.2 彈性布局間隔
7.2 混合度量單位
7.2.1 為寬度較窄的div添加邊緣和填充
7.2.2 為內(nèi)容而非div添加邊緣和填充
7.2.3 添加緩沖div
7.3 站點(diǎn)創(chuàng)建練習(xí)：為主頁和內(nèi)頁添加間隔
7.3.1 為頁眉添加間隔
7.3.2 為頁腳添加間隔
7.3.3 處理邊緣塌陷
7.3.4 為Programs頁面內(nèi)容添加間隔
7.3.5 為主頁內(nèi)容添加間隔
第8章 添加背景圖像和顏色
8.1 混合背景圖像
8.1.1 創(chuàng)建漸變
8.1.2 創(chuàng)建圓角
8.1.3 創(chuàng)建曲線邊緣
8.2 創(chuàng)建等高欄
8.2.1 可變－固定寬度混合布局的偽列布局
8.2.2 可變布局的偽列布局
8.2.3 彈性布局的偽列布局
8.3 站點(diǎn)創(chuàng)建練習(xí)：為主頁和內(nèi)頁添加背景
8.3.1 調(diào)整頁眉的背景和顏色
8.3.2 調(diào)整Programs頁面背景
8.3.3 調(diào)整主頁背景
第9章 創(chuàng)建靈活的圖像
9.1 動態(tài)更改圖像的屏幕區(qū)域
9.1.1 與布局同時縮放的前景圖像
9.1.2 隱藏和顯示部分圖像
9.1.3 創(chuàng)建變化的合成圖像
9.2 創(chuàng)建靈活的圖像組
9.2.1 趣味縮覽圖列表
9.2.2 縮覽圖庫
9.3 站點(diǎn)創(chuàng)建練習(xí)：為主頁添加靈活的圖像
9.3.1 添加可變裁切的橫幅廣告圖像
9.3.2 創(chuàng)建趣味縮覽圖列表