HTML+CSS+JavaScript網頁設計與布局實用教程（第3版）(微課版）

目    錄

第1章  網頁標記語言HTML入門基礎 1

1.1  HTML概述 1

1.2  HTML文件的構成 2

1.2.1  HTML文件結構 2

1.2.2  編寫HTML文件的註意事項 3

1.3  怎樣編寫HTML文件 4

1.3.1  使用記事本文件編寫頁面 4

1.3.2  使用Dreamweaver編寫HTML

頁面 5

1.4  網頁設計與開發的過程 6

1.4.1  明確網站定位 7

1.4.2  收集信息和素材 7

1.4.3  規劃欄目結構 8

1.4.4  設計頁面方案 9

1.4.5  制作頁面 9

1.4.6  實現後臺功能 10

1.4.7  網站的測試與發布 11

1.5  本章小結 12

1.6  練習題 12

第2章  HTML基本標記 13

2.1  HTML文檔主體標記 13

2.1.1  bgcolor屬性 13

2.1.2  background屬性 14

2.1.3  text屬性 15

2.1.4  設置鏈接文字屬性 16

2.1.5  設置頁面邊距 17

2.2  頭部標記 18

2.2.1  <title>標記 18

2.2.2  定義頁面關鍵字 19

2.2.3  定義頁面描述 19

2.2.4  定義編輯工具 20

2.2.5  定義作者信息 21

2.2.6  定義網頁字符集類型 21

2.2.7  定義網頁的定時跳轉 22

2.3  設置段落的格式 23

2.3.1  <p>標記 23

2.3.2  段落對齊屬性：align 24

2.3.3  <nobr>標記 25

2.3.4  <br>標記 25

2.4  水平線標記 26

2.4.1  <hr>標記 26

2.4.2  水平線寬度屬性：width 27

2.4.3  水平線顏色屬性：color 28

2.4.4  水平線對齊方式屬性：align 29

2.5  綜合實例——創建基本的HTML

文件 30

2.6  本章小結 32

2.7  練習題 33

第3章  網頁圖像和多媒體 34

3.1  網頁中常見的圖像格式 34

3.2  圖像標記及其屬性 35

3.2.1  <img>標記 35

3.2.2  height屬性 35

3.2.3  width屬性 36

3.2.4  border屬性 37

3.2.5  align屬性 38

3.3  添加音樂 39

3.3.1  <audio>標記 40

3.3.2  給網頁添加音樂播放器 40

3.4  添加視頻 41

3.4.1  <video>標記 41

3.4.2  給網頁添加視頻 42

3.5  綜合實例——創建圖文混合排版

網頁 43

3.6  本章小結 45

3.7  練習題 46

第4章  用表格排列網頁數據 47

4.1  表格屬性 47

4.1.1  表格的基本標記：<table>、

<tr>、<td> 47

4.1.2  表格寬度和高度：width、

height 48

4.1.3  表格標題：caption 49

4.1.4  表格的表頭：th 50

4.1.5  表格對齊方式：align 52

4.1.6  邊框寬度：border 53

4.1.7  表格邊框顏色：bordercolor 54

4.1.8  單元格間距：cellspacing 55

4.1.9  單元格邊距：cellpadding 56

4.1.10  表格的背景色：bgcolor 57

4.1.11  表格的背景圖像：

 background 58

4.2  表格的結構標記 59

4.2.1  設計表頭：thead 59

4.2.2  設計表主體：tbody 61

4.2.3  設計表尾：tfoot 62

4.3  綜合實例——使用表格排版網頁 63

4.4  本章小結 68

4.5  練習題 68

第5章  HTML 5入門基礎 70

5.1  初識HTML 5 70

5.1.1  HTML 5簡介 70

5.1.2  HTML 5中的標記方法 71

5.1.3  HTML 5語法中的三個要點 71

5.2  新增主體結構元素 72

5.2.1  article元素 72

5.2.2  section元素 73

5.2.3  nav元素 74

5.2.4  aside元素 76

5.3  新增非主體結構元素 77

5.3.1  header元素 77

5.3.2  footer元素 78

5.3.3  address元素 79

5.4  Canvas繪制基本圖形 80

5.4.1  Canvas元素 80

5.4.2  繪制直線 81

5.4.3  繪制矩形 82

5.4.4  繪制三角形 83

5.4.5  繪制圓弧 84

5.4.6  繪制貝塞爾曲線 86

5.4.7  應用不同的線型 87

5.5  變換的使用 88

5.5.1  平移變換 88

5.5.2  縮放變換 89

5.5.3  旋轉變換 90

5.6  HTML 5 SVG 92

5.6.1  圖形繪制 92

5.6.2  文本與圖像 95

5.6.3  填充顏色 96

5.7  綜合實例——繪制精美時鐘 97

5.8  本章小結 100

5.9  練習題 100

第6章  CSS入門基礎 102

6.1  認識CSS 102

6.1.1  CSS的基本概念 102

6.1.2  使用CSS的好處 103

6.1.3  編寫CSS 104

6.1.4  CSS基本語法 105

6.2  在HTML中添加CSS的方法 106

6.2.1  鏈接外部樣式表 106

6.2.2  行內樣式 107

6.2.3  導入樣式 107

6.2.4  內嵌樣式 108

6.3  選擇器類型 108

6.3.1  標簽選擇器 109

6.3.2  類選擇器 109

6.3.3  ID選擇器 111

6.4  綜合實例——對網頁添加CSS

樣式 112

6.5  本章小結 115

6.6  練習題 116

第7章  用CSS設置文本樣式 117

7.1  設計網頁中的文字樣式 117

7.1.1  font-family屬性 117

7.1.2  font-size屬性 118

7.1.3  font-weight屬性 119

7.1.4  font-style屬性 120

7.1.5  font-variant屬性 121

7.1.6  text-decoration屬性 122

7.2  設計文本的段落樣式 123

7.2.1  line-height屬性 123

7.2.2  text-align屬性 124

7.2.3  text-indent屬性 125

7.2.4  word-spacing屬性 125

7.2.5  first-letter首字下沈 126

7.2.6  text-transform屬性 127

7.3  綜合實例——用CSS排版網頁

文字 129

7.4  本章小結 131

7.5  練習題 132

第8章  用CSS設計圖像和背景 133

8.1  設置網頁的背景 133

8.1.1  background-color屬性 133

8.1.2  background-image屬性 134

8.2  設置背景圖像的屬性 135

8.2.1  background-repeat屬性 135

8.2.2  background-attachment屬性 136

8.2.3  background-position屬性 137

8.3  設置網頁圖像的樣式 138

8.3.1  border屬性 138

8.3.2  圖文混合排版 141

8.4  綜合實例——給圖片添加邊框 142

8.5  本章小結 144

8.6  練習題 144

第9章  用CSS設置表單和表單樣式 145

9.1  表單form 145

9.1.1  程序提交action 145

9.1.2  表單名稱name 146

9.1.3  傳送方法method 146

9.1.4  編碼方式enctype 147

9.1.5  目標顯示方式target 147

9.2  網頁中的表單 148

9.2.1  表單對象 148

9.2.2  插入文本字段text 149

9.2.3  插入密碼域password 149

9.2.4  插入單選按鈕radio 151

9.2.5  插入復選框checkbox 151

9.2.6  插入普通按鈕button 152

9.2.7 插入提交按鈕submit 153

9.2.8  重置按鈕reset 154

9.2.9  插入圖像域image 155

9.2.10  插入隱藏域hidden 155

9.2.11  插入文件域file 156

9.2.12  插入下拉菜單 157

9.3  用CSS設計表單樣式 159

9.3.1  設置邊框樣式 159

9.3.2  設置背景樣式 159

9.3.3  設置輸入文本的樣式 160

9.4  綜合實例——在網頁中插入表單

對象 161

9.5  本章小結 167

9.6  練習題 168

第10章  用CSS制作鏈接與網站

 ?導航 169

10.1  超鏈接基礎 169

10.1.1  超鏈接的基本概念 169

10.1.2  使用頁面屬性設置超鏈接 170

10.2  鏈接標記 171

10.2.1  link 171

10.2.2  visited 172

10.2.3  active 172

10.2.4  hover 173

10.3  各種形式的超鏈接 173

10.3.1  背景色變換鏈接 173

10.3.2  多姿多彩的下畫線鏈接 175

10.3.3  圖像翻轉鏈接 176

10.3.4  邊框變換鏈接 177

10.4  項目列表 179

10.4.1  有序列表 179

10.4.2  無序列表 183

10.5  橫排導航 187

10.5.1  橫排文本導航 188

10.5.2  標簽式導航 189

10.6  豎排導航 191

10.7  綜合實例 192

10.7.1  實例1——實現背景變換的

 導航菜單 192

10.7.2  實例2——制作樹形導航

 菜單 194

10.8  本章小結 197

10.9  練習題 197

第11章  CSS+Div布局入門基礎 198

11.1  Web標準 198

11.1.1  什麼是Web標準 198

11.1.2  為什麼要建立Web標準 199

11.1.3  怎樣改進現有網站 200

11.2  Div標記與Span標記 201

11.2.1  Div概述 201

11.2.2  Div與Span的區別 202

11.3  盒子模型 203

11.3.1  盒子模型的概念 204

11.3.2  border 204

11.3.3  padding 210

11.3.4  margin 212

11.4  盒子的浮動與定位 214

11.4.1  盒子的浮動float 214

11.4.2  position定位 216

11.4.3  z-index空間位置 220

11.5  本章小結 222

11.6  練習題 222

第12章  CSS+Div布局方法 223

12.1  CSS布局理念 223

12.1.1  CSS布局概述 223

12.1.2  用CSS定位 224

12.2  固定寬度布局 225

12.2.1  一列固定寬度 225

12.2.2  圓角框 227

12.3  可變寬度布局 229

12.3.1  一列自適應 229

12.3.2  兩列寬度自適應 230

12.3.3  三列浮動中間寬度自適應 231

12.3.4  三行二列居中高度自適應

 布局 232

12.4  CSS布局與傳統的表格方式布局

 分析 234

12.5  本章小結 236

12.6  練習題 236

第13章  CSS 3網頁開發 238

13.1  CSS 3概述 238

13.1.1  CSS 3的發展歷史 238

13.1.2  CSS 3的新增特性 239

13.1.3  主流瀏覽器對CSS 3的

 支持 243

13.2  邊框 244

13.2.1  圓角邊框border-radius 244

13.2.2  邊框圖片border-image 245

13.2.3  邊框陰影box-shadow 246

13.3  背景 248

13.3.1  背景圖片尺寸background-

 size 248

13.3.2  背景圖片定位區域background-

 origin 249

13.3.3  背景繪制區域background-

 clip 251

13.4  文本 252

13.4.1  文本陰影text-shadow 252

13.4.2  強制換行word-wrap 253

13.4.3  文本溢出text-overflow 254

13.5  多列 255

13.5.1  創建多列column-count 255

13.5.2  列的寬度column-width 256

13.6  實例應用——鼠標放上去顯示全部

 內容 257

13.7  本章小結 258

13.8  練習題 259

第14章  JavaScript語法基礎 260

14.1  JavaScript簡介 260

14.1.1  JavaScript的歷史 260

14.1.2  JavaScript的特點 261

14.1.3  JavaScript的添加方法 261

14.2  JavaScript運算符 263

14.2.1  算術運算符 263

14.2.2  邏輯運算符 263

14.2.3  比較運算符 264

14.3  基本數據類型 264

14.3.1  使用字符串型數據 264

14.3.2  使用數值型數據 265

14.3.3  使用布爾型數據 266

14.3.4  使用Undefined和Null

 類型 266

14.4  常量和變量 267

14.4.1  常量的使用 267

14.4.2  常量的使用方法 269

14.4.3  變量的定義 269

14.5  JavaScript程序語句 270

14.5.1  使用if…else語句 270

14.5.2  使用for循環 272

14.5.3  使用switch語句 273

14.5.4  使用while語句 274

14.6  綜合實例——制作倒計時特效 275

14.7  本章小結 276

14.8  練習題 276

第15章  JavaScript中的事件 278

15.1  事件概述 278

15.2  常用事件分析 279

15.2.1  click事件 279

15.2.2  change事件 280

15.2.3  select事件 281

15.2.4  focus事件 282

15.2.5  load事件與unload事件 284

15.2.6  鼠標移動事件 285

15.2.7  onBlur事件 286

15.3  其他常用事件 287

15.4  綜合實例——將事件應用於

 按鈕中 289

15.5  本章小結 289

15.6  練習題 290

第16章  JavaScript中的函數和對象 291

16.1  什麼是函數 291

16.2  函數的定義 292

16.2.1  函數的普通定義方式 292

16.2.2  函數的變量定義方式 293

16.2.3  函數的指針調用方式 294

16.3  JavaScript對象的聲明和引用 296

16.3.1  聲明和實例化 297

16.3.2  對象的引用 298

16.4  瀏覽器對象 299

16.4.1  navigator對象 299

16.4.2  window對象 301

16.4.3  location對象 302

16.4.4  history對象 303

16.4.5  document對象 304

16.5  內置對象 306

16.5.1  Date對象 306

16.5.2  數學對象Math 309

16.5.3  字符串對象String 309

16.5.4  數組對象Array 311

16.6  綜合實例——改變網頁背景顏色 312

16.7  本章小結 313

16.8  練習題 313

第17章  企業網站制作的布局方法 315

17.1  企業網站設計指南 315

17.1.1  企業網站分類 315

17.1.2  色彩搭配與風格設計 317

17.1.3  企業網站主要功能欄目 318

17.2  分析架構 318

17.2.1  網站內容分析 318

17.2.2  HTML結構設計 320

17.2.3  方案設計 322

17.2.4  定義整體樣式 323

17.3  各模塊設計 325

17.3.1  制作頁面頂部 325

17.3.2  制作左側導航 327

17.3.3  制作“聯系我們”部分 329

17.3.4  制作“企業介紹”部分 330

17.3.5  制作圖片展示和新聞動態 331

17.3.6  制作訂購部分 332

17.3.7  制作底部部分 333

17.4  本章小結 334

17.5  練習題 334