靈活Web設計

《靈活Web設計》是2009年09月機械工業出版社出版的圖書，作者是(加拿大)ZoeMickleyGillenwater。

基本介紹

• 書名：靈活Web設計
• 作者：(加拿大)ZoeMickleyGillenwater
• ISBN：9787111272946
• 定價：45.00 元
• 出版社：機械工業出版社
• 出版時間：2009年09月
• 開本：16開

內容簡介

《靈活Web設計》講述如何套用可變或不固定布局及彈性布局來實現靈活設計，以滿足用戶的根據自己需求而調整瀏覽站點的視窗大小的要求。全書共分為9章，內容包括：理解靈活布局、可變布局和彈性布局存在的挑戰、設計靈活布局的方法、準備網頁設計、創建可變布局結構、創建彈性布局結構、規範靈活性、設定文字間距、添加背景圖像和顏色、創建靈活的圖像。

《靈活Web設計》適用於網頁設計人員、網頁設計愛好者。

作者簡介

吉倫沃特，是一位經驗豐富的Web設計師、項目經理以及技術類文章的撰稿人，Web標準社區頻頻出現她活躍的身影。在北卡羅來那州大學（UNC）公路安全研究中心任設計服務經理期間，Zoe主持設計和開發了許多信息豐富的Web站點和應用程式。她的工作主要是創建結合了美感以及標準兼容性、可用性和易訪問性的Web站點。身為Web開發培訓站點Community MX合伙人的她撰寫了大量關於Web設計主題方面的文章，這些文章的內容廣泛涉及CSS、（X）HTML、Dreamweaver以及易訪問性。同時，她還是 Web Standards Project（Adobe Web標準計畫任務組）Adobe Task Force的成員之一。

圖書目錄

譯者序

前言

致謝

第1章 理解靈活布局

1.1 布局類型

1.1.1 固定寬度：固定像素

1.1.2 可變布局或不固定布局：根據視口調整

1.1.3 彈性：與文本大小相適

1.1.4 混合布局

1.2 可變布局和彈性布局帶來的挑戰

1.2.1 擺脫格線束縛：進行設計非舒適區域

1.2.2 告別像素的完美性

1.2.3 讓設計看上去很大或是很小

1.2.4 處理文本溢出的問題

1.2.5 處理水平滾動條的問題

1.2.6 在彈性框中適配固定寬度的內容

1.2.7 更長的設計時間和測試時間

1.2.8 瀏覽器缺陷

1.3 為頁面選擇合適的布局類型

1.3.1 固定寬度布局

1.3.2 可變布局

1.3.3 彈性布局

第2章 設計靈活布局的方法

2.1 靈活布局的設計原理

2.1.1 避免：包含文本的內容採用固定高度

2.1.2 避免：不規則形狀

2.1.3 避免：與不能擴展的圖像相匹配的文字

2.1.4 避免：固定寬度和全寬度內容

2.1.5 規劃：超出原始尺寸的圖像

2.1.6 規劃：設計位於最大寬度之外的白色區域

2.1.7 規劃：折成多行的並排放置的項

2.2 設計前和設計後：我們的非兼容設計和固定的設計

第3章 準備網頁設計

3.1 創建圖像版式

3.1.1 設定畫布尺寸

3.1.2 使用圖層和頁面來管理版式

3.1.3 非破壞性編輯技術

3.2 針對靈活設計對圖形進行切片處理

3.2.1 為切片創建多個單獨的檔案

3.2.2 切分方框

3.3 站點創建練習：為構建站點準備BeechwoodAnimalShelter版式

3.3.1 在版式中導航

3.3.2 為頁眉創建切片

3.3.3 為主頁創建切片

3.3.4 為步驟頁創建切片

3.3.5 導出圖像

第4章 創建可變布局結構

4.1 為CSS布局準備頁面

4.1.1 通用頁面的創建步驟

4.1.2 為本章 實例準備頁面

4.2 使用浮動創建可變欄

4.2.1 使用浮動創建欄位並且匹配側邊緣

4.2.2 通過浮動所有對象創建欄

4.2.3 使用浮動和負邊緣創建欄位

4.3 禁止布局橫跨整個視口

4.3.1 更改欄位寬度

4.3.2 指定側邊緣

4.3.3 為包裝器指定百分比寬度

4.4 站點創建練習：創建Shelter的內頁布局結構

4.4.1 準備頁面

4.4.2 添加基本樣式

4.4.3 創建雙欄布局

4.4.4 減少雙欄的寬度

第5章 創建彈性布局結構

5.1 將尺寸換成em

5.1.1 em的定義

5.1.2 嵌套em度量

5.1.3 有選擇性地採用em度量

5.2 使用浮動創建彈性欄

5.2.1 複習：本章 實例

5.2.2 使用浮動創建欄位與匹配側邊緣

5.2.3 通過浮動所有元素來創建欄

5.3 站點創建練習：創建Shelter的主頁布局結構

5.3.1 準備頁面

5.3.2 添加基礎樣式

5.3.3 創建欄

第6章 規範靈活性

6.1 創建混合布局

6.1.1 固定側邊欄搭配可變居中欄位

6.1.2 帶彈性居中欄的固定側邊欄

6.2 添加最小和最大寬度

6.2.1 保護你的用戶.設計和內容

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 站點創建練習：限制Shelter的頁面的靈活性

6.4.1 修改Programs頁面

6.4.2 修改主頁面

第7章 設定文字間距

7.1 匹配度量單位

7.1.1 可變布局間隔

7.1.2 彈性布局間隔

7.2 混合度量單位

7.2.1 為寬度較窄的div添加邊緣和填充

7.2.2 為內容而非div添加邊緣和填充

7.2.3 添加緩衝div

7.3 站點創建練習：為主頁和內頁添加間隔

7.3.1 為頁眉添加間隔

7.3.2 為頁腳添加間隔

7.3.3 處理邊緣塌陷

7.3.4 為Programs頁面內容添加間隔

7.3.5 為主頁內容添加間隔

第8章 添加背景圖像和顏色

8.1 混合背景圖像

8.1.1 創建漸變

8.1.2 創建圓角

8.1.3 創建曲線邊緣

8.2 創建等高欄

8.2.1 可變－固定寬度混合布局的偽列布局

8.2.2 可變布局的偽列布局

8.2.3 彈性布局的偽列布局

8.3 站點創建練習：為主頁和內頁添加背景

8.3.1 調整頁眉的背景和顏色

8.3.2 調整Programs頁面背景

8.3.3 調整主頁背景

第9章 創建靈活的圖像

9.1 動態更改圖像的螢幕區域

9.1.1 與布局同時縮放的前景圖像

9.1.2 隱藏和顯示部分圖像

9.1.3 創建變化的合成圖像

9.2 創建靈活的圖像組

9.2.1 趣味縮覽圖列表

9.2.2 縮覽圖庫

9.3 站點創建練習：為主頁添加靈活的圖像

9.3.1 添加可變裁切的橫幅廣告圖像

9.3.2 創建趣味縮覽圖列表

……