《HTML CSS JavaScript網頁製作從入門到精通（第3版）》是2019年12月人民郵電出版社出版的圖書，作者是劉西傑、張婷。
基本介紹
- 中文名：HTML CSS JavaScript網頁製作從入門到精通（第3版）
- 作者：劉西傑、張婷
- 出版時間：2019年12月
- 出版社：人民郵電出版社
- 頁數：437 頁
- ISBN：9787115425058
- 定價：49 元
- 開本：16 開
- 裝幀：平裝
內容簡介,圖書目錄,
內容簡介
全書共分為19章和4個附錄，重點介紹使用HTML進行網頁製作的方方面面，同時講解了目前流行的Web標準與CSS網頁布局實例，以及基於JavaScript語言的網頁特效製作，還介紹了新的HTML5和CSS3知識。為了便於讀者學習，附錄中匯集了經過作者精心整理的網頁製作技巧60多例。
本書語言簡潔、內容豐富，適合網頁設計與製作人員、網站建設與開發人員、大中專院校相關專業師生、網頁製作培訓班學員、個人網站愛好者閱讀。
圖書目錄
第01章 HTML基礎
1.1 HTML的基本概念 2
1.1.1 HTML簡介2
1.1.2 HTML檔案的基本結構.2
1.1.3 認識HTML標記.2
1.2 HTML檔案的編寫方法 3
1.2.1 使用記事本手工編寫HTML.3
1.2.2 使用Dreamweaver編寫HTML檔案4
1.3 使用瀏覽器瀏覽HTML檔案 4
1.3.1 查看頁面效果4
1.3.2 查看源檔案.5
1.4 練習題 5
第02章 HTML基本標記
2.1 HTML頭部標記head 8
2.2 標題標記title. 8
2.3 元信息標記meta 8
2.3.1 設定頁面關鍵字.9
2.3.2 設定頁面說明.9
2.3.3 定義編輯工具. 10
2.3.4 設定作者信息. 10
2.3.5 設定網頁文字及語言 10
2.3.6 設定網頁的定時跳轉 11
2.4 頁面注釋標記.11
2.5 標題字 12
2.5.1 標題字標記h. 12
2.5.2 標題字對齊屬性align. 13
2.6 段落標記. 14
2.6.1 段落標記p 14
2.6.2 換行標記br. 15
2.6.3 不換行標記nobr. 16
2.7 水平線 16
2.8 其他標記. 17
2.8.1 插入空格 17
2.8.2 插入特殊符號. 18
2.9 練習題 19
第03章 建立超連結
3.1 超級連結的基本知識. 21
3.1.1 絕對路徑. 21
3.1.2 相對路徑 21
3.2 內部連結. 21
3.2.1 認識內部連結 21
3.2.2 連結的目標視窗22
3.3.1 建立錨點23
3.3 錨點連結. 23
3.3.2 連結同一頁面中的錨點25
3.3.3 連結到其他頁面中的錨點.26
3.4 外部連結. 27
3.4.1 連結到外部網站.28
3.4.2 連結到E-mail28
3.4.3 連結到FTP29
3.4.4 連結到Telnet.30
3.4.5 下載檔案30
3.5 練習題 32
第04章 使用圖像
4.1 圖像的格式 34
4.2 插入圖像. 34
4.2.1 插入圖像標記img34
4.2.2 圖像的源檔案src35
4.2.3 圖像的提示文字alt36
4.2.4 圖像的寬度和高度width、height36
4.3 圖像的超連結. 37
4.3.1 圖像的超連結37
4.3.2 圖像熱區連結.38
4.4 練習題 41
第05章 使用列表
5.1 認識列表標記 43
5.2 有序列表. 43
5.2.1 有序列表ol43
5.2.2 有序列表的序號類型type.44
5.2.3 有序列表的起始數值start.45
5.3 無序列表. 46
5.3.1 無序列表標記
.47
5.3.2 無序列表的類型type.48
5.3.3 定義列表標記
49
5.3.4 選單列表標記
50
5.4 練習題 51
第06章 使用表格
6.1 創建表格. 53
6.1.1 表格的基本構成table、tr、td.53
6.1.2 設定表格的標題caption.54
6.1.3 表頭th55
6.2 表格基本屬性. 576.2.1 表格寬度width57
6.2.2 表格高度height58
6.2.3 表格對齊方式align59
6.3 表格的框線 61
6.3.1 表格框線寬度border. 61
6.3.2 表格框線顏色bordercolor.62
6.3.3 內框寬度cellspacing62
6.3.4 表格內文字與框線間距cellpadding63
6.4 表格背景. 64
6.4.1 表格背景顏色bgcolor64
6.4.2 表格背景圖像.65
6.5 表格的行屬性. 66
6.5.1 高度控制height66
6.5.2 框線顏色bordercolor67
6.5.3 行背景bgcolor、background.68
6.5.4 行文字的水平對齊方式align.69
6.5.5 行文字的垂直對齊方式valign.70
6.6 單元格屬性 71
6.6.1 單元格大小width、height 71
6.6.2 水平跨度colspan.72
6.6.3 垂直跨度rowspan73
6.6.4 對齊方式align、valign74
6.6.5 單元格的背景色75
6.6.6 單元格的框線顏色bordercolor.76
6.6.7 單元格的亮框線bordercolorlight.77
6.6.8 單元格的暗框線bordercolordark.78
6.6.9 單元格的背景圖像background79
6.7 表格的結構 81
6.7.1 表格的表首標記. 81
6.7.2 表格的表主體標記82
6.7.3 表格的表尾標記.84
6.8 練習題 85
第07章 使用表單
7.1 表單標記form 87
7.1.1 提交表單action.87
7.1.2 表單名稱name.87
7.1.3 傳送方法method88
7.1.4 編碼方式enctype88
7.1.5 目標顯示方式target89
7.2 插入表單對象. 89
7.2.1 文字欄位text89
7.2.2 密碼域password90
7.2.3 單選按鈕radio92
7.2.4 複選框checkbox92
7.2.5 普通按鈕button93
7.2.6 提交按鈕submit.94
7.2.7 重置按鈕reset95
7.2.8 圖像域image.96
7.2.9 隱藏域hidden97
7.2.10 檔案域file.98
7.3 選單和列表 98
7.3.1 下拉選單99
7.3.2 列表項. 100
7.4 文本域標記textarea 101
7.5 id標記. 101
7.6 創建表單實例. 102
7.7 練習題 104
第08章 添加多媒體
8.1 設定滾動效果 106
8.1.1 滾動標記marquee 106
8.1.2 滾動方向direction. 106
8.1.3 滾動方式behavior 108
8.1.4 滾動速度scrollamount 108
8.1.5 滾動延遲scrolldelay. 109
8.1.6 滾動循環loop. 110
8.1.7 滾動範圍width、height 111
8.1.8 滾動背景顏色bgcolor 112
8.1.9 空白空間hspace、vspace 113
8.2 插入多媒體檔案. 114
8.2.1 插入Flash動畫. 114
8.2.2 插入音頻和視頻檔案 115
8.3 練習題. 116
第09章 HTML 5入門基礎
9.1 認識HTML5. 118
9.2 HTML5與HTML4的區別 119
9.2.1 HTML5的語法變化. 119
9.2.2 HTML 5中的標記方法. 119
9.2.3 HTML 5語法中的3個要點. 120
9.2.4 HTML5與HTML4在搜尋引擎最佳化的
對比 120
9.3 HTML5新增的元素和廢除的元素. 121
9.3.1 新增的結構元素. 121
9.3.2 新增塊級元素. 123
9.3.3 新增的行內的語義元素 125
9.3.4 新增的嵌入多媒體元素與互動性元素 128
9.3.5 新增的input元素的類型. 129
9.3.6 廢除的元素. 131
9.4 新增的屬性和廢除的屬性 131
9.4.1 新增的屬性. 131
9.4.2 廢除的屬性. 132
9.5 練習題 134
第 10章 HTML5的結構
10.1 新增的主體結構元素 136
10.1.1 article元素 136
10.1.2 section元素 137
10.1.3 nav元素. 138
10.1.4 aside元素 141
10.2 新增的非主體結構元素. 141
10.2.1 header元素 141
10.2.2 hgroup元素. 142
10.2.3 footer元素. 143
10.2.4 address元素 144
10.3 練習題 145
第 11章 HTML5開發實戰
11.1 HTML5視頻video 148
11.1.1 video標籤概述. 148
11.1.2 在網頁中添加視頻檔案 14811.1.3 連結不同的視頻檔案. 149
11.2 HTML5音頻Audio 150
11.2.1 Audio元素簡介 150
11.2.2 隱藏audio播放器. 150
11.2.3 使用audio元素的事件 151
11.3 HTML5地理定位. 153
11.3.1 地理定位方法. 153
11.3.2 處理拒絕和錯誤. 153
11.3.3 在地圖上顯示你的位置. 155
11.4 HTML5畫布canvas. 155
11.4.1 canvas元素 156
11.4.2 基本的繪製操作. 157
11.4.3 線性漸變. 158
11.4.4 徑向漸變. 159
11.4.5 繪製精美時鐘 160
11.5 HTML5 SVG 163
11.5.1 SVG概述 163
11.5.2 圖形繪製. 163
11.5.3 文本與圖像. 166
11.5.4 筆畫與填充. 166
11.5.5 動畫. 167
11.6 練習題. 169
第 12章 使用CSS樣式表
12.1 認識CSS 171
12.2 使用CSS. 171
12.2.1 CSS的基本語法 171
12.2.2 添加CSS的方法 171
12.3 字型屬性. 173
12.3.1 字型font-family 173
12.3.2 字號font-size 174
12.3.3 字型風格font-style. 175
12.3.4 加粗字型font-weight 176
12.3.5 小寫字母轉為大寫font-variant 177
12.3.6 字型複合屬性 178
12.4 顏色和背景屬性. 179
12.4.1 顏色屬性color. 179
12.4.2 背景顏色background-color 180
12.4.3 背景圖像background-image 181
12.4.4 背景重複background-repeat. 182
12.4.5 背景附屬檔案backgroundattachment
183
12.4.6 背景位置background-position. 184
12.4.7 背景複合屬性background. 186
12.5 段落屬性. 187
12.5.1 單詞間隔word-spacing 187
12.5.2 字元間隔letter-spacing 188
12.5.3 文字修飾text-decoration. 189
12.5.4 垂直對齊方式vertical-align. 190
12.5.5 文本轉換text-transform. 191
12.5.6 水平對齊方式text-align 192
12.5.7 文本縮進text-indent. 193
12.5.8 文本行高line-height. 194
12.5.9 處理空白white-space 195
12.5.10 文本反排unicode-bidi、direction. 196
12.6 外邊距與內邊距屬性. 198
12.6.1 上邊距margin-top 198
12.6.2 其他邊距margin-bottom、
margin-left、margin-right . 199
12.6.3 外邊距複合屬性margin200
12.6.4 **內邊距padding-top. 201
12.6.5 其他內邊距padding-bottom、
padding-right、padding-left 202
12.6.6 內邊距複合屬性padding203
12.7 框線屬性. 204
12.7.1 框線樣式border-style.204
12.7.2 框線寬度border-width.206
12.7.3 框線顏色border-color207
12.7.4 框線屬性border208
12.8 定位屬性. 209
12.8.1 定位方式position209
12.8.2 元素位置top、right、bottom、left.210
12.8.3 層疊順序z-index 211
12.8.4 浮動屬性float. 212
12.8.5 清除屬性clear 213
12.8.6 可視區域clip. 214
12.8.7 層的寬度和高度width、height. 215
12.8.8 超出範圍overflow. 216
12.8.9 可見屬性visibility 217
12.9 列表屬性. 218
12.9.1 列表符號list-style-type 218
12.9.2 圖像符號list-style-image.220
12.9.3 列表縮進list-style-position 221
12.9.4 列表複合屬性list-style222
12.10 游標屬性cursor 223
12.11 濾鏡屬性 224
12.11.1 不透明度alpha.224
12.11.2 動感模糊blur.226
12.11.3 對顏色進行透明處理chroma.227
12.11.4 陰影效果dropShadow.228
12.11.5 對象翻轉flipH、flipV229
12.11.6 發光效果glow230
12.11.7 灰度處理gray 231
12.11.8 反相invert.232
12.11.9 X光片效果xray233
12.11.10 遮罩效果mask.234
12.11.11 波形濾鏡wave.235
12.12 練習題. 236
第 13章 Web標準與CSS網頁布局實例
13.1 Web標準與CSS布局. 239
13.1.1 什麼是Web標準239
13.1.2 CSS布局的優勢239
13.2 DIV+CSS布局網頁基礎 240
13.2.1 認識DIV.240
13.2.2 一列固定寬度240
13.2.3 一列自適應. 241
13.2.4 兩列固定寬度242
13.2.5 兩列寬度自適應.243
13.2.6 兩列右列寬度自適應244
13.3 使用CSS設計網站導航欄. 245
13.3.1 實現背景變換的導航選單24513.3.2 利用CSS製作橫嚮導航247
13.4 使用CSS設計表單樣式. 248
13.4.1 改變按鈕的背景顏色和文字顏色248
13.4.2 設計文本框的樣式.249
13.4.3 設計文本框中的文字樣式250
13.5 字型及段落樣式設計. 251
13.5.1 利用CSS控制字型大小和行距. 251
13.5.2 製作光暈文字效果. 251
13.6 使用CSS設計圖片樣式. 252
13.6.1 滑鼠指針移上時圖片漸變的效果252
13.6.2 設計不重複出現的背景.253
13.7 使用CSS控制連結樣式. 254
13.7.1 使用CSS實現滑鼠指針形狀改變.254
13.7.2 滑鼠指針移到連結文字上時改變文字
大小或顏色.255
13.8 練習題 256
第 14章 移動網頁設計基礎CSS3
14.1 框線 258
14.1.1 圓角框線border-radius.258
14.1.2 框線圖片border-image 261
14.1.3 框線陰影box-shadow262
14.2 背景. 264
14.2.1 背景圖片尺寸background-size.264
14.2.2 背景圖片定位區域backgroundorigin
0.264
14.2.3 背景繪製區域background-clip266
14.3 文本. 268
14.3.1 文本陰影text-shadow268
14.3.2 強制換行word-wrap.268
14.3.3 文本溢出text-overflow.269
14.3.4 文字描邊text-stroke270
14.3.5 文本填充顏色text-fill-color. 271
14.4 多列 272
14.4.1 創建多列column-count272
14.4.2 列的寬度column-width273
14.4.3 列的間隔column-gap.274
14.4.4 列的規則column-rule.275
14.5 轉換 276
14.5.1 移動translate( ).276
14.5.2 旋轉rotate( ).277
14.5.3 縮放scale( )278
14.5.4 扭曲skew( )279
14.5.5 矩陣matrix( )280
14.6 過渡. 280
14.7 動畫. 282
14.7.1 @keyframes規則聲明動畫282
14.7.2 animation使用動畫.283
14.8 用戶界面 285
14.8.1 Box Sizing.285
14.8.2 resize.286
14.8.3 Outline Offset.287
14.9 實例套用. 288
14.9.1 滑鼠放上去顯示全部內容288
14.9.2 美觀的圖片排列.289
14.10 練習題. 290
第 15章 JavaScript腳本基礎
15.1 JavaScript簡介. 293
15.2 JavaScript基本語法. 294
15.2.1 常量和變數.294
15.2.2 表達式和運算符.295
15.2.3 基本語句296
15.2.4 函式.299
15.3 JavaScript的事件 299
15.3.1 onClick事件.299
15.3.2 onchange事件.300
15.3.3 onSelect事件. 301
15.3.4 onFocus事件.303
15.3.5 onLoad事件.304
15.3.6 onUnload事件.304
15.3.7 onBlur事件305
15.3.8 onMouseOver事件306
15.3.9 onMouseOut事件307
15.3.10 onDblClick事件308
15.3.11 其他常用事件. 310
15.4 瀏覽器的內部對象. 311
15.4.1 navigator對象 312
15.4.2 document對象. 312
15.4.3 windows對象. 314
15.4.4 location對象 315
15.4.5 history對象 316
15.5 練習題 316
第 16章 利用JavaScript製作網頁特效
16.1 時間特效 319
16.1.1 顯示當前時間. 319
16.1.2 顯示當前日期320
16.1.3 顯示網頁停留時間 321
16.1.4 製作***特效.322
16.2 圖像特效. 323
16.2.1 當滑鼠指針經過圖像時圖像震動效果.323
16.2.2 圖片閃爍效果324
16.2.3 自動切換圖像325
16.3 視窗特效. 326
16.3.1 全螢幕顯示視窗326
16.3.2 定時關閉視窗327
16.4 滑鼠特效. 328
16.4.1 禁止滑鼠右擊328
16.4.2 跟隨滑鼠指針移動的圖像328
16.4.3 跟隨滑鼠指針的滾動字幕330
16.5 其他特效. 332
16.5.1 設定為首頁和加入收藏夾332
16.5.2 瀏覽器狀態欄顯示信息.333
16.5.3 進入網站的口令設定333
16.6 練習題 334
第 17章 在Dreamweaver中編輯HTML
網頁
17.1 Dreamweaver的基本操作界面 337
17.2 在網頁中使用文本 337
17.2.1 插入文本.337
17.2.2 設定文本屬性33817.2.3 插入特殊字元340
17.2.4 插入水平線. 341
17.3 插入圖像. 342
17.3.1 在網頁中插入圖像343
17.3.2 設定圖像屬性343
17.3.3 使用圖像編輯器.345
17.3.4 插入滑鼠經過圖像.347
17.4 插入多媒體. 349
17.4.1 插入Flash349
17.4.2 打開瀏覽器視窗. 351
17.4.3 插入Java Applet352
17.5 設定連結. 354
17.5.1 創建文字連結354
17.5.2 創建圖像連結355
17.5.3 創建錨點連結356
17.6 布局網頁. 359
17.6.1 使用表格.359
17.6.2 使用DIV.362
17.7 使用表單. 363
17.7.1 插入表單.364
17.7.2 插入文本域.365
17.7.3 插入單選按鈕和複選框.367
17.7.4 插入選單和列表370
17.7.5 插入跳轉選單 371
17.7.6 插入按鈕372
17.8 使用CSS樣式表 374
17.8.1 CSS的基本概念374
17.8.2 建立標籤樣式374
17.8.3 建立類樣式.375
17.8.4 建立複合內容樣式.375
17.8.5 套用CSS固定字型大小376
17.9 使用行為. 377
17.9.1 行為的基本知識.377
17.9.2 使用行為製作特效.379
17.10 在網頁中添加腳本. 380
17.11 練習題. 382
第 18章 個人部落格網站布局
18.1 部落格網站概述 384
18.2 部落格網站主頁布局設計 384
18.3 部落格網站主頁具體製作過程. 385
18.3.1 導入外部CSS.385
18.3.2 製作網頁頭部分.386
18.3.3 製作頁面內容部分.389
18.3.4 製作頁面頁腳部分.398
18.4 練習題 399
第 19章 公司宣傳網站的布局
19.1 企業網站設計分析 401
19.1.1 企業網站內容設計 401
19.1.2 排版構架. 401
19.2 各部分設計. 402
19.2.1 Logo與頂部導航.402
19.2.2 左側導航404
19.2.3 主體內容406
19.2.4 製作搜尋部分408
19.2.5 製作公司新聞409
19.2.6 製作聯繫我們409
19.2.7 底部版權資訊409
19.3 練習題 410
附錄A HTML網頁製作技巧精講
技巧1 製作帶背景音樂的網頁 412
技巧2 設定每隔一定的時間自動刷新網頁. 412
技巧3 提高站點在搜尋引擎中被搜尋到的機會 412
技巧4 讓站點自動跳轉到另一頁 412
技巧5 避免自己的圖片被其他站點利用 412
技巧6 不用表格而準確地分隔圖片和文字. 412
技巧7 跳到頁面的頂部 412
技巧8 在一個站點的不同頁面播放同一個聲音檔案 412
技巧9 清除頁面中的框架結構. 412
技巧10 防止站點頁面被任意連結. 412
技巧11 為文字連結加上提示. 413
技巧12 刪除圖片連結的藍色框線. 413
技巧13 讓瀏覽器正確顯示word格式檔案. 413
技巧14 利用水平線製作垂直線 413
技巧15 正確選擇JPG和GIF圖片格式. 413
技巧16 正確使用分隔線 413
技巧17 去除頁面四周的空白. 413
技巧18 去除瀏覽器的滾動條. 413
附錄B CSS常用技巧精講
技巧1 去掉網頁超連結的下畫線. 415
技巧2 設定浮動背景. 415
技巧3 正確對齊文本. 415
技巧4 超連結訪問過後防止hover樣式出現問題 415
技巧5 解決list-style-image無法準確定位的問題 415
技巧6 讓文本垂直居中 416
技巧7 使一個層垂直居中於瀏覽器 416
技巧8 給部分內容加上框線 416
技巧9 利用CSS去掉下畫線. 416
技巧10 讓div橫向排列. 417
技巧11 巧妙設定滾動條顏色. 417
附錄C JavaScript特效製作精講
技巧1 添加連結提示. 419
技巧2 在網頁中加入最後修改日期 419
技巧3 實現圖片循環隱現的效果 419
技巧4 給圖像添加探照燈效果. 419
技巧5 打開一個新的瀏覽器視窗並設定視窗的屬性 420
技巧6 利用單擊來關閉瀏覽器視窗 421
技巧7 禁止保存網頁. 421
技巧8 製作網頁中雪花飄飄效果 421
技巧9 在狀態欄中顯示跑馬燈效果 423
技巧10 製作煙花效果. 423
技巧11 製作狀態欄數字時鐘. 425
技巧12 製作圍繞滑鼠指針旋轉的文本. 426
技巧13 製作跟隨滑鼠指針飄動的雙層時鐘 427
技巧14 實現每天不同時間顯示不同信息 430
技巧16 實現滑鼠指針移上時圖片加亮的效果. 431
技巧15 禁止滑鼠右鍵和左鍵對頁面的操作 431
技巧16 實現滑鼠指針移上的圖片加亮的效果 431
技巧17 讓網頁中跳出一個會說話的老人 431
技巧18 讓瀏覽者知道自己訪問網頁的次數 433
技巧19 禁止頁面**小化 434
技巧20 設定網頁由中間向外擴大變化. 434
附錄D Dreamweaver常用技巧精講
技巧1 在Dreamweaver中插入空格. 436
技巧2 在Dreamweaver中設定Flash動畫的背景透明 436
技巧3 在Dreamweaver中準確定位層 436
技巧4 把別人網頁上的背景音樂保存下來. 436
技巧5 使網頁在不同解析度下都全螢幕鋪開. 436
技巧6 在Dreamweaver中給水平線加顏色. 436
技巧7 在網頁中實現Flash的全螢幕播放 436
技巧8 怎么樣讓在800×600解析度下生成的網頁在1024×768解析度下居中顯示. 436
技巧9 清除網頁中不必要的HTML代碼. 436
技巧10 在網頁中添加E-mail連結並顯示預定的主題 436
技巧11 在網頁中添加電子郵件表單提交. 437
技巧12 防止別人把自己的網頁放在框架里 437
技巧13 巧妙實現兩個表格的並排. 437
