HTML5+CSS+JavaScript深入學(xué)習(xí)實(shí)錄

第1章　設(shè)計(jì)的靈魂源于靈感 1
1.1 成為一名出色的網(wǎng)頁(yè)設(shè)計(jì)師 1
1.2 認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站 2
1.2.1 網(wǎng)頁(yè) 2
1.2.2 網(wǎng)站 3
1.3 制作網(wǎng)頁(yè)和網(wǎng)站的那些事 4
1.3.1 網(wǎng)站制作流程 4
1.3.2 網(wǎng)頁(yè)設(shè)計(jì)流程 5
1.3.3 發(fā)布站點(diǎn) 5
1.4 Web標(biāo)準(zhǔn)布局介紹 5
1.4.1 看當(dāng)前的Web開發(fā)標(biāo) 6
1.4.2 為什么使用Web標(biāo)準(zhǔn) 6
1.4.3 CSS布局標(biāo)準(zhǔn) 7
1.5 網(wǎng)頁(yè)制作工具面面觀 8
1.5.1 幾種可視化工具 8
1.5.2 安裝Dreamweaver 10
1.6 談HTML和JavaScript的必要性 13
1.7 靈感是設(shè)計(jì)師的設(shè)計(jì)之源 13
第2章　網(wǎng)頁(yè)設(shè)計(jì)三劍客 15
2.1 三劍客之——體現(xiàn)身材的HTML 15
2.1.1 HTML概述 15
2.1.2 HTML的特點(diǎn) 16
2.1.3 看HTML的身材如何 16
2.2 三劍客之——會(huì)化妝的CSS 16
2.2.1 CSS概述 17
2.2.2 CSS的特點(diǎn) 17
2.2.3 CSS的好處 18
2.3 三劍客之——JavaScript是美的升華 18
2.3.1 JavaScript概述 18
2.3.2 JavaScript基本概念 18
2.3.3 JavaScript的作用 19
2.4 一個(gè)典型頁(yè)面文件實(shí)例 20
第3章　網(wǎng)頁(yè)的記號(hào) 23
3.1 為網(wǎng)頁(yè)設(shè)計(jì)發(fā)型——設(shè)置網(wǎng)頁(yè)頭部元素 23
3.1.1 設(shè)置文檔類型 23
3.1.2 設(shè)置編碼類型 26
3.1.3 設(shè)置頁(yè)面標(biāo)題 28
3.2 其他頭部元素 30
3.2.1 命名空間 30
3.2.2 meta標(biāo)記 31
3.2.3 關(guān)鍵詞 31
3.2.4 網(wǎng)頁(yè)描述 31
3.3 設(shè)置頁(yè)面正文 34
3.4 注釋是一種說(shuō)明 36
第4章　你不一定了解的文字和段落 40
4.1 標(biāo)題文字 40
4.2 文本文字 42
4.2.1 文本文字標(biāo)記 43
4.2.2 字型設(shè)置 44
4.3 段落標(biāo)記 46
4.4 換行標(biāo)記 48
4.5 插入水平線 48
4.6 特殊符號(hào)處理 51
第5章　看超鏈接的跳躍 56
5.1 鏈接概述 56
5.1.1 錨鏈 56
5.1.2 URL引用 57
5.2 建立內(nèi)部鏈接 57
5.3 建立外部鏈接 60
5.4 使用Telnet鏈接 63
5.5 創(chuàng)建E-mail鏈接 64
5.6 創(chuàng)建FTP鏈接 66
5.7 其他形式的鏈接 68
5.7.1 新聞組鏈接 69
5.7.2 WAIS鏈接 69
第6章　圖片是修飾網(wǎng)頁(yè)的最佳途徑 71
6.1 常用的圖片格式介紹 71
6.1.1 GIF格式 71
6.1.2 JPEG格式 72
6.2 設(shè)置背景圖片 73
6.3 插入圖片 75
6.3.1 圖片的基本處理 76
6.3.2 圖片布局處理 77
6.4 設(shè)置圖片鏈接 80
第7章　你不一定了解的列表 82
7.1 無(wú)序列表 82
7.2 有序列表 84
7.3 更加緊湊的菜單列表 87
7.4 定義列表標(biāo)記 89
7.5 列表的嵌套使用 91
第8章　表格沒那么簡(jiǎn)單 94
8.1 創(chuàng)建一個(gè)表格 94
8.2 表格標(biāo)題 97
8.3 跨行和跨列 99
8.3.1 實(shí)現(xiàn)跨列處理 100
8.3.2 實(shí)現(xiàn)跨行處理 102
8.3.3 實(shí)現(xiàn)同時(shí)跨行、跨列處理 105
8.4 設(shè)置表格頁(yè)眉 107
8.5 設(shè)置表格背景圖像 109
8.6 對(duì)齊處理 110
8.6.1 表格的整體對(duì)齊 110
8.6.2 對(duì)齊表格中的內(nèi)元素 112
8.7 設(shè)置單元格大小 115
第9章　特效和多媒體帶來(lái)的絢麗 117
9.1 實(shí)現(xiàn)滾動(dòng)效果 117
9.2 設(shè)置背景音樂 119
9.2.1 代碼指定 119
9.2.2 媒體插件實(shí)現(xiàn) 120
9.3 插入Flash 122
9.4 插入Applet 126
9.5 ActiveX 控件 129
第10章　使用框架 133
10.1 框架標(biāo)記介紹 133
10.2 創(chuàng)建框架 135
10.3 設(shè)置框架大小 139
10.4 為框架創(chuàng)建鏈接 142
10.5 框架嵌套 146
第11章　看表單帶來(lái)的革命性意義 152
11.1 表單標(biāo)記 152
11.2 使用form標(biāo)記 153
11.3 使用文本域 154
11.4 使用文本區(qū)域 156
11.5 使用按鈕 159
11.6 使用單選按鈕和復(fù)選框 161
11.7 使用列表菜單 164
11.8 使用文件域 167
11.9 使用圖像域 169
11.10 使用隱藏域 171
11.11 使用單選組按鈕 173
11.12 表單的綜合使用 176
第12章　div布局處理 188
12.1 div標(biāo)記介紹 188
12.1.1 div的格式 188
12.1.2 使用div 189
12.2 插入div標(biāo)記 190
12.3 插入AP div 192
第13章　HTML 5來(lái)了 196
13.1 HTML 5 是下一代的HTML 196
13.1.1 發(fā)展歷程 196
13.1.2 HTML 5的吸引力 197
13.2 新特性之視頻處理 197
13.2.1 video標(biāo)記 198
13.2.2 標(biāo)記的屬性 198
13.3 新特性之音頻處理 203
13.3.1 audio標(biāo)記 203
13.3.2 標(biāo)記的屬性 204
13.4 新特性之Canvas 208
13.4.1 標(biāo)記介紹 208
13.4.2 HTML DOM Canvas 對(duì)象 209
13.4.3 Canvas實(shí)踐 209
13.5 新特性之Web存儲(chǔ) 219
13.5.1 Web存儲(chǔ)介紹 219
13.5.2 HTML 5中Web存儲(chǔ)的意義 220
13.5.3 兩種存儲(chǔ)方法 220
13.6 新特性之表單新特性 223
13.6.1 全新的Input 類型 223
13.6.2 全新的表單元素 227
13.6.3 全新的表單屬性 229
第14章　等了很久的CSS基礎(chǔ) 236
14.1 CSS語(yǔ)法 236
14.2 使用選擇符 239
14.2.1 命名機(jī)制 239
14.2.2 通配選擇符 240
14.2.3 類型選擇符 242
14.2.4 群組選擇符 244
14.2.5 包含選擇符 246
14.2.6 ID選擇符 248
14.2.7 class選擇符 250
14.2.8 組合選擇符 250
14.3 CSS屬性介紹 250
14.4 CSS編碼規(guī)范 252
14.4.1 書寫規(guī)范 253
14.4.2 命名規(guī)范 253
14.5 顏色介紹 253
14.5.1 顏色名稱定義 254
14.5.2 十六進(jìn)制定義 255
14.6 長(zhǎng)度單位 257
14.6.1 絕對(duì)長(zhǎng)度單位 257
14.6.2 相對(duì)長(zhǎng)度單位 257
14.7 百分比值 258
14.8 URL是地址 261
14.8.1 相對(duì)路徑 261
14.8.2 絕對(duì)路徑 261
14.8.3 應(yīng)用實(shí)例 261
14.9 CSS的調(diào)用 264
第15章　先看頁(yè)面布局 268
15.1 CSS元素介紹 268
15.1.1 塊元素 268
15.1.2 內(nèi)聯(lián)元素 271
15.1.3 可變?cè)?272
15.2 CSS元素定位介紹 272
15.2.1 元素的定位 272
15.2.2 定位屬性 277
15.3 內(nèi)容控制屬性 282
15.3.1 控制頁(yè)面內(nèi)容屬性display 282
15.3.2 是否顯示屬性visibility 283
15.3.3 居中顯示屬性text-align 286
15.3.4 邊界屬性margin 289
15.4 控制頁(yè)面背景 291
15.4.1 頁(yè)面背景概述 291
15.4.2 使用背景顏色 292
15.4.3 使用背景圖片 293
15.4.4 背景顏色和背景圖片混用 301
15.4.5 設(shè)置文本樣式 303
15.4.6 設(shè)置鏈接樣式 305
15.5 使用浮動(dòng)屬性 307
15.5.1 浮動(dòng)屬性簡(jiǎn)介 307
15.5.2 固定元素相鄰 307
15.5.3 兩個(gè)浮動(dòng)元素相鄰 309
15.5.4 多個(gè)浮動(dòng)元素相鄰 310
15.6 清除浮動(dòng)屬性 311
15.6.1 清除浮動(dòng)屬性簡(jiǎn)介 311
15.6.2 使用清除浮動(dòng)屬性 313
15.7 使用列表屬性 315
15.7.1 列表樣式屬性list-style-type 315
15.7.2 列表位置屬性list-style-position 317
15.7.3 列表圖片屬性list-style- image 318
15.7.4 列表綜合屬性list-style 320
第16章　將網(wǎng)頁(yè)打造成一個(gè)容器 322
16.1 盒模型簡(jiǎn)介 322
16.1.1 盒模型的內(nèi)容 322
16.1.2 盒模型的背景 324
16.2 使用補(bǔ)白屬性 324
16.2.1 補(bǔ)白屬性概述 324
16.2.2 使用補(bǔ)白屬性百分比值 327
16.2.3 使用單側(cè)補(bǔ)白屬性 329
16.3 使用邊框?qū)傩?331
16.3.1 邊框樣式屬性 331
16.3.2 邊框?qū)挾葘傩?333
16.3.3 邊框顏色屬性 335
16.3.4 邊框?qū)傩缘木C合使用 336
16.3.5 使用表格邊框?qū)傩?338
16.4 使用邊界屬性 340
16.4.1 邊界屬性 340
16.4.2 單側(cè)邊界屬性 342
16.4.3 相鄰邊界屬性 344
16.5 父子元素之間的距離 349
16.5.1 子元素邊界為0 349
16.5.2 父元素補(bǔ)白為0 351
16.6 嵌套元素使用負(fù)邊界 353
16.7 固定元素的大小 355
第17章　CSS設(shè)置和修飾 358
17.1 CSS文本設(shè)置 358
17.1.1 文本縮進(jìn) 358
17.1.2 對(duì)齊文本 362
17.1.3 圖文混排對(duì)齊處理 365
17.1.4 設(shè)置行高和間隔 367
17.1.5 設(shè)置文本間隔和空白 372
17.1.6 實(shí)現(xiàn)文本轉(zhuǎn)換 375
17.1.7 實(shí)現(xiàn)水平和垂直居中 376
17.2 文本修飾鏈接 380
17.2.1 文本修飾 380
17.2.2 使用鏈接屬性 383
17.2.3 設(shè)置鼠標(biāo)懸停樣式 389
17.3 CSS修飾圖片 391
17.3.1 背景圖片修飾 391
17.3.2 修飾內(nèi)容圖片 392
17.4 CSS表單修飾 395
17.4.1 修飾表單文本域 396
17.4.2 修飾表單文本區(qū)域 396
17.4.3 修飾表單按鈕 398
17.4.4 修飾表單復(fù)選框 399
17.4.5 修飾表單單選按鈕 400
17.4.6 修飾表單列表 401
17.4.7 修飾表單文件域 402
17.4.8 修飾表單圖像域 403
17.5 修飾頁(yè)面滾動(dòng)條 404
17.6 修飾水平線 406
17.7 修飾表格 407
17.7.1 修飾表格邊線和背景 407
17.7.2 設(shè)置表格的寬度和高度 408
17.7.3 實(shí)現(xiàn)表格居中 409
17.7.4 設(shè)置表格內(nèi)容高度 412
第18章　引入JavaScript 414
18.1 JavaScript簡(jiǎn)介 414
18.1.1 JavaScript格式 414
18.1.2 一個(gè)典型的JavaScript文件 414
18.2 數(shù)據(jù)類型 416
18.2.1 數(shù)據(jù)類型概述 416
18.2.2 JavaScript常量 417
18.2.3 JavaScript變量 417
18.3 表達(dá)式和運(yùn)算符 420
18.3.1 JavaScript表達(dá)式 420
18.3.2 JavaScript運(yùn)算符 420
18.4 JavaScript循環(huán)語(yǔ)句 424
18.4.1 if條件語(yǔ)句 424
18.4.2 for循環(huán)語(yǔ)句 427
18.4.3 while循環(huán)語(yǔ)句 429
18.4.4 do…while循環(huán)語(yǔ)句 430
18.4.5 break控制 432
18.4.6 switch循環(huán)語(yǔ)句 432
18.5 JavaScript函數(shù) 432
18.5.1 函數(shù)的構(gòu)成 433
18.5.2 JavaScript常用函數(shù) 434
18.6 JavaScript對(duì)象 436
18.6.1 對(duì)象基礎(chǔ)知識(shí) 436
18.6.2 JavaScript常用對(duì)象和方法 438
18.7 JavaScript事件 441
18.7.1 JavaScript常用事件 441
18.7.2 事件處理程序 443
18.8 JavaScript窗口對(duì)象 444
18.8.1 窗口對(duì)象 444
18.8.2 窗口對(duì)象的事件驅(qū)動(dòng) 444
18.8.3 窗口對(duì)象中的屬性 444
18.8.4 窗口對(duì)象的方法 445
18.8.5 JavaScript窗口對(duì)象的應(yīng)用 445
18.9 JavaScript框架對(duì)象 448
第19章　行為操作 451
19.1 行為介紹 451
19.1.1 行為簡(jiǎn)介 451
19.1.2 行為事件 453
19.1.3 行為的使用 453
19.2 調(diào)用JavaScript 455
19.3 URL轉(zhuǎn)移 456
19.4 交換圖像 458
19.5 打開瀏覽器窗口 460
19.6 顯示隱藏元素 462
19.7 播放聲音 463
19.8 改變屬性 465
19.9 彈出信息 467
19.10 跳轉(zhuǎn)菜單 469
19.11 拖動(dòng)AP元素 472
第20章　談一談設(shè)計(jì)師這個(gè)行業(yè) 474
20.1 網(wǎng)頁(yè)設(shè)計(jì)師這一行業(yè) 474
20.2 從合格到優(yōu)秀其實(shí)并不遙遠(yuǎn) 475
20.3 企業(yè)需要什么樣的人才 476
20.4 設(shè)計(jì)師們的三塊大蛋糕 476
20.5 從設(shè)計(jì)師的擔(dān)心談出路 477
第21章　從面試中談設(shè)計(jì) 479
21.1 面試 479
21.1.1 面試前的準(zhǔn)備 479
21.1.2 常見的面試錯(cuò)誤 480
21.2 面試中最大的問題 481
21.2.1 網(wǎng)頁(yè)設(shè)計(jì)師要抓住設(shè)計(jì)的靈魂 481
21.2.2 需要牢記的原則 481
21.2.3 考官的問題——網(wǎng)頁(yè)設(shè)計(jì)理念 484
21.2.4 考官的問題——網(wǎng)頁(yè)設(shè)計(jì)的誤區(qū) 484
21.3 在面試中所得——什么才是好的網(wǎng)頁(yè)設(shè)計(jì) 484
21.4 配色的問題 485
21.5 不得不說(shuō)的標(biāo)題 486
21.6 面試問題——網(wǎng)頁(yè)設(shè)計(jì)布局 487
21.7 網(wǎng)頁(yè)設(shè)計(jì)必須注意的26個(gè)問題 488
21.8 探索無(wú)止境，學(xué)習(xí)無(wú)歸期 491
第22章　從項(xiàng)目中談模塊 493
22.1 一個(gè)項(xiàng)目引發(fā)的問題 493
22.2 JavaScript特效的應(yīng)用 495
22.3 文字處理 496
22.3.1 實(shí)例概述 496
22.3.2 定義文本顏色 497
22.3.3 指定文本內(nèi)容 498
22.3.4 文本增亮處理 498
22.3.5 文本減亮處理 498
22.3.6 定義變換頻率 499
22.4 時(shí)間處理 502
22.5 圖像處理 506
22.5.1 實(shí)例概述 507
22.5.2 設(shè)置圖像屬性 507
22.5.3 亮度增加處理 507
22.5.4 亮度減小處理 508
22.6 背景處理 511
22.7 鼠標(biāo)光標(biāo)處理 515
22.7.1 實(shí)例概述 515
22.7.2 指定跟隨文本 515
22.7.3 文本效果處理 515
22.7.4 頁(yè)面顯示 516
22.8 菜單處理 518
22.8.1 實(shí)例概述 518
22.8.2 設(shè)置菜單元素內(nèi)容 518
22.8.3 設(shè)置滾動(dòng)區(qū)域?qū)傩?519
第23章　為Android手機(jī)設(shè)計(jì)網(wǎng)頁(yè) 523
23.1 搭建開發(fā)環(huán)境 523
23.1.1 搭建Android開發(fā)環(huán)境 523
23.1.2 搭建網(wǎng)頁(yè)運(yùn)行環(huán)境 525
23.2 先看一段代碼 528
23.2.1 實(shí)現(xiàn)主頁(yè) 528
23.2.2 編寫CSS文件 529
23.2.3 實(shí)現(xiàn)頁(yè)面自動(dòng)縮放 531
23.3 添加Android的CSS 532
23.3.1 編寫基本的樣式 532
23.3.2 添加視覺效果 534
23.4 添加JavaScript 535
23.4.1 jQuery框架介紹 535
23.4.2 具體實(shí)踐 536
23.5 使用Ajax 539
23.5.1 編寫HTML文件 539
23.5.2 編寫JavaScript文件 543
23.5.3 最后的修飾 544
23.6 讓網(wǎng)頁(yè)動(dòng)起來(lái) 545
23.6.1 一個(gè)開源框架——JQTouch 546
23.6.2 一個(gè)簡(jiǎn)單應(yīng)用 546
第24章　SEO優(yōu)化 555
24.1 SEO基礎(chǔ) 555
24.2 搜索引擎 556
24.2.1 搜索引擎的工作 556
24.2.2 搜索引擎之間的差異 557
24.3 非常重要的關(guān)鍵詞 557
24.3.1 優(yōu)化正確的關(guān)鍵詞 557
24.3.2 關(guān)鍵詞密度 558
24.3.3 特殊的關(guān)鍵詞 559
24.3.4 利用相關(guān)性提高網(wǎng)站關(guān)鍵詞排名 560
24.3.5 挖掘準(zhǔn)確的長(zhǎng)尾關(guān)鍵詞 562
24.4 鏈接 563
24.4.1 內(nèi)向鏈接和外向鏈接 563
24.4.2 錨文本 564
24.5 做好數(shù)據(jù)分析 565
24.6 網(wǎng)站排名算法總結(jié) 566
24.7 幾個(gè)有效的SEO排名策略 567
第25章　個(gè)人博客網(wǎng)站 569
25.1 網(wǎng)站規(guī)劃 569
25.1.1 站點(diǎn)需求分析 569
25.1.2 預(yù)期效果分析 570
25.1.3 站點(diǎn)結(jié)構(gòu)規(guī)劃 571
25.2 切圖分析 571
25.3 制作站點(diǎn)首頁(yè) 572
25.3.1 實(shí)現(xiàn)流程分析 572
25.3.2 制作頂部導(dǎo)航 573
25.3.3 設(shè)計(jì)中間內(nèi)容部分 577
25.3.4 制作底部版權(quán)部分 583
25.4 制作日志頁(yè)面 585
25.4.1 實(shí)現(xiàn)流程分析 585
25.4.2 日志內(nèi)容實(shí)現(xiàn) 585
25.5 制作日志詳情頁(yè)面 586
25.5.1 實(shí)現(xiàn)流程分析 586
25.5.2 頁(yè)面具體實(shí)現(xiàn) 587