本書以項(xiàng)目任務(wù)為載體, 全面系統(tǒng)地介紹了web客戶端開發(fā)的主要技術(shù)。全書以商務(wù)網(wǎng)站前端開發(fā)實(shí)例為主線, 基于網(wǎng)站前端開發(fā)的所需要的技術(shù)劃分章節(jié), 涵蓋了HTML5、CSS樣式、JavaScript共3大方面的內(nèi)容。其中包括網(wǎng)站前端開發(fā)的知識(shí)準(zhǔn)備、HTML5基礎(chǔ)和應(yīng)用、CSS基礎(chǔ)、CSS布局、CSS樣式屬性、CSS3新增屬性、JavaScript入門等內(nèi)容。本書知識(shí)點(diǎn)與知名網(wǎng)站的精彩部分做案例相結(jié)合的方式, 是讀者由淺入深地掌握Web前端開發(fā)的相關(guān)知識(shí)。
從目前國內(nèi)互聯(lián)網(wǎng)的發(fā)展趨勢來看，Web前端開發(fā)已經(jīng)成為一門廣泛應(yīng)用的技術(shù)，各行各業(yè)對(duì)網(wǎng)站的要求越來越高，對(duì)網(wǎng)頁設(shè)計(jì)開發(fā)人才的需求也大大增加。Web標(biāo)準(zhǔn)和CSS技術(shù)已經(jīng)成為一種潮流和趨勢。
作者結(jié)合自己多年積累的相關(guān)課程教學(xué)經(jīng)驗(yàn)和Web開發(fā)經(jīng)驗(yàn)，編寫了本書。本書是為計(jì)算機(jī)相關(guān)專業(yè)的學(xué)生以及對(duì)網(wǎng)站前端開發(fā)感興趣的讀者編寫的，旨在培養(yǎng)讀者的網(wǎng)站開發(fā)能力，以適應(yīng)網(wǎng)絡(luò)社會(huì)對(duì)這方面人才的需求，讓讀者通過學(xué)習(xí)，成為一名精通Web前端開發(fā)的能手。
本書以作者參與的院級(jí)科研項(xiàng)目“校園電子商務(wù)網(wǎng)站開發(fā)研究”為案例參考背景，將構(gòu)建商務(wù)網(wǎng)站時(shí)需要的典型應(yīng)用作為書中的案例，引入網(wǎng)站前端開發(fā)所需要的關(guān)鍵技術(shù)和開發(fā)語言。
本書合理安排了基礎(chǔ)知識(shí)和實(shí)戰(zhàn)訓(xùn)練的比例，基礎(chǔ)知識(shí)以“夠用”為度，用簡明清晰的語言闡述，結(jié)合圖表來表達(dá)，符合學(xué)生的學(xué)習(xí)特點(diǎn)和認(rèn)知規(guī)律。
本書重點(diǎn)放在專業(yè)技能的訓(xùn)練上。幾乎每個(gè)重要的知識(shí)點(diǎn)都有實(shí)例供讀者參考練習(xí)，并且采用的是人們熟悉的電商網(wǎng)站的精彩部分作為案例。
本書包含三大核心技術(shù)，分別是HTML5、CSS3和JavaScript。在內(nèi)容組織方面，共分為9個(gè)教學(xué)模塊和1個(gè)綜合應(yīng)用案例模塊。
第1章介紹網(wǎng)站前端設(shè)計(jì)需要的知識(shí)，包括Web基礎(chǔ)知識(shí)、網(wǎng)站開發(fā)的基本流程及關(guān)鍵技術(shù)、網(wǎng)站開發(fā)人才需求，以及網(wǎng)站開發(fā)工具。
第2章屬于HTML5部分，介紹HTML5的新功能、新增標(biāo)記和屬性、廢棄標(biāo)記，以及HTML5文檔中的常用標(biāo)記、表單元素和HTML5新增的結(jié)構(gòu)化元素。
第3~5章屬于CSS部分，主要介紹CSS基礎(chǔ)、布局方法和樣式屬性，對(duì)主流瀏覽器都支持的也比較成熟的CSS3的部分屬性做了講解。
第6~8章屬于JavaScript部分，主要介紹JavaScript語法基礎(chǔ)、函數(shù)及其應(yīng)用、常用的內(nèi)置對(duì)象、常用的文檔對(duì)象、常用的窗口對(duì)象、事件處理等內(nèi)容。
第9章利用JavaScript實(shí)現(xiàn)Canvas功能，包括使用Canvas繪制基本圖形、變換圖形及繪制文本等。
第10章綜合應(yīng)用案例，主要通過商品購物車功能設(shè)計(jì)，系統(tǒng)地介紹HTML5、CSS樣式和JavaScript腳本編程三項(xiàng)技術(shù)的綜合運(yùn)用。
本書由王黎任主編，張希文、段炬霞、劉軍玲、郭洪榮任副主編，其中王黎編寫第2、3、4、7、8、9、10章，張希文編寫第1章，劉軍玲編寫第5章，段炬霞編寫第6章，邱冬副教授、呂殿基副教授審稿，編寫過程中參考了很多相關(guān)技術(shù)資料及經(jīng)典案例，吸取了許多同仁的寶貴經(jīng)驗(yàn)，在此深表謝意！
由于作者水平有限，雖然對(duì)內(nèi)容進(jìn)行了反復(fù)斟酌和修改，但書中不足與疏漏之處在所難免，懇請各位專家和廣大讀者批評(píng)指正。
編者
第1章 網(wǎng)站前端設(shè)計(jì)知識(shí)準(zhǔn)備 1
1.1 Web基礎(chǔ) 2
1.1.1 Web的基本概念 2
1.1.2 了解“Web標(biāo)準(zhǔn)” 2
1.1.3 靜態(tài)網(wǎng)頁 4
1.1.4 動(dòng)態(tài)網(wǎng)頁 4
1.2 網(wǎng)站開發(fā) 4
1.2.1 網(wǎng)站開發(fā)的基本流程 4
1.2.2 網(wǎng)站開發(fā)的人才需求 5
1.2.3 網(wǎng)站開發(fā)的主要技術(shù) 6
1.3 Web前端工程師需要掌握的技能 6
1.3.1 Web前端工程師的工作內(nèi)容 6
1.3.2 Web前端工程師需要掌握的
技術(shù) 6
1.4 網(wǎng)站開發(fā)工具介紹 8
1.4.1 原型設(shè)計(jì)工具 8
1.4.2 開發(fā)工具 9
1.4.3 調(diào)試工具 9
1.4.4 代碼托管工具 10
本章小結(jié) 10
習(xí)題 11
第2章 HTML 5基礎(chǔ) 13
2.1 HTML簡介 14
2.1.1 了解HTML 14
2.1.2 HTML元素 15
2.2 初識(shí)HTML 5 16
2.2.1 了解HTML 5 16
2.2.2 HTML 5的新功能 17
2.2.3 HTML 5的廢棄標(biāo)記 18
2.2.4 HTML 5的新增標(biāo)記 18
2.2.5 HTML 5的新增屬性 19
2.3 HTML 5的結(jié)構(gòu) 20
2.3.1 HTML 5的基本結(jié)構(gòu) 20
2.3.2 編寫第一個(gè)符合W3C標(biāo)準(zhǔn)的
HTML 5網(wǎng)頁 21
2.4 HTML 5文檔的常用標(biāo)記 22
2.4.1 文本段落的相關(guān)標(biāo)記 22
2.4.2 圖像標(biāo)記 23
2.4.3 超鏈接 24
2.4.4 列表 26
2.4.5 表格 27
2.4.6 HTML 5的音頻和視頻 29
2.5 HTML 5的表單元素 32
2.5.1 創(chuàng)建表單 32
2.5.2 input輸入類型控件 32
2.5.3 列表框(select) 39
2.5.4 多行文本輸入框(textarea) 39
2.5.5 表單控件綜合示例 40
2.6 HTML 5語義化結(jié)構(gòu)性元素 41
2.6.1 新增的主體結(jié)構(gòu)元素 41
2.6.2 新增的非主體結(jié)構(gòu)元素 46
2.7 小型案例實(shí)訓(xùn)：使用結(jié)構(gòu)元素進(jìn)行
網(wǎng)頁布局 47
本章小結(jié) 49
習(xí)題 49
第3章 CSS基礎(chǔ) 51
3.1 CSS概述 52
3.1.1 什么是CSS 52
3.1.2 CSS的發(fā)展史 52
3.1.3 CSS 3簡介 53
3.2 CSS的組成 53
3.2.1 基本語法規(guī)則 53
3.2.2 選擇符的分類 54
3.3 在HTML中使用CSS的方法 61
3.3.1 行內(nèi)樣式 61
3.3.2 內(nèi)部樣式 61
3.3.3 外部樣式 62
3.3.4 CSS的優(yōu)先級(jí) 63
3.3.5 常用的CSS 3屬性前綴 63
本章小結(jié) 63
習(xí)題 64
第4章 CSS布局 65
4.1 CSS的盒模型 66
4.1.1 盒模型的結(jié)構(gòu) 66
4.1.2 盒模型的元素類型 67
4.1.3 使用DIV 69
4.1.4 外邊距、內(nèi)邊距與邊框的
CSS設(shè)置 70
4.1.5 CSS 3對(duì)盒模型邊框的完善 74
4.2 網(wǎng)頁元素的定位 78
4.2.1 定位屬性position 78
4.2.2 float浮動(dòng)定位 81
4.2.3 其他CSS布局定位方式 83
4.3 DIV + CSS常用的布局方式 84
4.3.1 單列水平居中布局 85
4.3.2 浮動(dòng)的布局 87
4.3.3 div嵌套布局 89
4.3.4 CSS 3多列布局 92
4.4 列表元素布局 94
4.5 小型案例實(shí)訓(xùn)——布局電商網(wǎng)站
首頁(制作盒模型) 95
4.5.1 布局網(wǎng)頁的總體結(jié)構(gòu) 95
4.5.2 區(qū)域的
結(jié)構(gòu)分析及布局 96
4.5.3
內(nèi)容區(qū)域的設(shè)計(jì) 98
4.5.4 區(qū)域的
設(shè)計(jì) 100
本章小結(jié) 100
習(xí)題 101
第5章 CSS樣式屬性 103
5.1 CSS 3字體相關(guān)屬性 104
5.1.1 設(shè)置字體屬性 104
5.1.2 設(shè)置字體屬性的綜合示例 106
5.1.3 CSS 3新增字體屬性 106
5.2 CSS控制文本的樣式 107
5.2.1 文本屬性 107
5.2.2 設(shè)置文本屬性的綜合示例 109
5.2.3 CSS 3新增的文本屬性 110
5.3 使用CSS控制背景 114
5.3.1 背景屬性 114
5.3.2 背景設(shè)置綜合示例 116
5.3.3 CSS 3新增的與背景相關(guān)的
屬性 116
5.4 使用CSS設(shè)置列表樣式 121
5.4.1 CSS列表屬性 121
5.4.2 列表屬性的綜合實(shí)例 122
5.5 小型案例實(shí)訓(xùn) 123
5.5.1 案例1：商品信息展示 123
5.5.2 案例2：CSS制作二級(jí)導(dǎo)航
下拉菜單 125
本章小結(jié) 128
習(xí)題 128
第6章 JavaScript入門 131
6.1 JavaScript概述 132
6.1.1 認(rèn)識(shí)JavaScript 132
6.1.2 JavaScript的特點(diǎn)和作用 132
6.1.3 在網(wǎng)頁中使用JavaScript 134
6.1.4 JavaScript代碼規(guī)范 135
6.2 變量、數(shù)據(jù)類型 136
6.2.1 變量的聲明和使用 136
6.2.2 JavaScript的基本數(shù)據(jù)類型 138
6.3 表達(dá)式與運(yùn)算符 141
6.3.1 表達(dá)式 141
6.3.2 運(yùn)算符 141
6.4 流程控制語句 148
6.4.1 分支結(jié)構(gòu) 148
6.4.2 循環(huán)結(jié)構(gòu) 151
6.5 JavaScript的函數(shù) 154
6.5.1 函數(shù)的定義 154
6.5.2 函數(shù)的調(diào)用 154
6.5.3 使用函數(shù)的返回值 157
6.5.4 函數(shù)的嵌套 158
6.5.5 內(nèi)置函數(shù) 158
6.6 小型案例實(shí)訓(xùn)——制作簡易
計(jì)算器 160
本章小結(jié) 162
習(xí)題 162
第7章 JavaScript中的對(duì)象 165
7.1 JavaScript的常用內(nèi)置對(duì)象 166
7.1.1 數(shù)組對(duì)象 166
7.1.2 字符串(String)對(duì)象 170
7.1.3 日期(Date)對(duì)象 172
7.1.4 數(shù)學(xué)(Math)對(duì)象 174
7.2 常用文檔對(duì)象 177
7.2.1 文檔對(duì)象模型(DOM對(duì)象) 177
7.2.2 文檔對(duì)象的節(jié)點(diǎn)樹 178
7.2.3 文檔對(duì)象(document) 185
7.2.4 表單及其控件對(duì)象 188
7.2.5 style對(duì)象 190
7.3 常用窗口對(duì)象 192
7.3.1 屏幕對(duì)象 192
7.3.2 window窗口對(duì)象 194
7.3.3 瀏覽器信息對(duì)象 196
7.3.4 網(wǎng)址對(duì)象 197
7.3.5 歷史記錄對(duì)象 198
7.4 小型案例實(shí)訓(xùn) 200
7.4.1 案例1：將英文單詞首字母
改成大寫 200
7.4.2 案例2：限制多行文本域
輸入的字符個(gè)數(shù) 202
本章小結(jié) 204
習(xí)題 205
第8章 事件處理 209
8.1 了解JavaScript事件 210
8.1.1 JavaScript的常用事件 210
8.1.2 調(diào)用事件處理程序的方法 211
8.2 常用事件在網(wǎng)頁中的應(yīng)用 213
8.2.1 鼠標(biāo)事件 213
8.2.2 表單事件 216
8.2.3 頁面相關(guān)事件 221
8.2.4 鍵盤事件 222
8.3 小型案例實(shí)訓(xùn)：JavaScript實(shí)現(xiàn)
廣告圖像輪播 223
本章小結(jié) 227
習(xí)題 227
第9章 利用JavaScript實(shí)現(xiàn)Canvas
功能 229
9.1 創(chuàng)建Canvas元素 230
9.2 繪制基本圖形 231
9.2.1 繪制直線 232
9.2.2 繪制圓形 232
9.2.3 繪制矩形 233
9.2.4 繪制多邊形 234
9.3 圖形的變換 235
9.3.1 保存與恢復(fù)Canvas狀態(tài) 235
9.3.2 移動(dòng)坐標(biāo)位置 236
9.3.3 縮放圖形 237
9.4 使用特效 237
9.5 繪制文本 239
9.6 小型案例實(shí)訓(xùn)：用Canvas繪制
時(shí)鐘 240
9.6.1 繪制靜態(tài)時(shí)鐘 240
9.6.2 制作動(dòng)態(tài)時(shí)鐘 244
本章小結(jié) 244
習(xí)題 245
第10章 綜合案例——購物車功能的
實(shí)現(xiàn) 247
10.1 案例介紹 248
10.2 設(shè)計(jì)思路 248
10.3 實(shí)施過程 249
10.3.1 購物車的HTML結(jié)構(gòu) 249
10.3.2 購物車的樣式設(shè)計(jì) 251
10.3.3 利用JavaScript實(shí)現(xiàn)購物車
功能 256
參考文獻(xiàn) 262
第3章 CSS基礎(chǔ)
本章要點(diǎn)
* CSS的組成。
* HTML文檔如何調(diào)用CSS。
* CSS 3簡介。
學(xué)習(xí)目標(biāo)
* 理解CSS的語法規(guī)則。
* 掌握選擇符的使用。
* 學(xué)會(huì)在HTML文檔中使用CSS。
* 初步了解CSS 3。
3.1 CSS概述
3.1.1 什么是CSS
CSS(Cascading Style Sheet，層疊樣式表或級(jí)聯(lián)樣式表，簡稱樣式表)是一種用來表現(xiàn)HTML文件樣式的計(jì)算機(jī)語言，是網(wǎng)頁文件的重要組成部分。
網(wǎng)頁的內(nèi)容由HTML語言決定，利用CSS修飾HTML各個(gè)標(biāo)記的風(fēng)格，對(duì)網(wǎng)頁中的元素進(jìn)行精確的格式化控制。
CSS是一種非常靈活的工具，可以實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)和表現(xiàn)完全分離，CSS樣式類型除了通用的顏色、字體、背景外，還可以控制字符間距、填充距離、大小等大約50種樣式。
CSS樣式表的功能大致可以歸納為以下幾點(diǎn)。
(1) 控制頁面中文字的字體、顏色、大小、間距、風(fēng)格及位置。
(2) 設(shè)置文本塊的行高、縮進(jìn)，及具有三維效果的邊框。
(3) 可以方便地定位網(wǎng)頁中的任意元素，設(shè)置不同的背景顏色和背景圖片。
(4) 精確控制網(wǎng)頁中各元素的位置。
(5) 與DIV元素結(jié)合布局網(wǎng)頁。
3.1.2 CSS的發(fā)展史
CSS的發(fā)展歷史分為4個(gè)階段。
(1) CSS 1。1996年12月，CSS 1正式推出，在這個(gè)版本中，已經(jīng)包含了font的相關(guān)屬性、顏色與背景的相關(guān)屬性、box的相關(guān)屬性等。
(2) CSS 2。1998年5月，CSS 2正式推出，在這個(gè)版本中開始使用樣式表結(jié)構(gòu)。
(3) CSS 2.1。2004年2月，CSS 2.1正式推出，它在CSS 2的基礎(chǔ)上略微有所改動(dòng)，刪除了許多諸如text-shadow等不被瀏覽器所支持的屬性�，F(xiàn)在使用的CSS基本上都是在1998年推出的CSS 2的基礎(chǔ)上發(fā)展而來的。
(4) CSS 3。2010年開始，CSS 3逐步發(fā)布，2011年6月成為W3C推薦標(biāo)準(zhǔn)。
3.1.3 CSS 3簡介
2001年，W3C就著手進(jìn)行CSS 3標(biāo)準(zhǔn)的制定了。CSS 3的一個(gè)新特點(diǎn)是規(guī)范被分為若干個(gè)相互獨(dú)立的模塊，這有利于及時(shí)更新和發(fā)布、及時(shí)調(diào)整模塊的內(nèi)容。同時(shí)，由于受支持設(shè)備和瀏覽器廠商的限制，可以有選擇地支持一部分模塊，即支持CSS 3的一個(gè)子集。以前網(wǎng)頁中很多效果只有通過圖片和腳本才能實(shí)現(xiàn)，而利用CSS 3，只需短短幾行代碼就能完成，如圓角、圖片邊框、文字陰影和盒陰影等效果。
目前，主流瀏覽器如Chrome、Safari、Firefox、Opera，甚至360，都已經(jīng)支持CSS 3的大部分功能了，IE10也開始全面支持CSS 3。除了HTML 5，CSS 3將是互聯(lián)網(wǎng)發(fā)展的另一個(gè)趨勢。
CSS 3規(guī)范并不是獨(dú)立的，它重復(fù)了CSS的部分內(nèi)容，在CSS 2的基礎(chǔ)上增加了很多強(qiáng)大的新功能。CSS 3與先前的幾個(gè)版本相比，其變化是革命性的，是一個(gè)不斷演化和完善的標(biāo)準(zhǔn)，在目前已經(jīng)完成的部分中，CSS 3新增了很多功能。
(1) 強(qiáng)大的CSS 3選擇符。
通過CSS 3選擇符可以直接指定需要的HTML元素，而不需要在HTML中添加不必要的類名、id等。使用CSS 3選擇符，能夠更完美地實(shí)現(xiàn)結(jié)構(gòu)和表現(xiàn)分離，從而設(shè)計(jì)出簡潔、輕量級(jí)的Web頁面。
(2) 可以輕松實(shí)現(xiàn)比如圓角、圖片邊框、文字陰影、盒陰影、過渡、動(dòng)畫等效果。
(3) 盒模型變化。
盒模型在CSS中起著非常重要的作用，過去CSS中的盒模型只能實(shí)現(xiàn)一些基本的功能，但一些特殊的功能需要借助JavaScript來實(shí)現(xiàn)。而在CSS 3中，這一點(diǎn)得到了很大的改善，例如，CSS 3中的彈性盒子、實(shí)現(xiàn)多列布局等。
(4) CSS 3支持更多的顏色和更廣泛的顏色，如HSL、CMYK、HSLA和RGBA。其中HSLA和RGBA還增加了透明通道，能輕松地改變?nèi)魏我粋�(gè)元素的透明度。
……
書單推薦
