自適應網頁設計武功秘笈

　　這本書的定位不太像一本網頁設計「技術書」，或者是「軟體工具書」。這本書比較像是編者自1996 年從事網頁設計以來的「武功祕笈」，只是藉由各項淺顯易懂的軟體工具，將編者的內在思維表達出來，並向讀者分享。讀者在這本書讀到的可能是心法、思考的成份多於軟體工具操作步驟和技術。

　　Adobe 公司多年來一直致力於提供良好的工作軟體給網頁設計師，特別是Dreamweaver，更是從專案經理、視覺設計師、網頁工程師都得接觸到的一套軟體。Dreamweaver CS6 之後，更內建了自適應網頁設計所需要的各項工具， 能夠讓網頁設計師，以視覺化、較無痛的方式，製作出原本需要熟悉CSS3、JavaScript……等各種語法，才能建構出來的自適應網頁，讓編者期望藉由這本書，將台灣的網頁設計水準，向國外的趨勢再推進一小步。

　　本書和市面上的網頁設計技術的書籍不同之處在於，市面上的書籍大多專注於探討某項技術，或者某項軟體操作。然而本書是依據編者公司替客戶規劃網站的真實流程進行撰寫，將漂流在網頁設計這片汪洋大海中，一座座獨立的知識小島，架起早已消蝕的橋樑，進行連結。事實上，這本書其實是編者公司的內部新進人員訓練教材的系統性整理。換句話說，熟習這本書的各項內容，也可能是網頁設計領域就業的一塊敲門磚。據此，本書提供一個虛構的網站範例，名為「聖保羅廚房」，用來做為自適應網頁設計從企劃階段到上線的最終作品展示。

前言

第一篇 基礎知識

CH01 什麼是自適應網頁設計
1.1 智慧型手持裝置的網頁設計
1.2 小結

CH02 HTML 基礎語法
2.1 何謂HTML
2.2 基本HTML 結構
2.3 使用Dreamweaver 編輯HTML
2.4 什麼又是XHTML
2.5 標籤與屬性
2.6 初學者常犯的錯誤
2.7 小結

CH03 關於CSS 3-2
3.1 何謂CSS
3.2 在 Dreamweaver 編寫CSS
3.3 關於CSS 載入的優先次序
3.4 介紹CSS 選取器
3.5 CSS 選取器的使用時機
3.6 實務上常犯錯誤解析
3.7 小結

第二篇 創意思考和網站企劃

CH04 網站企劃概論
4.1 以使用者為中心的網站企劃
4.2 找出目標族群的重要性
4.3 從知名品牌網站收集企劃資料
4.4 小結

CH05腦力激盪與心智圖
5.1 網站需求分析與企劃用的腦力激盪問題清單
5.2 XMind 基礎操作說明
5.3 使用XMind繪製「聖保羅廚房」網站心智圖
5.4 將心智圖匯出 PNG 圖檔
5.5 將心智圖列印為 PDF文件
5.6 小結

CH06卡片分類法與卡片分類圖
6.1 繪製卡片分類圖的注意事項
6.2 使用 XMind繪製卡片分類圖
6.3 小結

CH07網站地圖
7.1 利用網站地圖整理出客戶真正的需求
7.2 小結

第三篇 網站原型（線框圖）

CH08網站原型概論
8.1 利用網站原型與客戶溝通
8.2 小結

CH09自適應網頁設計用的線框圖 9-2
9.1 使用Dreamweaver新增一個網站
9.2 新增流變格線版面 DIV
9.3 繪製柵格系統
9.4 繪製首頁的線框圖
9.5 匯出可連結的線框圖
9.6 小結

第四篇 網站原型（版型設計）

CH10設計網站版型概論
10.1 網站版型的設計訣竅
10.2 小結

CH11網站形象圖處理
11.1 使用 Photoshop 製作相片淺景深效果
11.2 使用Illustrator設計形象圖外框
11.3 小結

CH12網站配色與材質運用
12.1 網站配色
12.2 材質運用
12.3 小結

CH13商標（Logo）處理
13.1 Logo 處理方法
13.2 小結

CH14設計頁首（Header）
14.1 使用 Fireworks 和 Illustrator 設計網站版型頁首
14.2 小結

CH15匯出可連結網站版型
15.1 圖層與英文命名
15.2 設定頁面超連結
15.3 小結

第五篇 自適應網頁設計切版

CH16自適應網頁設計切版
16.1 _blank.html 和 styles.css 介紹
16.2 檢視CSS 3D金字塔
16.3 三種裝置的切版次序
16.4 gridContainer 的特性
16.5 切版的前置作業和注意事項
16.6 手機版網頁的切版流程（大區塊）
16.7 先切出三種裝置的大區塊
16.8 手機版網頁的切版流程（中小型區塊）
16.9 平板與PC切版的注意事項
16.10完成所有裝置的切版

CH17使用Edge Inspect和各裝置查看聖保羅廚房網站完成展示
17.1 直接以個人電腦瀏覽器檢視自適應網頁呈現效果
17.2 以平板電腦檢視自適應網頁呈現效果
17.3 以智慧型手機檢視自適應網頁呈現效果
17.4 小結

附錄

附錄A1軟體安裝
A1.1 申請Adobe ID
A1.2 下載 Adobe Creative Suite
A1.3 登入 Adobe 創意雲服務 & 安裝 Adobe Edge Inspect
A1.4 安裝 PortableApps免費可攜式軟體平台
A1.5 安裝 XMind Portable可攜式心智圖繪製軟體
A1.6 設定 XAMPP 網站開發環境
A1.7 小結

附錄A2本書使用軟體工作環境說明
A2.1 Dreamweaver 工作環境說明
A2.2 Fireworks 工作環境說明
A2.3 Photoshop 工作環境說明
A2.4 Illustrator 工作環境說明
A2.5 Acrobat Pro 工作環境說明
A2.6 XMind 工作環境說明
A2.7 小結

附錄A3安裝瀏覽器測試環境
A3.1 安裝 Google Chrome 瀏覽器
A3.2 安裝 Google Chrome 瀏覽器的 Window Resizer 擴充功能
A3.3 安裝 Google Chrome 瀏覽器的 Web Developer 擴充功能
A3.4 安裝 Opera 瀏覽器
A3.5 安裝 Mozilla Firefox瀏覽器
A3.6 安裝 IE Tester 多版本 IE 網頁相容性測試軟體
A3.7 小結