網(wǎng)站開發(fā)案例課堂：HTML5 CSS3 JavaScript網(wǎng)頁設計案

時間：2023-02-18 08:54:02 | 來源：營銷百科

時間：2023-02-18 08:54:02 來源：營銷百科

網(wǎng)站開發(fā)案例課堂：HTML5 CSS3 JavaScript網(wǎng)頁設計案例課堂圖書目錄：第1章 初識HTML 5 1

1.1 HTML 5的基本概念 2

1.1.1 HTML的發(fā)展歷程 2

1.1.2 什么是HTML 5 2

1.1.3 HTML 5文件的基本結構 3

1.2 HTML 5的優(yōu)勢 3

1.2.1 解決了跨瀏覽器問題 3

1.2.2 新增了多個新特性 3

1.2.3 用戶優(yōu)先的原則 4

1.2.4 化繁為簡的優(yōu)勢 5

1.3 HTML 5文件的編寫方法 5

1.3.1 使用記事本手工編寫HTML 5 5

1.3.2 使用Dreamweaver CS6編寫HTML文件 6

1.4 使用瀏覽器查看HTML 5文件 11

1.4.1 查看頁面效果 11

1.4.2 查看源文件 11

1.5 疑難解惑 12

第2章 HTML 5網(wǎng)頁的文檔結構 13

2.1 HTML 5文件的基本結構 14

2.1.1 HTML 5頁面的整體結構 14

2.1.2 HTML 5新增的結構標記 14

2.2 HTML 5基本標記詳解 15

2.2.1 文檔類型說明 15

2.2.2 HTML標記 15

2.2.3 頭標記head 16

2.2.4 網(wǎng)頁的主體標記body 18

2.2.5 頁面注釋標記 19

2.3 HTML 5語法的變化 20

2.3.1 標簽不再區(qū)分大小寫 20

2.3.2 允許屬性值不使用引號 20

2.3.3 允許部分屬性值的屬性省略 21

2.4 綜合示例――符合W3C標準的HTML 5網(wǎng)頁 21

2.5 上機練習――簡單的HTML 5網(wǎng)頁 23

2.6 疑難解惑 23

第3章 HTML 5網(wǎng)頁中的文本和圖像 25

3.1 在網(wǎng)頁中添加文本 26

3.1.1 普通文本的添加 26

3.1.2 特殊字符文本的添加 26

3.1.3 使用HTML 5標記添加特殊文本 28

3.2 文本排版 30

3.2.1 換行標記

3.0

3.2.2 段落標記

3.1

3.2.3 標題標記

3.1

3.3 文字列表 32

3.3.1 建立無序列表

32

3.3.2 建立有序列表

3.4

3.3.3 建立不同類型的無序列表 35

3.3.4 建立不同類型的有序列表 36

3.3.5 建立嵌套列表 36

3.3.6 自定義列表 37

3.4 網(wǎng)頁中的圖像 38

3.4.1 在網(wǎng)頁中插入圖像 38

3.4.2 設置圖像的寬度和高度 40

3.4.3 設置圖像的提示文字 41

3.4.4 將圖片設置為網(wǎng)頁背景 42

3.4.5 排列圖像 42

3.5 綜合示例――圖文并茂的房屋裝飾裝修網(wǎng)頁 43

3.6 上機練習――在線購物網(wǎng)站的產(chǎn)品展示效果 44

3.7 疑難解惑 45

第4章 用HTML 5建立超鏈接 47

4.1 URL的概念 48

4.1.1 URL的格式 48

4.1.2 URL的類型 48

4.2 超鏈接標記 49

4.2.1 設置文本和圖片的超鏈接 49

4.2.2 創(chuàng)建指向不同目標類型的超鏈接 50

4.2.3 設置以新窗口顯示超鏈接頁面 52

4.2.4 鏈接到同一頁面的不同位置 53

4.3 創(chuàng)建熱點區(qū)域 54

4.4 創(chuàng)建浮動框架 56

4.5 綜合示例――用Dreamweaver精確定位熱點區(qū)域 57

4.6 上機練習――創(chuàng)建熱點區(qū)域 59

4.7 疑難解惑 60

第5章 用HTML 5創(chuàng)建表格 61

5.1 表格的基本結構 62

5.2 創(chuàng)建表格 63

5.2.1 創(chuàng)建普通表格 63

5.2.2 創(chuàng)建一個帶有標題的表格 64

5.3 編輯表格 65

5.3.1 定義表格的邊框類型 65

5.3.2 定義表格的表頭 66

5.3.3 設置表格背景 67

5.3.4 設置單元格的背景 69

5.3.5 合并單元格 70

5.3.6 排列單元格中的內(nèi)容 74

5.3.7 設置單元格的行高與列寬 75

5.4 完整的表格標記 76

5.5 綜合示例――制作計算機報價表 77

5.6 上機練習――制作學生成績表 79

5.7 疑難解惑 82

第6章 使用HTML 5創(chuàng)建表單 85

6.1 表單概述 86

6.2 表單基本元素的使用 86

6.2.1 單行文本輸入框text 87

6.2.2 多行文本輸入框textarea 87

6.2.3 密碼域password 88

6.2.4 單選按鈕radio 89

6.2.5 復選框checkbox 90

6.2.6 列表框select 91

6.2.7 普通按鈕button 91

6.2.8 提交按鈕submit 92

6.2.9 重置按鈕reset 93

6.3 表單高級元素的使用 94

6.3.1 url屬性的使用 94

6.3.2 email屬性的使用 95

6.3.3 date和time屬性的使用 96

6.3.4 number屬性的使用 97

6.3.5 range屬性的使用 97

6.3.6 required屬性的使用 98

6.4 綜合示例――創(chuàng)建用戶反饋表單 99

6.5 上機練習――制作用戶注冊表單 100

6.6 疑難解惑 101

第7章 使用HTML 5繪制圖形 103

7.1 添加canvas的步驟 104

7.2 繪制基本形狀 104

7.2.1 繪制矩形 105

7.2.2 繪制圓形 106

7.2.3 使用moveTo與lineTo繪制直線 107

7.2.4 使用bezierCurveTo繪制貝濟埃曲線 108

7.3 繪制漸變圖形 109

7.3.1 繪制線性漸變 109

7.3.2 繪制徑向漸變 111

7.4 繪制變形圖形 112

7.4.1 繪制平移效果的圖形 112

7.4.2 繪制縮放效果的圖形 113

7.4.3 繪制旋轉效果的圖形 114

7.4.4 繪制組合效果的圖形 115

7.4.5 繪制帶陰影的圖形 117

7.5 使用圖像 118

7.5.1 繪制圖像 118

7.5.2 平鋪圖像 120

7.5.3 裁剪圖像 121

7.5.4 圖像的像素化處理 123

7.6 繪制文字 125

7.7 圖形的保存與恢復 126

7.7.1 保存與恢復狀態(tài) 126

7.7.2 保存文件 128

7.8 綜合示例――繪制火柴棒人物 129

7.9 上機練習――繪制商標 132

7.10 疑難解惑 133

第8章 HTML 5中的音頻和視頻 135

8.1 audio標簽概述 136

8.1.1 audio標簽概述 136

8.1.2 audio標簽的屬性 137

8.1.3 audio標簽瀏覽器的支持情況 137

8.2 在網(wǎng)頁中添加音頻文件 138

8.2.1 添加自動播放音頻文件 138

8.2.2 添加帶有控件的音頻文件 138

8.2.3 添加循環(huán)播放的音頻文件 139

8.2.4 添加預播放的音頻文件 139

8.3 video標簽概述 140

8.3.1 video標簽概述 140

8.3.2 video標簽的屬性 141

8.3.3 瀏覽器對video標簽的支持情況 142

8.4 在網(wǎng)頁中添加視頻文件 142

8.4.1 添加自動播放的視頻文件 142

8.4.2 添加帶有控件的視頻文件 143

8.4.3 添加循環(huán)播放的視頻文件 143

8.4.4 添加預播放的視頻文件 144

8.4.5 設置視頻文件的高度與寬度 145

8.5 疑難解惑 146

第9章 CSS 3概述與基本語法 147

9.1 CSS 3概述 148

9.1.1 CSS 3的功能 148

9.1.2 瀏覽器與CSS 3 148

9.1.3 CSS 3的基礎語法 149

9.1.4 CSS 3的常用單位 149

9.2 編輯和瀏覽CSS 3 154

9.2.1 手工編寫CSS 3 154

9.2.2 用Dreamweaver編寫CSS 155

9.3 在HTML 5中使用CSS 3的方法 156

9.3.1 行內(nèi)樣式 156

9.3.2 內(nèi)嵌樣式 157

9.3.3 鏈接樣式 159

9.3.4 導入樣式 160

9.3.5 優(yōu)先級問題 161

9.4 CSS 3的常用選擇器 163

9.4.1 標簽選擇器 164

9.4.2 類選擇器 164

9.4.3 ID選擇器 165

9.4.4 全局選擇器 166

9.4.5 組合選擇器 167

9.4.6 選擇器繼承 168

9.4.7 偽類選擇器 169

9.5 選擇器聲明 170

9.5.1 集體聲明 170

9.5.2 多重嵌套聲明 171

9.6 綜合示例――制作炫彩網(wǎng)站Logo 172

9.7 上機練習――制作學生信息統(tǒng)計表 175

9.8 疑難解惑 176

第10章 使用CSS 3美化網(wǎng)頁字體與段落 179

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

10.1.1 設置文字的字體 180

10.1.2 設置文字的字號 181

10.1.3 設置字體風格 182

10.1.4 設置加粗字體 183

10.1.5 將小寫字母轉為大寫字母 184

10.1.6 設置字體的復合屬性 185

10.1.7 設置字體顏色 186

10.2 設置文本的高級樣式 187

10.2.1 設置文本陰影效果 187

10.2.2 設置文本的溢出效果 188

10.2.3 設置文本的控制換行 189

10.2.4 保持字體尺寸不變 190

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

10.3.1 設置單詞之間的間隔 191

10.3.2 設置字符之間的間隔 192

10.3.3 設置文字的修飾效果 193

10.3.4 設置垂直對齊方式 194

10.3.5 轉換文本的大小寫 196

10.3.6 設置文本的水平對齊方式 197

10.3.7 設置文本的縮進效果 198

10.3.8 設置文本的行高 199

10.3.9 文本的空白處理 200

10.3.10 文本的反排 201

10.4 綜合示例――設置網(wǎng)頁標題 203

10.5 上機練習――制作新聞頁面 204

10.6 疑難解惑 205

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

11.1 圖片縮放 208

11.1.1 通過描述標記width和height縮放圖片 208

11.1.2 使用CSS 3中的max-width和max-height縮放圖片 208

11.1.3 使用CSS 3中的width和height縮放圖片 209

11.2 設置圖片的對齊方式 210

11.2.1 設置圖片的橫向對齊 210

11.2.2 設置圖片縱向對齊 211

11.3 圖文混排 213

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

11.3.2 設置圖片與文字的間距 214

11.4 綜合示例――制作學校宣傳單 216

11.5 上機練習――制作簡單的圖文混排網(wǎng)頁 218

11.6 疑難解惑 219

第12章 使用CSS 3美化網(wǎng)頁背景與邊框 221

12.1 使用CSS 3美化背景 222

12.1.1 設置背景顏色 222

12.1.2 設置背景圖片 223

12.1.3 背景圖片重復 224

12.1.4 背景圖片顯示 226

12.1.5 背景圖片的位置 227

12.1.6 背景圖片的大小 229

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

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

12.1.9 背景復合屬性 233

12.2 使用CSS 3美化邊框 234

12.2.1 設置邊框的樣式 234

12.2.2 設置邊框的顏色 236

12.2.3 設置邊框的線寬 237

12.2.4 設置邊框的復合屬性 238

12.3 設置邊框的圓角效果 239

12.3.1 設置圓角邊框 239

12.3.2 指定兩個圓角半徑 240

12.3.3 繪制四個不同角的圓角邊框 241

12.3.4 繪制不同種類的邊框 243

12.4 綜合示例――制作簡單的公司主頁 245

12.5 上機練習――制作簡單的生活資訊主頁 248

12.6 疑難解惑 249

第13章 使用CSS 3美化超級鏈接和鼠標 251

13.1 使用CSS 3來美化超鏈接 252

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

13.1.2 設置帶有提示信息的超級鏈接 253

13.1.3 設置超級鏈接的背景圖 254

13.1.4 設置超級鏈接的按鈕效果 255

13.2 使用CSS 3美化鼠標特效 256

13.2.1 使用CSS 3控制鼠標箭頭 256

13.2.2 設置鼠標變幻式超鏈接 258

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

13.3 綜合示例1――圖片版本的超級鏈接 261

13.4 綜合示例2――關于鼠標特效 262

13.5 上機練習――制作一個簡單的導航欄 264

13.6 疑難解惑 266

第14章 使用CSS 3美化表格和表單的樣式 267

14.1 美化表格的樣式 268

14.1.1 設置表格邊框的樣式 268

14.1.2 設置表格邊框的寬度 270

14.1.3 設置表格邊框的顏色 271

14.2 美化表單樣式 272

14.2.1 美化表單中的元素 272

14.2.2 美化提交按鈕 274

14.2.3 美化下拉菜單 276

14.3 綜合示例――制作用戶登錄頁面 277

14.4 上機練習――制作用戶注冊頁面 279

14.5 疑難解惑 281

第15章 使用CSS 3美化網(wǎng)頁菜單 283

15.1 使用CSS 3美化項目列表 284

15.1.1 美化無序列表 284

15.1.2 美化有序列表 285

15.1.3 美化自定義列表 287

15.1.4 制作圖片列表 288

15.1.5 縮進圖片列表 289

15.1.6 列表的復合屬性 291

15.2 使用CSS 3制作網(wǎng)頁菜單 292

15.2.1 制作無需表格的菜單 292

15.2.2 制作水平和垂直菜單 294

15.3 綜合示例――模擬soso導航欄 297

15.4 上機練習――將段落轉變成列表 299

15.5 疑難解惑 301

第16章 使用CSS 3濾鏡美化網(wǎng)頁元素 303

16.1 濾鏡概述 304

16.2 基本濾鏡 304

16.2.1 通道(Alpha)濾鏡 305

16.2.2 模糊(Blur)濾鏡 307

16.2.3 色彩(Chroma)濾鏡 308

16.2.4 投影(DropShadow)濾鏡 309

16.2.5 水平翻轉(FlipH)濾鏡 311

16.2.6 垂直翻轉(FlipV)濾鏡 311

16.2.7 光暈(Glow)濾鏡 312

16.2.8 灰度(Gray)濾鏡 313

16.2.9 反相(Invert)濾鏡 314

16.2.10 遮罩(Mask)濾鏡 315

16.2.11 波浪(Wave)濾鏡 315

16.2.12 陰影(Shadow)濾鏡 317

16.2.13 X-ray濾鏡 318

16.3 高級濾鏡 318

16.3.1 光照(Light)濾鏡 319

16.3.2 漸隱(BlendTrans)濾鏡 320

16.3.3 切換(RevealTrans)濾鏡 322

16.4 疑難解惑 324

第17章 JavaScript編程基本知識 325

17.1 認識JavaScript 326

17.1.1 什么是JavaScript 326

17.1.2 JavaScript的特點 326

17.1.3 JavaScript與Java的區(qū)別 327

17.1.4 JavaScript的版本 328

17.2 JavaScript基本語法的應用 329

17.2.1 注釋的應用 329

17.2.2 語句的應用 331

17.2.3 語句塊的應用 332

17.3 JavaScript的數(shù)據(jù)結構 333

17.3.1 認識標識符 333

17.3.2 認識關鍵字 333

17.3.3 認識常量 334

17.3.4 認識變量及其應用 334

17.4 JavaScript數(shù)據(jù)類型的使用 336

17.4.1 typeof運算符的使用 336

17.4.2 undefined類型的使用 338

17.4.3 null類型的使用 338

17.4.4 Boolean類型的使用 339

17.4.5 Number類型的使用 340

17.4.6 String類型的使用 341

17.4.7 Object類型的使用 342

17.5 JavaScript運算符的使用 342

17.5.1 算術運算符 342

17.5.2 比較運算符 344

17.5.3 位運算符 345

17.5.4 邏輯運算符 346

17.5.5 條件運算符 347

17.5.6 賦值運算符 348

17.5.7 運算符的優(yōu)先級 350

17.6 綜合示例――一個簡單的JavaScript程序 351

17.7 疑難解惑 352

第18章 JavaScript的程序控制結構與語句 353

18.1 賦值語句 354

18.2 條件判斷語句 354

18.2.1 if語句 354

18.2.2 if-else語句 355

18.2.3 if ... else if語句 356

18.2.4 if語句的嵌套 357

18.2.5 switch語句 359

18.3 循環(huán)控制語句 360

18.3.1 while語句 360

18.3.2 do-while語句 361

18.3.3 for語句 363

18.4 跳轉語句 364

18.4.1 break語句 364

18.4.2 continue語句 365

18.5 綜合示例――在頁面中顯示距離2015年元旦的天數(shù) 366

18.6 上機練習――制作一個簡易乘法表 367

18.7 疑難解惑 368

第19章 JavaScript中的函數(shù) 369

19.1 函數(shù)的簡介 370

19.2 調(diào)用函數(shù) 370

19.2.1 函數(shù)的簡單調(diào)用 370

19.2.2 在表達式中調(diào)用 371

19.2.3 在事件響應中調(diào)用函數(shù) 372

19.2.4 通過鏈接調(diào)用函數(shù) 373

19.3 JavaScript中常用的函數(shù) 374

19.3.1 嵌套函數(shù) 374

19.3.2 遞歸函數(shù) 375

19.3.3 內(nèi)置函數(shù) 376

19.4 綜合示例――購物簡易計算器 384

19.5 上機練習――制作閃爍圖片 386

19.6 疑難解惑 387

第20章 JavaScript的內(nèi)置對象 389

20.1 字符串對象 390

20.1.1 創(chuàng)建字符串對象的方法 390

20.1.2 字符串對象常用屬性的應用 390

20.1.3 字符串對象常用方法的應用 391

20.2 數(shù)學對象 394

20.2.1 創(chuàng)建Math對象的方法 394

20.2.2 數(shù)學對象屬性的應用 394

20.2.3 數(shù)學對象方法的使用 395

20.3 日期對象 397

20.3.1 創(chuàng)建日期對象 397

20.3.2 日期對象常用方法的應用 398

20.3.3 日期間的運算 401

20.4 數(shù)組對象 402

20.4.1 創(chuàng)建數(shù)組對象 402

20.4.2 數(shù)組對象屬性的應用 402

20.4.3 數(shù)組對象常用方法的應用 405

20.5 綜合示例――制作網(wǎng)頁隨機驗證碼 409

20.6 上機練習――動態(tài)顯示當前時間 410

20.7 疑難解惑 412

第21章 JavaScript對象編程 415

21.1 文檔對象模型(DOM) 416

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

21.1.2 在DOM模型中獲得對象 416

21.1.3 事件驅動的應用 417

21.2 窗口(window)對象 419

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

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

21.2.3 窗口的相關操作 423

21.3 文檔(document)對象 424

21.3.1 文檔屬性的應用 424

21.3.2 文檔中圖片的使用 426

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

21.4 表單對象 429

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

21.4.2 form對象屬性與方法的應用 430

21.4.3 單選按鈕與復選框的使用 431

21.4.4 下拉菜單的使用 432

21.5 綜合示例――表單注冊與表單驗證 433

21.6 上機練習――省市聯(lián)動效果 438

21.7 疑難解惑 441

第22章 HTML 5、CSS 3和JavaScript的搭配使用 443

22.1 常見的JavaScript編寫工具 444

22.1.1 記事本 444

22.1.2 Dreamweaver 445

22.2 JavaScript在HTML中的使用 446

22.2.1 在HTML網(wǎng)頁頭中嵌入JavaScript代碼 446

22.2.2 在HTML網(wǎng)頁中嵌入JavaScript代碼 447

22.2.3 在HTML網(wǎng)頁的元素事件中嵌入JavaScript代碼 448

22.2.4 在HTML中調(diào)用已經(jīng)存在的JavaScript文件 449

22.2.5 通過JavaScript偽URL引入JavaScript腳本代碼 450

22.3 JavaScript與CSS 3的結合使用 451

22.3.1 動態(tài)添加樣式 451

22.3.2 動態(tài)改變樣式 452

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

22.3.4 設置網(wǎng)頁元素的顯示與隱藏 456

22.4 HTML 5、CSS 3和JavaScript的搭配應用 457

22.4.1 設定左右移動的圖片 457

22.4.2 制作顏色選擇器 460

22.4.3 制作跑馬燈效果 462

22.5 綜合示例――制作樹形導航菜單 464

22.6 上機練習――制作滾動的菜單 468

22.7 疑難解惑 470

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

23.1 構思布局 474

23.1.1 設計分析 474

23.1.2 排版架構 474

23.2 內(nèi)容設計 475

23.2.1 使用JavaScript技術實現(xiàn)Logo與導航菜單 475

23.2.2 Banner區(qū) 476

23.2.3 資訊區(qū) 477

23.2.4 版權信息 479

23.3 設置鏈接 480

23.4 疑難解惑 480

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

24.1 整體布局 482

24.1.1 設計分析 482

24.1.2 排版架構 482

24.2 模塊分割 483

24.2.1 Logo與導航區(qū) 483

24.2.2 Banner與資訊區(qū) 485

24.2.3 產(chǎn)品類別區(qū)域 486

24.2.4 頁腳區(qū)域 488

24.3 設置鏈接 488

24.4 疑難解惑 488