HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程
校企雙元開(kāi)發(fā)，密切結(jié)合思政
- 類(lèi) 別：計(jì)算機(jī)系列
- 書(shū) 名：HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程
- 主 編：王麗芬 邵雪 葉靜宇
- 定 價(jià)：59.9
- 開(kāi) 本：大16開(kāi)
- 印刷方式：雙色
- 頁(yè) 數(shù)：328
- 時(shí) 間：2024年3月
- 出 版 社：上海交通大學(xué)出版社
- 書(shū) 號(hào)：978-7-313-29801-0
內(nèi)容摘要
本書(shū)共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編程。
本書(shū)適合作為高等學(xué)校前端開(kāi)發(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ù)入門(mén) 13
1.5.1 HTML 13
1.5.2 CSS 13
1.5.3 JavaScript 13
1.5.4 常用開(kāi)發(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)簽的分類(lèi) 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 元素的類(lèi)型 135
4.4.2 標(biāo)簽 137
4.4.3 元素類(lèi)型的轉(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 鏈接偽類(lèi)控制超鏈接 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)畫(huà) 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ù)類(lèi)型 277
8.2.4 數(shù)據(jù)類(lèi)型轉(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)畫(huà)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)圖書(shū)
-
Python程序設(shè)計(jì)簡(jiǎn)明教程
主編：張春飛本書(shū)分為10章，內(nèi)容包括Python語(yǔ)言概述、初識(shí)Python、選擇結(jié)構(gòu)與循環(huán)結(jié)構(gòu)、Python組合數(shù)據(jù)類(lèi)型、函數(shù)、面向?qū)ο蟪绦蛟O(shè)計(jì)、模塊及第
￥49.9 -
CorelDRAW 2021平面設(shè)計(jì)案例教程
主編：申莎本書(shū)從平面設(shè)計(jì)工作人員的實(shí)際工作入手，介紹了CorelDRAW 2021平面設(shè)計(jì)的基礎(chǔ)知識(shí)、繪制和編輯幾何圖形、繪制與編輯線條圖形、圖
￥58 -
Java程序設(shè)計(jì)案例教程
主編：李海濤 陳濤 孫紅麗本書(shū)是基于翻轉(zhuǎn)課堂的課程教學(xué)范式改革與校本應(yīng)用型教材建設(shè)項(xiàng)目基礎(chǔ)上編寫(xiě)的。本書(shū)采用案例驅(qū)動(dòng)的方式編寫(xiě)，即把理論知識(shí)點(diǎn)的講解
￥59.8 -
C語(yǔ)言程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題解答（修訂版）
主編：張春飛 許志軍本書(shū)是《C語(yǔ)言程序設(shè)計(jì)（修訂版）》的輔助教材，用于輔助教師教學(xué)與學(xué)生上機(jī)實(shí)驗(yàn)。本書(shū)共分4章：第1章介紹Visual C++ 2010集成開(kāi)
￥33 -
C語(yǔ)言程序設(shè)計(jì)（修訂版）
主編：張春飛 許志軍本書(shū)是為普通高等院校學(xué)生學(xué)習(xí)C語(yǔ)言程序設(shè)計(jì)編寫(xiě)的教材，共分10章，內(nèi)容包括：程序設(shè)計(jì)與C語(yǔ)言、C語(yǔ)言的基本知識(shí)、控制結(jié)構(gòu)、數(shù)組
￥49 -
C語(yǔ)言程序設(shè)計(jì)習(xí)題解答與上機(jī)指導(dǎo)
主編：李小艷 王緒梅本書(shū)是《C語(yǔ)言程序設(shè)計(jì)》的配套用書(shū)，全書(shū)共分兩大部分：第1部分是與教材相匹配的習(xí)題解答，給出了《C語(yǔ)言程序設(shè)計(jì)》一書(shū)中各章習(xí)
￥32 -
C語(yǔ)言程序設(shè)計(jì)
主編：王緒梅 李小艷本書(shū)由淺入深地介紹了C語(yǔ)言程序設(shè)計(jì)的相關(guān)知識(shí)。全書(shū)共分8章，內(nèi)容包括C語(yǔ)言程序設(shè)計(jì)基礎(chǔ)知識(shí)、C程序的數(shù)據(jù)描述與計(jì)算、結(jié)構(gòu)化程序
￥45 -
C/C++程序設(shè)計(jì)
主編：李彥明本書(shū)全面介紹了C語(yǔ)言的基本概念、語(yǔ)法規(guī)則和程序設(shè)計(jì)的基本方法，數(shù)組與函數(shù)，指針類(lèi)型的各種操作，復(fù)合數(shù)據(jù)類(lèi)型及應(yīng)用，文件操作，C++程
￥49 -
C/C++程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題集
主編：李彥明本書(shū)是與《C C++程序設(shè)計(jì)》配套使用的學(xué)習(xí)用書(shū)。內(nèi)容包括上機(jī)指導(dǎo)篇和習(xí)題篇，上機(jī)指導(dǎo)篇給出了每次的上機(jī)目的、上機(jī)內(nèi)容、上機(jī)指導(dǎo)和思考
￥39 -
Java程序設(shè)計(jì)
主編：李忠偉本書(shū)共分10章，內(nèi)容包括：Java概述、Java語(yǔ)言基礎(chǔ)、Java與面向?qū)ο蟆?shù)組與字符串、異常處理、輸入與輸出流、Swing與圖形用戶界面、多
￥43 -
C語(yǔ)言程序設(shè)計(jì)上機(jī)指導(dǎo)與習(xí)題解答
主編：張春飛 李夢(mèng)陽(yáng)本書(shū)是《C語(yǔ)言程序設(shè)計(jì)》一書(shū)的配套參考書(shū)，用于輔助教師教學(xué)與學(xué)生上機(jī)實(shí)驗(yàn)?！ ”緯?shū)共分3章。第1章介紹Visual C++ 6 0集成開(kāi)發(fā)環(huán)
￥28
