|
|
|
本書以回應式網頁開發為線索，從佈局、樣式到交互設計，圍繞整個網頁開發技術體系展開，讓讀者在實踐中掌握最新、最流行的回應式前端開發技術。
本書先介紹回應式網頁設計的概念，再引入交互設計基礎JavaScript和jQuery，然後介紹最流行的回應式網頁開發框架Bootstrap，通過Bootstrap的學習深入體會回應式開發的思想，達到知識的融會貫通。
鄭婷婷，廣東理工職業學院/廣東開放大學優秀青年講師，軟體技術專業骨幹教師，ISTQB認證測試工程師，曾參與多個軟體專案的開發及測試，主要研究方向為軟體測試、軟體平臺技術等，曾主講軟體技術、軟體測試技術專業多門主幹課程，包括軟體測試基礎、應用系統測試、網頁製作與網站開發等。
目前主要參與移動平臺的安全與測試相關課題的研究。
版權資訊
前言
第1章 回應式網頁設計基礎
1.1 什麼是回應式網頁
1.1.1 響應式網頁設計的產生
1.1.2 回應式和“自我調整網頁”
1.1.3 響應式網頁的特點
1.2 媒體查詢及應用
1.2.1 媒體查詢簡介
1.2.2 媒體查詢的基本形式
1.2.3 常用媒體特性
1.2.4 動手練習：製作響應式網頁示例
1.3 回應式網頁呈現
1.3.1 螢幕可視區域viewport
1.3.2 相對大小與絕對大小
1.3.3 回應式圖像適配
1.4 本章實訓：創建一個響應式網頁
1.4.1 使用HTML 5標籤建立頁面基本結構
1.4.2 佈局與定位
1.4.3 網頁內容呈現
習題
第2章 JavaScript基礎
2.1 初識JavaScript
2.1.1 JavaScript的組成
2.1.2 JavaScript在網頁中的引用方式
2.1.3 常用的輸入/輸出語句
2.2 JavaScript程式設計基礎
2.2.1 變數與資料類型
2.2.2 運算子
2.2.3 程式的流程控制語句
2.2.4 函數的使用
2.2.5 常用JavaScript內置對象
2.3 JavaScript事件處理
2.3.1 事件與事件處理常式
2.3.2 常用事件
2.4 JavaScript的BOM與DOM
2.4.1 BOM對象及其子物件
2.4.2 DOM物件模型
2.4.3 HTML文檔的節點
2.4.4 操作DOM節點物件
2.5 本章實訓：JavaScript線上上網頁的應用實例
2.5.1 網頁換膚
2.5.2 線上搜索
2.5.3 百度一下
習題
第3章 jQuery基礎
3.1 初識jQuery
3.1.1 jQuery簡介
3.1.2 jQuery在網頁中的引用方式
3.1.3 jQuery初體驗
3.2 jQuery選擇器
3.2.1 基本選擇器
3.2.2 層級選擇器
3.2.3 過濾選擇器
3.2.4 篩選選擇器
3.3 jQuery控制屬性與類
3.3.1 控制屬性attr
3.3.2 控制CSS類
3.4 事件處理與應用舉例
3.4.1 jQuery常用事件
3.4.2 jQuery的動畫效果與應用
3.5 操作DOM物件
3.5.1 jQuery操作DOM屬性
3.5.2 jQuery操作DOM節點
3.6 本章實訓：jQuery網頁應用實例
3.6.1 jQuery線上網頁應用之導航菜單
3.6.2 jQuery線上網頁應用之圖片展示
3.6.3 jQuery外掛程式應用舉例
3.6.4 jQuery操作DOM應用舉例
習題
第4章 Bootstrap基礎
4.1 Bootstrap入門
4.1.1 Bootstrap簡介
4.1.2 如何使用Bootstrap
4.1.3 在Dreamweaver CC中創建Bootstrap頁面
4.2 Bootstrap基本樣式設計
4.2.1 網格系統
4.2.2 圖片樣式
4.2.3 排版樣式與輔助類
4.2.4 表格樣式
4.2.5 徽章
4.2.6 字體圖示
4.3 本章實訓：Bootstrap基本樣式設置
習題
第5章 回應式佈局
5.1 回應式網頁佈局概述
5.1.1 固定佈局
5.1.2 流式佈局
5.1.3 彈性佈局
5.1.4 混合佈局
5.2 網格佈局
5.2.1 網格佈局的概念
5.2.2 CSS中的Flex與Grid
5.3 使用Bootstrap實現網格佈局
5.3.1 Bootstrap網格佈局概述
5.3.2 Bootstrap回應式網格佈局
5.3.3 列偏移與列排序
5.3.4 列嵌套
5.4 本章實訓：基於Bootstrap的回應式佈局實現
5.4.1 建立頁面基本結構
5.4.2 回應式佈局的實現
習題
第6章 Bootstrap組件設計
6.1 Bootstrap表單設計
6.1.1 基礎資料表單
6.1.2 表單輸入（input）
6.1.3 表單控制項設置
6.1.4 表單驗證狀態
6.1.5 按鈕組
6.1.6 輸入框組
6.2 Bootstrap下拉式功能表
6.2.1 下拉式功能表示例
6.2.2 下拉式功能表實現方法
6.3 Bootstrap導航及分頁
6.3.1 Bootstrap導航基本樣式
6.3.2 標籤頁式導航
6.3.3 膠囊式導航
6.3.4 麵包屑導航
6.3.5 巡覽列及其組件
6.3.6 分頁設計
6.3.7 滾動監聽
6.3.8 附加導航（Affix）
6.4 Bootstrap消息提示
6.4.1 工具提示（tooltip）
6.4.2 警告框組件（alert）
6.4.3 彈出框（popover）
6.5 Bootstrap內建群組件
6.5.1 輪播圖
6.5.2 縮略圖
6.5.3 巨幕效果
6.5.4 進度條
6.5.5 模態框（modal）
6.5.6 well和麵板（panel）
6.5.7 折疊組件
6.5.8 在Adobe Dreamweaver CC中插入Bootstrap組件
6.6 本章實訓：使用Bootstrap實現簡單的回應式網頁
6.6.1 搭建Bootstrap環境
6.6.2 回應式導航條實現
6.6.3 回應式輪播圖
6.6.4 頁面內容
6.6.5 頁面底部
6.6.6 頁面樣式及腳本代碼
習題
第7章 Bootstrap頁面效果設計實例
7.1 登錄表單優化實例
7.1.1 網頁主體內容
7.1.2 樣式設置
7.2 標籤式導航優化效果實例
7.2.1 網頁主體內容
7.2.2 樣式設置
7.3 “手風琴式”折疊菜單效果
7.3.1 網頁主體內容
7.3.2 樣式設置
習題
第8章 Bootstrap回應式網頁開發綜合實例
8.1 搭建Bootstrap基本框架
8.2 設計巡覽列
8.3 設計輪播圖
8.4 設計內容佈局
8.4.1 網格佈局系統
8.4.2 標籤頁佈局
8.4.3 底部的設計
習題
