網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目教程（HTML5+CSS3+JavaScript）

第1章 HTML5概述\t1
1．1 HTML簡(jiǎn)介\t1
1．2 了解HTML5\t2
1．3 搭建HTML5的開(kāi)發(fā)環(huán)境\t4
1．4 HTML5文件的編寫(xiě)方法\t4
1．4．1　使用記事本手工編寫(xiě)HTML5文件\t4
1．4．2　使用Dreamweaver CS編寫(xiě)HTML
文件\t6
1．4．3　實(shí)例：編寫(xiě)第一個(gè)HTML5網(wǎng)頁(yè)
文件\t7
1．4．4 預(yù)覽HTML5網(wǎng)頁(yè)\t8
本章小結(jié)\t8
練習(xí)與實(shí)訓(xùn)\t8
第2章 全新的HTML5\t9
2．1　HTML5的適用范圍\t9
2．1．1 HTML5與各大瀏覽器的兼容性\t9
2．1．2 運(yùn)用＜video＞和＜audio＞標(biāo)簽進(jìn)行
視頻和音頻制作\t9
2．1．3 更炫酷的界面\t10
2．1．4 更強(qiáng)大的表單功能\t10
2．1．5 提升可訪問(wèn)性\t10
2．2 語(yǔ)法變化\t10
2．2．1 HTML5的語(yǔ)法變化\t10
2．2．2 HTML5中的標(biāo)記方法\t11
2．2．3 HTML5與之前版本的兼容性\t12
2．3 HTML5新增和廢除的元素\t13
2．3．1 新增的結(jié)構(gòu)元素\t13
2．3．2 新增的其他元素\t14
2．3．3 廢除的元素\t15
2．4 新增的屬性\t16
2．5 全局屬性\t17
2．5．1 hidden屬性\t18
2．5．2 spellcheck屬性\t18
2．5．3 contenteditable屬性\t18
2．5．4 designmode屬性\t19
2．5．5 tabindex屬性\t19
本章小結(jié)\t19
練習(xí)與實(shí)訓(xùn)\t19
第3章 認(rèn)識(shí)HTML5的文檔結(jié)構(gòu)\t20
3．1 Web標(biāo)準(zhǔn)\t20
3．1．1　Web標(biāo)準(zhǔn)概述\t20
3．1．2　Web標(biāo)準(zhǔn)規(guī)定的內(nèi)容\t20
3．2 HTML5的基本結(jié)構(gòu)\t21
3．2．1 文檔類(lèi)型標(biāo)記doctype\t21
3．2．2　html標(biāo)記\t21
3．2．3　頭標(biāo)記head\t21
3．2．4 主體標(biāo)記body\t22
3．2．5　標(biāo)題標(biāo)記title\t22
3．2．6　元信息標(biāo)記meta\t22
3．2．7　頁(yè)面注釋標(biāo)記\t24
3．3　綜合實(shí)例――符合W3C標(biāo)準(zhǔn)的HTML5
網(wǎng)頁(yè)\t24
3．3．1 HTML\t26
3．3．2　CSS\t27
3．3．3　JavaScript\t27
3．4 HTML5頁(yè)面構(gòu)成\t28
3．4．1 HTML5頁(yè)面主要組成部分\t28
3．4．2 綜合實(shí)例――HTML5頁(yè)面構(gòu)成\t29
本章小結(jié)\t36
練習(xí)與實(shí)訓(xùn)\t36
第4章 網(wǎng)頁(yè)文本設(shè)計(jì)\t37
4．1　添加文本\t37
4．1．1 普通文本\t37
4．1．2 特殊字符文本\t37
4．1．3 文本特殊樣式\t38
4．2 文本排版\t41
4．2．1 段落標(biāo)記\t41
4．2．2 標(biāo)題標(biāo)記\t43
4．2．3 center標(biāo)記\t44
4．2．4 hr標(biāo)記\t45
4．2．5 span標(biāo)記\t46
4．2．6 特殊信息文本\t47
4．3 網(wǎng)頁(yè)文字列表設(shè)計(jì)\t52
4．3．1　建立無(wú)序列表\t52
4．3．2　建立有序列表\t54
4．3．3　建立自定義列表\t55
本章小結(jié)\t56
練習(xí)與實(shí)訓(xùn)\t56
第5章 美化網(wǎng)頁(yè)――使用CSS3技術(shù)\t57
5．1　CSS3概述\t57
5．2　CSS3基本選擇器\t57
5．2．1　標(biāo)記選擇器\t58
5．2．2　類(lèi)選擇器\t58
5．2．3　ID選擇器\t59
5．3　在HTML5中使用CSS3的方法\t60
5．3．1　行內(nèi)樣式\t60
5．3．2　嵌入樣式\t60
5．3．3　鏈接樣式\t61
5．3．4　導(dǎo)入樣式\t62
5．3．5　樣式的優(yōu)先級(jí)\t62
5．4　CSS3復(fù)合選擇器\t64
5．4．1　交集選擇器\t64
5．4．2　并集選擇器\t64
5．4．3　后代選擇器\t65
5．4．4　子選擇器\t66
5．4．5　相鄰選擇器\t67
5．4．6 偽類(lèi)選擇器\t67
5．4．7　偽對(duì)象選擇器\t68
5．5 CSS3常用效果與技巧\t69
5．5．1 陰影效果\t70
5．5．2 2D與3D效果\t71
本章小結(jié)\t75
練習(xí)與實(shí)訓(xùn)\t75
第6章 文本格式的高級(jí)設(shè)置\t76
6．1　文本樣式\t76
6．1．1　字體\t76
6．1．2　字號(hào)\t77
6．1．3　字體風(fēng)格\t78
6．1．4　加粗字體\t78
6．1．5　小寫(xiě)字母轉(zhuǎn)為大寫(xiě)字母\t78
6．1．6　字體復(fù)合屬性\t79
6．1．7　字體顏色\t79
6．1．8　溢出文本\t80
6．1．9 控制換行\(zhòng)t81
6．2 文本樣式\t81
6．2．1　單詞間隔\t81
6．2．2　字符間隔\t82
6．2．3　文字修飾\t82
6．2．4　垂直對(duì)齊方式\t83
6．2．5　水平對(duì)齊方式\t84
6．2．6　文本縮進(jìn)\t84
6．2．7　文本行高\(yùn)t85
6．2．8　處理空白\t85
6．2．9　文本反排\t86
6．3　CSS3設(shè)置文本樣式\t87
6．4　綜合實(shí)例―― 用CSS3設(shè)計(jì)網(wǎng)站側(cè)邊導(dǎo)
航欄\t88
本章小結(jié)\t92
練習(xí)與實(shí)訓(xùn)\t92
第7章 網(wǎng)頁(yè)色彩和圖片設(shè)計(jì)\t93
7．1 網(wǎng)頁(yè)色彩和圖片的關(guān)系\t93
7．2　網(wǎng)頁(yè)圖像的應(yīng)用\t94
7．2．1 網(wǎng)頁(yè)圖片格式的選擇\t94
7．2．2　路徑表示法\t96
7．2．3　圖片的使用\t97
7．3　用CSS3設(shè)置顏色與背景\t98
7．3．1　用CSS3設(shè)置圖像效果\t100
7．3．2　圖片縮放\t101
本章小結(jié)\t103
練習(xí)與實(shí)訓(xùn)\t103
第8章 網(wǎng)頁(yè)超鏈接設(shè)計(jì)\t104
8．1　創(chuàng)建超文本與圖片鏈接\t104
8．2　創(chuàng)建下載鏈接\t105
8．3　使用相對(duì)路徑和絕對(duì)路徑\t106
8．4　設(shè)置鏈接目標(biāo)打開(kāi)窗口\t107
8．5　超文本鏈接到一個(gè)E-mail地址\t108
8．6　使用錨鏈接制作電子書(shū)閱讀網(wǎng)頁(yè)\t110
8．7　創(chuàng)建熱點(diǎn)區(qū)域\t112
8．8　浮動(dòng)框架\t113
8．9 綜合實(shí)例――圖片熱點(diǎn)區(qū)域制作\t114
本章小結(jié)\t118
練習(xí)與實(shí)訓(xùn)\t118
第9章 用HTML5創(chuàng)建表格\t119
9．1　創(chuàng)建表格\t119
9．1．1 創(chuàng)建表格的基本語(yǔ)法――table
元素、tr元素、th元素、td元素\t119
9．1．2 表格的描述――summary屬性\t121
9．2 表格的標(biāo)題――caption元素\t122
9．3 設(shè)置單元格――th元素、td元素\t122
9．3．1 使用th元素和td元素定義單元格\t122
9．3．2 跨多行、多列的單元格\t124
9．4 表格的按行分組顯示――thead元素、
tfoot元素、tbody元素\t127
9．5 表格的按列分組顯示――colgroup
元素、col元素\t128
本章小結(jié)\t130
練習(xí)與實(shí)訓(xùn)\t130
第10章 網(wǎng)頁(yè)表單設(shè)計(jì)\t131
10．1　熟悉表單屬性\t131
10．1．1 表單的用途\t131
10．1．2 表單的屬性設(shè)置\t132
10．2 基本元素的應(yīng)用\t134
10．2．1 文本框\t137
10．2．2 密碼域\t138
10．2．3 單選框\t138
10．2．4 復(fù)選框\t139
10．2．5 普通按鈕\t140
10．2．6 提交按鈕\t141
10．2．7 重置按鈕\t141
10．2．8 多行文本框textarea\t141
10．2．9 label標(biāo)簽\t142
10．2．10 下拉列表框\t143
10．2．11 其他基本元素\t144
10．3 表單高級(jí)元素的使用\t145
10．3．1 url類(lèi)型元素\t145
10．3．2 email類(lèi)型元素\t146
10．3．3 number類(lèi)型元素\t146
10．3．4 range類(lèi)型元素\t147
10．3．5 search類(lèi)型元素\t148
10．3．6 color類(lèi)型元素\t149
10．3．7 日期和時(shí)間元素\t149
10．3．8 datalist標(biāo)簽\t150
10．3．9 input表單控件新增屬性\t151
10．4 綜合實(shí)例――創(chuàng)建用戶(hù)反饋表單\t153
本章小結(jié)\t160
練習(xí)與實(shí)訓(xùn)\t160
第11章 網(wǎng)頁(yè)多媒體設(shè)計(jì)\t162
11．1　HTML5 audio元素和video元素概述\t162
11．1．1 視頻容器\t162
11．1．2 音頻和視頻編解碼器\t162
11．1．3 audio元素和video元素的src
屬性和source屬性\t164
11．2　網(wǎng)頁(yè)中的音頻文件\t165
11．2．1 audio元素的瀏覽器支持情況\t165
11．2．2 添加自動(dòng)播放音頻文件（autoplay
屬性）\t165
11．2．3 添加帶有控件的音頻文件
（controls屬性）\t166
11．2．4 添加循環(huán)播放音頻文件
（loop屬性）\t167
11．2．5 添加預(yù)播放的音頻文件
（preload屬性）\t167
11．3　網(wǎng)頁(yè)中的視頻文件\t168
11．3．1 video元素的瀏覽器支持情況\t168
11．3．2 添加帶有控件的視頻文件
（controls屬性）\t169
11．3．3 添加自動(dòng)播放的視頻文件
（autoplay屬性）\t171
11．3．4 添加循環(huán)播放的視頻文件（loop
屬性）\t172
11．3．5 添加預(yù)播放的視頻文件（preload
屬性）\t173
11．3．6 設(shè)置視頻文件的寬度和高度
（width與height屬性）\t174
11．3．7 設(shè)置視頻文件的error屬性\t175
11．3．8 設(shè)置視頻文件的networkState
屬性（只讀屬性）\t176
11．3．9 視頻文件的readyState屬性\t176
11．4　多媒體元素常用方法和事件簡(jiǎn)述\t176
11．5 綜合實(shí)例 ―― 使用多媒體元素播放
文件\t177
本章小結(jié)\t178
練習(xí)與實(shí)訓(xùn)\t178
第12章 HTML5布局\t179
12．1 布局簡(jiǎn)介\t179
12．1．1 頁(yè)面元素與布局核心技巧\t179
12．1．2 元素顯示方式\t179
12．2 圖文混排與題圖文字布局\t180
12．2．1 圖文混排布局\t180
12．2．2 題圖文字布局\t181
12．3 float多欄布局\t182
12．3．1 float浮動(dòng)\t183
12．3．2 清除浮動(dòng)clear\t185
12．3．3 float兩列均分布局\t186
12．3．4 float多欄布局\t191
12．4 盒布局與彈性盒布局\t197
12．4．1 盒布局\t197
12．4．2 彈性盒布局\t199
12．5 position定位\t205
12．5．1 position\t205
12．5．2 z-index\t207
12．5．3 clip\t208
本章小結(jié)\t209
練習(xí)與實(shí)訓(xùn)\t209
第13章 使用JavaScript腳本語(yǔ)言實(shí)現(xiàn)網(wǎng)頁(yè)
動(dòng)態(tài)效果\t210
13．1　JavaScript簡(jiǎn)介\t210
13．1．1　JavaScript的概念和特點(diǎn)\t210
13．1．2　JavaScript與Java\t211
13．1．3　第一個(gè)JavaScript程序\t212
13．2　在html文檔中使用腳本代碼\t215
13．2．1 內(nèi)部引用JavaScript\t216
13．2．2 外部引用JavaScript\t216
13．2．3 內(nèi)聯(lián)引用JavaScript\t217
13．3　JavaScript語(yǔ)言基礎(chǔ)\t218
13．3．1　JavaScript語(yǔ)法格式\t218
13．3．2　JavaScript語(yǔ)句\t218
13．3．3　JavaScript注釋\t219
13．3．4　數(shù)據(jù)類(lèi)型\t220
13．3．5　常量\t220
13．3．6　變量\t221
13．4　表達(dá)式與運(yùn)算符\t222
13．4．1　表達(dá)式\t222
13．4．2　運(yùn)算符\t222
13．5　JavaScript控制結(jié)構(gòu)與函數(shù)\t224
13．5．1　JavaScript控制結(jié)構(gòu)\t224
13．5．2　函數(shù)\t233
13．6 事件驅(qū)動(dòng)及事件處理\t237
13．7　對(duì)象編程\t239
13．7．1 內(nèi)置對(duì)象\t239
13．7．2 文檔對(duì)象編程\t248
13．8　綜合實(shí)例――實(shí)現(xiàn)即時(shí)驗(yàn)證效果\t254
本章小結(jié)\t259
練習(xí)與實(shí)訓(xùn)\t259
第14章 網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)綜合范例\t260
14．1　網(wǎng)頁(yè)內(nèi)容分析\t260
14．2　綜合實(shí)例――制作門(mén)戶(hù)類(lèi)網(wǎng)頁(yè)\t261
14．2．1 網(wǎng)頁(yè)框架構(gòu)建及素材的準(zhǔn)備\t261
14．2．2 建立本地站點(diǎn)\t262
14．2．3 使用HTML創(chuàng)建頁(yè)面結(jié)構(gòu)\t263
14．2．4 使用CSS布局并美化頁(yè)面\t265
本章小結(jié)\t271
練習(xí)與實(shí)訓(xùn)\t271
參考文獻(xiàn) \t272