響應(yīng)式網(wǎng)頁開發(fā)基礎(chǔ)教程(jQuery+Bootstrap)
定 價(jià):45 元
- 作者:鄭婷婷 黃杰晟
- 出版時(shí)間:2019/3/1
- ISBN:9787115501301
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:220
- 紙張:
- 版次:01
- 開本:16開
本書以響應(yīng)式網(wǎng)頁開發(fā)為線索,從布局、樣式到交互設(shè)計(jì),圍繞整個(gè)網(wǎng)頁開發(fā)技術(shù)體系展開,讓讀者在實(shí)踐中掌握最新、最流行的響應(yīng)式前端開發(fā)技術(shù)。本書先介紹響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念,再引入交互設(shè)計(jì)基礎(chǔ)JavaScript和jQuery,然后介紹最流行的響應(yīng)式網(wǎng)頁開發(fā)框架Bootstrap,通過Bootstrap的學(xué)習(xí)深入體會(huì)響應(yīng)式開發(fā)的思想,達(dá)到知識(shí)的融會(huì)貫通。
1、響應(yīng)式網(wǎng)頁開發(fā)的基礎(chǔ)教材,從響應(yīng)式的概念到Bootstrap等開源框架及核心技術(shù);
2、相比其他教材更強(qiáng)調(diào)基于jQuery的交互設(shè)計(jì),因?yàn)锽ootstrap的網(wǎng)頁交互實(shí)現(xiàn)是基于jQuery的,因此具備一定的JavaScript特別是jQuery基礎(chǔ)能使響應(yīng)式網(wǎng)頁交互的實(shí)現(xiàn)更高效;
3、配套微課視頻,提供豐富的配套資源,包含錄屏、案例、測(cè)試題等。
鄭婷婷,廣東理工職業(yè)學(xué)院/廣東開放大學(xué)優(yōu)秀青年講師,軟件技術(shù)專業(yè)骨干教師,ISTQB認(rèn)證測(cè)試工程師,曾參與多個(gè)軟件項(xiàng)目的開發(fā)及測(cè)試,主要研究方向?yàn)檐浖䴗y(cè)試、軟件平臺(tái)技術(shù)等,曾主講軟件技術(shù)、軟件測(cè)試技術(shù)專業(yè)多門主干課程,包括軟件測(cè)試基礎(chǔ)、應(yīng)用系統(tǒng)測(cè)試、網(wǎng)頁制作與網(wǎng)站開發(fā)等。目前主要參與移動(dòng)平臺(tái)的安全與測(cè)試相關(guān)課題的研究。
第1章 響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ) 1
1.1 什么是響應(yīng)式網(wǎng)頁 1
1.1.1 響應(yīng)式網(wǎng)頁設(shè)計(jì)的產(chǎn)生 1
1.1.2 響應(yīng)式和“自適應(yīng)網(wǎng)頁” 2
1.1.3 響應(yīng)式網(wǎng)頁的特點(diǎn) 2
1.2 媒體查詢及應(yīng)用 3
1.2.1 媒體查詢簡(jiǎn)介 3
1.2.2 媒體查詢的基本形式 3
1.2.3 常用媒體特性 5
1.2.4 動(dòng)手練習(xí):制作響應(yīng)式網(wǎng)頁示例 6
1.3 響應(yīng)式網(wǎng)頁呈現(xiàn) 7
1.3.1 屏幕可視區(qū)域viewport 7
1.3.2 相對(duì)大小與絕對(duì)大小 9
1.3.3 響應(yīng)式圖像適配 10
1.4 本章實(shí)訓(xùn):創(chuàng)建一個(gè)響應(yīng)式網(wǎng)頁 14
1.4.1 使用HTML 5標(biāo)簽建立頁面基本結(jié)構(gòu) 14
1.4.2 布局與定位 14
1.4.3 網(wǎng)頁內(nèi)容呈現(xiàn) 14
習(xí)題 16
第2章 JavaScript基礎(chǔ) 18
2.1 初識(shí)JavaScript 18
2.1.1 JavaScript的組成 18
2.1.2 JavaScript在網(wǎng)頁中的引用方式 19
2.1.3 常用的輸入/輸出語句 21
2.2 JavaScript編程基礎(chǔ) 23
2.2.1 變量與數(shù)據(jù)類型 23
2.2.2 運(yùn)算符 25
2.2.3 程序的流程控制語句 27
2.2.4 函數(shù)的使用 30
2.2.5 常用JavaScript內(nèi)置對(duì)象 30
2.3 JavaScript事件處理 38
2.3.1 事件與事件處理程序 38
2.3.2 常用事件 40
2.4 JavaScript的BOM與DOM 40
2.4.1 BOM對(duì)象及其子對(duì)象 40
2.4.2 DOM對(duì)象模型 43
2.4.3 HTML文檔的節(jié)點(diǎn) 44
2.4.4 操作DOM節(jié)點(diǎn)對(duì)象 45
2.5 本章實(shí)訓(xùn):JavaScript在線上網(wǎng)頁的應(yīng)用實(shí)例 50
2.5.1 網(wǎng)頁換膚 50
2.5.2 在線搜索 52
2.5.3 百度一下 54
習(xí)題 55
第3章 jQuery基礎(chǔ) 58
3.1 初識(shí)jQuery 58
3.1.1 jQuery簡(jiǎn)介 58
3.1.2 jQuery在網(wǎng)頁中的引用方式 58
3.1.3 jQuery初體驗(yàn) 59
3.2 jQuery選擇器 62
3.2.1 基本選擇器 62
3.2.2 層級(jí)選擇器 63
3.2.3 過濾選擇器 65
3.2.4 篩選選擇器 76
3.3 jQuery控制屬性與類 77
3.3.1 控制屬性attr 77
3.3.2 控制CSS類 78
3.4 事件處理與應(yīng)用舉例 81
3.4.1 jQuery常用事件 81
3.4.2 jQuery的動(dòng)畫效果與應(yīng)用 88
3.5 操作DOM對(duì)象 95
3.5.1 jQuery操作DOM屬性 95
3.5.2 jQuery操作DOM節(jié)點(diǎn) 95
3.6 本章實(shí)訓(xùn):jQuery網(wǎng)頁應(yīng)用實(shí)例 97
3.6.1 jQuery線上網(wǎng)頁應(yīng)用之導(dǎo)航菜單 97
3.6.2 jQuery線上網(wǎng)頁應(yīng)用之圖片展示 100
3.6.3 jQuery插件應(yīng)用舉例 104
3.6.4 jQuery操作DOM應(yīng)用舉例 108
習(xí)題 109
第4章 Bootstrap基礎(chǔ) 112
4.1 Bootstrap入門 112
4.1.1 Bootstrap簡(jiǎn)介 112
4.1.2 如何使用Bootstrap 113
4.1.3 在Dreamweaver CC中創(chuàng)建Bootstrap頁面 114
4.2 Bootstrap基本樣式設(shè)計(jì) 114
4.2.1 網(wǎng)格系統(tǒng) 114
4.2.2 圖片樣式 115
4.2.3 排版樣式與輔助類 115
4.2.4 表格樣式 123
4.2.5 徽章 126
4.2.6 字體圖標(biāo) 126
4.3 本章實(shí)訓(xùn):Bootstrap基本樣式設(shè)置 127
習(xí)題 128
第5章 響應(yīng)式布局 130
5.1 響應(yīng)式網(wǎng)頁布局概述 130
5.1.1 固定布局 130
5.1.2 流式布局 131
5.1.3 彈性布局 131
5.1.4 混合布局 131
5.2 網(wǎng)格布局 132
5.2.1 網(wǎng)格布局的概念 132
5.2.2 CSS中的Flex與Grid 133
5.3 使用Bootstrap實(shí)現(xiàn)網(wǎng)格布局 136
5.3.1 Bootstrap網(wǎng)格布局概述 136
5.3.2 Bootstrap響應(yīng)式網(wǎng)格布局 139
5.3.3 列偏移與列排序 141
5.3.4 列嵌套 143
5.4 本章實(shí)訓(xùn):基于Bootstrap的響應(yīng)式布局實(shí)現(xiàn) 144
5.4.1 建立頁面基本結(jié)構(gòu) 144
5.4.2 響應(yīng)式布局的實(shí)現(xiàn) 145
習(xí)題 146
第6章 Bootstrap組件設(shè)計(jì) 147
6.1 Bootstrap表單設(shè)計(jì) 147
6.1.1 基礎(chǔ)表單 147
6.1.2 表單輸入(input) 150
6.1.3 表單控件設(shè)置 150
6.1.4 表單驗(yàn)證狀態(tài) 152
6.1.5 按鈕組 152
6.1.6 輸入框組 155
6.2 Bootstrap下拉菜單 156
6.2.1 下拉菜單示例 156
6.2.2 下拉菜單實(shí)現(xiàn)方法 158
6.3 Bootstrap導(dǎo)航及分頁 159
6.3.1 Bootstrap導(dǎo)航基本樣式 159
6.3.2 標(biāo)簽頁式導(dǎo)航 160
6.3.3 膠囊式導(dǎo)航 161
6.3.4 面包屑導(dǎo)航 163
6.3.5 導(dǎo)航欄及其組件 163
6.3.6 分頁設(shè)計(jì) 166
6.3.7 滾動(dòng)監(jiān)聽 168
6.3.8 附加導(dǎo)航(Affix) 168
6.4 Bootstrap消息提示 170
6.4.1 工具提示(tooltip) 170
6.4.2 警告框組件(alert) 172
6.4.3 彈出框(popover) 173
6.5 Bootstrap內(nèi)置組件 174
6.5.1 輪播圖 175
6.5.2 縮略圖 177
6.5.3 巨幕效果 177
6.5.4 進(jìn)度條 178
6.5.5 模態(tài)框(modal) 179
6.5.6 well和面板(panel) 181
6.5.7 折疊組件 183
6.5.8 在Adobe Dreamweaver CC中插入Bootstrap組件 185
6.6 本章實(shí)訓(xùn):使用Bootstrap實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式網(wǎng)頁 186
6.6.1 搭建Bootstrap環(huán)境 186
6.6.2 響應(yīng)式導(dǎo)航條實(shí)現(xiàn) 187
6.6.3 響應(yīng)式輪播圖 187
6.6.4 頁面內(nèi)容 188
6.6.5 頁面底部 189
6.6.6 頁面樣式及腳本代碼 190
習(xí)題 193
第7章 Bootstrap頁面效果設(shè)計(jì)
實(shí)例 196
7.1 登錄表單優(yōu)化實(shí)例 196
7.1.1 網(wǎng)頁主體內(nèi)容 196
7.1.2 樣式設(shè)置 197
7.2 標(biāo)簽式導(dǎo)航優(yōu)化效果實(shí)例 199
7.2.1 網(wǎng)頁主體內(nèi)容 200
7.2.2 樣式設(shè)置 200
7.3 “手風(fēng)琴式”折疊菜單效果 202
7.3.1 網(wǎng)頁主體內(nèi)容 202
7.3.2 樣式設(shè)置 204
習(xí)題 205
第8章 Bootstrap響應(yīng)式網(wǎng)頁開發(fā)綜合實(shí)例 206
8.1 搭建Bootstrap基本框架 207
8.2 設(shè)計(jì)導(dǎo)航欄 211
8.3 設(shè)計(jì)輪播圖 213
8.4 設(shè)計(jì)內(nèi)容布局 215
8.4.1 網(wǎng)格布局系統(tǒng) 215
8.4.2 標(biāo)簽頁布局 217
8.4.3 底部的設(shè)計(jì) 220
習(xí)題 220