網(wǎng)頁設計理論與實務（微課版）

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