本書從認識響應式網頁設計與Bootstrap開始，詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢，導入視覺設計與網頁制作兩個不同領域的專業知識，並提供120多個Bootstrap功能范例網頁文件，說明如何使用Bootstrap框架所提供的各種CSS與組件等內容，最終以3個完整實例（書籍宣傳網頁、產品推廣網頁、網站首頁）制作出響應式網頁，以讓大家綜合運用所學知識，提高實戰技能。本書以豐富的范例程序和詳細的圖解逐一講解RWD技術+Bootstrap結合使用的核心技術和方法，既適合負責網頁前端和后端的程序人員閱讀，也適合網站的企划人員和視覺設計人員參考，還可供想學習和了解響應式網頁設計+Bootstrap開發網站的人員自學和參考。呂國泰，資深設計師，多媒體兼任講師。

第1章 響應式網頁簡介 11.1 何謂響應式網頁 11.2 響應式網頁的優點 21.3 響應式網頁的缺點 31.4 響應式的概念 31.5 Viewport 41.6 流式網格 51.6.1 網格設計 51.6.2 流式布局 61.7 媒體查詢的基礎 71.7.1 使用方法 81.7.2 設置方式 81.7.3 媒體類型 81.7.4 判斷條件 91.7.5 媒體特征 101.8 流式圖像 101.9 字體 11第2章 Bootstrap簡介 122.1 何謂Bootstrap 122.2 Bootstrap 具有哪些內容 122.3 下載Bootstrap 132.4 鏈接Bootstrap框架 152.5 下載與鏈接 jQuery 文件 162.6 快速體驗——運用 CSS 樣式 17第3章 網站的開發流程 203.1 項目 203.2 企划 213.3 設計 213.4 前端 223.5 后端 223.6 測試 233.7 上線 23第4章 響應式網頁的設計思維 254.1 與傳統網站開發的差異 254.2 響應式網頁的設計考慮 264.3 移動設備的設計考慮 284.3.1 移動設備的特征 284.3.2 移動設備優先 28第5章 視覺設計師與前端工程師的專業認知 315.1 網頁與印刷的差異 315.2 網頁向量格式 SVG 325.3 版面設計時的常見詞匯 335.4 網格的運用與制作 355.4.1 網格輔助——PSD 355.4.2 網格輔助——AI 365.4.3 網格輔助——自行設置 385.5 讓視覺設計師懂得切版 425.5.1 切版重點 425.5.2 了解版面的構成 42第6章 SEO簡介 446.1 何謂SEO 446.2 改善網站標題與描述 456.3 改善網站架構 476.3.1 網站架構簡介 476.3.2 架構*佳做法 486.3.3 讓網站更易於瀏覽 486.3.4 易於瀏覽的*佳做法 496.4 可優化的內容與做法 506.4.1 優質內容與服務 506.4.2 鏈接 506.4.3 圖片 516.4.4 標題 526.5 管理與營銷 536.5.1 使用網站管理工具 536.5.2 網站營銷工作要點 54第7章 網頁設計趨勢 567.1 響應式網頁設計 567.2 全幅背景 577.3 單頁式網頁 577.4 固定式菜單 597.5 扁平化設計 597.6 微動畫 607.7 卡片式設計 617.8 隱藏式菜單 617.9 超大的字體 627.10 幽靈按鈕 63第8章 HTML5+CSS3 的基礎知識 648.1 認識DIV與CSS 648.1.1 認識DIV 648.1.2 CSS Class 與 CSS ID 658.2 HTML5與CSS3的新增內容 678.2.1 認識 HTML5678.2.2 HTML5 的新元素與屬性 688.2.3 認識 CSS3718.2.4 CSS3 新增的屬性 71第9章 響應式網頁的布局方式 769.1 Grid System簡介 769.1.1 何謂 Grid System 769.1.2 網頁的 Grid System 779.1.3 網頁設計為何需要 Grid System 789.1.4 Grid System 的使用方法 789.2 布局規則 799.2.1 Bootstrap 中的 Grid System 799.2.2 不同設備的 Grid 設置 809.2.3 嵌套排版 829.2.4 移動與調整 Column 的位置 839.2.5 Column 的規則 839.2.6 調整Column的順序 84第10章 Bootstrap CSS 樣式的使用 8610.1 排版 8610.1.1 標題 8610.1.2 頁面主題 8710.1.3 行內文字元素 8810.1.4 對齊類 9010.1.5 轉換類 9110.1.6 聯系字段 9110.1.7 引用 9110.1.8 列表 9310.2 表格 9510.2.1 表格類 9510.2.2 狀態類 9710.2.3 響應式表格 9710.3 窗體 9810.3.1 基本范例 9810.3.2 窗體布局 9910.3.3 支持的控件 10010.3.4 焦點狀態 10510.3.5 禁用狀態 10510.3.6 只讀狀態 10610.3.7 驗證狀態 10610.4 按鈕 10810.4.1 按鈕標簽 10810.4.2 顏色類 10910.4.3 大小類 10910.4.4 啟用狀態 11110.4.5 禁用狀態 11110.5 圖片 11310.5.1 響應式圖片 11310.5.2 圖片形狀 113第11章 Bootstrap布局組件的使用 11511.1 字體圖標 11511.2 下拉式菜單 11611.2.1 說明 11611.2.2 使用的方法 11611.2.3 其他輔助項目 11711.2.4 范例 11911.3 按鈕群組 12011.3.1 說明 12011.3.2 使用方法 12011.3.3 其他輔助項目 12011.3.4 范例 12211.4 輸入框群組 12311.4.1 說明 12311.4.2 使用方法 12311.4.3 其他輔助項目 12411.4.4 范例 12511.5 導航 12711.5.1 說明 12711.5.2 使用方法 12711.5.3 其他輔助項目 12711.5.4 范例 12911.6 導航欄 13011.6.1 說明 13011.6.2 使用方法 13011.6.3 其他輔助項目 13111.6.4 范例 13311.7 分頁 13511.7.1 說明 13511.7.2 使用方法 13511.7.3 其他輔助項目 13511.7.4 范例 13711.8 提示標志 13711.8.1 說明 13711.8.2 范例 13811.9 大屏幕效果 13811.9.1 說明 13811.9.2 范例 13911.10 縮略圖 13911.10.1 說明 13911.10.2 使用方法 14011.10.3 范例 14011.11 進度條 14111.11.1 說明 14111.11.2 使用方法 14211.11.3 其他輔助項目 14211.11.4 范例 14411.12 面板 14411.12.1 說明 14411.12.2 使用方法 14411.12.3 其他輔助項目 14511.12.4 范例 14611.13 響應式嵌入內容 14711.13.1 說明 14711.13.2 范例 147第12章 Bootstrap JS 插件的使用 14912.1 概觀 14912.2 頁簽 14912.2.1 說明 14912.2.2 使用方法 15012.2.3 淡入效果 15012.2.4 范例 15012.3 提示工具 15212.3.1 說明 15212.3.2 使用方法 15212.3.3 范例 15312.4 彈出提示 15412.4.1 說明 15412.4.2 使用方法 15412.4.3 范例 15512.5 折疊效果 15612.5.1 說明 15612.5.2 使用方法 15612.5.3 范例 15712.6 輪播效果 15912.6.1 說明 15912.6.2 使用方法 15912.6.3 標題制作 16112.6.4 范例 161第13章 網站實踐——書籍宣傳網頁 16413.1 套入鏈接 16413.2 網格布局 16513.3 頁面設計 16613.3.1 左邊容器 16613.3.2 右邊容器 16713.4 CSS美化與運用 171第14章 網站實踐——產品推廣網頁 17414.1 套入鏈接 17414.2 網格布局 17514.2.1 建立分層說明文字 17514.2.2*外層與*層的布局 17614.2.3 第二層的布局 17714.2.4 第三層左邊的布局 17814.2.5 第三層右邊的布局 17914.2.6 第四層的布局 18014.3 頁面設計 18014.3.1*層設計 18014.3.2 第二層設計 18014.3.3 第三層左邊的設計 18114.3.4 第三層右邊的設計 18314.3.5 第四層設計 18314.4 運用CSS 18414.4.1*層 18414.4.2 第二層 18514.4.3 第三層左邊 18614.4.4 第三層右邊 18714.4.5 第四層 189第15章 網站實踐——網站首頁制作 19015.1 套入鏈接 19015.2 網格布局 19115.2.1 建立層次說明文字 19215.2.2*層與第二層布局 19315.2.3 第三層布局 19315.2.4 第四層布局 19415.2.5 第五層與第六層布局 19515.3*層設計——菜單 19515.3.1 運用導航欄 JavaScript 19515.3.2 修改類 19615.3.3 運用 CSS 樣式 19715.4 第二層設計——廣告橫幅 19815.4.1 使用輪播JavaScript 19815.4.2 修改內容 19915.4.3 運用 CSS 樣式 20015.5 第三層設計——*新公告與廣告區 20015.5.1 加入*新公告圖片 20015.5.2 應用折疊效果 JavaScript 20115.5.3 修改類 20115.5.4 加入廣告圖片 20215.5.5 運用 CSS 樣式 20315.6 第四層設計——課程分享 20415.6.1 加入課程標題圖片 20415.6.2 加入課程 1 圖片與內容 20415.6.3 加入課程 2 圖片與內容 20515.6.4 加入課程 3 圖片與內容 20615.6.5 加入課程 4 圖片與內容 20615.6.6 運用 CSS 樣式 20715.7 第五層設計——按鈕鏈接 21015.7.1 加入圖片 21015.7.2 運用 CSS 樣式 21115.8 第六層頁面設計——頁腳 21215.8.1 加入文字 21215.8.2 運用 CSS 樣式 21215.9 回到頂部按鈕的制作 21215.10 檢查各尺寸瀏覽狀態 21415.10.1 問題一的解決方式 21415.10.2 問題二的解決方式 215第16章 輔助工具 21716.1 Bootstrap 套件下載 21716.2 可視化Bootstrap 在線編輯器 21916.2.1 GRID SYSTEM 21916.2.2 BASIC CSS 22016.2.3 COMPONENTS 22116.2.4 JAVASCRIPT 22216.2.5 預覽版式 22216.2.6 下載結果 22316.3 瀏覽器開發者模式檢測 22416.3.1 Firefox 瀏覽器 22416.3.2 IE瀏覽器 22616.3.3 Google Chrome 瀏覽器 22616.3.4 在線檢測 22816.3.5 插件的輔助檢測 23116.4 尺寸對照工具 23216.5 檢測優化工具 23316.6 設備尺寸參考 234

2012年之后，在各大企業和公司都會聽到一個名詞RWD（Responsive Web Design），即被稱作「響應式網頁設計」的名詞。就網頁發展史而言，無論在美感或技術等層面上，它一直都在不斷地演進與更新，因此對於從事網頁設計的人而言，必須不斷進步以強化自身的實力，進而設計出更好的網頁來呈現在眾人面前。隨着科技的演進，造就了移動設備的普及，使瀏覽網頁的設備不再僅限於計算機。演變至今，移動設備在尺寸上的不一致使得網頁在視覺呈現上所要顧慮的因素越來越多，為了使瀏覽者在移動設備上能獲得最佳閱讀體驗，因而誕生了「響應式網頁設計」的概念。預計在今后幾年，響應式網頁（Web或網站）設計仍會繼續鞏固其地位。在這個不斷創新的時代，使用響應式網頁設計技術而制作的網頁已躍升為現代與未來重要的營銷媒介。本書收錄了完整的設計范例和基礎的示范教學，以引導網頁工程師在Bootstrap網頁框架的輔助下快速進入響應式網頁設計領域。同時，對於從事網頁平面設計的人員而言，也可從書中了解到什麼是響應式網頁，以及學習響應式網頁設計與傳統網頁設計之間的差異等知識，使得設計出來的網頁版式能符合工程師的需求。借此希望每位讀者可以通過此書成為一個與時俱進、具有充實技術能力、深得客戶和老板歡心的設計師。呂國泰 曾偉凱 何升隆