靈活Web設(shè)計(jì)

譯者序
前言
致謝
第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è)計(jì)非舒適區(qū)域
1.2.2 告別像素的完美性
1.2.3 讓設(shè)計(jì)看上去很大或是很小
1.2.4 處理文本溢出的問題
1.2.5 處理水平滾動(dòng)條的問題
1.2.6 在彈性框中適配固定寬度的內(nèi)容
1.2.7 更長(zhǎng)的設(shè)計(jì)時(shí)間和測(cè)試時(shí)間
1.2.8 瀏覽器缺陷
1.3 為頁(yè)面選擇合適的布局類型
1.3.1 固定寬度布局
1.3.2 可變布局
1.3.3 彈性布局
第2章 設(shè)計(jì)靈活布局的方法
2.1 靈活布局的設(shè)計(jì)原理
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è)計(jì)位于最大寬度之外的白色區(qū)域
2.1.7 規(guī)劃：折成多行的并排放置的項(xiàng)
2.2 設(shè)計(jì)前和設(shè)計(jì)后：我們的非兼容設(shè)計(jì)和固定的設(shè)計(jì)
第3章 準(zhǔn)備網(wǎng)頁(yè)設(shè)計(jì)
3.1 創(chuàng)建圖像版式
3.1.1 設(shè)置畫布尺寸
3.1.2 使用圖層和頁(yè)面來管理版式
3.1.3 非破壞性編輯技術(shù)
3.2 針對(duì)靈活設(shè)計(jì)對(duì)圖形進(jìn)行切片處理
3.2.1 為切片創(chuàng)建多個(gè)單獨(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 為頁(yè)眉創(chuàng)建切片
3.3.3 為主頁(yè)創(chuàng)建切片
3.3.4 為步驟頁(yè)創(chuàng)建切片
3.3.5 導(dǎo)出圖像
第4章 創(chuàng)建可變布局結(jié)構(gòu)
4.1 為CSS布局準(zhǔn)備頁(yè)面
4.1.1 通用頁(yè)面的創(chuàng)建步驟
4.1.2 為本章 實(shí)例準(zhǔn)備頁(yè)面
4.2 使用浮動(dòng)創(chuàng)建可變欄
4.2.1 使用浮動(dòng)創(chuàng)建欄位并且匹配側(cè)邊緣
4.2.2 通過浮動(dòng)所有對(duì)象創(chuàng)建欄
4.2.3 使用浮動(dòng)和負(fù)邊緣創(chuàng)建欄位
4.3 禁止布局橫跨整個(gè)視口
4.3.1 更改欄位寬度
4.3.2 指定側(cè)邊緣
4.3.3 為包裝器指定百分比寬度
4.4 站點(diǎn)創(chuàng)建練習(xí)：創(chuàng)建Shelter的內(nèi)頁(yè)布局結(jié)構(gòu)
4.4.1 準(zhǔn)備頁(yè)面
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 使用浮動(dòng)創(chuàng)建彈性欄
5.2.1 復(fù)習(xí)：本章 實(shí)例
5.2.2 使用浮動(dòng)創(chuàng)建欄位與匹配側(cè)邊緣
5.2.3 通過浮動(dòng)所有元素來創(chuàng)建欄
5.3 站點(diǎn)創(chuàng)建練習(xí)：創(chuàng)建Shelter的主頁(yè)布局結(jié)構(gòu)
5.3.1 準(zhǔn)備頁(yè)面
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è)計(jì)和內(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的頁(yè)面的靈活性
6.4.1 修改Programs頁(yè)面
6.4.2 修改主頁(yè)面
第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í)：為主頁(yè)和內(nèi)頁(yè)添加間隔
7.3.1 為頁(yè)眉添加間隔
7.3.2 為頁(yè)腳添加間隔
7.3.3 處理邊緣塌陷
7.3.4 為Programs頁(yè)面內(nèi)容添加間隔
7.3.5 為主頁(yè)內(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í)：為主頁(yè)和內(nèi)頁(yè)添加背景
8.3.1 調(diào)整頁(yè)眉的背景和顏色
8.3.2 調(diào)整Programs頁(yè)面背景
8.3.3 調(diào)整主頁(yè)背景
第9章 創(chuàng)建靈活的圖像
9.1 動(dòng)態(tài)更改圖像的屏幕區(qū)域
9.1.1 與布局同時(shí)縮放的前景圖像
9.1.2 隱藏和顯示部分圖像
9.1.3 創(chuàng)建變化的合成圖像
9.2 創(chuàng)建靈活的圖像組
9.2.1 趣味縮覽圖列表
9.2.2 縮覽圖庫(kù)
9.3 站點(diǎn)創(chuàng)建練習(xí)：為主頁(yè)添加靈活的圖像
9.3.1 添加可變裁切的橫幅廣告圖像
9.3.2 創(chuàng)建趣味縮覽圖列表