網(wǎng)頁(yè)設(shè)計(jì)理論與實(shí)務(wù)（微課版）

第 1章　瀏覽器與網(wǎng)頁(yè)基礎(chǔ)　1
1.1　計(jì)算機(jī)網(wǎng)絡(luò)與瀏覽器　1
1.1.1　計(jì)算機(jī)網(wǎng)絡(luò)　1
1.1.2　TCP/IP　2
1.1.3　進(jìn)制與IP地址　2
1.1.4　域名與域名服務(wù)器　4
1.1.5　URL　5
1.1.6　常用的瀏覽器　5
1.1.7　瀏覽器的工作原理　6
1.1.8　瀏覽器應(yīng)用程序　7
1.2　網(wǎng)站與網(wǎng)頁(yè)　8
1.2.1　網(wǎng)頁(yè)的分類　9
1.2.2　網(wǎng)頁(yè)的組成元素　10
1.2.3　網(wǎng)站的制作流程與網(wǎng)站空間　10
1.2.4　測(cè)試網(wǎng)頁(yè)　12
1.2.5　發(fā)布網(wǎng)頁(yè)　12
1.3　網(wǎng)頁(yè)設(shè)計(jì)輔助軟件　12
1.3.1　網(wǎng)頁(yè)編輯軟件　12
1.3.2　網(wǎng)頁(yè)測(cè)試軟件　13
1.3.3　IDE　13
1.4　構(gòu)建第 一個(gè)網(wǎng)頁(yè)　14
1.4.1　創(chuàng)建網(wǎng)頁(yè)文件　14
1.4.2　網(wǎng)頁(yè)編碼與文件存儲(chǔ)　14
1.4.3　測(cè)試網(wǎng)頁(yè)效果　14
1.4.4　瀏覽器的渲染次序　15
1.4.5　瀏覽器與內(nèi)存　15
1.5　實(shí)訓(xùn)案例　15
1.5.1　安裝Firefox瀏覽器　15
1.5.2　安裝Sublime Text 2　16
思考與練習(xí)　16
上機(jī)實(shí)驗(yàn)　17
第　2章 網(wǎng)頁(yè)文本處理　18
2.1　結(jié)構(gòu)標(biāo)記　18
2.1.1　html標(biāo)記　18
2.1.2　head標(biāo)記　18
2.1.3　meta標(biāo)記　19
2.1.4　控制網(wǎng)頁(yè)編碼　20
2.1.5　注釋　21
2.1.6　body標(biāo)記　21
2.1.7　進(jìn)制與RGB顏色值　23
2.1.8　網(wǎng)頁(yè)模板文件　23
2.2　文本樣式標(biāo)記與轉(zhuǎn)義字符　24
2.2.1　font標(biāo)記　24
2.2.2　物理樣式標(biāo)記與邏輯樣式標(biāo)記　25
2.2.3　轉(zhuǎn)義字符　26
2.3　組織段落　27
2.3.1　p標(biāo)記　27
2.3.2　div標(biāo)記與span標(biāo)記　28
2.3.3　標(biāo)記間的包含關(guān)系　29
2.3.4　標(biāo)題標(biāo)記hn　29
2.3.5　br標(biāo)記與nobr標(biāo)記　30
2.3.6　hr標(biāo)記　30
2.3.7　像素、分辨率與進(jìn)制　30
2.3.8　align屬性　31
2.3.9　空標(biāo)記　31
2.3.10　W3C與HTML標(biāo)準(zhǔn)　31
2.4　列表　32
2.4.1　li標(biāo)記與ol標(biāo)記　32
2.4.2　ul標(biāo)記　32
2.4.3　dl、dt和dd標(biāo)記　33
2.5　其他標(biāo)記　33
2.5.1　abbr標(biāo)記　33
2.5.2　acronym標(biāo)記　34
2.5.3　del與ins標(biāo)記　34
2.5.4　標(biāo)記的分類　35
2.6　實(shí)訓(xùn)案例　35
2.6.1　創(chuàng)建網(wǎng)頁(yè)模板文件　35
2.6.2　使用網(wǎng)頁(yè)模板文件　36
思考與練習(xí)　36
上機(jī)實(shí)驗(yàn)　38
第3章　常用的網(wǎng)頁(yè)標(biāo)記　39
3.1　網(wǎng)頁(yè)文件路徑　39
3.1.1　絕對(duì)路徑　39
3.1.2　相對(duì)路徑　40
3.2　鏈接　40
3.2.1　a標(biāo)記　40
3.2.2　書簽　42
3.2.3　base標(biāo)記　42
3.3　圖片　43
3.3.1　圖片格式　43
3.3.2　img標(biāo)記　44
3.3.3　map標(biāo)記　44
3.3.4　map標(biāo)記內(nèi)的重疊區(qū)域處理　46
3.3.5　marquee標(biāo)記　46
3.4　設(shè)計(jì)表格　48
3.4.1　table標(biāo)記　48
3.4.2　行標(biāo)記　48
3.4.3　單元格標(biāo)記　49
3.4.4　基準(zhǔn)線對(duì)齊　50
3.4.5　表格標(biāo)題標(biāo)記　50
3.4.6　合并行與列　51
3.5　設(shè)計(jì)表單　52
3.5.1　表單　52
3.5.2　輸入控件　53
3.6　實(shí)訓(xùn)案例　56
3.6.1　調(diào)整圖片尺寸　56
3.6.2　管理網(wǎng)頁(yè)相關(guān)文件　57
思考與練習(xí)　57
上機(jī)實(shí)驗(yàn)　58
第4章　CSS基礎(chǔ)　59
4.1　CSS概述　59
4.1.1　CSS的作用　59
4.1.2　CSS語(yǔ)法　60
4.1.3　CSS選擇器　60
4.1.4　注釋與添加CSS代碼　62
4.1.5　在網(wǎng)頁(yè)模板文件中添加CSS　62
4.1.6　樣式的優(yōu)先級(jí)　63
4.1.7　模式匹配　64
4.1.8　CSS屬性的繼承　66
4.2　CSS基本單位　67
4.2.1　長(zhǎng)度單位　67
4.2.2　顏色單位　68
4.3　設(shè)置字體相關(guān)樣式　68
4.3.1　設(shè)置字體　68
4.3.2　設(shè)置字號(hào)　69
4.3.3　設(shè)置字體樣式　69
4.3.4　設(shè)置筆畫粗細(xì)　70
4.3.5　設(shè)置小型的大寫字母　71
4.3.6　設(shè)置行高　71
4.3.7　設(shè)置字體復(fù)合屬性　71
4.4　設(shè)置文本樣式　72
4.4.1　設(shè)置文本顏色　72
4.4.2　設(shè)置文本顯示方向　72
4.4.3　設(shè)置字母間距　73
4.4.4　設(shè)置文本對(duì)齊方式　74
4.4.5　設(shè)置文本修飾方式　74
4.4.6　理解偽類定義次序　75
4.4.7　IE瀏覽器的工作模式　75
4.4.8　改進(jìn)網(wǎng)頁(yè)模板文件　76
4.4.9　設(shè)置文本縮進(jìn)　76
4.4.10　轉(zhuǎn)換字母大小寫　77
4.4.11　設(shè)置單詞間距　77
4.5　設(shè)置元素背景　78
4.5.1　設(shè)置背景圖像固定　78
4.5.2　設(shè)置元素背景色　78
4.5.3　設(shè)置表格背景　79
4.5.4　設(shè)置背景圖像的基本屬性與起始位置　79
4.5.5　設(shè)置背景圖像的重復(fù)方式　80
4.5.6　設(shè)置背景的復(fù)合屬性　80
4.6　設(shè)置列表樣式　80
4.6.1　設(shè)置列表項(xiàng)符號(hào)　81
4.6.2　設(shè)置列表項(xiàng)符號(hào)的位置　81
4.6.3　用圖像替換列表項(xiàng)符號(hào)　82
4.6.4　設(shè)置列表的復(fù)合屬性　82
4.7　實(shí)訓(xùn)案例　82
4.7.1　顯示不同字體　82
4.7.2　調(diào)整字號(hào)　83
思考與練習(xí)　83
上機(jī)實(shí)驗(yàn)　85
第5章　CSS布局屬性　86
5.1　標(biāo)記的分類　86
5.1.1　行內(nèi)元素與塊元素　86
5.1.2　塊元素與行內(nèi)元素的互換　87
5.1.3　特殊的元素類型　87
5.2　設(shè)置元素尺寸　87
5.2.1　設(shè)置元素高度　87
5.2.2　設(shè)置元素寬度　88
5.2.3　偽元素　88
5.2.4　設(shè)置文本等寬　88
5.3　分類屬性　90
5.3.1　設(shè)置元素類型　90
5.3.2　設(shè)置元素是否可見　90
5.3.3　設(shè)置元素浮動(dòng)　91
5.3.4　清除浮動(dòng)元素　92
5.3.5　設(shè)置鼠標(biāo)指針　93
5.4　盒子模型　93
5.4.1　設(shè)置外邊距　93
5.4.2　設(shè)置邊框　94
5.4.3　設(shè)置填充　96
5.4.4　盒子模型的概念　97
5.4.5　消除瀏覽器的顯示差異　97
5.5　設(shè)置表格樣式　98
5.5.1　表格樣式的5個(gè)屬性　98
5.5.2　表格隔行變色與當(dāng)前行提示　99
5.6　設(shè)置元素定位　101
5.6.1　設(shè)置外邊距　101
5.6.2　設(shè)置垂直方向的對(duì)齊方式　101
5.6.3　設(shè)置元素堆疊順序　102
5.6.4　設(shè)置元素定位類型　102
5.6.5　設(shè)置溢出處理　105
5.7　實(shí)訓(xùn)案例　105
5.7.1　模擬論壇頁(yè)面　106
5.7.2　制作個(gè)人簡(jiǎn)歷頁(yè)面　106
思考與練習(xí)　106
上機(jī)實(shí)驗(yàn)　108
第6章　設(shè)計(jì)復(fù)雜的布局　109
6.1　設(shè)計(jì)桌面瀏覽器布局　109
6.1.1　迭代技術(shù)　109
6.1.2　引入占位div　110
6.1.3　設(shè)計(jì)三行一列桌面瀏覽器布局　111
6.1.4　設(shè)計(jì)一行三列桌面瀏覽器布局　112
6.1.5　第二次迭代一行三列桌面瀏覽器布局　113
6.1.6　第三次迭代一行三列桌面瀏覽器布局　115
6.1.7　設(shè)計(jì)三行三列桌面瀏覽器布局　116
6.1.8　完善上部橫向菜單　117
6.1.9　第二次迭代上部橫向菜單　118
6.1.10　迭代左側(cè)豎向菜單　119
6.1.11　迭代下方版權(quán)信息　120
6.1.12　迭代中間內(nèi)容　121
6.1.13　迭代右側(cè)友情鏈接　122
6.1.14　第二次迭代三行三列桌面瀏覽器布局　123
6.1.15　第三次迭代上部橫向菜單　124
6.1.16　選擇網(wǎng)站色調(diào)　125
6.2　HTML5與CSS3　126
6.2.1　瀏覽器內(nèi)核　126
6.2.2　初步了解HTML5　127
6.2.3　引入HTML5后的網(wǎng)頁(yè)模板　128
6.2.4　CSS1到CSS3　128
6.2.5　定義圓角矩形　129
6.2.6　淺談圓角矩形實(shí)現(xiàn)算法　129
6.2.7　CSS3盒子模型　130
6.2.8　HTML5新增的標(biāo)記　131
6.3　flex布局基礎(chǔ)　132
6.3.1　flex容器　133
6.3.2　flex項(xiàng)目　135
6.4　flex布局設(shè)計(jì)　136
6.4.1　設(shè)計(jì)三行一列flex布局　136
6.4.2　設(shè)計(jì)一行三列flex布局　137
6.4.3　設(shè)計(jì)三行三列flex布局　139
6.5　響應(yīng)式網(wǎng)頁(yè)布局　140
6.5.1　響應(yīng)式網(wǎng)頁(yè)　140
6.5.2　“@media”語(yǔ)法　140
6.5.3　制作響應(yīng)式網(wǎng)頁(yè)　141
6.6　實(shí)訓(xùn)案例　144
6.6.1　整體布局的對(duì)齊方式　144
6.6.2　響應(yīng)式網(wǎng)頁(yè)菜單項(xiàng)提示　144
思考與練習(xí)　145
上機(jī)實(shí)驗(yàn)　146
第7章　JavaScript基礎(chǔ)　147
7.1　JavaScript語(yǔ)法基礎(chǔ)　147
7.1.1　定義JavaScript代碼　148
7.1.2　數(shù)據(jù)類型　148
7.1.3　常量　149
7.1.4　變量　150
7.1.5　值傳遞　150
7.1.6　關(guān)鍵字　151
7.2　分隔符　151
7.2.1　注釋符　151
7.2.2　空白符　151
7.2.3　普通分隔符　151
7.3　表達(dá)式和運(yùn)算符　152
7.3.1　算術(shù)運(yùn)算符　152
7.3.2　關(guān)系運(yùn)算符　153
7.3.3　邏輯運(yùn)算符　153
7.3.4　位運(yùn)算符　153
7.3.5　賦值運(yùn)算符　155
7.3.6　運(yùn)算符的優(yōu)先級(jí)　156
7.4　流程控制　157
7.4.1　順序流程　157
7.4.2　條件流程　157
7.4.3　函數(shù)　163
7.4.4　迭代學(xué)習(xí)方法　167
7.4.5　JavaScript調(diào)試技巧　168
7.4.6　常用的全局函數(shù)　169
7.4.7　循環(huán)流程　169
7.5　實(shí)訓(xùn)案例　175
7.5.1　顯示基本數(shù)據(jù)類型　175
7.5.2　顯示斐波那契數(shù)列　175
思考與練習(xí)　176
上機(jī)實(shí)驗(yàn)　177
第8章　基于對(duì)象的JavaScript編程　178
8.1　對(duì)象基礎(chǔ)　178
8.1.1　類與對(duì)象　178
8.1.2　屬性與方法　179
8.2　JavaScript中的常用類　179
8.2.1　Date類　179
8.2.2　Array類　180
8.2.3　String類　181
8.2.4　Math類　183
8.2.5　函數(shù)與高等數(shù)學(xué)　184
8.3　瀏覽器內(nèi)置對(duì)象　184
8.3.1　窗口對(duì)象window　184
8.3.2　文檔對(duì)象document　185
8.3.3　瀏覽器對(duì)象navigator　186
8.3.4　歷史對(duì)象history　187
8.3.5　位置對(duì)象location　187
8.4　事件及其處理方法　187
8.4.1　onload　187
8.4.2　onunload　188
8.4.3　onmouseover　188
8.4.4　onmouseout　188
8.4.5　onfocus　188
8.4.6　onblur　189
8.4.7　onclick　189
8.4.8　onselect　189
8.4.9　onchange　189
8.5　操作DOM　190
8.5.1　操作DOM節(jié)點(diǎn)　191
8.5.2　制作實(shí)時(shí)數(shù)字時(shí)鐘　192
8.5.3　實(shí)時(shí)顯示在頁(yè)面停留的時(shí)間　193
8.5.4　修改DOM節(jié)點(diǎn)的樣式　194
8.5.5　校驗(yàn)表單　195
8.5.6　設(shè)計(jì)RGB顏色查看器　200
8.6　HTTP異步通信　201
8.6.1　XMLHttpRequest對(duì)象　201
8.6.2　JSON對(duì)象　203
8.6.3　獲取天氣信息　204
8.6.4　使用終端顯示日志信息　205
8.7　兼容性設(shè)計(jì)　206
8.7.1　IE瀏覽器的條件注釋　206
8.7.2　低版本IE瀏覽器兼容HTML5和CSS3　207
8.7.3　自動(dòng)切換桌面瀏覽器布局與移動(dòng)端瀏覽器布局　208
8.8　JavaScript框架簡(jiǎn)介　208
8.8.1　jQuery框架　209
8.8.2　Vue.js框架　209
8.8.3　Node.js框架　210
8.9　實(shí)訓(xùn)案例　210
8.9.1　提示文檔加載完畢　210
8.9.2　提示文檔加載進(jìn)程　210
思考與練習(xí)　211
上機(jī)實(shí)驗(yàn)　212