HTML CSS JavaScript網(wǎng)頁設(shè)計與布局從新手到高手目錄

時間：2023-06-08 02:45:01 | 來源：營銷百科

時間：2023-06-08 02:45:01 來源：營銷百科

HTML CSS JavaScript網(wǎng)頁設(shè)計與布局從新手到高手目錄：第1章 網(wǎng)頁基礎(chǔ) 1

1.1 初識網(wǎng)頁 2

1.1.1 網(wǎng)頁的構(gòu)成 2

1.1.2 靜態(tài)網(wǎng)頁 3

1.1.3 動態(tài)網(wǎng)頁 3

1.1.4 數(shù)據(jù)庫 4

1.2 W3C概述 7

1.2.1 了解W3C 7

1.2.2 W3C的結(jié)構(gòu) 8

1.2.3 W3C的表現(xiàn) 9

1.2.4 W3C的行為 11

1.3 網(wǎng)站設(shè)計概述 12

1.3.1 網(wǎng)站整體策劃 12

1.3.2 網(wǎng)頁設(shè)計任務(wù) 13

1.3.3 網(wǎng)頁設(shè)計實現(xiàn) 14

1.4 網(wǎng)頁配色 16

1.4.1 色彩的基礎(chǔ)概念 17

1.4.2 色彩的模式 20

1.4.3 自定義網(wǎng)頁顏色 21

1.4.4 色彩推移 22

1.5 網(wǎng)頁的藝術(shù)表現(xiàn)與風(fēng)格設(shè)計 23

1.5.1 網(wǎng)頁形式的藝術(shù)表現(xiàn) 23

1.5.2 網(wǎng)頁構(gòu)成的藝術(shù)表現(xiàn) 25

1.5.3 網(wǎng)頁紋理的藝術(shù)表現(xiàn) 26

1.5.4 網(wǎng)頁設(shè)計風(fēng)格類型 28

第2章 HTML5概述 30

2.1 HTML5基本概念 31

2.1.1 HTML5簡介 31

2.1.2 HTML5文檔類型 31

2.1.3 頁面構(gòu)成 32

2.2 HTML5的優(yōu)勢 33

2.2.1 HTML5優(yōu)點 33

2.2.2 HTML5的特性 34

2.2.3 HTML5新功能 34

2.3 HTML5的主體結(jié)構(gòu) 35

2.3.1HTML5結(jié)構(gòu)性標簽體系 35

2.3.2新增的主體結(jié)構(gòu)標簽 37

2.3.3新增的非主體結(jié)構(gòu)標簽 39

2.4HTML5文件的編寫方法 40

2.4.1手工編寫HTML5 40

2.4.2使用Dreamweaver編寫 41

2.5練習(xí)：創(chuàng)建HTML5文檔 45

2.6練習(xí)：制作第一個HTML5網(wǎng)頁 47

2.7新手訓(xùn)練營 48

第3章創(chuàng)建文本和圖像 51

3.1添加網(wǎng)頁文本 52

3.1.1添加普通文本 52

3.1.2添加特殊字符 52

3.2設(shè)置文本格式 54

3.2.1設(shè)置文本樣式 54

3.2.2設(shè)置對齊方式 58

3.2.3設(shè)置段落樣式 59

3.3設(shè)置文字列表 61

3.3.1設(shè)置單個列表 61

3.3.2設(shè)置多個列表 62

3.3.3設(shè)置嵌套列表 63

3.3.4自定義列表 64

3.4使用圖像 64

3.4.1網(wǎng)頁圖像格式 64

3.4.2插入圖像 65

3.4.3編輯圖像 66

3.5練習(xí)：制作數(shù)學(xué)試題網(wǎng)頁 68

3.6練習(xí)：制作導(dǎo)航條 71

3.7新手訓(xùn)練營 73

第4章創(chuàng)建表格 76

4.1使用表格 77

4.1.1創(chuàng)建表格 77

4.1.2創(chuàng)建嵌套表格 77

4.1.3創(chuàng)建標題表格 78

4.2編輯單元格 79

4.2.1調(diào)整單元格 79

4.2.2設(shè)置單元格背景 81

4.2.3合并單元格81

4.3設(shè)置表格 83

4.3.1定義表格 83

4.3.2設(shè)置邊框類型 84

4.3.3設(shè)置表格背景 85

4.4處理表格數(shù)據(jù) 86

4.4.1排序數(shù)據(jù) 86

4.4.2導(dǎo)入/導(dǎo)出表格數(shù)據(jù) 87

4.5練習(xí)：制作個人簡歷 88

4.6練習(xí)：制作購物車頁 93

4.7新手訓(xùn)練營 97

第5章創(chuàng)建超鏈接 101

5.1鏈接與路徑 102

5.1.1網(wǎng)頁中的鏈接 102

5.1.2網(wǎng)頁中的路徑 102

5.2使用超鏈接 103

5.2.1創(chuàng)建文本超鏈接 103

5.2.2創(chuàng)建圖像超鏈接 104

5.2.3創(chuàng)建其他超鏈接 104

5.3應(yīng)用IFrame框架 108

5.3.1插入IFrame框架 108

5.3.2鏈接IFrame框架頁面 109

5.4練習(xí)：制作水果頁面 110

5.5練習(xí)：制作水墨畫頁面 112

5.6新手訓(xùn)練營 115

第6章應(yīng)用多媒體 118

6.1插入Flash 119

6.1.1插入Flash動畫 119

6.1.2插入Flash視頻 121

6.2使用音頻文件 122

6.2.1了解audio標簽 122

6.2.2添加音頻文件 123

6.3使用視頻文件 124

6.3.1了解video標簽 124

6.3.2添加視頻文件 125

6.4音頻與視頻相關(guān)的屬性、方法和

事件 126

6.4.1音頻與視頻相關(guān)的屬性 127

6.4.2音頻與視頻相關(guān)的方法 130

6.4.3音頻與視頻相關(guān)的事件 130

6.5練習(xí)：制作音樂播放網(wǎng)頁 132

6.6練習(xí)：制作在線視頻網(wǎng)頁 134

6.7新手訓(xùn)練營 136

第7章使用HTML圖形 138

7.1認識HTML5Canvas元素139

7.1.1Canvas元素概述 139

7.1.2瀏覽器的支持與替代

內(nèi)容 139

7.1.3在頁面中放置Canvas

元素 140

7.2繪制基本形狀 141

7.2.1繪制矩形 141

7.2.2繪制圓形 142

7.2.3繪制直線 143

7.2.4繪制三角形 143

7.2.5繪制曲線 144

7.3繪制漸變圖形 146

7.3.1繪制線性漸變 146

7.3.2繪制徑向漸變 147

7.4繪制變形圖形 147

7.4.1繪制平移效果圖形 148

7.4.2繪制縮放效果圖形 148

7.4.3繪制旋轉(zhuǎn)效果圖形 149

7.5編輯圖形 150

7.5.1組合圖形 150

7.5.2裁切路徑 151

7.5.3設(shè)置描邊樣式 151

7.5.4設(shè)置圖形的透明度 153

7.5.5設(shè)置陰影 154

7.5.6保存圖形狀態(tài) 155

7.6使用圖像 156

7.6.1繪制圖像 156

7.6.2平鋪圖像 157

7.6.3裁剪圖像 158

7.6.4px化處理圖像 158

7.7繪制文字 160

7.7.1繪制填充文字 160

7.7.2繪制輪廓文字 161

7.7.3設(shè)置文字寬度 162

7.8練習(xí)：制作風(fēng)景推薦線路 162

7.9練習(xí)：制作校園簡介 164

7.10新手訓(xùn)練營 167

第8章創(chuàng)建表單 169

8.1添加表單 170

8.1.1表單概述 170

8.1.2插入表單 170

8.2添加文本和網(wǎng)頁元素 172

8.2.1添加文本元素 172

8.2.2添加網(wǎng)頁元素 173

8.3添加選擇和按鈕元素 177

8.3.1添加選擇元素 177

8.3.2添加按鈕元素 179

8.4添加表單高級元素 181

8.4.1新增input元素屬性 181

8.4.2新增form元素及其屬性 185

8.5練習(xí)：制作用戶登錄頁面 186

8.6練習(xí)：制作用戶注冊頁面 188

8.7新手訓(xùn)練營 191

第9章Web應(yīng)用技術(shù) 194

9.1本地存儲 195

9.1.1WebStorage概述 195

9.1.2WebStorage的優(yōu)勢 195

9.1.3判斷瀏覽器 196

9.1.4WebStorage方法 196

9.2離線Web應(yīng)用程序 198

9.2.1離線Web應(yīng)用程序概述 199

9.2.2CacheManifest文件 199

9.2.3在線狀態(tài)檢測 200

9.2.4applicationCache對象 200

9.3通信應(yīng)用 201

9.3.1WebSocket通信概述 201

9.3.2跨文檔消息傳輸 202

9.3.3使用WebSocket 203

9.4線程應(yīng)用 204

9.4.1WebWorkers概述 204

9.4.2工作線程與多線程 205

9.4.3線程事件處理模型 206

9.4.4瀏覽器與線程 207

9.5獲取地理位置信息 207

9.5.1使用方法 207

9.5.2position對象 209

9.6練習(xí)：制作簡單留言簿 210

9.7練習(xí)：制作個人博客 213

9.8新手訓(xùn)練營 216

第10章揭秘CSS3 218

10.1CSS3簡介 219

10.1.1了解CSS樣式219

10.1.2CSS的發(fā)展史 220

10.2應(yīng)用CSS3 222

10.2.1CSS3的基礎(chǔ)語法 222

10.2.2CSS的應(yīng)用分類 223

10.2.3CSS3的新特性 224

10.2.4CSS里的單位 226

10.2.5CSS編寫規(guī)則 227

10.3使用CSS3選擇器 228

10.3.1認識CSS3選擇器 228

10.3.2非偽類型選擇器 229

10.3.3偽類選擇器 231

10.3.4結(jié)構(gòu)性偽類選擇器 232

10.3.5UI元素狀態(tài)偽類選擇器 235

10.3.6其他關(guān)系選擇器 238

10.4練習(xí)：制作多彩時尚頁 239

10.5練習(xí)：制作圖片新聞頁 242

10.6新手訓(xùn)練營 244

第11章美化字體與段落 247

11.1設(shè)置字體格式 248

11.1.1使用選擇器插入字體 248

11.1.2設(shè)置字體和字號 249

11.1.3設(shè)置字體樣式 250

11.1.4設(shè)置字體顏色 252

11.1.5設(shè)置復(fù)合屬性 253

11.2設(shè)置段落格式 253

11.2.1設(shè)置段落的基本樣式 254

11.2.2設(shè)置段落的高級樣式 258

11.2.3設(shè)置列表樣式 260

11.3設(shè)置高級樣式 264

11.3.1設(shè)置陰影效果 264

11.3.2省略標記 266

11.3.3設(shè)置自動換行 268

11.3.4調(diào)用服務(wù)端字體 268

11.4練習(xí)：制作企業(yè)新聞列表 269

11.5練習(xí)：制作節(jié)日簡介頁面 271

11.6新手訓(xùn)練營 273

第12章美化圖片與列表 276

12.1插入圖像文件 277

12.1.1在標題前插入圖像文件 277

12.1.2attr屬性應(yīng)用 278

12.2設(shè)置圖片格式 278

12.2.1縮放圖片 278

12.2.2設(shè)置對齊方式 279

12.3圖文混排 281

12.3.1設(shè)置文字環(huán)繞 281

12.3.2設(shè)置圖文間距 282

12.4設(shè)置項目列表 282

12.4.1設(shè)置無序列表 283

12.4.2設(shè)置有序列表 283

12.4.3設(shè)置自定義列表 284

12.4.4設(shè)置圖片列表 285

12.5練習(xí)：制作在線調(diào)查頁 286

12.6練習(xí)：制作產(chǎn)品說明頁面 288

12.7新手訓(xùn)練營 291

第13章美化背景與邊框 293

13.1設(shè)置背景格式 294

13.1.1設(shè)置背景顏色 294

13.1.2設(shè)置背景圖片 295

13.1.3設(shè)置背景區(qū)域 299

13.2設(shè)置邊框格式 301

13.2.1設(shè)置邊框樣式 301

13.2.2設(shè)置圖片邊框 305

13.3設(shè)置圓角效果 306

13.3.1設(shè)置圓角邊框 306

13.3.2指定兩個半徑 307

13.3.3繪制4個不同半徑的

圓角邊框 307

13.3.4設(shè)置隱藏邊框 308

13.4練習(xí)：制作企業(yè)網(wǎng)站首頁 309

13.5練習(xí)：制作圖書列表 311

13.6新手訓(xùn)練營 314

第14章美化表格、表單與超鏈接 316

14.1美化表格 317

14.1.1設(shè)置邊框樣式 317

14.1.2設(shè)置邊框粗細 318

14.1.3設(shè)置邊框顏色 319

14.2美化表單 321

14.2.1設(shè)置表單背景 322

14.2.2設(shè)置表單按鈕 323

14.2.3設(shè)置菜單效果 323

14.3美化超鏈接 324

14.3.1設(shè)置超鏈接樣式 324

14.3.2設(shè)置超鏈接說明 326

14.3.3設(shè)置超鏈接背景 327

14.3.4設(shè)置按鈕超鏈接 328

14.4練習(xí)：制作問卷調(diào)查表 328

14.5練習(xí)：制作商品列表 331

14.6新手訓(xùn)練營 334

第15章CSS3變形與動畫 336

15.12D變形 337

15.1.1使用2D變形 337

15.1.2自定義變形 340

15.2設(shè)計動畫 342

15.2.1使用Transitions屬性 342

15.2.2同時平滑過渡多個

屬性值 343

15.2.3使用Animations屬性 344

15.2.4實現(xiàn)動畫的方法 345

15.3漸變效果 346

15.3.1使用Webkit漸變 346

15.3.2使用Gecko漸變 349

15.4練習(xí)：制作不規(guī)則形狀 352

15.5練習(xí)：制作動態(tài)菜單 355

15.6新手訓(xùn)練營 357

第16章盒樣式與用戶界面 360

16.1使用盒相關(guān)樣式 361

16.1.1盒的基本類型 361

16.1.2內(nèi)容溢出 362

16.1.3插入內(nèi)容 363

16.1.4控制瀏覽器行為 363

16.1.5區(qū)域可縮放 364

16.2用戶界面模塊 365

16.2.1設(shè)置邊框陰影 365

16.2.2繪制輪廓 366

16.2.3nav開頭屬性 368

16.3設(shè)置分欄效果 369

16.3.1設(shè)置多欄布局 369

16.3.2設(shè)置多欄樣式 370

16.4練習(xí)：制作傳媒公司首頁 375

16.5練習(xí)：制作新年賀詞頁 378

16.6新手訓(xùn)練營 379

第17章JavaScript概述 383

17.1JavaScript簡介 384

17.1.1認識JavaScript 384

17.1.2JavaScript與Java的區(qū)別 385

17.2JavaScript語法基礎(chǔ) 386

17.2.1語法概述 386

17.2.2JavaScript語句 387

17.2.3JavaScript注釋 388

17.3JavaScript數(shù)據(jù)結(jié)構(gòu)和類型 389

17.3.1JavaScript數(shù)據(jù)結(jié)構(gòu) 389

17.3.2JavaScript數(shù)據(jù)類型 391

17.4JavaScript運算符 394

17.4.1運算符的優(yōu)先級 394

17.4.2算術(shù)運算符395

17.4.3比較運算符395

17.4.4位運算符 396

17.4.5邏輯運算符396

17.4.6條件運算符397

17.4.7賦值運算符397

17.5練習(xí)：制作海灣度假村網(wǎng)頁 398

17.6練習(xí)：制作花品展示頁 402

17.7新手訓(xùn)練營 404

第18章JavaScript核心語法 406

18.1條件判斷語句 407

18.1.1if類語句 407

18.1.2switch語句 409

18.2循環(huán)和跳轉(zhuǎn)語句 410

18.2.1循環(huán)語句 410

18.2.2跳轉(zhuǎn)語句 412

18.3函數(shù) 414

18.3.1函數(shù)簡介 414

18.3.2參數(shù)傳遞 414

18.3.3定義函數(shù) 415

18.3.4內(nèi)置函數(shù) 416

18.4事件驅(qū)動和事件處理 421

18.4.1事件與事件驅(qū)動 421

18.4.2關(guān)聯(lián)事件與處理代碼 422

18.4.3調(diào)用事件 423

18.5練習(xí)：制作在線調(diào)查頁 424

18.6練習(xí)：制作動畫轉(zhuǎn)動特效 426

18.7新手訓(xùn)練營 429

第19章JavaScript的內(nèi)置對象 431

19.1面向?qū)ο蟾攀?432

19.1.1什么是面向?qū)ο?432

19.1.2創(chuàng)建對象 432

19.1.3屬性和方法 433

19.2字符串對象 434

19.2.1創(chuàng)建字符串對象 434

19.2.2應(yīng)用對象屬性 434

19.2.3應(yīng)用對象方法 435

19.3數(shù)值對象 436

19.3.1應(yīng)用對象屬性 436

19.3.2應(yīng)用對象方法 437

19.4日期對象 438

19.4.1創(chuàng)建日期對象 438

19.4.2應(yīng)用對象屬性 439

19.4.3應(yīng)用對象方法 439

19.4.4運算日期 441

19.5數(shù)組對象 442

19.5.1創(chuàng)建數(shù)組對象 442

19.5.2應(yīng)用屬性 443

19.5.3應(yīng)用方法 443

19.6練習(xí)：制作圖片展示 444

19.7練習(xí)：制作彈出對話框 446

19.8新手訓(xùn)練營 448

第20章JavaScript核心對象 450

20.1窗口對象 451

20.1.1應(yīng)用窗口 451

20.1.2應(yīng)用對話框 452

20.1.3應(yīng)用狀態(tài)欄 454

20.1.4窗口操作 455

20.2文檔對象 456

20.2.1應(yīng)用文檔對象 456

20.2.2操作文檔元素 458

20.3表單和圖像對象 459

20.3.1應(yīng)用表單對象 459

20.3.2應(yīng)用圖像對象 462

20.4練習(xí)：制作網(wǎng)頁導(dǎo)航 463

20.5練習(xí)：制作動態(tài)首頁 466

20.6新手訓(xùn)練營 471

第21章網(wǎng)站后臺管理頁面 473

21.1后臺管理頁設(shè)計分析 474

21.1.1后臺管理系統(tǒng)的分類 474

21.1.2后臺管理系統(tǒng)的功能 474

21.1.3后臺框架集管理頁 474

21.2設(shè)置登錄頁面 475

21.3創(chuàng)建主框架集頁 478

21.4框架集頂部文件 479

21.5框架集左側(cè)文件 482

21.6練習(xí)：框架集主文件 484