本文關(guān)鍵詞：HTML5網(wǎng)頁設(shè)計(jì)與制作實(shí)戰(zhàn)從入門到精通，由筆耕文化傳播整理發(fā)布。

圖書介紹

去看看

圖書PDF

高速鏈接 快速鏈接

圖書目錄

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

第2章　HTML 5改進(jìn)詳解
HTML 5作為最新的標(biāo)記語言，與舊版本的HTML標(biāo)記語言相比變化很大。在未來的網(wǎng)站開發(fā)中，它將作為最常用的標(biāo)記語言。本章開始認(rèn)識(shí)HTML 5。
2．1　HTML 5的適用范圍　010
2．2　使用瀏覽器查看HTML 5文件　010
2．2．1　各大瀏覽器與HTML 5的兼容性　010
2．2．2　查看頁面效果　010
2．2．3　查看源文件　011
2．3　編輯一個(gè)簡單的HTML 5頁面　011
2．3．1　搭建支持的瀏覽器環(huán)境　011
2．3．2　檢測瀏覽器是否支持HTML標(biāo)記　012
2．3．3　使用HTML結(jié)構(gòu)編寫“hello，world”頁面　013
2．4　語法變化　014
2．4．1　HTML 5的語法變化　014
2．4．2　HTML 5中的標(biāo)記方法　014
2．4．3　版本兼容性　015
2．4．4　標(biāo)記示例　015
2．5　新增和廢除的元素　016
2．5．1　新增的結(jié)構(gòu)元素　016
2．5．2　新增的input元素的類型　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的基本語法
當(dāng)互聯(lián)網(wǎng)和Web逐漸成為主流時(shí)，Web技術(shù)也發(fā)生了巨大的變化。W3C和其他的標(biāo)準(zhǔn)化組織共同制定了一些規(guī)范，用來創(chuàng)建和解釋基于Web的內(nèi)容。
3．1　Web標(biāo)準(zhǔn)　030
3．1．1　Web標(biāo)準(zhǔn)概述　030
3．1．2　Web標(biāo)準(zhǔn)規(guī)定的內(nèi)容　031
3．2　HTML基本結(jié)構(gòu)　031
3．2．1　文檔類型說明　032
3．2．2　HTML標(biāo)記　032
3．2．3　頭標(biāo)記head　032
3．2．4　標(biāo)題標(biāo)記title　032
3．2．5　元信息標(biāo)記meta　033
3．2．6　網(wǎng)頁的主體標(biāo)記　034
3．2．7　頁面注釋標(biāo)記　035
3．3　實(shí)例——符合W3C標(biāo)準(zhǔn)的HTML 5網(wǎng)頁結(jié)構(gòu)　036
高手私房菜　036

第4章　網(wǎng)頁文本設(shè)計(jì)
文字是網(wǎng)頁中最主要也是最常用的元素。本章主要介紹在網(wǎng)頁中使用文字和文字結(jié)構(gòu)標(biāo)記的方法。
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　段落標(biāo)記

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

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

第6章　網(wǎng)頁列表與段落設(shè)計(jì)
在網(wǎng)頁中文字列表和段落是最常見的內(nèi)容之一。文字列表可分為有序和序兩種，而段落設(shè)計(jì)有文字格式設(shè)計(jì)、間隔、縮進(jìn)、對(duì)齊方式、文字修飾等內(nèi)容。
6．1　實(shí)例1——網(wǎng)頁文字列表設(shè)計(jì)　062
6．1．1　建立序列表　062
6．1．2　建立有序列表　063
6．2　實(shí)例2——設(shè)置網(wǎng)頁段落格式　063
6．2．1　單詞間隔　063
6．2．2　字符間隔　064
6．2．3　文字修飾　065
6．2．4　垂直對(duì)齊方式　066
6．2．5　文本轉(zhuǎn)換　067
6．2．6　水平對(duì)齊方式　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)頁　073
高手私房菜　074

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

第8章　網(wǎng)頁多媒體設(shè)計(jì)　
網(wǎng)頁上除了文本、圖片等內(nèi)容外，還可以增加音頻和視頻等多媒體內(nèi)容。目前在網(wǎng)頁上沒有關(guān)于音頻和視頻的標(biāo)準(zhǔn)，多數(shù)音頻和視頻都是通過插件來播放的。為此，HTML 5新增了音頻和視頻的標(biāo)簽。
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——設(shè)置網(wǎng)頁多媒體屬性　103
8．4　實(shí)例3——調(diào)用網(wǎng)頁多媒體　105
高手私房菜　106

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

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

第11章　HTML 5本地存儲(chǔ)
在HTML 5標(biāo)準(zhǔn)之前，Web存儲(chǔ)信息需要cookie來完成。因?yàn)樗鼈冇擅總�(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，使得cookie速度很慢而且效率不高。在THML 5中，Web存儲(chǔ)API為用戶如何在計(jì)算機(jī)或設(shè)備上存儲(chǔ)用戶信息作了數(shù)據(jù)標(biāo)準(zhǔn)的定義。
11．1　實(shí)例1——Web Storage存儲(chǔ)　156
11．1．1　sessionStorage對(duì)象　156
11．1．2　localStorage對(duì)象　157
11．2　實(shí)例2——操作localStorage　158
11．2．1　清空localStorage數(shù)據(jù)　158
11．2．2　遍歷localStorage數(shù)據(jù)　158
11．2．3　使用JSON對(duì)象存取數(shù)據(jù)　159
11．3　實(shí)例3——WebSQL數(shù)據(jù)庫應(yīng)用　161
11．3．1　打開與創(chuàng)建數(shù)據(jù)庫　161
11．3．2　執(zhí)行事務(wù)　161
11．3．3　插入數(shù)據(jù)　161
11．3．4　數(shù)據(jù)管理　162
高手私房菜　162

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

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

第14章　制作大型企業(yè)門戶類網(wǎng)頁
作為大型企業(yè)的網(wǎng)站，根據(jù)主體內(nèi)容不同，主頁所容括的信息量差異也很大。大型企業(yè)類網(wǎng)站內(nèi)容欄目會(huì)比較多，需要合理布局，每一個(gè)欄目的大小位置以及內(nèi)容顯示形式都要精心設(shè)計(jì)。
14．1　整體布局　192
14．1．1　設(shè)計(jì)分析　192
14．1．2　排版架構(gòu)　192
14．2　模塊組成　193
14．3　制作步驟　193
14．3．1　樣式表　193
14．3．2　網(wǎng)頁頭部　195
14．3．3　導(dǎo)航菜單欄　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)頁底部　219
高手私房菜　220

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

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

查看全部 ↓

  本文關(guān)鍵詞：HTML5網(wǎng)頁設(shè)計(jì)與制作實(shí)戰(zhàn)從入門到精通，由筆耕文化傳播整理發(fā)布。