HTML5+CSS3 Web前端開發(fā)

目錄
第1章Web前端開發(fā)概述/1
1.1Web前端開發(fā)與網(wǎng)頁(yè)設(shè)計(jì)/1
1.1.1網(wǎng)頁(yè)的概念和本質(zhì)/1
1.1.2網(wǎng)頁(yè)設(shè)計(jì)的兩個(gè)基本問題/2
1.1.3網(wǎng)頁(yè)設(shè)計(jì)語言——HTML簡(jiǎn)介/3
1.1.4網(wǎng)頁(yè)制作軟件/4
1.2網(wǎng)站的創(chuàng)建和制作流程/5
1.2.1網(wǎng)站的特征/5
1.2.2網(wǎng)站的開發(fā)步驟/6
1.2.3在Dreamweaver中建立站點(diǎn)/8
1.3Web服務(wù)器與瀏覽器/10
1.3.1Web服務(wù)器的作用/11
1.3.2瀏覽器的種類和作用/11
1.4URL與域名/13
習(xí)題1/14第2章HTML/15
2.1HTML概述/15
2.1.1HTML文檔的結(jié)構(gòu)/15
2.1.2Dreamweaver的開發(fā)界面/16
2.1.3使用DW新建HTML文件/17
2.1.4HTML標(biāo)記/17
2.1.5常見的HTML標(biāo)記及屬性/18
2.2在網(wǎng)頁(yè)中添加文本和圖像/19
2.2.1創(chuàng)建文本和列表/19
2.2.2插入圖像/21
2.3利用DW代碼視圖提高效率/22
2.3.1代碼提示/23
2.3.2代碼快速定位/23
2.3.3DW中的常用快捷鍵/24
2.4創(chuàng)建超鏈接/25
2.4.1超鏈接標(biāo)記/252.4.2URL與相對(duì)URL/27 2.4.3超鏈接的種類/28
2.4.4超鏈接目標(biāo)的打開方式/30
2.4.5超鏈接制作的原則/30
2.4.6DW中超鏈接屬性面板的使用/31
2.5插入Flash及嵌入其他網(wǎng)頁(yè)/32
2.5.1插入Flash /32
2.5.2嵌入式框架標(biāo)記/33 2.6頭部標(biāo)記/34
習(xí)題/35第3章HTML5與Web標(biāo)準(zhǔn)/36
3.1HTML5的改進(jìn)/36
3.1.1HTML5新增的標(biāo)記/36
3.1.2HTML5語法的改進(jìn)/38
3.1.3HTML5的視音頻功能/39
3.1.4HTML5的繪圖功能/41
3.2Web標(biāo)準(zhǔn)/44
3.2.1傳統(tǒng)HTML的缺點(diǎn)/44
3.2.2Web標(biāo)準(zhǔn)的含義/45
3.2.3Web標(biāo)準(zhǔn)的優(yōu)勢(shì)/47
3.3HTML元素的概念/47
3.3.1行內(nèi)元素和塊級(jí)元素/48
3.3.2和標(biāo)記/48 習(xí)題/49第4章CSS樣式美化/50
4.1CSS基礎(chǔ)/50
4.1.1CSS的語法/50
4.1.2在HTML中引入CSS的方法/51
4.1.3選擇器的分類/53
4.1.4CSS文本修飾/56
4.2CSS的特性/57
4.2.1CSS的層疊性/57
4.2.2CSS的繼承性/59
4.2.3選擇器的組合/60
4.3CSS高級(jí)選擇器/64
4.3.1關(guān)系選擇器/64
4.3.2屬性選擇器/66
4.3.3偽類選擇器/67
4.3.4使用過渡屬性配合動(dòng)態(tài)偽類效果/70
4.3.5偽元素選擇器/73
4.4CSS設(shè)計(jì)和書寫技巧/75
4.4.1CSS樣式總體設(shè)計(jì)原則/75
4.4.2DW對(duì)CSS的可視化編輯支持/76
4.4.3CSS屬性的值和單位/79
4.4.4網(wǎng)頁(yè)中的字體/80
4.4.5字體圖標(biāo)技術(shù)/82
4.5盒子模型及其屬性/84
4.5.1盒子模型概述/84
4.5.2邊框border屬性/85
4.5.3圓角borderradius屬性/87
4.5.4圖像邊框borderimage屬性/89
4.5.5padding和margin屬性/91
4.6標(biāo)準(zhǔn)流下的定位及應(yīng)用/92
4.6.1標(biāo)準(zhǔn)流下的定位原則/92
4.6.2margin合并現(xiàn)象/95
4.6.3盒子模型的應(yīng)用/96
4.6.4Chrome瀏覽器的CSS調(diào)試功能/99
4.7背景的運(yùn)用/100
4.7.1CSS的背景屬性/100
4.7.2背景的基本運(yùn)用技術(shù)/104
4.7.3滑動(dòng)門技術(shù)/107
4.7.4背景圖像的翻轉(zhuǎn)/111
4.7.5傳統(tǒng)圓角效果/112
4.8CSS3樣式美化功能/114
4.8.1陰影和發(fā)光效果/114
4.8.2漸變效果/117
4.8.3描邊效果/120
4.8.4遮罩效果/121
4.9變形與動(dòng)畫效果/123
4.9.1平面變形效果/123
4.9.23D變換效果/126
4.9.3animation動(dòng)畫效果/131
習(xí)題/134第5章CSS布局/137
5.1浮動(dòng)/137
5.1.1盒子浮動(dòng)后的特點(diǎn)/137
5.1.2清除浮動(dòng)元素的影響/140
5.1.3清除浮動(dòng)影響的方法/140
5.2浮動(dòng)的應(yīng)用舉例/143
5.2.1圖文混排及首字下沉效果/143
5.2.2水平導(dǎo)航條/144
5.2.3新聞欄目框/145
5.2.4微博對(duì)話框/148
5.3相對(duì)定位/149
5.3.1定位屬性和偏移屬性/149
5.3.2相對(duì)定位的特點(diǎn)/149
5.3.3相對(duì)定位的應(yīng)用舉例/150
5.4定位和固定定位/152
5.4.1定位/152
5.4.2定位的應(yīng)用舉例/154
5.4.3固定定位/163
5.4.4與定位屬性有關(guān)的CSS屬性/163
5.4.5overflow屬性/166
5.4.6verticalalign屬性/167
5.5CSS分欄布局/168
5.5.1分欄布局的種類/169
5.5.2網(wǎng)頁(yè)居中的方法/170
5.5.3131版式網(wǎng)頁(yè)布局/170
5.5.4121可變寬度布局/174
5.5.5CSS兩列布局案例/176
5.5.6HTML5 新增的文檔結(jié)構(gòu)標(biāo)記/181
5.5.7HTML5網(wǎng)頁(yè)布局案例/183
5.6CSS3新增的布局方式/186
5.6.1彈性盒布局/186
5.6.2分欄布局/190
5.7CSS瀏覽器的兼容問題/192
習(xí)題/193第6章表格與表單/195
6.1創(chuàng)建表格/195
6.1.1表格標(biāo)記/195
6.1.2表格行和單元格標(biāo)記/197
6.1.3在DW中操作表格的方法/199
6.1.4制作固定寬度的表格/201
6.1.5特殊效果表格的制作/201
6.2使用CSS美化表格/203
6.2.1邊框和背景的美化/203
6.2.2隔行變色效果/204
6.3創(chuàng)建表單/205
6.3.1標(biāo)記及其屬性/206
6.3.2標(biāo)記/208
6.3.3和標(biāo)記/211 6.3.4多行文本域標(biāo)記/211 6.3.5表單數(shù)據(jù)的傳遞過程/212
6.3.6表單中的按鈕/213
6.3.7表單的輔助標(biāo)記/214
6.3.8HTML5新增的表單標(biāo)記和屬性/215
6.4美化表單/218
6.4.1搜索框/218
6.4.2用戶登錄表單/219
6.4.3用戶注冊(cè)表單/222
習(xí)題/223第7章響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)/225
7.1響應(yīng)式網(wǎng)頁(yè)的基本技術(shù)/225
7.1.1媒體查詢/225
7.1.2流式布局/227
7.1.3自適應(yīng)圖片/229
7.1.4一列變寬、一列固定的方法/231
7.1.5響應(yīng)式網(wǎng)頁(yè)的頭部代碼設(shè)置/231
7.2響應(yīng)式布局的網(wǎng)站實(shí)例/232
7.2.1頁(yè)面總體布局的實(shí)現(xiàn)/233
7.2.2頁(yè)頭的設(shè)計(jì)/235
7.2.3響應(yīng)式導(dǎo)航條的制作/235
7.2.4響應(yīng)式欄目的制作/237
習(xí)題/239第8章JavaScript與jQuery基礎(chǔ)/240
8.1JavaScript的代碼結(jié)構(gòu)/240
8.2JavaScript的事件編程/242
8.2.1JavaScript語言基礎(chǔ)/242
8.2.2常用JavaScript事件/242
8.2.3事件監(jiān)聽程序/243
8.3JavaScript DOM編程/245
8.3.1動(dòng)態(tài)效果的實(shí)現(xiàn)/245
8.3.2獲取指定元素/246
8.3.3訪問元素的CSS屬性/247
8.3.4訪問元素的內(nèi)容/249
8.4使用瀏覽器對(duì)象/249
8.5jQuery基礎(chǔ)/253
8.5.1jQuery的功能和使用/253
8.5.2jQuery中的“$”/254
8.5.3jQuery對(duì)象與DOM對(duì)象/258
8.5.4jQuery的選擇器/260
8.5.5jQuery的事件綁定/261
8.5.6jQuery中的常用方法/262
8.5.7jQuery應(yīng)用舉例/263
習(xí)題/265第9章Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)/267
9.1Bootstrap的使用/267
9.1.1下載和引用Bootstrap框架/267
9.1.2Bootstrap柵格系統(tǒng)/269
9.1.3使用柵格系統(tǒng)進(jìn)行響應(yīng)式布局/271
9.2Bootstrap中的網(wǎng)頁(yè)組件/277
9.2.1基于組件的網(wǎng)頁(yè)制作方法/277
9.2.2導(dǎo)航條/279
9.2.3輪播插件/283
9.2.4選項(xiàng)卡面板/286
9.2.5媒體對(duì)象/288
9.2.6折疊面板組/290
9.2.7提示框與彈出框/292
9.2.8模態(tài)彈窗/293
9.3Bootstrap網(wǎng)頁(yè)重構(gòu)實(shí)例/295
習(xí)題/297附錄實(shí)驗(yàn)/299
實(shí)驗(yàn)1個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)/299
實(shí)驗(yàn)2圓餅型盒子的制作/299
實(shí)驗(yàn)3制作背景翻轉(zhuǎn)的圖標(biāo)/300
實(shí)驗(yàn)4欄目框的制作/300
實(shí)驗(yàn)5頁(yè)頭和導(dǎo)航條的制作/301
實(shí)驗(yàn)6圖片滾動(dòng)欄的制作/301
實(shí)驗(yàn)7網(wǎng)頁(yè)的布局設(shè)計(jì)/301
實(shí)驗(yàn)8網(wǎng)站首頁(yè)的實(shí)現(xiàn)/301
實(shí)驗(yàn)9網(wǎng)站列表頁(yè)的實(shí)現(xiàn)/301
實(shí)驗(yàn)10制作下拉菜單/302
實(shí)驗(yàn)11制作Tab面板/302
實(shí)驗(yàn)12使用Bootstrap制作響應(yīng)式網(wǎng)頁(yè)/302參考文獻(xiàn)/303顯示全部信息