本書(shū)以HTML與CSS為主體,配合JavaScript語(yǔ)法,從基礎(chǔ)到高級(jí)循序漸進(jìn)地進(jìn)行介紹,并提供具體的范例讓讀者能夠立即練習(xí)。
全書(shū)共17章,首先介紹了HTML5基礎(chǔ)入門(mén)方面的內(nèi)容,包括文字變化與排版、多媒體素材、表格與表單、建立超鏈接等;然后介紹了CSS美化方面的內(nèi)容,包括CSS樣式表基礎(chǔ)知識(shí)、常用的CSS語(yǔ)法等;接下來(lái)對(duì)Canvas、JavaScript、Web Storage等內(nèi)容進(jìn)行了介紹;*后詳細(xì)說(shuō)明了使用jQuery Mobile建立移動(dòng)設(shè)備的Web開(kāi)發(fā)方法。
本書(shū)既適合作為網(wǎng)頁(yè)設(shè)計(jì)或手機(jī)開(kāi)發(fā)的初中級(jí)用戶參考書(shū),也適合作為職業(yè)技術(shù)學(xué)校計(jì)算機(jī)專業(yè)程序設(shè)計(jì)課程的教材。
贈(zèng)送本書(shū)范例與習(xí)題的素材和代碼,下載地址:http://pan.baidu.com/s/1eRLAasU本書(shū)以HTML5與CSS3為主軸,搭配JavaScript將開(kāi)發(fā)中經(jīng)常使用的語(yǔ)法進(jìn)行整合,由基礎(chǔ)到高級(jí)循序漸進(jìn)地講解。通過(guò)大量的應(yīng)用范例解說(shuō)及實(shí)戰(zhàn),搭配jQuery以及jQuery Mobile這兩種JavaScript Library,讓你用*精簡(jiǎn)的程序代碼就能輕松完成跨瀏覽器的網(wǎng)頁(yè)設(shè)計(jì),進(jìn)而開(kāi)發(fā)移動(dòng)設(shè)備網(wǎng)頁(yè)。
有人說(shuō):Web 3.0將是技術(shù)與Internet緊密結(jié)合的時(shí)代。Web 3.0除了讓瀏覽者能夠共享信息并與其他用戶及社區(qū)交互之外,還包含了云與移動(dòng)網(wǎng)絡(luò)服務(wù)。設(shè)計(jì)網(wǎng)頁(yè)要跟上Web 3.0的腳步,除基本的HTML之外,CSS與JavaScript技術(shù)也是不可缺少的,支持移動(dòng)設(shè)備的網(wǎng)頁(yè)更是未來(lái)的趨勢(shì)。這么多技術(shù),對(duì)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)新手來(lái)說(shuō),往往不得其門(mén)而入。其實(shí),大部分的網(wǎng)頁(yè)技術(shù)都是以HTML為基礎(chǔ)的,學(xué)習(xí)各種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)之前,需要先熟悉HTML語(yǔ)法,才能達(dá)到事半功倍的效果。發(fā)展HTML5的主要目的是希望能夠減少瀏覽器對(duì)于外掛程序(如Adobe Flash、Microsoft Silverlight)的需求,并且提供更多網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn),讓不同瀏覽器具有遵循的依據(jù)。雖然目前仍然無(wú)法實(shí)現(xiàn)這樣的理想,但是隨著HTML5標(biāo)準(zhǔn)的不斷發(fā)展與更新,期待有一天真的能做到不同瀏覽器相兼容。HTML5新增了一些網(wǎng)頁(yè)應(yīng)用程序的API,同時(shí)還增加了繪圖的canvas標(biāo)記,這些功能都必須和JavaScript語(yǔ)言一起使用。另外,網(wǎng)頁(yè)美化的部分,如文字字形、大小與顏色等,以前可以使用標(biāo)記屬性進(jìn)行設(shè)置,現(xiàn)在HTML5已經(jīng)確定停用這些樣式美化的標(biāo)記屬性,改由CSS語(yǔ)法負(fù)責(zé)。因此,從廣義上來(lái)說(shuō),HTML5包含了HTML、JavaScript和CSS 三個(gè)部分。本書(shū)以HTML與CSS為主體,配合JavaScript語(yǔ)法,從基礎(chǔ)到高級(jí)循序漸進(jìn)地進(jìn)行介紹,并提供具體的范例讓讀者能夠立即練習(xí)。章節(jié)安排如下:第1篇:HTML5基礎(chǔ)入門(mén)(第1~6章)第1章詳細(xì)介紹網(wǎng)站與網(wǎng)頁(yè),就算完全不了解網(wǎng)站相關(guān)概念的初學(xué)者也能快速入門(mén);從第2章開(kāi)始介紹HTML5的操作及語(yǔ)法,將HTML5語(yǔ)法分門(mén)別類,包括文字與排版、多媒體素材、表格與表單、建立超鏈接等內(nèi)容,讓讀者系統(tǒng)地學(xué)習(xí)HTML5語(yǔ)法。第2篇:CSS美化(第7~10章)本篇開(kāi)始先介紹一些CSS樣式表基礎(chǔ)知識(shí),后面將常用的CSS語(yǔ)法區(qū)分為基本語(yǔ)法與排版技巧兩大章節(jié),在本篇最后一章(第10章)安排一個(gè)完整的范例,將HTML5與CSS3語(yǔ)法整合應(yīng)用。第3篇:HTML5進(jìn)階(第11~14章)本篇將進(jìn)入程序語(yǔ)言部分,一開(kāi)始先介紹JavaScript語(yǔ)言,由于HTML5新增的canvas繪圖功能必須與JavaScript搭配才能發(fā)揮最佳功能,因此將canvas繪圖安排在此篇進(jìn)行介紹。Web Storage也是HTML5新增的功能,讓使用者可以在本地存儲(chǔ)資料。在本篇的最后一章(第14章)安排完整的Web Storage操作購(gòu)物車。第4篇:HTML5應(yīng)用(第15~17章)本篇介紹目前最熱門(mén)的移動(dòng)設(shè)備網(wǎng)頁(yè)(Web APP),特別加入了jQuery Mobile章節(jié),讀者不需要學(xué)習(xí)復(fù)雜的程序,就能輕輕松松地構(gòu)建移動(dòng)設(shè)備網(wǎng)頁(yè),在本篇末同樣安排了綜合操作,讓讀者能完成完整的移動(dòng)設(shè)備網(wǎng)頁(yè)。工欲善其事,必先利其器,網(wǎng)頁(yè)制作前的首要工作就是準(zhǔn)備好相關(guān)的軟件工具,例如想要設(shè)計(jì)個(gè)人專用圖案或影片就必須借助圖像編輯軟件、多媒體剪輯軟件,雖然這些軟件工具可以在市面上買到,但是對(duì)于經(jīng)費(fèi)有限的讀者來(lái)說(shuō)卻是一大負(fù)擔(dān),讀者可以參考書(shū)中列舉的實(shí)用免費(fèi)工具或自由軟件,從中找到合適的工具。除實(shí)用的內(nèi)容之外,本書(shū)每章最后都提供了本章小結(jié)與習(xí)題。相信本書(shū)是讀者網(wǎng)頁(yè)制作入門(mén)的最佳工具書(shū),同時(shí)也適合教師作為相關(guān)課程的教材使用。本書(shū)范例與習(xí)題的素材和代碼下載地址為:http://pan.baidu.com/s/1eRLAasU(注意區(qū)分?jǐn)?shù)字和英文字母大小寫(xiě))。如果下載有問(wèn)題,請(qǐng)發(fā)送電子郵件至booksaga@126.com,郵件主題設(shè)置為求HTML5 CSS3 JavaScript網(wǎng)頁(yè)設(shè)計(jì)下載資源。
編 者
第1篇 HTML5基礎(chǔ)入門(mén)
第1章 認(rèn)識(shí)網(wǎng)站與網(wǎng)頁(yè) 2
1.1
Internet與WWW 2
1.1.1
萬(wàn)維網(wǎng) 2
1.1.2
什么是網(wǎng)站及網(wǎng)頁(yè) 3
1.1.3
網(wǎng)址的組成 5
1.2 構(gòu)建網(wǎng)站的流程 7
1.2.1
擬定網(wǎng)站主題 8
1.2.2
規(guī)劃網(wǎng)站架構(gòu)與內(nèi)容 9
1.2.3
搜集相關(guān)資料 10
1.2.4
開(kāi)始制作網(wǎng)頁(yè) 10
1.2.5
上傳與測(cè)試 11
1.2.6
網(wǎng)站的推廣與更新維護(hù) 13
1.3 認(rèn)識(shí)網(wǎng)頁(yè)文件和命名規(guī)則
13
1.3.1
主文件名與擴(kuò)展名 13
1.3.2
常見(jiàn)的圖片格式 15
1.3.3
常見(jiàn)的聲音格式 16
1.3.4
網(wǎng)頁(yè)文件命名規(guī)則 17
1.4 網(wǎng)頁(yè)寬度與屏幕分辨率 17
1.4.1
屏幕分辨率 18
1.4.2
確定網(wǎng)頁(yè)寬度 19
本章小結(jié) 20
習(xí)題 22
第2章 HTML5入門(mén) 24
2.1 認(rèn)識(shí)HTML5 24
2.1.1
HTML5與HTML4的差異 24
2.1.2
HTML5廢除的標(biāo)記 25
2.2 學(xué)習(xí)HTML前的準(zhǔn)備工作 26
2.2.1
建立HTML文件 26
2.2.2
預(yù)覽HTML網(wǎng)頁(yè) 28
2.3
HTML語(yǔ)法的概念與架構(gòu) 29
2.3.1
HTML的標(biāo)記類型 29
2.3.2
HTML的組成 29
2.3.3
標(biāo)記屬性的應(yīng)用 30
2.4
HTML5文件結(jié)構(gòu)與語(yǔ)義標(biāo)記 30
2.4.1
結(jié)構(gòu)化的語(yǔ)義標(biāo)記 30
2.4.2
HTML5聲明與編碼設(shè)置 34
本章小結(jié) 36
習(xí)題 36
第3章 文字與排版技巧 37
3.1 段落效果使用排版標(biāo)記
37
3.1.1
設(shè)置段落樣式的標(biāo)記 37
3.1.2
設(shè)置對(duì)齊與縮進(jìn)的標(biāo)記 39
3.1.3
添加分隔線 41
3.1.4
設(shè)置段落標(biāo)題 42
3.2 文字效果使用文字標(biāo)記
43
3.2.1
設(shè)置字形樣式的標(biāo)記 43
3.3.2
設(shè)置上標(biāo)、下標(biāo) 45
3.3 項(xiàng)目符號(hào)與編號(hào)使用列表標(biāo)記 45
3.3.1
符號(hào)列表 45
3.3.2
編號(hào)列表 46
3.3.3
定義列表 49
3.4 注釋與特殊符號(hào) 50
3.4.1
加入注釋 50
3.4.2
使用特殊符號(hào) 51
3.5 新增中繼標(biāo)記
52
3.5.1
meta標(biāo)記語(yǔ)法 52
3.5.2
認(rèn)識(shí)meta標(biāo)記的http-equiv屬性 53
3.5.3
認(rèn)識(shí)meta標(biāo)記的name屬性 56
3.6
div標(biāo)記與span標(biāo)記 57
3.6.1
認(rèn)識(shí)div標(biāo)記 58
3.6.2
認(rèn)識(shí)span標(biāo)記 59
本章小結(jié) 60
習(xí)題 61
第4章 多媒體素材的運(yùn)用 63
4.1 網(wǎng)頁(yè)圖片使用須知 63
4.1.1
圖片的尺寸與分辨率 63
4.1.2
圖片的來(lái)源 64
4.2 圖片的使用 64
4.2.1
嵌入圖片 65
4.2.2
路徑表示法 66
4.3 圖像處理軟件 67
4.3.1
初識(shí)Photoshop 67
4.3.2
改變圖片格式 68
4.3.3
更改圖片大小和分辨率 70
4.3.4
切割大圖為數(shù)張小圖 72
4.4 多媒體素材的來(lái)源 76
4.4.1
利用現(xiàn)有的多媒體元素 76
4.4.2
自己制作多媒體元素 77
4.5 添加影音特效 77
4.5.1
在網(wǎng)頁(yè)中加入音樂(lè) 77
4.5.2
添加影音動(dòng)畫(huà) 79
4.5.3
添加Flash動(dòng)畫(huà) 81
4.5.4
傳統(tǒng)影音播放器 81
4.5.5
使用iframe嵌入優(yōu)酷視頻 82
本章小結(jié) 84
習(xí)題 85
第5章 表格與表單 87
5.1 制作基本表格 87
5.1.1
表格的基本架構(gòu) 87
5.1.2
設(shè)置表格標(biāo)題 89
5.2 表格的編輯技巧 91
5.2.1
合并單元格 91
5.2.2
利用表格組合圖片 93
5.3 什么是表單 96
5.4 創(chuàng)建表單 98
5.4.1
表單的基本架構(gòu) 98
5.4.2
輸入組件 101
5.4.3
列表組件 105
5.4.4
選擇組件 107
5.4.5
按鈕組件 109
5.4.6
表單分組 111
5.5 操作范例教學(xué)意見(jiàn)調(diào)查表
111
本章小結(jié) 113
習(xí)題 114
第6章 創(chuàng)建超鏈接 116
6.1 認(rèn)識(shí)超鏈接 116
6.1.1
什么是超鏈接 116
6.1.2
規(guī)劃超鏈接 117
6.2 加入超鏈接 117
6.2.1
超鏈接的用法 117
6.2.2
站外網(wǎng)頁(yè)鏈接 118
6.2.3
站內(nèi)網(wǎng)頁(yè)鏈接 119
6.2.4
鏈接到E-Mail郵箱 122
6.2.5
鏈接到文件 125
本章小結(jié) 126
習(xí)題 126
第2篇 CSS美化
第7章 認(rèn)識(shí)CSS樣式表 130
7.1 什么是CSS樣式表 130
7.1.1
CSS的由來(lái) 130
7.1.2
CSS的優(yōu)勢(shì) 131
7.1.3
CSS的應(yīng)用 132
7.2 建立CSS樣式表 133
7.2.1
CSS基本格式 133
7.2.2
應(yīng)用CSS樣式表 134
7.2.3
認(rèn)識(shí)CSS選擇器 140
本章小結(jié) 145
習(xí)題 145
第8章 CSS基本語(yǔ)法 147
8.1 控制文字樣式 147
8.1.1
字形屬性 147
8.1.2
段落屬性 150
8.1.3
文字效果屬性 154
8.2 控制背景 157
8.2.1
設(shè)置背景顏色 157
8.2.2
設(shè)置背景圖片 158
8.2.3
設(shè)置背景漸變 167
本章小結(jié) 170
習(xí)題 171
第9章 CSS排版技巧 173
9.1 控制邊界與邊框 173
9.1.1
邊界 173
9.1.2
邊框 175
9.1.3
邊界間距 182
9.2 網(wǎng)頁(yè)組件的定位 184
9.2.1
一般定位 184
9.2.2
圖層定位 191
9.3 超鏈接與鼠標(biāo)光標(biāo)特效
193
9.3.1
超鏈接特效 193
9.3.2
鼠標(biāo)光標(biāo)特效 196
本章小結(jié) 198
習(xí)題 199
第10章 HTML5 CSS3綜合應(yīng)用 201
10.1
操作網(wǎng)頁(yè)內(nèi)容 201
10.2
使用語(yǔ)義標(biāo)記排版 202
10.3
疊字標(biāo)題 208
10.4
網(wǎng)頁(yè)背景和鼠標(biāo)光標(biāo) 209
10.5
菜單超鏈接特效 210
10.6
主內(nèi)容區(qū)樣式 211
第3篇 HTML5進(jìn)階
第11章 認(rèn)識(shí)JavaScript
216
11.1
什么是JavaScript 216
11.1.1
JavaScript架構(gòu) 216
11.1.2
JavaScript對(duì)象與函數(shù) 218
11.1.3
JavaScript事件 221
11.2
JavaScript流程控制 223
11.2.1
運(yùn)算符號(hào) 223
11.2.2
if…else語(yǔ)句 225
11.2.3
for循環(huán) 225
本章小結(jié) 226
習(xí)題 227
第12章 canvas在線繪圖 229
12.1
認(rèn)識(shí)canvas 229
12.1.1
基本canvas語(yǔ)法 229
12.1.2
繪制各種圖形 232
12.2
設(shè)置圖形樣式 238
12.2.1
指定圖形顏色 238
12.2.2
指定線條粗細(xì) 241
12.2.3
漸變填充 244
本章小結(jié) 248
習(xí)題 249
第13章 網(wǎng)頁(yè)數(shù)據(jù)存儲(chǔ)Web
Storage 250
13.1
認(rèn)識(shí)Web Storage 250
13.1.1
Web Storage基本概念 250
13.1.2
檢測(cè)瀏覽器是否支持Web Storage 250
13.2
localStorage和sessionStorage 251
13.2.1
訪問(wèn)localStorage 251
13.2.2
刪除localStorage 254
13.2.3
訪問(wèn)sessionStorage 256
13.3
Web Storage實(shí)例練習(xí) 257
13.3.1
操作步驟 257
13.3.2
隱藏及組件 259
13.3.3
登錄 259
13.3.4
注銷 260
本章小結(jié) 261
習(xí)題 262
第14章 Web Storage操作購(gòu)物車 263
第4篇 HTML5應(yīng)用
第15章 JavaScript的好幫手jQuery
276
15.1
認(rèn)識(shí)jQuery 276
15.1.1
引用jQuery函數(shù)庫(kù) 276
15.1.2
jQuery基本架構(gòu) 277
15.1.3
jQuery選擇器 278
15.2
表格排序軟件tablesorter 281
15.2.1
下載與應(yīng)用 281
15.2.2
進(jìn)階應(yīng)用 283
15.3
行事歷軟件FullCalendar 286
15.3.1
下載與應(yīng)用 286
15.3.2
進(jìn)階應(yīng)用 287
本章小結(jié)
295
習(xí)題 295
第16章 開(kāi)發(fā)跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁(yè)jQuery
Mobile 297
16.1
jQuery Mobile基礎(chǔ) 297
16.1.1
認(rèn)識(shí)jQuery Mobile 297
16.1.2
第一個(gè)jQuery Mobile網(wǎng)頁(yè) 301
16.2
jQuery Mobile的UI組件 306
16.2.1
認(rèn)識(shí)UI組件 306
16.2.2
按鈕 308
16.2.3
組按鈕 313
16.2.4
列表 314
16.3
網(wǎng)頁(yè)導(dǎo)航與布景主題 316
16.3.1
jQuery Mobile網(wǎng)頁(yè)導(dǎo)航 316
16.3.2
ThemeRoller快速應(yīng)用布景主題 319
本章小結(jié) 326
習(xí)題 327
第17章 移動(dòng)設(shè)備版網(wǎng)頁(yè)操作 329
17.1
網(wǎng)站架構(gòu) 329
17.2
訂購(gòu)流程 332
17.3
查訂單 341
17.4
找店家 344