HTML5 CSS3 JavaScript網(wǎng)頁設(shè)計案例課堂（第2版）目錄

時間：2023-02-10 22:54:02 | 來源：營銷百科

時間：2023-02-10 22:54:02 來源：營銷百科

HTML5 CSS3 JavaScript網(wǎng)頁設(shè)計案例課堂（第2版）目錄：第I篇HTML5網(wǎng)頁設(shè)計
第1章初識HTML5 3
1.1HTML5的基本概念 4
1.1.1HTML的發(fā)展歷程 4
1.1.2什么是HTML5 4
1.1.3HTML5文件的基本結(jié)構(gòu) 5
1.2HTML5的優(yōu)勢 5
1.2.1解決了跨瀏覽器問題 5
1.2.2新增了多個新特性 5
1.2.3用戶優(yōu)先的原則 6
1.2.4化繁為簡的優(yōu)勢 7
1.3HTML5文件的編寫方法 7
1.3.1使用記事本手工編寫HTML5 7
1.3.2使用DreamweaverCC編寫
HTML文件 8
1.4使用瀏覽器查看HTML5文件 12
1.4.1查看頁面效果 12
1.4.2查看源文件 13
1.5疑難解惑 13
第2章HTML5網(wǎng)頁的文檔結(jié)構(gòu) 15
2.1HTML5文件的基本結(jié)構(gòu) 16
2.1.1HTML5頁面的整體結(jié)構(gòu) 16
2.1.2HTML5新增的結(jié)構(gòu)標(biāo)記 16
2.2HTML5基本標(biāo)記詳解 17
2.2.1文檔類型說明 17
2.2.2HTML標(biāo)記 17
2.2.3頭標(biāo)記head 18
2.2.4網(wǎng)頁的主體標(biāo)記body 20
2.2.5頁面注釋標(biāo)記21
2.3HTML5語法的變化 22
2.3.1標(biāo)簽不再區(qū)分大小寫 22
2.3.2允許屬性值不使用引號 22
2.3.3允許部分屬性的屬性值省略 23
2.4綜合案例——符合W3C標(biāo)準(zhǔn)的
HTML5網(wǎng)頁 23
2.5跟我學(xué)上機(jī)——簡單的HTML5
網(wǎng)頁 25
2.6疑難解惑 26
第3章HTML5網(wǎng)頁中的文本和圖像 27
3.1在網(wǎng)頁中添加文本 28
3.1.1普通文本的添加 28
3.1.2特殊字符文本的添加 28
3.1.3使用HTML5標(biāo)記添加特殊
文本 30
3.2文本排版 32
3.2.1換行標(biāo)記
32
3.2.2段落標(biāo)記

32
3.2.3標(biāo)題標(biāo)記

~33
3.3文字列表 34
3.3.1建立無序列表

• 34
• 
  
• 3.3.2建立有序列表
• 1. 36
  3. 
     
  4. 3.3.3建立不同類型的無序列表 37
  6. 
     
  7. 3.3.4建立不同類型的有序列表 38
  9. 
     
  10. 3.3.5建立嵌套列表 38
  12. 
      
  13. 3.3.6自定義列表 39
  15. 
      
  16. 3.4網(wǎng)頁中的圖像
  18. 40
  20. 
      
  21. 3.4.1在網(wǎng)頁中插入圖像 40
  23. 
      
  24. 3.4.2設(shè)置圖像的寬度和高度 42
  26. 
      
  27. 3.4.3設(shè)置圖像的提示文字 43
  29. 
      
  30. 3.4.4將圖片設(shè)置為網(wǎng)頁背景 44
  32. 
      
  33. 3.4.5排列圖像 45
  35. 
      
  36. 3.5綜合案例——圖文并茂的房屋裝飾裝修
  38. 
      
  39. 網(wǎng)頁 45
  41. 
      
  42. 3.6跟我學(xué)上機(jī)——在線購物網(wǎng)站的產(chǎn)品
  44. 
      
  45. 展示效果 47
  47. 
      
  48. 3.7疑難解惑 48
  50. 
      
  51. 第4章用HTML5建立超鏈接 49
  53. 
      
  54. 4.1URL的概念 50
  56. 
      
  57. 4.1.1URL的格式 50
  59. 
      
  60. 4.1.2URL的類型 50
  62. 
      
  63. 4.2超鏈接標(biāo)記
  64. 
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

第10章用CSS3美化網(wǎng)頁字體

與段落 179

10.1美化網(wǎng)頁文字 180

10.1.1設(shè)置文字的字體 180

10.1.2設(shè)置文字的字號 181

10.1.3設(shè)置字體風(fēng)格 182

10.1.4設(shè)置加粗字體 183

10.1.5將小寫字母轉(zhuǎn)為大寫字母 184

10.1.6設(shè)置字體的復(fù)合屬性 185

10.1.7設(shè)置字體顏色 186

10.2設(shè)置文本的高級樣式 187

10.2.1設(shè)置文本陰影效果 187

10.2.2設(shè)置文本的溢出效果 189

10.2.3設(shè)置文本的控制換行 190

10.2.4保持字體尺寸不變 191

10.3美化網(wǎng)頁中的段落 192

10.3.1設(shè)置單詞之間的間隔 192

10.3.2設(shè)置字符之間的間隔 193

10.3.3設(shè)置文字的修飾效果 194

10.3.4設(shè)置垂直對齊方式 195

10.3.5轉(zhuǎn)換文本的大小寫 196

10.3.6設(shè)置文本的水平對齊方式 197

10.3.7設(shè)置文本的縮進(jìn)效果 199

10.3.8設(shè)置文本的行高 199

10.3.9文本的空白處理 200

10.3.10文本的反排 202

10.4綜合案例——設(shè)置網(wǎng)頁標(biāo)題 203

10.5跟我學(xué)上機(jī)——制作新聞頁面 204

10.6疑難解惑 206

第11章用CSS3美化網(wǎng)頁圖片 207

11.1圖片縮放 208

11.1.1通過描述標(biāo)記width和height

縮放圖片 208

11.1.2用CSS3中的max-width和

max-height縮放圖片 208

11.1.3用CSS3中的width和height

縮放圖片 209

11.2設(shè)置圖片的對齊方式 210

11.2.1設(shè)置圖片的橫向?qū)R 210

11.2.2設(shè)置圖片的縱向?qū)R 211

11.3圖文混排 213

11.3.1設(shè)置文字環(huán)繞效果 213

11.3.2設(shè)置圖片與文字的間距 215

11.4綜合案例——制作學(xué)校宣傳單 216

11.5跟我學(xué)上機(jī)——制作簡單的圖文

混排網(wǎng)頁 219

11.6疑難解惑 220

第12章用CSS3美化網(wǎng)頁背景

與邊框 221

12.1用CSS3美化背景 222

12.1.1設(shè)置背景顏色 222

12.1.2設(shè)置背景圖片 223

12.1.3背景圖片重復(fù) 224

12.1.4背景圖片顯示 226

12.1.5背景圖片的位置 227

12.1.6背景圖片的大小 229

12.1.7背景的顯示區(qū)域 230

12.1.8背景圖像的裁剪區(qū)域 231

12.1.9背景復(fù)合屬性 232

12.2用CSS3美化邊框 234

12.2.1設(shè)置邊框的樣式 234

12.2.2設(shè)置邊框的顏色 235

12.2.3設(shè)置邊框的線寬 237

12.2.4設(shè)置邊框的復(fù)合屬性 238

12.3設(shè)置邊框的圓角效果 239

12.3.1設(shè)置圓角邊框 239

12.3.2指定兩個圓角半徑 240

12.3.3繪制4個不同角的圓角

邊框 241

12.3.4繪制不同種類的邊框 243

12.4綜合案例——制作簡單的公司

主頁 244

12.5跟我學(xué)上機(jī)——制作簡單的生活資訊

主頁 248

12.6疑難解惑 249

第13章用CSS3美化超級鏈接

和鼠標(biāo) 251

13.1用CSS3來美化超鏈接 252

13.1.1改變超級鏈接的基本樣式 252

13.1.2設(shè)置帶有提示信息的超級

鏈接 253

13.1.3設(shè)置超級鏈接的背景圖 254

13.1.4設(shè)置超級鏈接的按鈕效果 255

13.2用CSS3美化鼠標(biāo)特效 256

13.2.1用CSS3控制鼠標(biāo)箭頭 256

13.2.2設(shè)置鼠標(biāo)變幻式超鏈接 258

13.2.3設(shè)置網(wǎng)頁頁面滾動條 259

13.3綜合案例1——圖片版本的超級

鏈接 261

13.4綜合案例2——關(guān)于鼠標(biāo)特效 263

13.5跟我學(xué)上機(jī)——制作一個簡單的

導(dǎo)航欄 265

13.6疑難解惑 268

第14章用CSS3美化表格和表單的

樣式 269

14.1美化表格的樣式 270

14.1.1設(shè)置表格邊框的樣式 270

14.1.2設(shè)置表格邊框的寬度 272

14.1.3設(shè)置表格邊框的顏色 273

14.2美化表單樣式 274

14.2.1美化表單中的元素 275

14.2.2美化提交按鈕 277

14.2.3美化下拉菜單 278

14.3綜合案例——制作用戶登錄頁面 279

14.4跟我學(xué)上機(jī)——制作用戶注冊頁面 281

14.5疑難解惑 284

第15章用CSS3美化網(wǎng)頁菜單 285

15.1用CSS3美化項目列表 286

15.1.1美化無序列表 286

15.1.2美化有序列表 287

15.1.3美化自定義列表 289

15.1.4制作圖片列表 290

15.1.5縮進(jìn)圖片列表 292

15.1.6列表的復(fù)合屬性 293

15.2用CSS3制作網(wǎng)頁菜單 294

15.2.1制作無須表格的菜單 294

15.2.2制作水平和垂直菜單 296

15.3綜合案例——模擬soso導(dǎo)航欄 298

15.4跟我學(xué)上機(jī)——將段落轉(zhuǎn)變成列表 301

15.5疑難解惑 303

第16章用濾鏡美化網(wǎng)頁元素 305

16.1濾鏡概述 306

16.2設(shè)置基本濾鏡效果 307

16.2.1高斯模糊(blur)濾鏡 307

16.2.2明暗度(brightness)濾鏡 308

16.2.3對比度(contrast)濾鏡 309

16.2.4陰影(drop-shadow)濾鏡 310

16.2.5灰度(grayscale)濾鏡 311

16.2.6反相(invert)濾鏡 312

16.2.7透明度(opacity)濾鏡 313

16.2.8飽和度(saturate)濾鏡 314

16.2.9深褐色(sepia)濾鏡 315

16.3綜合案例1——使用復(fù)合濾鏡效果 316

16.4綜合案例2——使用濾鏡制作動畫

效果 317

16.5跟我學(xué)上機(jī)——制作色相旋轉(zhuǎn)

(hue-rotate)濾鏡 319

16.6疑難解惑 320

第17章CSS3中的動畫效果 321

17.1了解過渡效果 322

17.2添加過渡效果 322

17.3了解動畫效果 324

17.4添加動畫效果 325

17.5了解2D轉(zhuǎn)換效果 327

17.6添加2D轉(zhuǎn)換效果 327

17.6.1添加移動效果 327

17.6.2添加旋轉(zhuǎn)效果 328

17.6.3添加縮放效果 329

17.6.4添加傾斜效果 331

17.7添加3D轉(zhuǎn)換效果 332

17.8綜合案例——添加綜合過渡效果 334

17.9跟我學(xué)上機(jī)——添加綜合變幻效果 335

17.10疑難解惑 336

第III篇JavaScript動態(tài)特效

第18章JavaScript編程基本知識 341

18.1認(rèn)識JavaScript 342

18.1.1什么是JavaScript 342

18.1.2JavaScript的特點 342

18.1.3JavaScript與Java的區(qū)別 343

18.1.4JavaScript的版本 344

18.2JavaScript基本語法的應(yīng)用 345

18.2.1注釋的應(yīng)用 345

18.2.2語句的應(yīng)用 347

18.2.3語句塊的應(yīng)用 347

18.3JavaScript的數(shù)據(jù)結(jié)構(gòu) 348

18.3.1認(rèn)識標(biāo)識符 349

18.3.2認(rèn)識關(guān)鍵字 349

18.3.3認(rèn)識常量 349

18.3.4認(rèn)識變量及其應(yīng)用 350

18.4JavaScript數(shù)據(jù)類型的使用 352

18.4.1typeof運算符的使用 352

18.4.2undefined類型的使用 353

18.4.3null類型的使用 354

18.4.4Boolean類型的使用 354

18.4.5Number類型的使用 355

18.4.6String類型的使用 356

18.4.7Object類型的使用 357

18.5JavaScript運算符的使用 357

18.5.1算術(shù)運算符 358

18.5.2比較運算符 359

18.5.3位運算符 360

18.5.4邏輯運算符 361

18.5.5條件運算符 362

18.5.6賦值運算符 364

18.5.7運算符的優(yōu)先級 365

18.6綜合案例——一個簡單的JavaScript

程序 366

18.7疑難解惑 367

第19章JavaScript的程序控制結(jié)構(gòu)

與語句 369

19.1賦值語句 370

19.2條件判斷語句 370

19.2.1if語句 370

19.2.2if-else語句 371

19.2.3if...elseif語句 372

19.2.4if語句的嵌套 373

19.2.5switch語句 374

19.3循環(huán)控制語句 376

19.3.1while語句 376

19.3.2do-while語句 377

19.3.3for語句 378

19.4跳轉(zhuǎn)語句 379

19.4.1break語句 379

19.4.2continue語句 380

19.5綜合案例——在頁面中顯示距離

2018年元旦的天數(shù) 381

19.6跟我學(xué)上機(jī)——制作一個簡易

乘法表 383

19.7疑難解惑 384

第20章JavaScript中的函數(shù) 385

20.1函數(shù)的簡介 386

20.2調(diào)用函數(shù) 386

20.2.1函數(shù)的簡單調(diào)用 386

20.2.2在表達(dá)式中調(diào)用函數(shù) 387

20.2.3在事件響應(yīng)中調(diào)用函數(shù) 388

20.2.4通過鏈接調(diào)用函數(shù) 389

20.3JavaScript中常用的函數(shù) 390

20.3.1嵌套函數(shù) 390

20.3.2遞歸函數(shù) 390

20.3.3內(nèi)置函數(shù) 392

20.4綜合案例——購物簡易計算器 399

20.5跟我學(xué)上機(jī)——制作閃爍圖片 401

20.6疑難解惑 402

第21章JavaScript對象編程 403

21.1文檔對象模型(DOM) 404

21.1.1文檔對象模型(DOM)介紹 404

21.1.2在DOM模型中獲得對象 404

21.1.3事件驅(qū)動的應(yīng)用 405

21.2窗口(window)對象 407

21.2.1創(chuàng)建窗口(window) 407

21.2.2創(chuàng)建對話框 409

21.2.3窗口的相關(guān)操作 411

21.3文檔(document)對象 412

21.3.1文檔屬性的應(yīng)用 412

21.3.2文檔中圖片的使用 414

21.3.3顯示文檔中的所有超鏈接 415

21.4表單對象 417

21.4.1創(chuàng)建form對象 417

21.4.2form對象屬性與方法的

應(yīng)用 417

21.4.3單選按鈕與復(fù)選框的使用 419

21.4.4下拉菜單的使用 420

21.5綜合案例——表單注冊與表單

驗證 421

21.6跟我學(xué)上機(jī)——省市聯(lián)動效果 425

21.7疑難解惑 428

第22章JavaScript的內(nèi)置對象 429

22.1字符串對象 430

22.1.1創(chuàng)建字符串對象的方法 430

22.1.2字符串對象常用屬性的

應(yīng)用 430

22.1.3字符串對象常用方法的

應(yīng)用 431

22.2數(shù)學(xué)對象 433

22.2.1創(chuàng)建Math對象的方法 433

22.2.2數(shù)學(xué)對象屬性的應(yīng)用 434

22.2.3數(shù)學(xué)對象方法的使用 435

22.3日期對象 437

22.3.1創(chuàng)建日期對象 437

22.3.2日期對象常用方法的應(yīng)用 438

22.3.3日期間的運算 440

22.4數(shù)組對象 441

22.4.1創(chuàng)建數(shù)組對象 441

22.4.2數(shù)組對象屬性的應(yīng)用 442

22.4.3數(shù)組對象常用方法的應(yīng)用 444

22.5綜合案例——制作網(wǎng)頁隨機(jī)

驗證碼 448

22.6跟我學(xué)上機(jī)——動態(tài)顯示當(dāng)前

時間 450

22.7疑難解惑 452

第23章HTML5、CSS3和JavaScript

的綜合應(yīng)用 453

23.1JavaScript在HTML中的使用 454

23.1.1在HTML網(wǎng)頁頭中嵌入

JavaScript代碼 454

23.1.2在HTML網(wǎng)頁中嵌入

JavaScript代碼 455

23.1.3在HTML網(wǎng)頁的元素事件中

嵌入JavaScript代碼 456

23.1.4在HTML中調(diào)用已經(jīng)存在的

JavaScript文件 457

23.1.5通過JavaScript偽URL引入

JavaScript腳本代碼 458

23.2JavaScript與CSS3的結(jié)合使用 459

23.2.1動態(tài)添加樣式 459

23.2.2動態(tài)改變樣式 460

23.2.3動態(tài)定位網(wǎng)頁元素 462

23.2.4設(shè)置網(wǎng)頁元素的顯示

與隱藏 464

23.3HTML5、CSS3和JavaScript的搭配

應(yīng)用 465

23.3.1設(shè)定左右移動的圖片 465

23.3.2制作顏色選擇器 468

23.3.3制作跑馬燈效果 470

23.4綜合案例——制作樹形導(dǎo)航菜單 472

23.5跟我學(xué)上機(jī)——制作滾動的菜單 477

23.6疑難解惑 479

第IV篇綜合案例實戰(zhàn)

第24章制作企業(yè)門戶類網(wǎng)頁 483

24.1構(gòu)思布局 484

24.1.1設(shè)計分析 484

24.1.2排版架構(gòu) 484

24.2內(nèi)容設(shè)計 485

24.2.1使用JavaScript技術(shù)實現(xiàn)Logo

與導(dǎo)航菜單 485

24.2.2Banner區(qū) 486

24.2.3資訊區(qū) 487

24.2.4版權(quán)信息 489

24.3設(shè)置鏈接 490

24.4疑難解惑 490

第25章制作在線購物類網(wǎng)頁 491

25.1整體布局 492

25.1.1設(shè)計分析 492

25.1.2排版架構(gòu) 492

25.2模塊分割 493

25.2.1Logo與導(dǎo)航區(qū) 493

25.2.2Banner與資訊區(qū) 495

25.2.3產(chǎn)品類別區(qū)域 496

25.2.4頁腳區(qū)域 498

25.3設(shè)置鏈接 498

25.4疑難解惑 498

第26章移動設(shè)備類型網(wǎng)站開發(fā) 499

26.1網(wǎng)站設(shè)計分析 500

26.2網(wǎng)站結(jié)構(gòu)分析 500

26.3網(wǎng)站主頁面的制作 501

26.4網(wǎng)站成品預(yù)覽 503

26.5疑難解惑 508