HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作案例教程
校企雙元開發(fā)，密切結(jié)合思政
- 類 別：計(jì)算機(jī)系列
- 書 名：HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作案例教程
- 主 編：王麗芬 邵雪 葉靜宇
- 定 價(jià)：59.9
- 開 本：大16開
- 印刷方式：雙色
- 頁 數(shù)：328
- 時(shí) 間：2024年3月
- 出 版 社：上海交通大學(xué)出版社
- 書 號(hào)：978-7-313-29801-0
內(nèi)容摘要
本書共8個(gè)項(xiàng)目,每個(gè)項(xiàng)目對應(yīng)HTML、CSS、JavaScript相關(guān)知識(shí)。項(xiàng)目1介紹網(wǎng)頁網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)，項(xiàng)目2介紹HTML5基礎(chǔ)知識(shí)，項(xiàng)目3介紹CSS格式化網(wǎng)頁，項(xiàng)目4介紹盒子模型對網(wǎng)頁模塊的劃分，項(xiàng)目5介紹網(wǎng)頁中的列表和超級(jí)鏈接，項(xiàng)目6介紹網(wǎng)頁中的表格和表單，項(xiàng)目7介紹網(wǎng)頁中的視聽技術(shù)，項(xiàng)目8介紹JavaScript編程。
本書適合作為高等學(xué)校前端開發(fā)課程的的教材，也可供相關(guān)人員參考。
目錄
項(xiàng)目1 網(wǎng)頁網(wǎng)站設(shè)計(jì)基礎(chǔ)
1.1 網(wǎng)頁和網(wǎng)站基礎(chǔ) 1
1.1.1 網(wǎng)頁的基本構(gòu)成要素 3
1.1.2 網(wǎng)頁的相關(guān)名詞 3
1.1.3 Web標(biāo)準(zhǔn) 4
1.2 網(wǎng)頁設(shè)計(jì)原則 5
1.2.1 以用戶為中心 5
1.2.2 視覺美觀 5
1.2.3 主題明確 6
1.2.4 內(nèi)容與形式統(tǒng)一 6
1.3 網(wǎng)頁設(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)頁效果圖 12
1.4.5 搭建網(wǎng)站靜態(tài)頁面 12
1.4.6 網(wǎng)站發(fā)布 12
1.5 網(wǎng)頁制作技術(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)頁 16
項(xiàng)目2 HTML5基礎(chǔ)
2.1 HTML5概述 18
2.1.1 HTML5的發(fā)展歷程 18
2.1.2 HTML5的優(yōu)勢 19
2.1.3 HTML5語法 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 常見圖像格式 37
2.4.2 圖像標(biāo)簽![]()
38
2.4.3 絕對路徑和相對路徑 43
2.5 動(dòng)手實(shí)踐 44
項(xiàng)目3 CSS格式化網(wǎng)頁
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)頁網(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)頁布局 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)頁添加列表和超鏈接
5.1 列表 171
5.1.1 無序列表 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)頁添加表格和表單
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)頁視聽技術(shù)
7.1 視聽技術(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過渡 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語法規(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 條件語句 296
8.4.2 循環(huán)控制語句 301
8.4.3 跳轉(zhuǎn)語句 304
8.5 對象模型 307
8.5.1 對象 307
8.5.2 DOM模型 307
8.5.3 訪問節(jié)點(diǎn) 308
8.5.4 設(shè)置節(jié)點(diǎn)樣式 310
8.5.5 BOM模型 310
8.5.6 Date對象 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簡單的網(wǎng)頁28
2.3.8新聞頁面37
2.4.4 古詩文排版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 中國共青團(tuán)125
4.3.6 五四青年節(jié)海報(bào)135
4.4.4 地標(biāo)導(dǎo)航欄141
4.5.5 吉林市滑雪場160
4.6.6 網(wǎng)頁布局170
5.1.5計(jì)時(shí)單位懸浮框180
5.2.6 琴師導(dǎo)航188
5.3.4 卡片式文本效果195
6.1.6 表格設(shè)計(jì)網(wǎng)頁布局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)頁創(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程序設(shè)計(jì)簡明教程
主編：張春飛本書分為10章，內(nèi)容包括Python語言概述、初識(shí)Python、選擇結(jié)構(gòu)與循環(huán)結(jié)構(gòu)、Python組合數(shù)據(jù)類型、函數(shù)、面向?qū)ο蟪绦蛟O(shè)計(jì)、模塊及第
￥49.9 -
CorelDRAW 2021平面設(shè)計(jì)案例教程
主編：申莎本書從平面設(shè)計(jì)工作人員的實(shí)際工作入手，介紹了CorelDRAW 2021平面設(shè)計(jì)的基礎(chǔ)知識(shí)、繪制和編輯幾何圖形、繪制與編輯線條圖形、圖
￥58 -
Java程序設(shè)計(jì)案例教程
主編：李海濤 陳濤 孫紅麗本書是基于翻轉(zhuǎn)課堂的課程教學(xué)范式改革與校本應(yīng)用型教材建設(shè)項(xiàng)目基礎(chǔ)上編寫的。本書采用案例驅(qū)動(dòng)的方式編寫，即把理論知識(shí)點(diǎn)的講解
￥59.8 -
C語言程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題解答（修訂版）
主編：張春飛 許志軍本書是《C語言程序設(shè)計(jì)（修訂版）》的輔助教材，用于輔助教師教學(xué)與學(xué)生上機(jī)實(shí)驗(yàn)。本書共分4章：第1章介紹Visual C++ 2010集成開
￥33 -
C語言程序設(shè)計(jì)（修訂版）
主編：張春飛 許志軍本書是為普通高等院校學(xué)生學(xué)習(xí)C語言程序設(shè)計(jì)編寫的教材，共分10章，內(nèi)容包括：程序設(shè)計(jì)與C語言、C語言的基本知識(shí)、控制結(jié)構(gòu)、數(shù)組
￥49 -
C語言程序設(shè)計(jì)習(xí)題解答與上機(jī)指導(dǎo)
主編：李小艷 王緒梅本書是《C語言程序設(shè)計(jì)》的配套用書，全書共分兩大部分：第1部分是與教材相匹配的習(xí)題解答，給出了《C語言程序設(shè)計(jì)》一書中各章習(xí)
￥32 -
C語言程序設(shè)計(jì)
主編：王緒梅 李小艷本書由淺入深地介紹了C語言程序設(shè)計(jì)的相關(guān)知識(shí)。全書共分8章，內(nèi)容包括C語言程序設(shè)計(jì)基礎(chǔ)知識(shí)、C程序的數(shù)據(jù)描述與計(jì)算、結(jié)構(gòu)化程序
￥45 -
C/C++程序設(shè)計(jì)
主編：李彥明本書全面介紹了C語言的基本概念、語法規(guī)則和程序設(shè)計(jì)的基本方法，數(shù)組與函數(shù)，指針類型的各種操作，復(fù)合數(shù)據(jù)類型及應(yīng)用，文件操作，C++程
￥49 -
C/C++程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題集
主編：李彥明本書是與《C C++程序設(shè)計(jì)》配套使用的學(xué)習(xí)用書。內(nèi)容包括上機(jī)指導(dǎo)篇和習(xí)題篇，上機(jī)指導(dǎo)篇給出了每次的上機(jī)目的、上機(jī)內(nèi)容、上機(jī)指導(dǎo)和思考
￥39 -
Java程序設(shè)計(jì)
主編：李忠偉本書共分10章，內(nèi)容包括：Java概述、Java語言基礎(chǔ)、Java與面向?qū)ο?、?shù)組與字符串、異常處理、輸入與輸出流、Swing與圖形用戶界面、多
￥43 -
C語言程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題解答
主編：張春飛 李夢陽本書是《C語言程序設(shè)計(jì)》一書的配套參考書，用于輔助教師教學(xué)與學(xué)生上機(jī)實(shí)驗(yàn)?！ ”緯卜?章。第1章介紹Visual C++ 6 0集成開發(fā)環(huán)
￥28
