響應式網頁設計實戰 响应式网页设计实战

<內容簡介>

本書介紹了響應式網頁設計的技術架構及設計要領，使用HTML與CSS設計網站的基本策略與技術，以及響應式網頁設計的模塊應用，包括自適應/響應式網頁設計的概述、網頁新舊切版的方式和字體資源、版型尺寸的固定與彈性、Bootstrap的學習與使用、Foundation的學習與使用、Pure的學習與使用。

<章節目錄>

序
第1章自適應/響應式網頁設計概述1
1.1彈性的樣式與版面1
1.2以移動設備為優先1
1.3業界流行的RWD Framework 2
1.4並非一定需要RWD Framework 2
1.5 RWD實現的機制5
1.6瀏覽器的支持度5
第2章網頁的新舊切版方式和字體資源7
2.1程序代碼的編輯器7
2.2 CSS搭配HTML4切版方式7
2.2.1開始切版前的HTML基本程序代碼結構7
2.2.2規劃要創建的版面8
2.2.3建立區塊的程序代碼9
2.2.4標示區塊的範圍9
2.2.5設置區塊尺寸10
2.2.6限定版面總寬度12
2.2.7設置區塊為浮動排列12
2.2.8調整各區塊的間距14
2.2.9版面的居中對齊15
2.2.10改用百分比作為顯示度量單位16
2.3 CSS搭配HTML5切版方式18
2.3.1建立區塊的程序代碼20
2.3.2標示區塊範圍20
2.3.3設置區塊尺寸21
2.3.4限定版面的總寬度23
2.3.5設置區塊為浮動排列24
2.3.6調整各區塊的間距25
2.3.7版面的居中對齊27
2.3 .8改用以百分比為顯示度量單位28
2.4 CSS搭配JavaScript切版方式30
2.4.1精簡原有的程序代碼30
2.4.2註釋掉整段CSS規則語句32
2.4.3用JavaScript程序代碼實現特定版型32
2.4.4 JavaScript版型程序代碼的第1階段簡化33
2.4.5 JavaScript版型程序代碼的第2階段簡化34
2.5跨網域運用在線字體35
2.6使用本地的字體38
第3章版型尺寸的固定與彈性42
3.1 HTML傳統方式42
3.2 CSS應用方式45
3.2.1 @media語句45
3.2.2 meta viewport語句51
3.3 JavaScript搭建方式52
第4章Bootstrap的學習與使用56
4.1 Twitter的Bootstrap簡易應用方式56
4.2免費小圖標58
4.3下拉式或上拉式菜單59
4.3.1下拉式菜單59
4.3.2上拉式菜單61
4.3.3具有選項分隔線的下拉式菜單61
4.3.4具有選項分類和選項分隔線的下拉式菜單62
4.4一般按鈕和按鈕組64
4.4.1按鈕組64
4.4.2按鈕組的工具欄64
4.5帶有菜單按鈕的按鈕組65
4.5.1橫向按鈕組65
4.5.2縱向按鈕組66
4.5.3窗口寬度型67
4.5.4分離型按鈕組68
4.6不同尺寸的按鈕69
4.6.1大尺寸按鈕69
4.6.2標準尺寸的上拉式菜單按鈕70
4.6.3小尺寸按鈕71
4.6 .4特小尺寸按鈕72
4.7窗體中的文本欄73
4.7.1標籤文字組合式74
4.7.2單選按鈕和多選按鈕組合式75
4.7.3一般按鈕組合式76
4.7.4下拉式菜單按鈕組合式77
4.8窗體中的導航欄79
4.8.1默認的標籤型導航欄79
4.8.2簡易標籤型導航欄80
4.8.3具有窗口寬度的堆棧式導航欄80
4.8.4均分窗口寬度的標籤型導航欄80
4.8.5動態置頂導航欄82
4.9瀏覽分層提示和分頁84
4.9.1瀏覽分層提示84
4.9.2分頁導航欄85
4.9.3前一頁和下一頁按鈕86
4.10文字標籤、文字徽章與文字框87
4.10.1文字標籤87
4.10.2文字徽章87
4.10.3文字框88
4.11縮略圖與圖解說明89
4.12警告文字框91
4.13進度條92
4.14媒體對象95
4.14.1一般圖片列表95
4.14.2多層次圖片列表97
4.15列表分組100
4.15.1默認的列表分組100
4.15.2加上數值徽章的列表分組101
4.15.3按鈕型列表分組102
4.15.4應用顏色樣式的列表分組103
4.15.5帶有內容的列表分組104
4.16面板105
4.16.1一般面板105
4.16.2帶有表格內容的面板107
4.16.3帶有列表分組內容的面板109
4.17自適應嵌入110
第5章Zurb's Foundation的學習與使用112
5.1 Zurb's Foundation簡易應用方式112
5.2滑入菜單113
5.2.1默認的滑入菜單113
5.2.2雙邊滑入菜單114
5.2.3雙邊多層次滑入菜單118
5.3置頂導航欄122
5.4工具欄與內置小圖標125
5.4.1跨窗口寬度的工具欄125
5.4.2縱向工具欄126
5.4.3內置圖標工具按鈕所構成的工具欄127
5.5側邊導航欄128
5.6動態置頂追蹤型導航欄129
5.7子導航欄131
5.8瀏覽分層提示132
5.9分頁導航欄133
5.10縮略圖134
5.11縮放式視頻137
5.12窗體組件138
5.13切換按鈕148
5.14滑桿151
5.15窗體驗證156
5.16按鈕160
5.17按鈕組162
5.18分割下拉式菜單按鈕組167
5.19整體下拉式菜單按鈕169
5.20字體樣式171
5.21行內列表173
5.22文字標籤173
5.23 modal窗格174
5.24警告框180
5.25面板框182
5.26動態提示框183
5.27頁面操作展示185
5.28簡易型下拉式菜單與下拉式內容框189
5.29價目表192
5.30進度條193
5.31表格194
5.32折疊式面板195
5.33標籤面板203
5.34均分版型206
第6章Yahoo's Pure的學習與使用210
6.1 Yahoo's Pure簡易應用方式210
6.2版型網格和最小容器單元210
6.3窗體組件213
6.4按鈕222
6.5表格224
6.6菜單229