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

《HTML +CSS+JavaScript網頁製作實用教程》是2020年人民郵電出版社出版的圖書，作者是趙良濤。

基本介紹

• 中文名：HTML +CSS+JavaScript網頁製作實用教程
• 作者：趙良濤
• 出版社：人民郵電出版社
• ISBN：9787115536648

內容簡介

本書全面介紹了使用HTML、CSS、JavaScript進行網頁設計和製作的各方面內容和技巧。全書共16章，主要內容包括HTML5入門基礎、HTML基本標記、使用圖像和多媒體元素、使用表格、HTML5開發實戰、設計特效文字樣式、設計圖像和背景樣式、使用CSS設計表單和表格樣式、使用連結與列表設計網站導航、移動網頁設計基礎CSS3、CSS盒子模型與布局入門、CSS定位布局方法、JavaScript語法基礎、JavaScript中的事件、JavaScript中的函式和對象、公司宣傳網站布局綜合實例。

本書隨書提供課堂案例、課堂練習、課後習題的源檔案，以及線上教學視頻。同時還為老師提供教學PPT課件、教案、教學大綱等資源，便於老師課堂教學。

本書語言簡潔、內容豐富，適合網頁設計與製作人員、網站建設與開發人員、大中專院校相關專業師生、網頁製作培訓班學員、個人網站愛好者與自學讀者閱讀。

圖書目錄

第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