HTML +CSS+JavaScript網(wǎng)頁(yè)制作實(shí)用教程

第1章 HTML5入門(mén)基礎(chǔ) 12
1．1 HTML簡(jiǎn)介 13
1．2 HTML文件的編寫(xiě)方法 13
1．2．1 課堂案例——使用記事本編寫(xiě)HTML文件 13
1．2．2 課堂案例——使用Dreamweaver編寫(xiě)HTML文件 14
1．3 新增的主體結(jié)構(gòu)元素 15
1．3．1 課堂案例——使用article元素 15
1．3．2 課堂案例——使用section元素 16
1．3．3 課堂案例——使用nav元素 17
1．3．4 課堂案例——使用aside元素 19
1．4 新增的非主體結(jié)構(gòu)元素 19
1．4．1 課堂案例——使用header元素 19
1．4．2 課堂案例——使用hgroup元素 20
1．4．3 課堂案例——使用footer元素 21
1．4．4 課堂案例——使用address元素 22
1．5 本章小結(jié) 23
1．6 課后習(xí)題 23
第2章 HTML基本標(biāo)記 24
2．1 HTML頁(yè)面主體常用設(shè)置 25
2．1．1 課堂案例——定義網(wǎng)頁(yè)背景色bgcolor 25
2．1．2 課堂案例——設(shè)置背景圖片background 26
2．1．3 課堂案例——設(shè)置文字顏色text 27
2．1．4 課堂案例——設(shè)置鏈接文字屬性 28
2．1．5 課堂案例——設(shè)置頁(yè)面邊距 30
2．2 頁(yè)面頭部標(biāo)記 31
2．3 頁(yè)面標(biāo)題標(biāo)記 31
2．4 元信息標(biāo)記 32
2．4．1 設(shè)置頁(yè)面關(guān)鍵字 32
2．4．2 設(shè)置頁(yè)面說(shuō)明 33
2．4．3 定義編輯工具 33
2．4．4 定義頁(yè)面的作者信息 34
2．4．5 定義網(wǎng)頁(yè)文字及語(yǔ)言 34
2．4．6 課堂案例——定義頁(yè)面的跳轉(zhuǎn) 35
2．5 標(biāo)題字 36
2．6 段落標(biāo)記 37
2．6．1 課堂案例——使用段落標(biāo)記 37
2．6．2 課堂案例——使用換行標(biāo)記
38
2．6．3 課堂案例——不換行標(biāo)記 38
2．7 水平線 39
2．8 課堂練習(xí)——?jiǎng)?chuàng)建基本的HTML文件 40
2．9 本章小結(jié) 41
2．10 課后習(xí)題 41
第3章 使用圖像和多媒體元素 42
3．1 網(wǎng)頁(yè)中常見(jiàn)的圖像格式 43
3．2 插入圖像并設(shè)置圖像屬性 43
3．2．1 圖像標(biāo)記 43
3．2．2 課堂案例——設(shè)置圖像高度height 45
3．2．3 課堂案例——設(shè)置圖像寬度width 45
3．2．4 課堂案例——設(shè)置圖像的替代文字alt 46
3．3 添加多媒體文件 47
3．4 添加音樂(lè) 48
3．4．1 標(biāo)記 48
3．4．2 課堂案例——給網(wǎng)頁(yè)添加音樂(lè)播放器 48
3．5 課堂練習(xí) 49
3．5．1 課堂練習(xí)1——?jiǎng)?chuàng)建多媒體網(wǎng)頁(yè) 49
3．5．2 課堂練習(xí)2——?jiǎng)?chuàng)建圖文混合排版網(wǎng)頁(yè) 50
3．6 本章小結(jié) 51
3．7 課后習(xí)題 51
第4章 使用表格 52
4．1 創(chuàng)建表格 53
4．1．1 表格的基本構(gòu)成table、tr、td 53
4．1．2 設(shè)置表格的標(biāo)題caption 54
4．1．3 表頭th 55
4．2 表格基本屬性 56
4．2．1 課堂案例——表格寬度width 57
4．2．2 課堂案例——表格邊框?qū)挾萣order 58
4．2．3 課堂案例——內(nèi)框?qū)挾萩ellspacing 59
4．2．4 課堂案例——表格內(nèi)文字與邊框間距cellpadding 59
4．3 表格的行屬性 60
4．3．1 行背景bgcolor、background 60
4．3．2 行文字的水平對(duì)齊方式align 62
4．3．3 行文字的垂直對(duì)齊方式valign 63
4．4 單元格屬性 63
4．4．1 水平跨度colspan 64
4．4．2 垂直跨度rowspan 65
4．4．3 對(duì)齊方式align、valign 66
4．5 表格的結(jié)構(gòu) 67
4．5．1 表格的表頭標(biāo)記 67
4．5．2 表格的表主體標(biāo)記 68
4．5．3 表格的表尾標(biāo)記 69
4．6 課堂練習(xí)——使用表格排版網(wǎng)頁(yè) 71
4．7 本章小結(jié) 74
4．8 課后習(xí)題 74
第5章 HTML5開(kāi)發(fā)實(shí)戰(zhàn) 75
5．1 HTML5 視頻video 76
5．1．1 標(biāo)記簡(jiǎn)介 76
5．1．2 課堂案例——在網(wǎng)頁(yè)中添加視頻文件 77
5．1．3 課堂案例——鏈接不同的視頻文件 77
5．2 HTML5 音頻audio 78
5．2．1 標(biāo)記簡(jiǎn)介 78
5．2．2 課堂案例——隱藏audio播放器 79
5．2．3 課堂案例——使用標(biāo)記的事件 80
5．3 HTML5 地理定位 81
5．3．1 地理定位方法 81
5．3．2 課堂案例——處理拒絕和錯(cuò)誤 82
5．3．3 課堂案例——在地圖上顯示用戶的位置 83
5．4 HTML5 畫(huà)布canvas 84
5．4．1 標(biāo)記 84
5．4．2 課堂案例——繪制直線 85
5．4．3 課堂案例——線性漸變 86
5．4．4 課堂案例——徑向漸變 87
5．5 HTML5 SVG 88
5．5．1 SVG簡(jiǎn)介 89
5．5．2 課堂案例——繪制各種圖形 89
5．5．3 課堂案例——文本與圖像 92
5．5．4 課堂案例——設(shè)置描邊效果 92
5．5．5 課堂案例——?jiǎng)?chuàng)建動(dòng)畫(huà) 93
5．6 課堂練習(xí) 94
5．6．1 課堂練習(xí)1——繪制橢圓 95
5．6．2 課堂練習(xí)2——繪制精彩圖形 96
5．7 本章小結(jié) 97
5．8 課后習(xí)題 97
第6章 設(shè)計(jì)特效文字樣式 98
6．1 認(rèn)識(shí)CSS 99
6．2 使用CSS 99
6．2．1 CSS的基本語(yǔ)法 99
6．2．2 添加CSS的方法 100
6．3 設(shè)置文本樣式 101
6．3．1 課堂案例——設(shè)置字體font-family 101
6．3．2 課堂案例——設(shè)置字號(hào)font-size 102
6．3．3 課堂案例——設(shè)置字體風(fēng)格font-style 103
6．3．4 課堂案例——設(shè)置加粗字體font-weight 104
6．3．5 課堂案例——設(shè)置小寫(xiě)字母轉(zhuǎn)為大寫(xiě)font-variant 105
6．4 設(shè)置段落格式 106
6．4．1 課堂案例——設(shè)置單詞間隔word-spacing 106
6．4．2 課堂案例——設(shè)置字符間隔letter-spacing 107
6．4．3 課堂案例——設(shè)置文字修飾text-decoration 108
6．4．4 課堂案例——設(shè)置垂直對(duì)齊方式vertical-align 109
6．4．5 課堂案例——設(shè)置文本轉(zhuǎn)換text-transform 110
6．4．6 課堂案例——設(shè)置水平對(duì)齊方式text-align 112
6．4．7 課堂案例——設(shè)置文本縮進(jìn)text-indent 113
6．4．8 課堂案例——設(shè)置文本行高line-height 114
6．4．9 課堂案例——設(shè)置處理空白white-space 114
6．4．10 文本反排unicode-bidi、direction 115
6．5 課堂練習(xí)——用CSS排版網(wǎng)頁(yè)文字 116
6．6 本章小結(jié) 118
6．7 課后習(xí)題 118
第7章 設(shè)計(jì)圖像和背景樣式 119
7．1 設(shè)置網(wǎng)頁(yè)的背景 120
7．1．1 課堂案例——使用background-color設(shè)置背景顏色 120
7．1．2 課堂案例——使用background-image設(shè)置背景圖像 121
7．2 設(shè)置背景圖像樣式 121
7．2．1 課堂案例——使用background-repeat設(shè)置背景平鋪 122
7．2．2 課堂案例——使用background-attachment設(shè)置固定
背景 123
7．2．3 課堂案例——使用background-position設(shè)置背景位置 124
7．3 應(yīng)用CSS濾鏡設(shè)計(jì)圖像特效 126
7．3．1 不透明度alpha 126
7．3．2 動(dòng)感模糊blur 128
7．3．3 陰影效果dropShadow 129
7．3．4 灰度處理gray 130
7．3．5 反相invert 131
7．4 課堂練習(xí) 132
7．4．1 課堂練習(xí)1——文字與圖片上下垂直居中 132
7．4．2 課堂練習(xí)2——CSS實(shí)現(xiàn)背景半透明效果 133
7．5 本章小結(jié) 135
7．6 課后習(xí)題 135
第8章 使用CSS設(shè)計(jì)表單和表格樣式 136
8．1 表單form 137
8．1．1 程序提交action 137
8．1．2 表單名稱(chēng)name 137
8．1．3 傳送方法method 138
8．1．4 編碼方式enctype 138
8．1．5 目標(biāo)顯示方式target 139
8．2 插入表單對(duì)象 140
8．2．1 課堂案例——插入文字字段text 140
8．2．2 課堂案例——插入密碼域password 141
8．2．3 課堂案例——插入單選按鈕radio 142
8．2．4 課堂案例——插入復(fù)選框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 課堂案例——插入列表項(xiàng) 149
8．4 設(shè)計(jì)表格樣式 150
8．4．1 設(shè)置表格陰影 151
8．4．2 設(shè)置表格的漸變背景 152
8．5 課堂練習(xí) 153
8．5．1 課堂練習(xí)1——設(shè)置輸入文本的樣式 153
8．5．2 課堂練習(xí)2——鼠標(biāo)指針經(jīng)過(guò)時(shí)改變表格行的顏色 153
8．5．3 課堂練習(xí)3——用虛線美化表格的邊框 154
8．6 本章小結(jié) 155
8．7 課后習(xí)題 155
第9章 使用鏈接與列表設(shè)計(jì)網(wǎng)站導(dǎo)航 156
9．1 鏈接樣式設(shè)置基礎(chǔ) 157
9．1．1 課堂案例——設(shè)置鼠標(biāo)指針屬性cursor 157
9．1．2 課堂案例——設(shè)置下畫(huà)線樣式text-decoration 158
9．1．3 課堂案例——設(shè)置未訪問(wèn)過(guò)的超鏈接a：link 159
9．1．4 課堂案例——設(shè)置鼠標(biāo)指針懸停時(shí)狀態(tài)a：hover 160
9．1．5 課堂案例——設(shè)置已訪問(wèn)超鏈接樣式a：visited 160
9．1．6 課堂案例——設(shè)置超鏈接的激活樣式a：active 161
9．2 有序列表 162
9．2．1 課堂案例——設(shè)置有序列表標(biāo)記 162
9．2．2 課堂案例——設(shè)置有序列表的序號(hào)類(lèi)型type 163
9．2．3 課堂案例——設(shè)置有序列表的起始數(shù)值start 164
9．3 無(wú)序列表 165
9．3．1 課堂案例——設(shè)置無(wú)序列表標(biāo)記 165
9．3．2 課堂案例——設(shè)置無(wú)序列表的類(lèi)型type 166
9．3．3 課堂案例——設(shè)置目錄列表標(biāo)記 167
9．3．4 課堂案例——設(shè)置定義列表標(biāo)記 168
9．3．5 課堂案例——設(shè)置菜單列表標(biāo)記 169
9．4 課堂練習(xí) 170
9．4．1 課堂練習(xí)1——翻轉(zhuǎn)式超鏈接 170
9．4．2 課堂練習(xí)2——設(shè)計(jì)導(dǎo)航菜單 172
9．5 本章小結(jié) 173
9．6 課后習(xí)題 173
第10章 移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)CSS3 174
10．1 邊框 175
10．1．1 課堂案例——設(shè)置圓角邊框 border-radius 175
10．1．2 課堂案例——設(shè)置邊框圖片border-image 178
10．1．3 課堂案例——設(shè)置邊框陰影box-shadow 180
10．2 背景 181
10．2．1 課堂案例——設(shè)置背景圖片尺寸background-size 181
10．2．2 課堂案例——設(shè)置背景圖片定位區(qū)域background-
origin 182
10．2．3 課堂案例——設(shè)置背景裁剪區(qū)域background-clip 183
10．3 文本 184
10．3．1 課堂案例——設(shè)置文本陰影text-shadow 184
10．3．2 課堂案例——設(shè)置強(qiáng)制換行word-wrap 185
10．3．3 課堂案例——設(shè)置文本溢出text-overf low 186
10．3．4 課堂案例——設(shè)置文字描邊text-stroke 187
10．3．5 課堂案例——設(shè)置文本填充顏色text-fill-color 188
10．4 多列 189
10．4．1 課堂案例——?jiǎng)?chuàng)建多列column-count 189
10．4．2 課堂案例——設(shè)置列的寬度column-width 190
10．4．3 課堂案例——設(shè)置列的間隔column-gap 191
10．4．4 課堂案例——設(shè)置列的規(guī)則column-rule 193
10．5 轉(zhuǎn)換變形 194
10．5．1 課堂案例——設(shè)置移動(dòng)translate() 194
10．5．2 課堂案例——設(shè)置旋轉(zhuǎn)rotate() 195
10．5．3 課堂案例——設(shè)置縮放scale() 196
10．5．4 課堂案例——設(shè)置扭曲skew() 197
10．5．5 課堂案例——設(shè)置矩陣matrix() 198
10．6 過(guò)渡 199
10．7 課堂練習(xí) 200
10．7．1 課堂練習(xí)1——鼠標(biāo)指針?lè)派先ワ@示全部?jī)?nèi)容 200
10．7．2 課堂練習(xí)2——美觀的圖片排列 201
10．8 本章小結(jié) 202
10．9 課后習(xí)題 202
第11章 CSS盒子模型與布局入門(mén) 203
11．1 認(rèn)識(shí)盒子模型 204
11．2 外邊距 204
11．2．1 課堂案例——設(shè)置上外邊距margin-top 205
11．2．2 課堂案例——設(shè)置右外邊距margin-right 205
11．2．3 課堂案例——設(shè)置下外邊距margin-bottom 206
11．2．4 課堂案例——設(shè)置左外邊距margin-left 207
11．3 內(nèi)邊距 208
11．3．1 課堂案例——設(shè)置上內(nèi)邊距padding-top 208
11．3．2 課堂案例——設(shè)置右內(nèi)邊距padding-right 209
11．3．3 課堂案例——設(shè)置下內(nèi)邊距padding-bottom 210
11．3．4 課堂案例——設(shè)置左內(nèi)邊距padding-left 210
11．4 邊框 211
11．4．1 課堂案例——設(shè)置邊框樣式border-style 211
11．4．2 課堂案例——設(shè)置邊框?qū)挾萣order-width 213
11．4．3 課堂案例——設(shè)置邊框顏色border-color 215
11．4．4 課堂案例——設(shè)置邊框?qū)傩詁order 216
11．5 課堂練習(xí)——CSS布局實(shí)例 217
11．6 本章小結(jié) 219
11．7 課后習(xí)題 219
第12章 CSS定位布局方法 220
12．1 定位布局 221
12．1．1 課堂案例——設(shè)置絕對(duì)定位absolute 221
12．1．2 課堂案例——設(shè)置固定定位fixed 222
12．1．3 課堂案例——設(shè)置相對(duì)定位relative 223
12．2 浮動(dòng)定位 224
12．2．1 課堂案例——設(shè)置float屬性 224
12．2．2 課堂案例——設(shè)置浮動(dòng)布局的新問(wèn)題 225
12．2．3 課堂案例——設(shè)置清除浮動(dòng)clear 226
12．3 定位層疊 227
12．3．1 課堂案例——設(shè)置層疊順序 227
12．3．2 課堂案例——設(shè)置簡(jiǎn)單嵌套元素中的層疊定位 228
12．3．3 課堂案例——?jiǎng)?chuàng)建包含子元素的復(fù)雜層疊定位 229
12．4 課堂練習(xí) 230
12．4．1 課堂練習(xí)1——?jiǎng)?chuàng)建一列固定寬度 230
12．4．2 課堂練習(xí)2——?jiǎng)?chuàng)建一列自適應(yīng) 231
12．4．3 課堂練習(xí)3——?jiǎng)?chuàng)建兩列固定寬度 231
12．4．4 課堂練習(xí)4——?jiǎng)?chuàng)建兩列寬度自適應(yīng) 232
12．4．5 課堂練習(xí)5——?jiǎng)?chuàng)建右列寬度自適應(yīng) 233
12．4．6 課堂練習(xí)6——?jiǎng)?chuàng)建三列浮動(dòng)中間寬度自適應(yīng) 233
12．5 本章小結(jié) 235
12．6 課后習(xí)題 235
第13章 JavaScript語(yǔ)法基礎(chǔ) 236
13．1 JavaScript概述 237
13．1．1 JavaScript簡(jiǎn)介 237
13．1．2 JavaScript放置位置 237
13．2 JavaScript基本語(yǔ)法 238
13．2．1 變量 238
13．2．2 數(shù)據(jù)類(lèi)型 239
13．2．3 表達(dá)式和運(yùn)算符 239
13．2．4 函數(shù) 240
13．2．5 注釋 241
13．3 JavaScript程序語(yǔ)句 241
13．3．1 課堂案例——使用if語(yǔ)句 241
13．3．2 課堂案例——使用for語(yǔ)句 242
13．3．3 課堂案例——使用switch語(yǔ)句 243
13．3．4 while循環(huán) 244
13．3．5 break語(yǔ)句 245
13．3．6 continue語(yǔ)句 246
13．4 課堂練習(xí)——禁止鼠標(biāo)右擊 247
13．5 本章小結(jié) 248
13．6 課后習(xí)題 248
第14章 JavaScript中的事件 249
14．1 事件驅(qū)動(dòng)與事件處理 250
14．1．1 事件與事件驅(qū)動(dòng) 250
14．1．2 事件與處理代碼關(guān)聯(lián) 251
14．1．3 調(diào)用函數(shù)的事件 252
14．1．4 調(diào)用代碼的事件 253
14．1．5 設(shè)置對(duì)象事件的方法 254
14．2 JavaScript常見(jiàn)的事件 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 課堂練習(xí)——將事件應(yīng)用于按鈕中 262
14．4 本章小結(jié) 263
14．5 課后習(xí)題 263
第15章 JavaScript中的函數(shù)和對(duì)象 264
15．1 函數(shù)概述 265
15．2 函數(shù)的定義 265
15．2．1 函數(shù)的普通定義方式 265
15．2．2 函數(shù)的變量定義方式 266
15．2．3 函數(shù)的指針調(diào)用方式 267
15．3 JavaScript對(duì)象的聲明和引用 268
15．3．1 聲明和實(shí)例化 268
15．3．2 對(duì)象的引用 270
15．4 瀏覽器對(duì)象 271
15．4．1 課堂實(shí)例——利用navigator對(duì)象獲取瀏覽器對(duì)象的屬性值 271
15．4．2 課堂實(shí)例——利用window對(duì)象控制顯示窗口的大小 272
15．4．3 課堂實(shí)例——利用location對(duì)象獲取當(dāng)前頁(yè)面的URL 273
15．4．4 課堂實(shí)例——用history對(duì)象制作前進(jìn)到上一頁(yè)和后退到下一頁(yè) 274
15．4．5 課堂實(shí)例——用document對(duì)象來(lái)顯示文檔的最后修改時(shí)間 275
15．5 課堂練習(xí)——定時(shí)關(guān)閉網(wǎng)頁(yè)窗口 276
15．6 本章小結(jié) 277
15．7 課后習(xí)題 277
第16章 綜合案例：公司宣傳網(wǎng)站的布局 278
16．1 企業(yè)網(wǎng)站設(shè)計(jì)分析 279
16．1．1 企業(yè)網(wǎng)站內(nèi)容設(shè)計(jì) 279
16．1．2 排版構(gòu)架 279
16．2 各部分設(shè)計(jì) 280
16．2．1 Logo與頂部導(dǎo)航 280
16．2．2 左側(cè)導(dǎo)航 282
16．2．3 主體內(nèi)容 283
16．2．4 制作“搜索”部分 285
16．2．5 制作“公司新聞動(dòng)態(tài)”部分 286
16．2．6 制作“聯(lián)系我們”部分 287
16．2．7 底部版權(quán)信息 287
16．3 本章小結(jié) 288
16．4 課后習(xí)題 288