網(wǎng)頁設(shè)計與制作教程(HTML5+CSS3+JavaScript+jQuery)(第2版)
定 價:49 元
叢書名:高等學(xué)校計算機基礎(chǔ)教育教材精選
- 作者:張曉蕾
- 出版時間:2018/8/1
- ISBN:9787121342189
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP312;TP393.092
- 頁碼:304
- 紙張:
- 版次:01
- 開本:16開
本書面向網(wǎng)站開發(fā)與網(wǎng)頁制作的讀者,采用全新流行的Web標準,以Web前端開發(fā)技術(shù)HTML5、CSS3、JavaScript和jQuery為基礎(chǔ),由淺入深、完整詳細地介紹了網(wǎng)站設(shè)計與網(wǎng)頁制作的相關(guān)知識。本書共分13章,主要內(nèi)容包括HTML5基礎(chǔ)知識、編輯網(wǎng)頁元素、頁面的布局與交互、CSS3入門、盒模型、使用CSS修飾頁面外觀、CSS布局技術(shù)、JavaScript程序設(shè)計基礎(chǔ)、HTML5進階、jQuery基礎(chǔ)、jQuery的動畫效果、jQuery UI插件的用法.和天地環(huán)保綜合案例網(wǎng)站。本書內(nèi)容緊扣國家對高等學(xué)校培養(yǎng)高級應(yīng)用型、復(fù)合型人才的技能水平和知識結(jié)構(gòu)的要求,以天地環(huán)保網(wǎng)站項目案例的開發(fā)思路為主線,采用模塊分解、任務(wù)驅(qū)動、子任務(wù)實現(xiàn)和代碼設(shè)計四層結(jié)構(gòu),通過對模塊中每個任務(wù)相應(yīng)知識點的講解,引導(dǎo)讀者學(xué)習(xí)網(wǎng)頁制作、設(shè)計、規(guī)劃的基本知識,以及項目開發(fā)、測試的完整流程。
1989~1999年在北京成人電子信息大學(xué)計算機系任教,擔(dān)任軟件教研室主任。1999~2005年在北京信息職業(yè)技術(shù)學(xué)院電子信息系擔(dān)任教學(xué)副主任、學(xué)術(shù)帶頭人。2006至今 在北京信息職業(yè)技術(shù)學(xué)院軟件工程系擔(dān)任系主任。主持教育部課題《軟件技術(shù)專業(yè)資源庫建設(shè)》的課程建設(shè)任務(wù);參與教育部高職高專計算機類專業(yè)教學(xué)指導(dǎo)委員會立項課題《軟件技術(shù)專業(yè)工學(xué)結(jié)合的教學(xué)管理機制研究》;參與北京教科院立項課題《二年制高等職業(yè)教育培養(yǎng)目標與培養(yǎng)模式的實踐研究》“軟件技術(shù)”專業(yè)子課題的研究;科研或教學(xué)工作及獲獎情況* 國家“十一五”規(guī)劃課題的子課題《以就業(yè)為導(dǎo)向的高等職業(yè)教育軟件技術(shù)專業(yè)人才培養(yǎng)整體解決方案研究》,獲得第二屆中國職業(yè)技術(shù)教育科學(xué)研究成果三等獎,并被中國電子教育學(xué)會評選為職業(yè)技術(shù)教育科學(xué)研究優(yōu)秀成果一等獎,2013年被評選為北京市高等教育教學(xué)成果二等獎。
第1章 HTML5基礎(chǔ)知識 1
1.1 Web技術(shù)和瀏覽器 1
1.2 Web標準 1
1.2.1 什么是Web標準 1
1.2.2 建立Web標準的優(yōu)點 2
1.2.3 理解表現(xiàn)和結(jié)構(gòu)相分離 2
1.3 HTML5概述 3
1.3.1 Web技術(shù)發(fā)展歷程 3
1.3.2 HTML5的特性 4
1.3.3 HTML5元素 4
1.4 HTML5的基本結(jié)構(gòu) 5
1.4.1 HTML5語法結(jié)構(gòu) 5
1.4.2 HTML5編寫規(guī)范 6
1.4.3 HTML5文檔結(jié)構(gòu) 6
1.5 創(chuàng)建HTML文件 7
1.6 搭建支持HTML5的瀏覽器
環(huán)境 8
1.7 網(wǎng)頁頭部標簽 9
1.8 注釋 11
1.9 特殊符號 11
習(xí)題1 12
第2章 編輯網(wǎng)頁元素 13
2.1 文本元素 13
2.2 文本層次語義元素 15
2.3 基本排版元素 17
2.4 圖像 21
2.4.1 網(wǎng)頁圖像的格式及使用
要點 21
2.4.2 圖像標簽 22
2.4.3 設(shè)置網(wǎng)頁背景圖像 24
2.4.4 圖文混排 24
2.4.5 案例—制作天地環(huán)保
“關(guān)于我們”圖文混排
頁面 25
2.5 超鏈接 26
2.5.1 超鏈接概述 26
2.5.2 超鏈接的應(yīng)用 26
2.5.3 案例—制作天地環(huán)保
“下載專區(qū)”頁面 30
2.6 列表 32
2.6.1 無序列表 32
2.6.2 有序列表 33
2.6.3 定義列表 34
2.6.4 嵌套列表 35
2.7 <div>標簽 35
2.8 <span>標簽 36
2.9 綜合案例—制作天地環(huán)保
“公司名片”頁面 37
習(xí)題2 38
第3章 頁面的布局與交互 40
3.1 表格 40
3.1.1 表格的結(jié)構(gòu) 40
3.1.2 表格的基本語法 40
3.1.3 表格的屬性 41
3.1.4 不規(guī)范表格 43
3.1.5 表格數(shù)據(jù)的分組 44
3.1.6 表格的嵌套 46
3.1.7 案例—使用表格布局
天地環(huán)!肮こ陶故尽
頁面 46
3.2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局 47
3.3 頁面交互元素 53
3.3.1 details元素和summary
元素 53
3.3.2 progress元素 54
3.3.3 meter元素 54
3.4 表單 55
3.4.1 表單的基本概念 55
3.4.2 表單標簽 55
3.4.3 表單元素 56
3.4.4 案例—制作天地環(huán)保
“會員注冊”表單 60
3.4.5 表單分組 61
3.4.6 使用表格布局表單 62
3.4.7 表單的高級用法 63
習(xí)題3 64
第4章 CSS3基礎(chǔ) 66
4.1 CSS概述 66
4.2 CSS的優(yōu)勢與局限性 68
4.3 CSS語法基礎(chǔ) 70
4.3.1 CSS樣式規(guī)則 70
4.3.2 基本選擇符 71
4.3.3 復(fù)合選擇符 73
4.3.4 通配符選擇符 75
4.3.5 特殊選擇符 76
4.4 CSS的屬性單位 77
4.4.1 長度、百分比單位 78
4.4.2 色彩單位 78
4.5 網(wǎng)頁中引用CSS的方法 79
4.5.1 行內(nèi)樣式 79
4.5.2 內(nèi)部樣式表 80
4.5.3 鏈入外部樣式表 81
4.5.4 導(dǎo)入外部樣式表 82
4.5.5 案例—制作“天地環(huán)保
工程簡介”頁面 83
4.6 文檔結(jié)構(gòu) 85
4.6.1 文檔結(jié)構(gòu)的基本概念 85
4.6.2 繼承 86
4.6.3 樣式表的層疊、特殊性
與重要性 87
4.6.4 元素類型 88
4.6.5 案例—制作天地環(huán)保
“核心業(yè)務(wù)”局部頁面 89
習(xí)題4 90
第5章 盒模型 91
5.1 盒模型簡介 91
5.2 盒模型的屬性 92
5.2.1 邊框 92
5.2.2 外邊距 95
5.2.3 內(nèi)邊距 96
5.2.4 案例—盒模型的演示 97
5.3 盒模型的大小 98
5.3.1 盒模型的寬度與高度 98
5.3.2 設(shè)置塊級元素與行級
元素的寬度和高度 98
5.4 盒模型綜合案例—“天地環(huán)!
頁面頂部內(nèi)容 99
5.5 盒子的定位 101
5.5.1 定位屬性 101
5.5.2 定位方式 103
5.6 浮動與清除浮動 106
5.6.1 浮動 106
5.6.2 清除浮動 109
5.6.3 案例—天地環(huán)!暗卿洝
頁面的整體布局 110
習(xí)題5 112
第6章 使用CSS修飾頁面外觀 113
6.1 設(shè)置字體樣式 113
6.2 設(shè)置文本樣式 115
6.3 設(shè)置圖像樣式 118
6.3.1 圖像縮放 119
6.3.2 圖像邊框 120
6.3.3 圖像的不透明度 121
6.3.4 背景圖像 121
6.3.5 背景重復(fù) 122
6.3.6 背景圖像定位 123
6.3.7 設(shè)置背景圖像固定 125
6.3.8 背景圖像大小 125
6.4 設(shè)置表格樣式 126
6.4.1 常用的CSS表格屬性 126
6.4.2 案例—使用隔行換色
表格制作“環(huán)保工程年度
排行榜” 128
6.5 設(shè)置表單樣式 129
6.5.1 使用CSS修飾常用的
表單元素 130
6.5.2 案例—制作“天地環(huán)保
用戶調(diào)查”頁面 131
6.6 設(shè)置鏈接 133
6.6.1 設(shè)置文字鏈接的外觀 133
6.6.2 圖文鏈接 135
6.7 設(shè)置列表 136
6.7.1 表格布局的缺點 136
6.7.2 列表布局的優(yōu)勢 136
6.7.3 CSS列表屬性 136
6.7.4 案例—制作天地環(huán)保
二維碼名片 140
6.8 創(chuàng)建導(dǎo)航菜單 141
6.9 綜合案例—制作“綠色環(huán)保”
社區(qū)頁面 144
習(xí)題6 151
第7章 CSS布局技術(shù) 152
7.1 Div+CSS布局技術(shù)簡介 152
7.2 使用嵌套的Div布局頁面 153
7.2.1 將頁面用Div分塊 153
7.2.2 案例—制作“環(huán)保空間”
頁面 153
7.3 典型的CSS布局樣式 156
7.3.1 兩列布局樣式 156
7.3.2 三列布局樣式 159
7.4 綜合案例—制作天地環(huán)保
“博客”頁面 162
習(xí)題7 170
第8章 JavaScript程序設(shè)計基礎(chǔ) 171
8.1 JavaScript概述 171
8.2 在網(wǎng)頁中使用JavaScript 171
8.3 JavaScript基本語法 174
8.4 JavaScript的程序結(jié)構(gòu) 176
8.4.1 簡單語句 176
8.4.2 程序控制流程 178
8.5 函數(shù) 181
8.6 基于對象的JavaScript語言 183
8.7 DOM編程 185
8.7.1 window對象 186
8.7.2 document對象 187
8.7.3 location對象 189
8.7.4 history對象 190
8.7.5 form對象 190
8.8 JavaScript的對象事件處理
程序 191
8.8.1 對象的事件 191
8.8.2 常用的事件及處理 191
8.8.3 表單對象與交互性 194
8.9 綜合案例—Web頁面信息
交互 196
習(xí)題8 197
第9章 HTML5的高級應(yīng)用 199
9.1 HTML5拖放API 199
9.1.1 draggable屬性 199
9.1.2 拖放觸發(fā)的事件和數(shù)據(jù)
傳遞 200
9.2 多媒體播放 202
9.2.1 HTML5的多媒體支持 202
9.2.2 音頻標簽 203
9.2.3 視頻標簽 204
9.2.4 HTML5多媒體API 205
9.3 Canvas繪圖 207
9.3.1 創(chuàng)建<canvas>元素 207
9.3.2 構(gòu)建繪圖環(huán)境 208
9.3.3 通過JavaScript繪制
圖形 208
9.4 HTML5地理定位API 216
9.4.1 Geolocation基礎(chǔ) 216
9.4.2 Geolocation API實現(xiàn)
地理定位 217
9.4.3 案例—使用HTML5
獲取地理位置及百度
地圖 218
9.5 HTML5的發(fā)展前景 221
習(xí)題9 221
第10章 jQuery基礎(chǔ) 222
10.1 jQuery概述 222
10.2 編寫jQuery程序 223
10.3 jQuery對象和DOM對象 224
10.3.1 jQuery對象和DOM
對象簡介 224
10.3.2 jQuery對象和DOM
對象的相互轉(zhuǎn)換 225
10.4 jQuery插件 228
10.5 jQuery選擇器簡介 228
10.6 基礎(chǔ)選擇器 229
10.7 層次選擇器 234
10.8 過濾選擇器 237
10.9 表單選擇器 241
10.10 jQuery的基本操作 242
10.10.1 元素屬性的操作 242
10.10.2 元素樣式的操作 245
10.10.3 元素內(nèi)容和值的
操作 247
習(xí)題10 249
第11章 jQuery的動畫效果 251
11.1 jQuery的動畫方法簡介 251
11.2 顯示與隱藏效果 252
11.3 淡入/淡出效果 255
11.4 滑動效果 258
11.5 綜合案例—制作折疊式
導(dǎo)航菜單 260
習(xí)題11 262
第12章 jQuery UI插件的用法 263
12.1 jQuery UI概述 263
12.2 jQuery UI的常用插件 267
12.2.1 日期選擇器插件 267
12.2.2 折疊面板插件 268
12.2.3 標簽頁插件 271
12.2.4 自動完成插件 272
習(xí)題12 275
第13章 天地環(huán)保綜合案例網(wǎng)站 277
13.1 網(wǎng)站的開發(fā)流程和組織結(jié)構(gòu) 277
13.1.1 網(wǎng)站的開發(fā)流程 277
13.1.2 創(chuàng)建站點目錄 278
13.1.3 網(wǎng)站頁面的組成 279
13.2 網(wǎng)站技術(shù)分析 279
13.3 制作網(wǎng)站首頁 280
13.4 制作聯(lián)系我們頁面 291
13.5 實訓(xùn)網(wǎng)站 292
習(xí)題13 292