HTML5+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作

目    錄
第1章  網(wǎng)站前端設(shè)計(jì)基礎(chǔ)    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è)    3
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ù)    5
1.3  Web前端開(kāi)發(fā)所需技能    5
1.3.1  Web前端工程師的工作內(nèi)容    5
1.3.2  Web前端工程師需要掌握的
技術(shù)    6
1.4  網(wǎng)站開(kāi)發(fā)工具介紹    7
1.4.1  原型設(shè)計(jì)工具    8
1.4.2  技術(shù)開(kāi)發(fā)工具    8
1.4.3  Web調(diào)試工具    9
1.4.4  代碼托管工具    9
本章小結(jié)    10
自測(cè)題    10
第2章  HTML 5基礎(chǔ)    11
2.1  HTML概述    12
2.1.1  了解HTML    12
2.1.2  HTML元素    13
2.2  初識(shí)HTML 5    14
2.2.1  HTML 5的新功能    14
2.2.2  HTML 5的廢棄標(biāo)記    15
2.2.3  HTML 5的新增標(biāo)記    16
2.2.4  HTML 5的新增屬性    16
2.3  HTML 5的結(jié)構(gòu)    17
2.3.1  HTML 5的基本結(jié)構(gòu)    17
2.3.2  編寫個(gè)符合W3C標(biāo)準(zhǔn)的
HTML 5網(wǎng)頁(yè)    18
2.4  HTML 5文檔的常用標(biāo)記    20
2.4.1  文本段落的相關(guān)標(biāo)記    20
2.4.2  圖像標(biāo)記    21
2.4.3  超鏈接    21
2.4.4  列表    23
2.4.5  表格    25
2.4.6  HTML 5的音頻和視頻    27
2.5  HTML 5的表單元素    29
2.5.1  創(chuàng)建表單    29
2.5.2  input輸入類型控件    30
2.5.3  列表框    36
2.5.4  多行文本輸入框    37
2.5.5  表單控件綜合示例    37
2.6  HTML 5語(yǔ)義化結(jié)構(gòu)性元素    38
2.6.1  新增的主體結(jié)構(gòu)元素    39
2.6.2  新增的非主體結(jié)構(gòu)元素    43
2.7  上機(jī)實(shí)訓(xùn)：使用結(jié)構(gòu)元素進(jìn)行網(wǎng)頁(yè)
布局    44
本章小結(jié)    47
自測(cè)題    47
第3章  CSS基礎(chǔ)    49
3.1  CSS 3概述    50
3.2  CSS的組成    50
3.2.1  CSS基本語(yǔ)法規(guī)則    50
3.2.2  選擇符的分類    51
3.3  在HTML中使用CSS樣式    57
3.3.1  行內(nèi)樣式    57
3.3.2  內(nèi)部樣式    58
3.3.3  外部樣式    59
3.3.4  CSS的優(yōu)先級(jí)    59
3.3.5  常用的CSS 3屬性前綴    60
本章小結(jié)    60
自測(cè)題    60
第4章  CSS設(shè)計(jì)布局    63
4.1  CSS的盒模型    64
4.1.1  盒模型的結(jié)構(gòu)    64
4.1.2  盒模型的元素類型    65
4.1.3  使用DIV    67
4.1.4　外邊距、內(nèi)邊距與邊框的CSS
設(shè)置    68
4.1.5  CSS 3對(duì)盒模型邊框的完善    72
4.2  網(wǎng)頁(yè)元素的定位    76
4.2.1  定位屬性position    76
4.2.2  float浮動(dòng)定位    78
4.2.3  其他CSS布局定位方式    80
4.3  DIV CSS常用的布局方式    82
4.3.1  單列水平居中布局    82
4.3.2  浮動(dòng)的布局    84
4.3.3  div嵌套布局    86
4.3.4  CSS 3多列布局    88
4.4  列表元素布局    90
4.5  上機(jī)實(shí)訓(xùn)：布局電商網(wǎng)站首頁(yè)(制作
盒模型)    91
4.5.1  布局網(wǎng)頁(yè)的總體結(jié)構(gòu)    92
4.5.2  頭部區(qū)域的結(jié)構(gòu)分析及布局    93
4.5.3  網(wǎng)頁(yè)主體內(nèi)容區(qū)域的設(shè)計(jì)    95
4.5.4  頁(yè)腳區(qū)域的設(shè)計(jì)    97
本章小結(jié)    97
自測(cè)題    97
第5章  CSS樣式    101
5.1  CSS 3字體相關(guān)屬性    102
5.1.1  設(shè)置字體屬性    102
5.1.2  設(shè)置字體屬性的綜合示例    103
5.1.3  CSS 3新增的字體屬性    104
5.2  CSS控制文本的樣式    104
5.2.1  文本屬性    104
5.2.2  設(shè)置文本屬性的綜合示例    107
5.2.3  CSS 3新增的文本屬性    107
5.3  使用CSS控制背景    111
5.3.1  背景屬性    111
5.3.2  背景設(shè)置綜合示例    113
5.3.3  CSS 3新增的與背景相關(guān)的
屬性    114
5.4  使用CSS設(shè)置列表樣式    118
5.4.1  CSS列表屬性    118
5.4.2  列表屬性的綜合示例    119
5.5  上機(jī)實(shí)訓(xùn)    120
5.5.1  實(shí)訓(xùn)1：制作商品信息展示
頁(yè)面    120
5.5.2  實(shí)訓(xùn)2：CSS制作二級(jí)導(dǎo)航
下拉菜單    122
本章小結(jié)    125
自測(cè)題    125
第6章  JavaScript基礎(chǔ)    127
6.1  JavaScript概述    128
6.1.1  認(rèn)識(shí)JavaScript    128
6.1.2  JavaScript的特點(diǎn)和作用    128
6.1.3  在網(wǎng)頁(yè)中使用JavaScript    129
6.1.4  JavaScript代碼規(guī)范    131
6.2  變量、數(shù)據(jù)類型    131
6.2.1  變量的聲明和使用    131
6.2.2  JavaScript的基本數(shù)據(jù)類型    133
6.3  表達(dá)式與運(yùn)算符    136
6.3.1  表達(dá)式    136
6.3.2  運(yùn)算符    136
6.4  流程控制語(yǔ)句    143
6.4.1  分支結(jié)構(gòu)    143
6.4.2  循環(huán)結(jié)構(gòu)    146
6.5  JavaScript函數(shù)    149
6.5.1  函數(shù)的定義    149
6.5.2  函數(shù)的調(diào)用    150
6.5.3  使用函數(shù)的返回值    152
6.5.4  函數(shù)的嵌套    153
6.5.5  內(nèi)置函數(shù)    154
6.6  上機(jī)實(shí)訓(xùn)：制作簡(jiǎn)易計(jì)算器    155
本章小結(jié)    157
自測(cè)題    157
第7章  JavaScript中的對(duì)象    159
7.1  JavaScript的常用內(nèi)置對(duì)象    160
7.1.1  數(shù)組對(duì)象    160
7.1.2  字符串對(duì)象    164
7.1.3  日期對(duì)象    165
7.1.4  數(shù)學(xué)對(duì)象    168
7.2  常用文檔對(duì)象    171
7.2.1  文檔對(duì)象模型    171
7.2.2  文檔對(duì)象的節(jié)點(diǎn)樹(shù)    171
7.2.3  文檔對(duì)象    178
7.2.4  表單及其控件對(duì)象    180
7.2.5  style對(duì)象    183
7.3  常用窗口對(duì)象    185
7.3.1  屏幕對(duì)象    185
7.3.2  window窗口對(duì)象    186
7.3.3  瀏覽器信息對(duì)象    188
7.3.4  網(wǎng)址對(duì)象    189
7.3.5  歷史記錄對(duì)象    191
7.4  上機(jī)實(shí)訓(xùn)    192
7.4.1  實(shí)訓(xùn)1：將英文單詞首字母
改成大寫    192
7.4.2  實(shí)訓(xùn)2：限制多行文本域輸入
的字符個(gè)數(shù)    194
本章小結(jié)    196
自測(cè)題    197
第8章  事件處理    201
8.1  認(rèn)識(shí)JavaScript事件    202
8.1.1  JavaScript的常用事件    202
8.1.2  調(diào)用事件處理程序的方法    203
8.2  常用事件在網(wǎng)頁(yè)中的應(yīng)用    205
8.2.1  鼠標(biāo)事件    205
8.2.2  鍵盤事件    207
8.2.3  表單事件    209
8.2.4  頁(yè)面相關(guān)事件    213
8.3  上機(jī)實(shí)訓(xùn)：使用JavaScript實(shí)現(xiàn)廣告
圖像輪播    214
本章小結(jié)    218
自測(cè)題    218
第9章  JavaScript 實(shí)現(xiàn)Canvas
功能    221
9.1  創(chuàng)建Canvas元素    222
9.2  繪制基本圖形    222
9.2.1  繪制直線    223
9.2.2  繪制圓形    224
9.2.3  繪制矩形    225
9.2.4  繪制多邊形    226
9.3  圖形的變換    227
9.3.1  保存與恢復(fù)Canvas狀態(tài)    227
9.3.2  移動(dòng)坐標(biāo)位置    227
9.3.3  縮放圖形    228
9.4  特效應(yīng)用    229
9.5  繪制文本    230
9.6  上機(jī)實(shí)訓(xùn)：用Canvas繪制時(shí)鐘    231
9.6.1  繪制靜態(tài)時(shí)鐘    231
9.6.2  制作動(dòng)態(tài)時(shí)鐘    235
本章小結(jié)    236
自測(cè)題    236
第10章  購(gòu)物車的設(shè)計(jì)    237
10.1  案例導(dǎo)入    238
10.2  案例分析    238
10.3  操作步驟    239
10.3.1  設(shè)計(jì)購(gòu)物車的HTML
 結(jié)構(gòu)    239
10.3.2  購(gòu)物車的樣式設(shè)計(jì)    241
10.3.3  利用JavaScript實(shí)現(xiàn)購(gòu)物車
 功能    246
參考文獻(xiàn)    251