HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程
校企雙元開發(fā)，密切結(jié)合思政
- 類 別：計(jì)算機(jī)系列
- 書 名：HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程
- 主 編：王麗芬 邵雪 葉靜宇
- 定 價(jià)：59.9
- 開 本：大16開
- 印刷方式：雙色
- 頁(yè) 數(shù)：328
- 時(shí) 間：2024年3月
- 出 版 社：上海交通大學(xué)出版社
- 書 號(hào)：978-7-313-29801-0
內(nèi)容摘要
本書共8個(gè)項(xiàng)目,每個(gè)項(xiàng)目對(duì)應(yīng)HTML、CSS、JavaScript相關(guān)知識(shí)。項(xiàng)目1介紹網(wǎng)頁(yè)網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)，項(xiàng)目2介紹HTML5基礎(chǔ)知識(shí)，項(xiàng)目3介紹CSS格式化網(wǎng)頁(yè)，項(xiàng)目4介紹盒子模型對(duì)網(wǎng)頁(yè)模塊的劃分，項(xiàng)目5介紹網(wǎng)頁(yè)中的列表和超級(jí)鏈接，項(xiàng)目6介紹網(wǎng)頁(yè)中的表格和表單，項(xiàng)目7介紹網(wǎng)頁(yè)中的視聽(tīng)技術(shù)，項(xiàng)目8介紹JavaScript編程。
本書適合作為高等學(xué)校前端開發(fā)課程的的教材，也可供相關(guān)人員參考。
目錄
項(xiàng)目1 網(wǎng)頁(yè)網(wǎng)站設(shè)計(jì)基礎(chǔ)
1.1 網(wǎng)頁(yè)和網(wǎng)站基礎(chǔ) 1
1.1.1 網(wǎng)頁(yè)的基本構(gòu)成要素 3
1.1.2 網(wǎng)頁(yè)的相關(guān)名詞 3
1.1.3 Web標(biāo)準(zhǔn) 4
1.2 網(wǎng)頁(yè)設(shè)計(jì)原則 5
1.2.1 以用戶為中心 5
1.2.2 視覺(jué)美觀 5
1.2.3 主題明確 6
1.2.4 內(nèi)容與形式統(tǒng)一 6
1.3 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范 6
1.3.1 配色原則 6
1.3.2 設(shè)計(jì)尺寸規(guī)范 7
1.3.3 字體規(guī)范 8
1.3.4 命名規(guī)范 8
1.4 網(wǎng)站制作流程 9
1.4.1 確定網(wǎng)站主題 10
1.4.2 網(wǎng)站整體規(guī)劃 10
1.4.3 收集素材 11
1.4.4 設(shè)計(jì)網(wǎng)頁(yè)效果圖 12
1.4.5 搭建網(wǎng)站靜態(tài)頁(yè)面 12
1.4.6 網(wǎng)站發(fā)布 12
1.5 網(wǎng)頁(yè)制作技術(shù)入門 13
1.5.1 HTML 13
1.5.2 CSS 13
1.5.3 JavaScript 13
1.5.4 常用開發(fā)工具 13
1.6 創(chuàng)建第一個(gè)網(wǎng)頁(yè) 16
項(xiàng)目2 HTML5基礎(chǔ)
2.1 HTML5概述 18
2.1.1 HTML5的發(fā)展歷程 18
2.1.2 HTML5的優(yōu)勢(shì) 19
2.1.3 HTML5語(yǔ)法 20
2.1.4 HTML5文檔的基本格式 21
2.1.5 HTML文檔頭部的相關(guān)標(biāo)簽 22
2.2 標(biāo)簽基礎(chǔ) 25
2.2.1 標(biāo)簽的分類 25
2.2.2 標(biāo)簽的關(guān)系 27
2.2.3 標(biāo)簽的屬性 28
2.3 文本標(biāo)簽 28
2.3.1 標(biāo)題標(biāo)簽 29
2.3.2 段落標(biāo)簽 30
2.3.3 水平線標(biāo)簽 31
2.3.4 換行標(biāo)簽 32
2.3.5 文本樣式標(biāo)簽 33
2.3.6 文本格式化標(biāo)簽 34
2.3.7 特殊字符 35
2.4 圖像標(biāo)簽 37
2.4.1 常見(jiàn)圖像格式 37
2.4.2 圖像標(biāo)簽![]()
38
2.4.3 絕對(duì)路徑和相對(duì)路徑 43
2.5 動(dòng)手實(shí)踐 44
項(xiàng)目3 CSS格式化網(wǎng)頁(yè)
3.1 CSS3介紹 45
3.1.1 認(rèn)識(shí)CSS3 45
3.1.2 CSS樣式規(guī)則 48
3.1.3 CSS基礎(chǔ)選擇器 52
3.2 CSS設(shè)置文本樣式 59
3.2.1 CSS字體樣式屬性 59
3.2.2 CSS文本外觀屬性 65
3.3 CSS3 新增選擇器 75
3.3.1 CSS3選擇器 75
3.3.2 CSS3的層疊性和繼承性 97
3.3.3 CSS3優(yōu)先級(jí) 99
3.4 動(dòng)手實(shí)踐 104
項(xiàng)目4 網(wǎng)頁(yè)網(wǎng)站設(shè)計(jì)基礎(chǔ)
4.1 盒子模型 105
4.1.1 認(rèn)識(shí)盒子模型 106
4.1.2
標(biāo)簽 109
4.2 盒子模型相關(guān)屬性 111
4.2.1 邊框?qū)傩?span style="white-space:pre"> 111
4.2.2 內(nèi)邊距屬性 122
4.2.3 外邊距屬性 123
4.3 背景屬性 126
4.3.1 設(shè)置背景顏色 126
4.3.2 設(shè)置背景圖像 127
4.3.3 設(shè)置背景圖像平鋪 129
4.3.4 設(shè)置背景圖像位置 131
4.3.5 綜合設(shè)置元素背景 133
4.4 元素的轉(zhuǎn)換 135
4.4.1 元素的類型 135
4.4.2 標(biāo)簽 137
4.4.3 元素類型的轉(zhuǎn)換 139
4.5 浮動(dòng)和定位 142
4.5.1 認(rèn)識(shí)浮動(dòng) 142
4.5.2 清除浮動(dòng) 145
4.5.3 overflow屬性 150
4.5.4 設(shè)置定位 153
4.6 網(wǎng)頁(yè)布局 161
4.6.1 認(rèn)識(shí)布局 161
4.6.2 單列布局 162
4.6.3 兩列布局 164
4.6.4 三列布局 166
4.6.5 通欄布局 168
4.7 動(dòng)手實(shí)踐 170
項(xiàng)目5 為網(wǎng)頁(yè)添加列表和超鏈接
5.1 列表 171
5.1.1 無(wú)序列表 171
5.1.2 有序列表 173
5.1.3 定義列表 175
5.1.4 列表的嵌套 178
5.2 CSS控制列表樣式 180
5.2.1 list-style-type屬性 180
5.2.2 list-style-image屬性 182
5.2.3 list-style-position屬性 183
5.2.4 list-style屬性 185
5.2.5 背景圖像定義列表項(xiàng)目符號(hào) 186
5.3 超鏈接 188
5.3.1 創(chuàng)建超鏈接 188
5.3.2 錨點(diǎn)鏈接 190
5.3.3 鏈接偽類控制超鏈接 192
5.4 動(dòng)手實(shí)踐 195
項(xiàng)目6 為網(wǎng)頁(yè)添加表格和表單
6.1 表格標(biāo)記 196
6.1.1 創(chuàng)建表格 196
6.1.2 標(biāo)簽的屬性 200
6.1.3
標(biāo)簽的屬性 202
6.1.4
| 標(biāo)簽的屬性 205
6.1.5
|
標(biāo)簽的屬性 207
6.2 CSS控制表格樣式 208
6.2.1 CSS控制表格邊框 208
6.2.2 CSS控制單元格邊距 212
6.2.3 CSS控制單元格寬高 215
6.3 表單標(biāo)簽 216
6.3.1 認(rèn)識(shí)表單 216
6.3.2 創(chuàng)建表單 218
6.4 表單控件 220
6.4.1 input控件 220
6.4.2 textarea控件 228
6.4.3 select控件 229
6.4.4 CSS控制表單樣式 233
6.5 動(dòng)手實(shí)踐 236
項(xiàng)目7 全新的網(wǎng)頁(yè)視聽(tīng)技術(shù)
7.1 視聽(tīng)技術(shù) 237
7.1.1 音視頻嵌入技術(shù)概述 237
7.1.2 視頻和音頻文件格式 238
7.1.3 視頻和音頻文件的兼容性 239
7.1.4 嵌入視頻 240
7.1.5 嵌入音頻 241
7.1.6 控制視頻寬度和高度 242
7.2 CSS3過(guò)渡 245
7.2.1 transition-property屬性 245
7.2.2 transition-duration屬性 245
7.2.3 transition-timing-function屬性 247
7.2.4 transition-delay屬性 248
7.2.5 transition屬性 248
7.3 CSS3轉(zhuǎn)換 249
7.3.1 認(rèn)識(shí)transform 249
7.3.2 2D轉(zhuǎn)換 249
7.3.3 3D轉(zhuǎn)換 258
7.4 CSS3動(dòng)畫 261
7.4.1 @Keyframes關(guān)鍵幀 262
7.4.2 animation-name屬性 263
7.4.3 animation-duration屬性 263
7.4.4 animation-timing-function屬性 264
7.4.5 animation-delay屬性 265
7.4.6 animation-iteration-count屬性 266
7.4.7 animation-direction屬性 266
7.4.8 animation屬性 267
7.5 動(dòng)手實(shí)踐 268
項(xiàng)目8 JavaScript編程
8.1 JavaScript概述 269
8.1.1 認(rèn)識(shí)JavaScript 270
8.1.2 JavaScript語(yǔ)法規(guī)則 271
8.1.3 JavaScript引入方式 272
8.2 JavaScript基礎(chǔ) 275
8.2.1 關(guān)鍵字 275
8.2.2 變量 276
8.2.3 數(shù)據(jù)類型 277
8.2.4 數(shù)據(jù)類型轉(zhuǎn)換 278
8.2.5 運(yùn)算符 279
8.2.6 運(yùn)算符優(yōu)先級(jí) 285
8.3 數(shù)組與函數(shù) 287
8.3.1 數(shù)組 287
8.3.2 函數(shù) 291
8.3.3 alert（ ）方法 295
8.3.4 prompt（ ）方法 295
8.4 流程控制結(jié)構(gòu) 296
8.4.1 條件語(yǔ)句 296
8.4.2 循環(huán)控制語(yǔ)句 301
8.4.3 跳轉(zhuǎn)語(yǔ)句 304
8.5 對(duì)象模型 307
8.5.1 對(duì)象 307
8.5.2 DOM模型 307
8.5.3 訪問(wèn)節(jié)點(diǎn) 308
8.5.4 設(shè)置節(jié)點(diǎn)樣式 310
8.5.5 BOM模型 310
8.5.6 Date對(duì)象 314
8.6 事件 318
8.6.1 事件和事件調(diào)用 318
8.6.2 常用JavaScript事件 319
8.7 動(dòng)手實(shí)踐 321
案例設(shè)計(jì)目錄
2.2.4簡(jiǎn)單的網(wǎng)頁(yè)28
2.3.8新聞頁(yè)面37
2.4.4 古詩(shī)文排版43
3.1.5文字Logo59
3.2.3 農(nóng)耕文化75
3.3.4 農(nóng)耕文化軟文推廣104
4.1.4 五四運(yùn)動(dòng)新聞標(biāo)題111
4.2.4 中國(guó)共青團(tuán)125
4.3.6 五四青年節(jié)海報(bào)135
4.4.4 地標(biāo)導(dǎo)航欄141
4.5.5 吉林市滑雪場(chǎng)160
4.6.6 網(wǎng)頁(yè)布局170
5.1.5計(jì)時(shí)單位懸浮框180
5.2.6 琴師導(dǎo)航188
5.3.4 卡片式文本效果195
6.1.6 表格設(shè)計(jì)網(wǎng)頁(yè)布局208
6.2.4 求職表216
6.3.3 智慧農(nóng)業(yè)系統(tǒng)登錄界面219
6.4.5 農(nóng)作物檔案236
7.1.7 播放列表245
7.2.6 導(dǎo)航欄動(dòng)畫249
7.3.4 卡片翻轉(zhuǎn)特效261
7.4.9 網(wǎng)頁(yè)創(chuàng)意分區(qū)268
8.2.7驗(yàn)證碼286
8.3.5 輪播圖296
8.4.4 下拉菜單307
8.5.7節(jié)日倒計(jì)時(shí)318
8.6.3 Tab欄切換320
|
|---|
主編信息
王麗芬，女，吉林農(nóng)業(yè)科技學(xué)院副教授。2003至今在吉林農(nóng)業(yè)科技學(xué)院任教，主持教育廳項(xiàng)目3項(xiàng)，參與課題6項(xiàng)，主編教材2部，副主編教材3部。邵雪，女，吉林農(nóng)業(yè)科技學(xué)院講師，2006年至今在吉林農(nóng)業(yè)科技學(xué)院任教，主持教育廳項(xiàng)目1項(xiàng)，參與課題5項(xiàng)，副主編教材3部。葉靜宇，女，吉林農(nóng)業(yè)科技學(xué)院助教。2018年至今吉林農(nóng)業(yè)科技學(xué)院任教，主持省級(jí)課題1項(xiàng)，校級(jí)課題2項(xiàng)，參與課題7項(xiàng)，副主編教材3部。
相關(guān)圖書
-
Python計(jì)算機(jī)視覺(jué)應(yīng)用（全彩版）
主編：劉國(guó)華本書是依托Python語(yǔ)言講解計(jì)算機(jī)視覺(jué)的基礎(chǔ)理論與算法，并通過(guò)大量示例細(xì)致分析了圖像形成和處理技術(shù)、圖像特征提取、圖像分割、圖
￥69.8 -
Python程序設(shè)計(jì)簡(jiǎn)明教程
主編：張春飛本書分為10章，內(nèi)容包括Python語(yǔ)言概述、初識(shí)Python、選擇結(jié)構(gòu)與循環(huán)結(jié)構(gòu)、Python組合數(shù)據(jù)類型、函數(shù)、面向?qū)ο蟪绦蛟O(shè)計(jì)、模塊及第
￥49.9 -
Premiere Pro 2021影視編輯與制作
主編：左浩本書以Adobe Premiere Pro 2021為藍(lán)本，全面系統(tǒng)地介紹Premiere的基本操作方法及視頻編輯技巧，包括Premiere Pro 2021基本操
￥49.8 -
AutoCAD 2021基礎(chǔ)與應(yīng)用案例教程
主編：鐘良 王科飛 余家欣 張德虎本書從理論到案例都進(jìn)行了較詳盡的敘述,內(nèi)容由淺入深,全面介紹了AutoCAD 2021基礎(chǔ)知識(shí)及其在相關(guān)行業(yè)中的應(yīng)用。全書共分12 章,內(nèi)
￥55 -
CorelDRAW 2021平面設(shè)計(jì)案例教程
主編：申莎本書從平面設(shè)計(jì)工作人員的實(shí)際工作入手，介紹了CorelDRAW 2021平面設(shè)計(jì)的基礎(chǔ)知識(shí)、繪制和編輯幾何圖形、繪制與編輯線條圖形、圖
￥58 -
Photoshop 2020圖形圖像處理案例教程
主編：張永生 熊芳芳 段紅玉Photoshop圖形圖像處理是我國(guó)高等院校計(jì)算機(jī)類及相關(guān)專業(yè)的一門專業(yè)技術(shù)必修課程，是培養(yǎng)學(xué)生專業(yè)能力的核心課程之一。本書以實(shí)例
￥49.8 -
Java程序設(shè)計(jì)案例教程
主編：李海濤 陳濤 孫紅麗本書是基于翻轉(zhuǎn)課堂的課程教學(xué)范式改革與校本應(yīng)用型教材建設(shè)項(xiàng)目基礎(chǔ)上編寫的。本書采用案例驅(qū)動(dòng)的方式編寫，即把理論知識(shí)點(diǎn)的講解
￥59.8 -
計(jì)算機(jī)導(dǎo)論
主編：姚保峰本書共12章，分別為計(jì)算思維和計(jì)算機(jī)發(fā)展、信息的表示、計(jì)算機(jī)硬件系統(tǒng)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)和網(wǎng)絡(luò)安全、機(jī)器語(yǔ)言到高級(jí)語(yǔ)言、程序設(shè)計(jì)
￥59.8 -
Access 2016數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用
主編：舒軍 王曉麗本書注重以實(shí)例講解Access 2016數(shù)據(jù)庫(kù)的開發(fā)和管理。全書共分7個(gè)項(xiàng)目，包括數(shù)據(jù)庫(kù)和表的創(chuàng)建、處理數(shù)據(jù)庫(kù)的樣式和數(shù)據(jù)、數(shù)據(jù)的查
￥54 -
Access 2010數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用
主編：熊芳芳本書分為9章，分別介紹了數(shù)據(jù)庫(kù)基礎(chǔ)知識(shí)、數(shù)據(jù)庫(kù)與表、查詢、窗體、報(bào)表、宏、模塊與VBA程序設(shè)計(jì)、VBA數(shù)據(jù)庫(kù)編程、全國(guó)計(jì)算機(jī)等級(jí)
￥49.8 -
C語(yǔ)言程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題解答（修訂版）
主編：張春飛 許志軍本書是《C語(yǔ)言程序設(shè)計(jì)（修訂版）》的輔助教材，用于輔助教師教學(xué)與學(xué)生上機(jī)實(shí)驗(yàn)。本書共分4章：第1章介紹Visual C++ 2010集成開
￥33
