本書(shū)以項(xiàng)目任務(wù)為載體, 全面系統(tǒng)地介紹了web客戶端開(kāi)發(fā)的主要技術(shù)。全書(shū)以商務(wù)網(wǎng)站前端開(kāi)發(fā)實(shí)例為主線, 基于網(wǎng)站前端開(kāi)發(fā)的所需要的技術(shù)劃分章節(jié), 涵蓋了HTML5、CSS樣式、JavaScript共3大方面的內(nèi)容。其中包括網(wǎng)站前端開(kāi)發(fā)的知識(shí)準(zhǔn)備、HTML5基礎(chǔ)和應(yīng)用、CSS基礎(chǔ)、CSS布局、CSS樣式屬性、CSS3新增屬性、JavaScript入門(mén)等內(nèi)容。本書(shū)知識(shí)點(diǎn)與知名網(wǎng)站的精彩部分做案例相結(jié)合的方式, 是讀者由淺入深地掌握Web前端開(kāi)發(fā)的相關(guān)知識(shí)。
從目前國(guó)內(nèi)互聯(lián)網(wǎng)的發(fā)展趨勢(shì)來(lái)看，Web前端開(kāi)發(fā)已經(jīng)成為一門(mén)廣泛應(yīng)用的技術(shù)，各行各業(yè)對(duì)網(wǎng)站的要求越來(lái)越高，對(duì)網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)人才的需求也大大增加。Web標(biāo)準(zhǔn)和CSS技術(shù)已經(jīng)成為一種潮流和趨勢(shì)。
作者結(jié)合自己多年積累的相關(guān)課程教學(xué)經(jīng)驗(yàn)和Web開(kāi)發(fā)經(jīng)驗(yàn)，編寫(xiě)了本書(shū)。本書(shū)是為計(jì)算機(jī)相關(guān)專業(yè)的學(xué)生以及對(duì)網(wǎng)站前端開(kāi)發(fā)感興趣的讀者編寫(xiě)的，旨在培養(yǎng)讀者的網(wǎng)站開(kāi)發(fā)能力，以適應(yīng)網(wǎng)絡(luò)社會(huì)對(duì)這方面人才的需求，讓讀者通過(guò)學(xué)習(xí)，成為一名精通Web前端開(kāi)發(fā)的能手。
本書(shū)以作者參與的院級(jí)科研項(xiàng)目“校園電子商務(wù)網(wǎng)站開(kāi)發(fā)研究”為案例參考背景，將構(gòu)建商務(wù)網(wǎng)站時(shí)需要的典型應(yīng)用作為書(shū)中的案例，引入網(wǎng)站前端開(kāi)發(fā)所需要的關(guān)鍵技術(shù)和開(kāi)發(fā)語(yǔ)言。
本書(shū)合理安排了基礎(chǔ)知識(shí)和實(shí)戰(zhàn)訓(xùn)練的比例，基礎(chǔ)知識(shí)以“夠用”為度，用簡(jiǎn)明清晰的語(yǔ)言闡述，結(jié)合圖表來(lái)表達(dá)，符合學(xué)生的學(xué)習(xí)特點(diǎn)和認(rèn)知規(guī)律。
本書(shū)重點(diǎn)放在專業(yè)技能的訓(xùn)練上。幾乎每個(gè)重要的知識(shí)點(diǎn)都有實(shí)例供讀者參考練習(xí)，并且采用的是人們熟悉的電商網(wǎng)站的精彩部分作為案例。
本書(shū)包含三大核心技術(shù)，分別是HTML5、CSS3和JavaScript。在內(nèi)容組織方面，共分為9個(gè)教學(xué)模塊和1個(gè)綜合應(yīng)用案例模塊。
第1章介紹網(wǎng)站前端設(shè)計(jì)需要的知識(shí)，包括Web基礎(chǔ)知識(shí)、網(wǎng)站開(kāi)發(fā)的基本流程及關(guān)鍵技術(shù)、網(wǎng)站開(kāi)發(fā)人才需求，以及網(wǎng)站開(kāi)發(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語(yǔ)法基礎(chǔ)、函數(shù)及其應(yīng)用、常用的內(nèi)置對(duì)象、常用的文檔對(duì)象、常用的窗口對(duì)象、事件處理等內(nèi)容。
第9章利用JavaScript實(shí)現(xiàn)Canvas功能，包括使用Canvas繪制基本圖形、變換圖形及繪制文本等。
第10章綜合應(yīng)用案例，主要通過(guò)商品購(gòu)物車(chē)功能設(shè)計(jì)，系統(tǒng)地介紹HTML5、CSS樣式和JavaScript腳本編程三項(xiàng)技術(shù)的綜合運(yùn)用。
本書(shū)由王黎任主編，張希文、段炬霞、劉軍玲、郭洪榮任副主編，其中王黎編寫(xiě)第2、3、4、7、8、9、10章，張希文編寫(xiě)第1章，劉軍玲編寫(xiě)第5章，段炬霞編寫(xiě)第6章，邱冬副教授、呂殿基副教授審稿，編寫(xiě)過(guò)程中參考了很多相關(guān)技術(shù)資料及經(jīng)典案例，吸取了許多同仁的寶貴經(jīng)驗(yàn)，在此深表謝意！
由于作者水平有限，雖然對(duì)內(nèi)容進(jìn)行了反復(fù)斟酌和修改，但書(shū)中不足與疏漏之處在所難免，懇請(qǐng)各位專家和廣大讀者批評(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)頁(yè) 4
1.1.4 動(dòng)態(tài)網(wǎng)頁(yè) 4
1.2 網(wǎng)站開(kāi)發(fā) 4
1.2.1 網(wǎng)站開(kāi)發(fā)的基本流程 4
1.2.2 網(wǎng)站開(kāi)發(fā)的人才需求 5
1.2.3 網(wǎng)站開(kāi)發(fā)的主要技術(shù) 6
1.3 Web前端工程師需要掌握的技能 6
1.3.1 Web前端工程師的工作內(nèi)容 6
1.3.2 Web前端工程師需要掌握的
技術(shù) 6
1.4 網(wǎng)站開(kāi)發(fā)工具介紹 8
1.4.1 原型設(shè)計(jì)工具 8
1.4.2 開(kāi)發(fā)工具 9
1.4.3 調(diào)試工具 9
1.4.4 代碼托管工具 10
本章小結(jié) 10
習(xí)題 11
第2章 HTML 5基礎(chǔ) 13
2.1 HTML簡(jiǎn)介 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 編寫(xiě)第一個(gè)符合W3C標(biāo)準(zhǔn)的
HTML 5網(wǎng)頁(yè) 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語(yǔ)義化結(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)頁(yè)布局 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簡(jiǎn)介 53
3.2 CSS的組成 53
3.2.1 基本語(yǔ)法規(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)頁(yè)元素的定位 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)站
首頁(yè)(制作盒模型) 95
4.5.1 布局網(wǎng)頁(yè)的總體結(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入門(mén) 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)頁(yè)中使用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 流程控制語(yǔ)句 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)——制作簡(jiǎ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)樹(shù) 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：將英文單詞首字母
改成大寫(xiě) 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è)中的應(yīng)用 213
8.2.1 鼠標(biāo)事件 213
8.2.2 表單事件 216
8.2.3 頁(yè)面相關(guān)事件 221
8.2.4 鍵盤(pán)事件 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章 綜合案例——購(gòu)物車(chē)功能的
實(shí)現(xiàn) 247
10.1 案例介紹 248
10.2 設(shè)計(jì)思路 248
10.3 實(shí)施過(guò)程 249
10.3.1 購(gòu)物車(chē)的HTML結(jié)構(gòu) 249
10.3.2 購(gòu)物車(chē)的樣式設(shè)計(jì) 251
10.3.3 利用JavaScript實(shí)現(xiàn)購(gòu)物車(chē)
功能 256
參考文獻(xiàn) 262
第3章 CSS基礎(chǔ)
本章要點(diǎn)
* CSS的組成。
* HTML文檔如何調(diào)用CSS。
* CSS 3簡(jiǎn)介。
學(xué)習(xí)目標(biāo)
* 理解CSS的語(yǔ)法規(guī)則。
* 掌握選擇符的使用。
* 學(xué)會(huì)在HTML文檔中使用CSS。
* 初步了解CSS 3。
3.1 CSS概述
3.1.1 什么是CSS
CSS(Cascading Style Sheet，層疊樣式表或級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表)是一種用來(lái)表現(xiàn)HTML文件樣式的計(jì)算機(jī)語(yǔ)言，是網(wǎng)頁(yè)文件的重要組成部分。
網(wǎng)頁(yè)的內(nèi)容由HTML語(yǔ)言決定，利用CSS修飾HTML各個(gè)標(biāo)記的風(fēng)格，對(duì)網(wǎng)頁(yè)中的元素進(jìn)行精確的格式化控制。
CSS是一種非常靈活的工具，可以實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)和表現(xiàn)完全分離，CSS樣式類型除了通用的顏色、字體、背景外，還可以控制字符間距、填充距離、大小等大約50種樣式。
CSS樣式表的功能大致可以歸納為以下幾點(diǎn)。
(1) 控制頁(yè)面中文字的字體、顏色、大小、間距、風(fēng)格及位置。
(2) 設(shè)置文本塊的行高、縮進(jìn)，及具有三維效果的邊框。
(3) 可以方便地定位網(wǎng)頁(yè)中的任意元素，設(shè)置不同的背景顏色和背景圖片。
(4) 精確控制網(wǎng)頁(yè)中各元素的位置。
(5) 與DIV元素結(jié)合布局網(wǎng)頁(yè)。
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è)版本中開(kāi)始使用樣式表結(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ā)展而來(lái)的。
(4) CSS 3。2010年開(kāi)始，CSS 3逐步發(fā)布，2011年6月成為W3C推薦標(biāo)準(zhǔn)。
3.1.3 CSS 3簡(jiǎn)介
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)頁(yè)中很多效果只有通過(guò)圖片和腳本才能實(shí)現(xiàn)，而利用CSS 3，只需短短幾行代碼就能完成，如圓角、圖片邊框、文字陰影和盒陰影等效果。
目前，主流瀏覽器如Chrome、Safari、Firefox、Opera，甚至360，都已經(jīng)支持CSS 3的大部分功能了，IE10也開(kāi)始全面支持CSS 3。除了HTML 5，CSS 3將是互聯(lián)網(wǎng)發(fā)展的另一個(gè)趨勢(shì)。
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選擇符。
通過(guò)CSS 3選擇符可以直接指定需要的HTML元素，而不需要在HTML中添加不必要的類名、id等。使用CSS 3選擇符，能夠更完美地實(shí)現(xiàn)結(jié)構(gòu)和表現(xiàn)分離，從而設(shè)計(jì)出簡(jiǎn)潔、輕量級(jí)的Web頁(yè)面。
(2) 可以輕松實(shí)現(xiàn)比如圓角、圖片邊框、文字陰影、盒陰影、過(guò)渡、動(dòng)畫(huà)等效果。
(3) 盒模型變化。
盒模型在CSS中起著非常重要的作用，過(guò)去CSS中的盒模型只能實(shí)現(xiàn)一些基本的功能，但一些特殊的功能需要借助JavaScript來(lái)實(shí)現(xiàn)。而在CSS 3中，這一點(diǎn)得到了很大的改善，例如，CSS 3中的彈性盒子、實(shí)現(xiàn)多列布局等。
(4) CSS 3支持更多的顏色和更廣泛的顏色，如HSL、CMYK、HSLA和RGBA。其中HSLA和RGBA還增加了透明通道，能輕松地改變?nèi)魏我粋�(gè)元素的透明度。
……
書(shū)單推薦
