HTML 5網(wǎng)頁(yè)設計與制作實(shí)戰從入門(mén)到精通簡(jiǎn)介，目錄書(shū)摘

內容簡(jiǎn)介:　　《HTML 5網(wǎng)頁(yè)設計與制作實(shí)戰從入門(mén)到精通》通過(guò)精選案例引導讀者深入學(xué)習，系統地介紹了利用HTML 5進(jìn)行網(wǎng)頁(yè)設計與制作的相關(guān)知識和操作方法。
　　全書(shū)共16章。第1～3章主要介紹HTML 5的基礎知識，包括基本概念、語(yǔ)法變化和基本語(yǔ)法等；第4～10章主要介紹常用的網(wǎng)頁(yè)設計，包括文本、色彩和圖片、列表與段落、超鏈接、多媒體、Canvas動(dòng)畫(huà)和表單等；第11～12章主要介紹HTML 5的高級應用，包括本地存儲和離線(xiàn)Web應用等；第13～16章通過(guò)實(shí)戰案例進(jìn)一步講解了基礎知識的綜合應用方法，包括休閑娛樂(lè )、企業(yè)門(mén)戶(hù)、電子商務(wù)、團購等多種類(lèi)型網(wǎng)頁(yè)的設計與制作方法。
　　在《HTML 5網(wǎng)頁(yè)設計與制作實(shí)戰從入門(mén)到精通》附贈的DVD多媒體教學(xué)光盤(pán)中，包含了17小時(shí)與圖書(shū)內容同步的教學(xué)錄像及所有實(shí)例的配套源文件。此外，還贈送了大量相關(guān)學(xué)習內容的教學(xué)錄像及擴展學(xué)習電子書(shū)等。為了滿(mǎn)足讀者在手機和平板電腦上學(xué)習的需要，光盤(pán)中還贈送了本書(shū)教學(xué)錄像的手機版視頻學(xué)習文件。
　　《HTML 5網(wǎng)頁(yè)設計與制作實(shí)戰從入門(mén)到精通》不僅適合HTML 5的初、中級讀者學(xué)習使用，也可以作為各類(lèi)院校相關(guān)專(zhuān)業(yè)學(xué)生和網(wǎng)頁(yè)制作培訓班的教材或輔導用書(shū)。

目錄:第1章　HTML 5概述
HTML是制作網(wǎng)頁(yè)需要掌握的基礎語(yǔ)言，任何高級網(wǎng)站開(kāi)發(fā)語(yǔ)言都必須以HTML為基礎實(shí)現。本章主要介紹HTML的基本概念和編寫(xiě)方法及瀏覽HTML文件的方法。
1．1　HTML 5概述　002
1．1．1　HTML的發(fā)展史　002
1．1．2　兼容性和存在即合理　002
1．1．3　效率和用戶(hù)優(yōu)先　002
1．1．4　化繁為簡(jiǎn)　003
1．2　HTML 5的基本概念　003
1．2．1　HTML 5的革命性變化　004
1．2．2　HTML 5文件的基本結構　004
1．2．3　HTML 5的標記　005
1．3　HTML 5文件的編寫(xiě)方法　005
1．3．1　使用記事本編寫(xiě)HTML 5　005
1．3．2　使用Dreamweaver編寫(xiě)HTML文件　006
1．3．3　編寫(xiě)第一個(gè)HTML 5網(wǎng)頁(yè)文件　007
高手私房菜　008

第2章　HTML 5改進(jìn)詳解
HTML 5作為最新的標記語(yǔ)言，與舊版本的HTML標記語(yǔ)言相比變化很大。在未來(lái)的網(wǎng)站開(kāi)發(fā)中，它將作為最常用的標記語(yǔ)言。本章開(kāi)始認識HTML 5。
2．1　HTML 5的適用范圍　010
2．2　使用瀏覽器查看HTML 5文件　010
2．2．1　各大瀏覽器與HTML 5的兼容性　010
2．2．2　查看頁(yè)面效果　010
2．2．3　查看源文件　011
2．3　編輯一個(gè)簡(jiǎn)單的HTML 5頁(yè)面　011
2．3．1　搭建支持的瀏覽器環(huán)境　011
2．3．2　檢測瀏覽器是否支持HTML標記　012
2．3．3　使用HTML結構編寫(xiě)“hello，world”頁(yè)面　013
2．4　語(yǔ)法變化　014
2．4．1　HTML 5的語(yǔ)法變化　014
2．4．2　HTML 5中的標記方法　014
2．4．3　版本兼容性　015
2．4．4　標記示例　015
2．5　新增和廢除的元素　016
2．5．1　新增的結構元素　016
2．5．2　新增的input元素的類(lèi)型　018
2．5．3　新增的其他元素　018
2．5．4　廢除的元素　021
2．6　新增和廢除的屬性　022
2．6．1　新增的屬性　022
2．6．2　廢除的屬性　024
2．7　全局屬性　026
2．7．1　Content Editable屬性　026
2．7．2　design Mode屬性　026
2．7．3　hidden屬性　027
2．7．4　spellcheck屬性　027
2．7．5　tabindex屬性　027
高手私房菜　028

第3章　HTML 5的基本語(yǔ)法
當互聯(lián)網(wǎng)和Web逐漸成為主流時(shí)，Web技術(shù)也發(fā)生了巨大的變化。W3C和其他的標準化組織共同制定了一些規范，用來(lái)創(chuàng )建和解釋基于Web的內容。
3．1　Web標準　030
3．1．1　Web標準概述　030
3．1．2　Web標準規定的內容　031
3．2　HTML基本結構　031
3．2．1　文檔類(lèi)型說(shuō)明　032
3．2．2　HTML標記　032
3．2．3　頭標記head　032
3．2．4　標題標記title　032
3．2．5　元信息標記meta　033
3．2．6　網(wǎng)頁(yè)的主體標記　034
3．2．7　頁(yè)面注釋標記　035
3．3　實(shí)例——符合W3C標準的HTML 5網(wǎng)頁(yè)結構　036
高手私房菜　036

第4章　網(wǎng)頁(yè)文本設計
文字是網(wǎng)頁(yè)中最主要也是最常用的元素。本章主要介紹在網(wǎng)頁(yè)中使用文字和文字結構標記的方法。
4．1　實(shí)例1——添加文本　038
4．1．1　普通文本　038
4．1．2　特殊字符文本　038
4．1．3　文本特殊樣式　039
4．2　實(shí)例2——文本排版　040
4．2．1　段落標記

與換行標記
　041
4．2．2　標題標記
~
　042
4．3　實(shí)例3——文本格式的高級設置　043
4．3．1　字體　043
4．3．2　字號　044
4．3．3　字體風(fēng)格　045
4．3．4　加粗字體　045
4．3．5　小寫(xiě)字母轉為大寫(xiě)字母　046
4．3．6　字體復合屬性　047
4．3．7　字體顏色　047
4．3．8　陰影文本　048
4．3．9　溢出文本　049
4．3．10　控制換行　050
4．4　實(shí)例4——成才教育網(wǎng)文本設計　051
高手私房菜　052

第5章　網(wǎng)頁(yè)色彩和圖片設計
網(wǎng)頁(yè)要給訪(fǎng)客帶來(lái)舒適愉悅的感覺(jué)，漂亮的網(wǎng)頁(yè)色彩搭配和圖片設計就顯得尤為重要。而且網(wǎng)頁(yè)的目的是更好地向訪(fǎng)客傳達信息，使用醒目直觀(guān)的圖片往往比單調的文字更有表現力和說(shuō)服力。
5．1　網(wǎng)頁(yè)色彩與圖片的關(guān)系　054
5．2　實(shí)例1——網(wǎng)頁(yè)圖像的應用　054
5．2．1　網(wǎng)頁(yè)圖片格式的選擇　054
5．2．2　使用路徑　055
5．2．3　網(wǎng)頁(yè)中插入圖像標記　056
5．2．4　設置圖像源文件　056
5．2．5　設置圖像在網(wǎng)頁(yè)中的寬度和高度　057
5．2．6　設置圖像的提示文字　058
5．3　實(shí)例2——制作茂森房地產(chǎn)廣告網(wǎng)頁(yè)　058
高手私房菜　059

第6章　網(wǎng)頁(yè)列表與段落設計
在網(wǎng)頁(yè)中文字列表和段落是最常見(jiàn)的內容之一。文字列表可分為有序和序兩種，而段落設計有文字格式設計、間隔、縮進(jìn)、對齊方式、文字修飾等內容。
6．1　實(shí)例1——網(wǎng)頁(yè)文字列表設計　062
6．1．1　建立序列表　062
6．1．2　建立有序列表　063
6．2　實(shí)例2——設置網(wǎng)頁(yè)段落格式　063
6．2．1　單詞間隔　063
6．2．2　字符間隔　064
6．2．3　文字修飾　065
6．2．4　垂直對齊方式　066
6．2．5　文本轉換　067
6．2．6　水平對齊方式　068
6．2．7　文本縮進(jìn)　069
6．2．8　文本行高　070
6．2．9　處理空白　071
6．2．10　文本反排　072
6．3　實(shí)例3——制作圖文混排型旅游網(wǎng)頁(yè)　073
高手私房菜　074

第7章　網(wǎng)頁(yè)超鏈接設計
鏈接是網(wǎng)頁(yè)中比較重要的組成部分，是實(shí)現各個(gè)網(wǎng)頁(yè)相互跳轉的依據。本章主要講述鏈接的概念和實(shí)現方法。
7．1　實(shí)例1——創(chuàng )建超文本與圖片鏈接　076
7．2　實(shí)例2——創(chuàng )建下載鏈接　080
7．3　實(shí)例3——使用相對路徑和絕對路徑　081
7．4　實(shí)例4——設置鏈接目標打開(kāi)窗口　082
7．5　實(shí)例5——超文本鏈接到一個(gè)E-mail地址　084
7．6　實(shí)例6——使用錨鏈接制作電子書(shū)閱讀網(wǎng)頁(yè)　087
7．7　實(shí)例7——超文本鏈接到其他內容　090
7．8　實(shí)例8——創(chuàng )建熱點(diǎn)區域　092
7．9　實(shí)例9——浮動(dòng)框架　094
高手私房菜　096

第8章　網(wǎng)頁(yè)多媒體設計　
網(wǎng)頁(yè)上除了文本、圖片等內容外，還可以增加音頻和視頻等多媒體內容。目前在網(wǎng)頁(yè)上沒(méi)有關(guān)于音頻和視頻的標準，多數音頻和視頻都是通過(guò)插件來(lái)播放的。為此，HTML 5新增了音頻和視頻的標簽。
8．1　HTML 5 Audio和Video概述　098
8．1．1　視頻容器　098
8．1．2　音頻和視頻編解碼器　098
8．1．3　Audio元素和Video元素的瀏覽器支持情況　099
8．2　實(shí)例1——使用HTML 5 Audio和Video API　099
8．2．1　理解媒體元素　099
8．2．2　使用audio元素　100
8．2．3　使用video元素　101
8．2．4　瀏覽器支持性檢測　101
8．3　實(shí)例2——設置網(wǎng)頁(yè)多媒體屬性　103
8．4　實(shí)例3——調用網(wǎng)頁(yè)多媒體　105
高手私房菜　106

第9章　網(wǎng)頁(yè)Canvas動(dòng)畫(huà)
HTML 5呈現了很多在之前的HTML版本中沒(méi)有的新特性，其中一個(gè)最值得提及的特性就是HTML Canvas，用戶(hù)通過(guò)它可以在網(wǎng)頁(yè)上繪制圖像。
9．1　實(shí)例1——認識畫(huà)布　108
9．1．1　Canvas元素的基本用法　108
9．1．2　繪制帶邊框矩形　108
9．1．3　繪制漸變圖形　109
9．2　實(shí)例2——在畫(huà)布中使用路徑　111
9．2．1　MoveTo與LineTo的用法　111
9．2．2　使用arc方法繪制圓形　112
9．3　實(shí)例3——對畫(huà)布中圖形的操作　113
9．3．1　變換圖形原點(diǎn)坐標　114
9．3．2　組合多個(gè)圖形　114
9．3．3　添加圖形陰影　116
9．4　實(shí)例4——處理畫(huà)布中的圖像　117
9．4．1　繪制圖像　118
9．4．2　平鋪圖像　118
9．4．3　切割圖像　120
9．4．4　處理像素　121
9．5　實(shí)例5——運用樣式與顏色　123
9．5．1　色彩設置　123
9．5．2　透明度　123
9．5．3　線(xiàn)型　126
9．5．4　漸變　128
9．6　實(shí)例6——畫(huà)布的其他應用　130
9．6．1　繪制文字　130
9．6．2　保存、恢復及輸出圖形　132
9．6．3　制作簡(jiǎn)單的動(dòng)畫(huà)　133
高手私房菜　136

第10章　網(wǎng)頁(yè)表單設計
在HTML 5中，表單擁有多個(gè)新的表單輸入類(lèi)型。這些新特性提供了更好的輸入控制和驗證。本章節主要講述表單的概述、表單基本元素的使用方法和表單高級元素的使用方法。
10．1　實(shí)例1——熟悉表單屬性　138
10．1．1　表單的用途　138
10．1．2　表單的屬性設置　138
10．2　實(shí)例2——表單基本元素的應用　140
10．2．1　文字字段　140
10．2．2　密碼域　141
10．2．3　單選按鈕　142
10．2．4　復選框　142
10．2．5　下拉選擇框　143
10．2．6　普通按鈕　144
10．2．7　提交按鈕　144
10．2．8　重置按鈕　145
10．3　實(shí)例3——表單高級元素的使用　146
10．3．1　URL類(lèi)型元素　146
10．3．2　Email類(lèi)型元素　147
10．3．3　date類(lèi)型元素　147
10．3．4　time類(lèi)型元素　148
10．3．5　datetime類(lèi)型元素　148
10．3．6　datetime-local類(lèi)型元素　149
10．3．7　month類(lèi)型元素　149
10．3．8　week類(lèi)型元素　150
10．3．9　number類(lèi)型元素　150
10．3．10　range類(lèi)型元素　151
10．3．11　search類(lèi)型元素　151
10．3．12　tel類(lèi)型元素　152
10．3．13　color類(lèi)型元素　152
10．4　實(shí)例4——創(chuàng )建用戶(hù)反饋表單　153
高手私房菜　154

第11章　HTML 5本地存儲
在HTML 5標準之前，Web存儲信息需要cookie來(lái)完成。因為它們由每個(gè)對服務(wù)器的請求來(lái)傳遞，使得cookie速度很慢而且效率不高。在THML 5中，Web存儲API為用戶(hù)如何在計算機或設備上存儲用戶(hù)信息作了數據標準的定義。
11．1　實(shí)例1——Web Storage存儲　156
11．1．1　sessionStorage對象　156
11．1．2　localStorage對象　157
11．2　實(shí)例2——操作localStorage　158
11．2．1　清空l(shuí)ocalStorage數據　158
11．2．2　遍歷localStorage數據　158
11．2．3　使用JSON對象存取數據　159
11．3　實(shí)例3——WebSQL數據庫應用　161
11．3．1　打開(kāi)與創(chuàng )建數據庫　161
11．3．2　執行事務(wù)　161
11．3．3　插入數據　161
11．3．4　數據管理　162
高手私房菜　162

第12章　構建離線(xiàn)的Web應用
為了能在離線(xiàn)的情況下訪(fǎng)問(wèn)網(wǎng)站，可以采用HTML 5的離線(xiàn)Web功能。本章主要介紹使用HTML 5離線(xiàn)Web應用API和使用HTML 5離線(xiàn)Web應用構建應用。
12．1　HTML 5離線(xiàn)Web應用概述　164
12．2　實(shí)例1——使用HTML 5離線(xiàn)Web應用API　164
12．2．1　檢查瀏覽器的支持情況　164
12．2．2　搭建簡(jiǎn)單的離線(xiàn)應用程序　164
12．2．3　支持離線(xiàn)行為　165
12．2．4　Manifest文件　166
12．2．5　ApplicationCache API　167
12．3　實(shí)例2——使用HTML 5離線(xiàn)Web應用構建應用　168
12．3．1　創(chuàng )建記錄資源的manifest文件　168
12．3．2　創(chuàng )建構成界面的HTML和CSS　168
12．3．3　創(chuàng )建離線(xiàn)的JavaScript　169
12．3．4　檢查applicationCache的支持情況　171
12．3．5　為Update按鈕添加處理函數　171
12．3．6　添加Storage功能代碼　171
12．3．7　添加離線(xiàn)事件處理程序　172
高手私房菜　172

第13章　制作休閑娛樂(lè )類(lèi)網(wǎng)頁(yè)
休閑娛樂(lè )類(lèi)的網(wǎng)頁(yè)種類(lèi)很多，如聊天交友、星座運程、游戲視頻等。本章主要以視頻類(lèi)網(wǎng)頁(yè)為例進(jìn)行介紹。
13．1　整體布局　174
13．1．1　設計分析　174
13．1．2　排版架構　174
13．2　模塊組成　175
13．3　制作步驟　176
13．3．1　制作樣式表　176
13．3．2　Logo與導航菜單　184
13．3．3　搜索條　185
13．3．4　左側視頻模塊　185
13．3．5　評論模塊　186
13．3．6　右側熱門(mén)推薦　187
13．3．7　底部模塊　189
高手私房菜　190

第14章　制作大型企業(yè)門(mén)戶(hù)類(lèi)網(wǎng)頁(yè)
作為大型企業(yè)的網(wǎng)站，根據主體內容不同，主頁(yè)所容括的信息量差異也很大。大型企業(yè)類(lèi)網(wǎng)站內容欄目會(huì )比較多，需要合理布局，每一個(gè)欄目的大小位置以及內容顯示形式都要精心設計。
14．1　整體布局　192
14．1．1　設計分析　192
14．1．2　排版架構　192
14．2　模塊組成　193
14．3　制作步驟　193
14．3．1　樣式表　193
14．3．2　網(wǎng)頁(yè)頭部　195
14．3．3　導航菜單欄　196
14．3．4　中間主體第一欄　196
14．3．5　中間主體第二欄　200
14．3．6　中間主體第三欄　204
14．3．7　中間主體第四欄　210
14．3．8　中間主體第五欄　214
14．3．9　網(wǎng)頁(yè)底部　219
高手私房菜　220

第15章　制作電子商務(wù)類(lèi)網(wǎng)頁(yè)
電子商務(wù)網(wǎng)站是當前比較流行的一類(lèi)網(wǎng)站。隨著(zhù)網(wǎng)絡(luò )購物、互聯(lián)網(wǎng)交易的普及，如淘寶、阿里巴巴、亞馬遜等類(lèi)型的電子商務(wù)網(wǎng)站在近幾年風(fēng)靡全球。因此，越來(lái)越多的公司企業(yè)著(zhù)手架設電子商務(wù)網(wǎng)站平臺。本章就來(lái)介紹一個(gè)簡(jiǎn)單的電子商務(wù)類(lèi)網(wǎng)頁(yè)。
15．1　整體布局　222
15．1．1　設計分析　222
15．1．2　排版架構　223
15．2　模塊組成　223
15．3　制作步驟　224
15．3．1　樣式表　224
15．3．2　網(wǎng)頁(yè)頭部　225
15．3．3　主體第一通欄　229
15．3．4　主體第二通欄　234
15．3．5　主體第三通欄　242
15．3．6　網(wǎng)頁(yè)底部　245
高手私房菜　248

第16章　制作團購類(lèi)網(wǎng)頁(yè)
團購這一名詞是最近幾年才出現的，而且迅速火爆。有關(guān)團購的商業(yè)類(lèi)網(wǎng)站也如雨后春筍般遍地開(kāi)花，比較有名的有聚劃算、窩窩團、拉手網(wǎng)、美團網(wǎng)等。本章就來(lái)制作一個(gè)典型的商業(yè)類(lèi)團購網(wǎng)站。
16．1　整體布局　250
16．1．1　設計分析　251
16．1．2　排版架構　251
16．2　模塊組成　252
16．3　制作步驟　252
16．3．1　樣式表　252
16．3．2　網(wǎng)頁(yè)頭部　255
16．3．3　分類(lèi)及區域選擇　257
16．3．4　新品展示　258
16．3．5　側邊欄　262
16．3．6　熱門(mén)城市索引　267
16．3．7　網(wǎng)頁(yè)底部　268
16．3．8　JavaScript腳本　269
高手私房菜　270