本書介紹Web前端開發(fā)所涉及的HTML、CSS和JavaScript相關(guān)知識(shí),包括Web開發(fā)基礎(chǔ)、 HTML基礎(chǔ)、HTML進(jìn)階、HTML綜合案例、CSS基礎(chǔ)、CSS進(jìn)階、CSS綜合案例、JavaScript入門、JavaScript進(jìn)階、JavaScript綜合案例,*后結(jié)合HTML、CSS和JavaScript設(shè)置了綜合案例。為方便教師授課和讀者自學(xué),本書提供了豐富的配套資源,包括教學(xué)課件、書中全部的源代碼、全部實(shí)例程序代碼、實(shí)例系統(tǒng)和部分習(xí)題的參考答案等。
本書適合本、?朴(jì)算機(jī)及相關(guān)專業(yè)的教學(xué)使用,也可作為計(jì)算機(jī)愛好者學(xué)習(xí)Web應(yīng)用開發(fā)技術(shù)的工具書。
前言
第1章 Web開發(fā)基礎(chǔ)1
1.1 WWW簡(jiǎn)介1
1.1.1 WWW概述1
1.1.2 統(tǒng)一資源定位符(URL)2
1.1.3 WWW的文檔2
1.2 Web頁(yè)面設(shè)計(jì)技術(shù)3
1.2.1 HTML簡(jiǎn)介3
1.2.2 CSS簡(jiǎn)介3
1.2.3 JavaScript簡(jiǎn)介3
1.3 Web開發(fā)與發(fā)布4
1.3.1 DreamWeaver簡(jiǎn)介4
1.3.2 DreamWeaver使用4
1.3.3 Web網(wǎng)站發(fā)布8
習(xí)題10
第2章 HTML基礎(chǔ)11
2.1 HTML文檔11
2.1.1 HTML標(biāo)簽11
2.1.2 HTML元素12
2.1.3 HTML屬性14
2.1.4 HTML文檔的基本結(jié)構(gòu)18
2.2 網(wǎng)頁(yè)文字設(shè)計(jì)21
2.2.1 文本設(shè)計(jì)21
2.2.2 列表26
2.2.3 表格27
2.2.4 語義元素31
2.3 建立超鏈接32
2.3.1 超鏈接的概念32
2.3.2 絕對(duì)路徑和相對(duì)路徑32
2.3.3 定義超鏈接33
2.3.4 命名錨點(diǎn)34
2.4 網(wǎng)頁(yè)表單設(shè)計(jì)35
2.4.1 創(chuàng)建表單35
2.4.2 input元素創(chuàng)建控件36
2.4.3 其他常用控件42
2.4.4 HTML5 新的表單元素43
習(xí)題45
第3章 HTML進(jìn)階46
3.1 網(wǎng)頁(yè)多媒體設(shè)計(jì)46
3.1.1 圖像46
3.1.2 聲音和視頻49
3.1.3 內(nèi)聯(lián)框架52
3.1.4 對(duì)象53
3.2 圖形繪制與數(shù)學(xué)公式54
3.2.1 Canvas繪圖54
3.2.2 SVG繪圖60
3.2.3 MathML數(shù)學(xué)符號(hào)和公式62
3.3 網(wǎng)頁(yè)布局62
3.3.1 使用div元素的網(wǎng)頁(yè)布局63
3.3.2 HTML5網(wǎng)頁(yè)布局64
3.4 HTML5 用戶接口API68
3.4.1 HTML5拖放與通知68
3.4.2 HTML5地理定位73
3.5 案例—個(gè)人博客主頁(yè)75
習(xí)題81
第4章 HTML綜合案例—萌寵
之家83
4.1 基本頁(yè)面布局83
4.2 各頁(yè)面設(shè)計(jì)84
4.2.1 主頁(yè)面84
4.2.2 aboutUs頁(yè)面87
4.2.3 services頁(yè)面89
4.2.4 team頁(yè)面91
4.2.5 gallery頁(yè)面93
4.2.6 contact頁(yè)面95
第5章 CSS基礎(chǔ)97
5.1 CSS的作用97
5.2 CSS的使用方法99
5.2.1 如何編寫CSS99
5.2.2 CSS的基礎(chǔ)語法99
5.2.3 應(yīng)用CSS的方法101
5.2.4 CSS的層次結(jié)構(gòu)102
5.3 CSS的選擇器103
5.3.1 類型選擇器103
5.3.2 類選擇器104
5.3.3 ID選擇器104
5.3.4 結(jié)合類型選擇器104
5.3.5 后代選擇器105
5.3.6 多重選擇器106
5.4 CSS的基礎(chǔ)樣式107
5.4.1 背景(background)107
5.4.2 文本格式(text)108
5.4.3 字體屬性(fonts)110
5.4.4 鏈接(link)112
5.4.5 列表(list)113
5.5 案例—人物信息卡片115
習(xí)題119
第6章 CSS進(jìn)階121
6.1 CSS高階選擇器121
6.1.1 子選擇器121
6.1.2 相鄰兄弟選擇器122
6.1.3 屬性選擇器123
6.2 CSS偽類及偽元素125
6.2.1 CSS偽類125
6.2.2 CSS偽元素127
6.3 CSS布局基礎(chǔ)129
6.3.1 CSS框模型129
6.3.2 定位機(jī)制(Position)133
6.3.3 浮動(dòng)屬性(Float)136
6.4 CSS響應(yīng)式頁(yè)面設(shè)計(jì)138
6.4.1 什么是響應(yīng)式頁(yè)面設(shè)計(jì)138
6.4.2 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)-視口139
6.4.3 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)格視圖141
6.4.4 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)-媒體查詢144
6.5 CSS3新特性146
6.5.1 CSS3新的邊框?qū)傩?46
6.5.2 CSS3新的背景屬性148
6.5.3 CSS3 文本陰影151
6.6 案例—響應(yīng)式布局151
習(xí)題157
第7章 CSS綜合案例——計(jì)算器158
7.1 計(jì)算器的設(shè)計(jì)158
7.1.1 頁(yè)面原型設(shè)計(jì)158
7.1.2 計(jì)算器頁(yè)面布局159
7.2 計(jì)算器基本樣式設(shè)置163
7.2.1 設(shè)置計(jì)算器主體樣式163
7.2.2 設(shè)置計(jì)算機(jī)標(biāo)題樣式164
7.2.3 設(shè)置顯示屏樣式164
7.2.4 設(shè)置按鈕的樣式165
7.3 計(jì)算器進(jìn)階樣式設(shè)置167
7.3.1 設(shè)置顯示框字體167
7.3.2 設(shè)置按鈕漸變及陰影168
7.3.3 設(shè)置鼠標(biāo)單擊特效169
7.3.4 效果展示及后續(xù)工作170
第8章 JavaScript入門174
8.1 JavaScript基礎(chǔ)174
8.2 JavaScript基本語法175
8.2.1 數(shù)據(jù)176
8.2.2 操作符177
8.2.3 語句179
8.3 JavaScript對(duì)象186
8.3.1 內(nèi)置對(duì)象186
8.3.2 自定義對(duì)象191
8.3.3 BOM對(duì)象192
8.3.4 DOM對(duì)象197
8.4 JavaScript事件200
8.4.1 常用事件200
8.4.2 事件添加201
8.4.3 基本功能實(shí)現(xiàn)203
8.4.4 調(diào)試205
習(xí)題209
第9章 JavaScript進(jìn)階210
9.1 jQuery210
9.1.1 jQuery選擇器211
9.1.2 jQuery操作樣式表221
9.1.3 jQuery操作文檔225
9.1.4 jQuery事件234
9.1.5 jQuery效果238
9.1.6 jQuery Ajax240
9.2 eCharts241
9.2.1 eCharts概述242
9.2.2 eCharts基本使用242
9.2.3 eCharts API244
9.2.4 eCharts組件250
9.3 案例254
9.3.1 HTML基本結(jié)構(gòu)與CSS基本樣式254
9.3.2 jQuery效果處理256
習(xí)題259
第10章 JavaScript綜合案例——學(xué)校
信息管理系統(tǒng)260
10.1 系統(tǒng)頁(yè)面設(shè)計(jì)260
10.1.1 頁(yè)面框架設(shè)計(jì)260
10.1.2 年級(jí)概況頁(yè)面實(shí)現(xiàn)262
10.1.3 班級(jí)概況頁(yè)面設(shè)計(jì)263
10.1.4 成績(jī)管理頁(yè)面設(shè)計(jì)268
10.1.5 學(xué)生管理頁(yè)面設(shè)計(jì)271
10.1.6 后臺(tái)管理頁(yè)面設(shè)計(jì)274
10.2 系統(tǒng)功能實(shí)現(xiàn)275
10.2.1 頁(yè)面框架功能實(shí)現(xiàn)275
10.2.2 年級(jí)概況頁(yè)面實(shí)現(xiàn)277
10.2.3 班級(jí)概況功能實(shí)現(xiàn)287
10.2.4 成績(jī)管理功能實(shí)現(xiàn)290
10.2.5 學(xué)生管理功能實(shí)現(xiàn)294
10.2.6 后臺(tái)管理功能設(shè)計(jì)296
第11章 網(wǎng)絡(luò)學(xué)院教學(xué)考評(píng)中心網(wǎng)站的
實(shí)現(xiàn)298
11.1 創(chuàng)建網(wǎng)站298
11.1.1 網(wǎng)站代碼結(jié)構(gòu)299
11.1.2 網(wǎng)頁(yè)規(guī)劃299
11.1.3 網(wǎng)站Logo與站點(diǎn)導(dǎo)航302
11.2 網(wǎng)站首頁(yè)制作306
11.2.1 輪播圖片306
11.2.2 圖片新聞310
11.2.3 通知公告與文字新聞313
11.2.4 中心概況部分316
11.2.5 下方欄目部分318
11.2.6 頁(yè)腳部分320
11.3 網(wǎng)站詳情頁(yè)面制作323
11.3.1 子頁(yè)面規(guī)劃323
11.3.2 左側(cè)導(dǎo)航條與聯(lián)系方式324
11.3.3 右側(cè)詳細(xì)內(nèi)容325
11.4 網(wǎng)站新聞列表頁(yè)面制作327
11.4.1 子頁(yè)面規(guī)劃327
11.4.2 右側(cè)詳細(xì)內(nèi)容329
11.4.3 圖片新聞列表頁(yè)面330
參考文獻(xiàn)