HTML + CSS + JavaScript 網頁製作實用教程

趙良濤

山東科技大學計算機技術專業士，商澤學腦計算機實驗教學中心主任，
Web技術專家，主要從事計算機教學和實驗室管理工作，有10餘年開發經驗。
精通計算機網絡開發技術，對HTML5、Java Script、CSS3、 jQueryWeb等網絡開發技術有很深的研究。

目錄
第1章HTML5入門基礎12
1．1 HTML簡介13
1．2 HTML文件的編寫方法13
1．2．1課堂案例——使用記事本編寫HTML文件13
1．2．2課堂案例——使用Dreamweaver編寫HTML文件14
1．3新增的主體結構元素15
1．3．1課堂案例——使用article元素15
1．3．2課堂案例——使用section元素16
1．3．3課堂案例——使用nav元素17
1．3．4課堂案例——使用aside元素19
1．4新增的非主體結構元素19
1．4．1課堂案例——使用header元素19
1．4．2課堂案例——使用hgroup元素20
1．4．3課堂案例——使用footer元素21
1．4．4課堂案例——使用address元素22
1．5本章小結23
1．6課後習題23

第2章HTML基本標記24
2． 1 HTML頁面主體常用設置25
2．1．1課堂案例——定義網頁背景色bgcolor 25
2．1．2課堂案例——設置背景圖片background 26
2．1．3課堂案例——設置文字顏色text 27
2．1．4課堂案例——設置鏈接文字屬性28
2．1．5課堂案例——設置頁面邊距30
2．2頁面頭部標記31
2．3頁面標題標記31
2．4元信息標記32
2．4．1設置頁面關鍵字32
2．4． 2設置頁面說明33
2．4．3定義編輯工具33
2．4．4定義頁面的作者信息34
2．4．5定義網頁文字及語言34
2．4．6課堂案例——定義頁面的跳轉35
2．5標題字36
2．6段落標記37
2．6．1課堂案例——使用段落標記
37
2．6．2課堂案例——使用換行標記
38
2．6．3課堂案例——不換行標記38
2．7水平線39
2．8課堂練習——創建基本的HTML文件40
2．9本章小結41
2．10課後習題41

第3章使用圖像和多媒體元素42
3．1網頁中常見的圖像格式43
3．2插入圖像並設置圖像屬性43
3．2．1圖像標記43
3．2．2課堂案例——設置圖像高度height 45
3．2．3課堂案例——設置圖像寬度width 45
3．2．4課堂案例——設置圖像的替代文字alt 46
3．3添加多媒體文件47
3．4添加音樂48
3．4．1標記48
3．4．2課堂案例——給網頁添加音樂播放器48
3．5課堂練習49
3．5．1課堂練習1——創建多媒體網頁49
3．5．2課堂練習2——創建圖文混合排版網頁50
3．6本章小結51
3．7課後習題51

第4章使用表格52
4．1創建表格53
4．1．1表格的基本構成table、tr、 td 53
4．1．2設置表格的標題caption 54
4．1．3表頭th 55
4．2表格基本屬性56
4．2．1課堂案例——表格寬度width 57
4．2．2課堂案例——表格邊框寬度border 58
4．2．3課堂案例——內框寬度cellspacing 59
4．2．4課堂案例——表格內文字與邊框間距cellpadding 59
4．3表格的行屬性60
4．3．1行背景bgcolor、background 60
4．3．2行文字的水平對齊方式align 62
4．3．3行文字的垂直對齊方式valign 63
4．4單元格屬性63
4．4．1水平跨度colspan 64
4．4．2垂直跨度rowspan 65
4．4．3對齊方式align、valign 66
4．5表格的結構67
4．5．1表格的表頭標記67
4．5．2表格的表主體標記68
4．5．3表格的表尾標記69
4．6課堂練習——使用表格排版網頁71
4．7本章小結74
4．8課後習題74

第5章HTML5開發實戰75
5．1 HTML5視頻video 76
5．1．1標記簡介76
5．1．2課堂案例— —在網頁中添加視頻文件77
5．1．3課堂案例——鏈接不同的視頻文件77
5．2 HTML5音頻audio 78
5．2．1標記簡介78
5．2．2課堂案例——隱藏audio播放器79
5．2．3課堂案例——使用標記的事件80
5．3 HTML5地理定位81
5．3．1地理定位方法81
5．3．2課堂案例——處理拒絕和錯誤82
5．3．3課堂案例——在地圖上顯示用戶的位置83
5．4 HTML5畫布canvas 84
5．4 ．1標記84
5．4．2課堂案例——繪製直線85
5．4．3課堂案例——線性漸變86
5．4．4課堂案例——徑向漸變87
5．5 HTML5 SVG 88
5．5 ．1 SVG簡介89
5．5．2課堂案例——繪製各種圖形89
5．5．3課堂案例——文本與圖像92
5．5．4課堂案例——設置描邊效果92
5．5． 5課堂案例——創建動畫93
5．6課堂練習94
5．6．1課堂練習1——繪製橢圓95
5．6．2課堂練習2——繪製精彩圖形96
5．7本章小結97
5．8課後習題97

第6章設計特效文字樣式98
6．1認識CSS 99
6．2使用CSS 99
6．2．1 CSS的基本語法99
6．2．2添加CSS的方法100
6．3設置文本樣式101
6．3．1課堂案例——設置字體font-family 101
6．3．2課堂案例——設置字號font-size 102
6．3 ．3課堂案例——設置字體風格font-style 103
6．3．4課堂案例——設置加粗字體font-weight 104
6．3．5課堂案例——設置小寫字母轉為大寫font-variant 105
6 ．4設置段落格式106
6．4．1課堂案例——設置單詞間隔word-spacing 106
6．4．2課堂案例——設置字符間隔letter-spacing 107
6．4．3課堂案例——設置文字修飾text-decoration 108
6．4．4課堂案例——設置垂直對齊方式vertical-align 109
6．4．5課堂案例——設置文本轉換text-transform 110
6．4．6課堂案例——設置水平對齊方式text-align 112
6．4．7課堂案例——設置文本縮進text-indent 113
6．4．8課堂案例——設置文本行高line-height 114
6．4．9課堂案例——設置處理空白white-space 114
6．4．10文本反排unicode-bidi、direction 115
6．5課堂練習——用CSS排版網頁文字116
6．6本章小結118
6．7課後習題118

第7章設計圖像和背景樣式119
7．1設置網頁的背景120
7．1．1課堂案例——使用background-color設置背景顏色120
7．1．2課堂案例——使用background-image設置背景圖像121
7．2設置背景圖像樣式121
7．2．1課堂案例——使用background-repeat設置背景平鋪122
7．2．2課堂案例——使用background-attachment設置固定
背景123
7．2．3課堂案例——使用background-position設置背景位置124
7．3應用CSS濾鏡設計圖像特效126
7．3．1不透明度alpha 126
7．3．2動感模糊blur 128
7．3 ．3陰影效果dropShadow 129
7．3．4灰度處理gray 130
7．3．5反相invert 131
7．4課堂練習132
7．4．1課堂練習1——文字與圖片上下垂直居中132
7． 4．2課堂練習2——CSS實現背景半透明效果133
7．5本章小結135
7．6課後習題135

第8章使用CSS設計表單和表格樣式136
8．1表單form 137
8．1．1程序提交action 137
8．1．2表單名稱name 137
8．1．3傳送方法method 138
8．1．4編碼方式enctype 138
8．1．5目標顯示方式target 139
8．2插入表單對象140
8．2．1課堂案例——插入文字字段text 140
8．2．2課堂案例——插入密碼域password 141
8．2．3課堂案例——插入單選按鈕radio 142
8．2．4課堂案例——插入複選框checkbox 143
8．2．5課堂案例——插入普通按鈕button 143
8．2．6課堂案例——插入提交按鈕submit 144
8．2．7課堂案例——重置按鈕reset 145
8．2．8課堂案例——插入圖像域image 146
8．2．9課堂案例——插入隱藏域hidden 147
8．2．10課堂案例——插入文件域file 148
8．3菜單和列表148
8．3．1課堂案例——插入下拉菜單148
8．3．2課堂案例——插入列表項149
8．4設計表格樣式150
8．4．1設置表格陰影151
8．4．2設置表格的漸變背景152
8．5課堂練習153
8．5．1課堂練習1——設置輸入文本的樣式153
8．5．2課堂練習2——鼠標指針經過時改變表格行的顏色153
8．5．3課堂練習3——用虛線美化表格的邊框154
8．6本章小結155
8．7課後習題155

第9章使用鏈接與列表設計網站導航156
9．1鏈接樣式設置基礎157
9 ．1．1課堂案例——設置鼠標指針屬性cursor 157
9．1．2課堂案例——設置下畫線樣式text-decoration 158
9．1．3課堂案例——設置未訪問過的超鏈接a： link 159
9．1．4課堂案例——設置鼠標指針懸停時狀態a：hover 160
9．1．5課堂案例——設置已訪問超鏈接樣式a：visited 160
9．1．6課堂案例——設置超鏈接的激活樣式a：active 161
9．2有序列表162
9．2．1課堂案例——設置有序列表標記

162
9．2．2課堂案例——設置有序列表的序號類型type 163
9．2．3課堂案例——設置有序列表的起始數值start 164
9．3無序列表165
9．3．1課堂案例——設置無序列表標記165
9．3．2課堂案例——設置無序列表的類型type 166
9．3．3課堂案例——設置目錄列表標記167
9．3．4課堂案例——設置定義列表標記168
9．3．5課堂案例——設置菜單列表標記169
9．4課堂練習170
9．4．1課堂練習1——翻轉式超鏈接170
9．4．2課堂練習2——設計導航菜單172
9．5本章小結173
9．6課後習題173

第10章移動網頁設計基礎CSS3 174
10．1邊框175
10．1．1課堂案例——設置圓角邊框border-radius 175
10． 1．2課堂案例——設置邊框圖片border-image 178
10．1．3課堂案例——設置邊框陰影box-shadow 180
10．2背景181
10．2．1課堂案例——設置背景圖片尺寸background- size 181
10．2．2課堂案例——設置背景圖片定位區域background-
origin 182
10．2．3課堂案例——設置背景裁剪區域background-clip 183
10．3文本184
10．3．1課堂案例——設置文本陰影text-shadow 184
10．3．2課堂案例——設置強制換行word-wrap 185
10．3．3課堂案例——設置文本溢出text-overf low 186
10．3．4課堂案例——設置文字描邊text-stroke 187
10．3．5課堂案例——設置文本填充顏色text-fill-color 188
10．4多列189
10．4．1課堂案例——創建多列column-count 189
10．4．2課堂案例——設置列的寬度column-width 190
10．4． 3課堂案例——設置列的間隔column-gap 191
10．4．4課堂案例——設置列的規則column-rule 193
10．5轉換變形194
10．5．1課堂案例——設置移動translate() 194
10．5．2課堂案例——設置旋轉rotate() 195
10．5．3課堂案例——設置縮放scale() 196
10．5．4課堂案例——設置扭曲skew() 197
10．5． 5課堂案例——設置矩陣matrix() 198
10．6過渡199
10．7課堂練習200
10．7．1課堂練習1——鼠標指針放上去顯示全部內容200
10．7．2課堂練習2——美觀的圖片排列201
10．8本章小結202
10．9課後習題202

第11章CSS盒子模型與佈局入門203
11．1認識盒子模型204
11．2外邊距204
11．2．1課堂案例——設置上外邊距margin-top 205
11．2．2課堂案例——設置右外邊距margin -right 205
11．2．3課堂案例——設置下外邊距margin-bottom 206
11．2．4課堂案例——設置左外邊距margin-left 207
11．3內邊距208
11．3．1課堂案例——設置上內邊距padding-top 208
11．3．2課堂案例——設置右內邊距padding-right 209
11．3．3課堂案例——設置下內邊距padding-bottom 210
11． 3．4課堂案例——設置左內邊距padding-left 210
11．4邊框211
11．4．1課堂案例——設置邊框樣式border-style 211
11．4．2課堂案例——設置邊框寬度border -width 213
11．4．3課堂案例——設置邊框顏色border-color 215
11．4．4課堂案例——設置邊框屬性border 216
11．5課堂練習——CSS佈局實例217
11．6本章小結219
11．7課後習題219

第12章CSS定位佈局方法220
12．1定位佈局221
12．1．1課堂案例——設置絕對定位absolute 221
12．1．2課堂案例——設置固定定位fixed 222
12．1．3課堂案例——設置相對定位relative 223
12．2浮動定位224
12．2．1課堂案例——設置float屬性224
12．2．2課堂案例——設置浮動佈局的新問題225
12．2．3課堂案例——設置清除浮動clear 226
12．3定位層疊227
12 ．3．1課堂案例——設置層疊順序227
12．3．2課堂案例——設置簡單嵌套元素中的層疊定位228
12．3．3課堂案例——創建包含子元素的複雜層疊定位229
12 ．4課堂練習230
12．4．1課堂練習1——創建一列固定寬度230
12．4．2課堂練習2——創建一列自適應231
12．4．3課堂練習3——創建兩列固定寬度231
12．4．4課堂練習4——創建兩列寬度自適應232
12．4．5課堂練習5——創建右列寬度自適應233
12．4．6課堂練習6——創建三列浮動中間寬度自適應233
12．5本章小結235
12．6課後習題235

第13章JavaScript語法基礎236
13．1 JavaScript概述237
13．1．1 JavaScript簡介237
13．1．2 JavaScript放置位置237
13．2 JavaScript基本語法238
13．2．1變量238
13．2．2數據類型239
13．2．3表達式和運算符239
13．2．4函數240
13．2．5註釋241
13．3 JavaScript程序語句241
13．3．1課堂案例——使用if語句241
13．3．2課堂案例——使用for語句242
13．3．3課堂案例— —使用switch語句243
13．3．4 while循環244
13．3．5 break語句245
13．3．6 continue語句246
13．4課堂練習——禁止鼠標右擊247
13．5本章小結248
13．6課後習題248

第14章JavaScript中的事件249
14．1事件驅動與事件處理250
14．1．1事件與事件驅動250
14．1．2事件與處理代碼關聯251
14．1．3調用函數的事件252
14．1．4調用代碼的事件253
14．1．5設置對象事件的方法254
14．2 JavaScript常見的事件255
14．2．1 onClick事件255
14．2．2 onChange事件255
14．2．3 onSelect事件256
14．2．4 onFocus事件257
14．2．5 onLoad事件258
14．2．6 onUnload事件259
14．2．7 onBlur事件259
14．2．8 onDblClick事件260
14．2．9其他常用事件261
14．3課堂練習——將事件應用於按鈕中262
14．4本章小結263
14．5課後習題263

第15章JavaScript中的函數和對象264
15．1函數概述265
15．2函數的定義265
15．2．1函數的普通定義方式265
15．2．2函數的變量定義方式266
15．2．3函數的指針調用方式267
15．3 JavaScript對象的聲明和引用268
15．3．1聲明和實例化268
15．3．2對象的引用270
15．4瀏覽器對象271
15．4．1課堂實例——利用navigator對象獲取瀏覽器對象的屬性值271
15．4． 2課堂實例——利用window對象控制顯示窗口的大小272
15．4．3課堂實例——利用location對象獲取當前頁面的URL 273
15．4．4課堂實例——用history對象製作前進到上一頁和後退到下一頁274
15．4．5課堂實例——用document對象來顯示文檔的最後修改時間275
15．5課堂練習——定時關閉網頁窗口276
15．6本章小結277
15．7課後習題277

第16章綜合案例：公司宣傳網站的佈局278
16．1企業網站設計分析279
16．1．1企業網站內容設計279
16．1．2排版構架279
16．2各部分設計280
16．2 ．1 Logo與頂部導航280
16．2．2左側導航282
16．2．3主體內容283
16．2．4製作“搜索”部分285
16．2．5製作“公司新聞動態”部分286
16． 2．6製作“聯繫我們”部分287
16．2．7底部版權信息287
16．3本章小結288
16．4課後習題288