HTML5+CSS3網頁設計與製作教程
柳州職業技術大學、武漢厚溥數字科技有限公司
商品描述
"《HTML5+CSS3網頁設計與製作教程》列選廣西壯族自治區第二批“十四五”職業教育規劃教材培育項目，符合高職電腦類課程的基本教學要求。本書內容安排合理，結構清晰，用通俗易懂的語言講解復雜的概念，旨在幫助讀者輕松理解HTML5和CSS3的核心知識。此外，本書採用工單與工作手冊相結合的形式組織內容，強調電腦編程類課程的實踐性特點。書中共有八個精心設計的教學項目：初識HTML5及開發工具、製作首頁logo、設計註冊頁面、名優特產模塊的美化、文學藝術模塊的佈局、名勝古跡模塊的展示、傳統工藝模塊的動畫設置、文旅網站的製作與整合。教學項目中涵蓋了開發工具、HTML基本標簽、HTML5新增標簽、HTML5新增表單輸入類型、CSS的語法結構、應用CSS進行佈局和美化的方法、盒模型、動畫設置等多個知識點。 《HTML5+CSS3網頁設計與製作教程》可作為高職本科和高職專科院校電腦相關課程的教材，也可作為廣大程序設計人員提升技能的參考資料。無論是初學者還是有一定經驗的開發者，都能在本書中有所收獲。"
目錄大綱
目 錄
項目一 初識HTML5及開發工具 1
工單任務 2
工作手冊 5
1.1 HTML5概述 5
1.1.1 HTML5的發展歷程 5
1.1.2 HTML5的新特性 6
1.1.3 HTML5的開發組織 7
1.2 第一個入門網頁 7
1.2.1 頭部<head>…</head> 8
1.2.2 標題<title>…</title> 8
1.2.3 元標簽<meta> 9
1.2.4 入門網頁 9
1.3 開發工具 10
1.3.1 記事本 10
1.3.2 EditPlus 11
1.3.3 VS Code 11
1.3.4 Adobe Dreamweaver 13
1.3.5 HBuilderX 13
上機實戰 18
單元自測 19
單元小結 19
完成工單 19
工單評價 22
項目二 製作首頁logo 23
工單任務 24
工作手冊 26
2.1 HTML基本標簽 26
2.1.1 標題標簽 26
2.1.2 段落標簽 26
2.1.3 換行標簽 27
2.1.4 預排版標簽 28
2.1.5 文本格式化標簽 29
2.1.6 列表 30
2.1.7 文本字體標簽 34
2.1.8 插入圖片標簽 35
2.1.9 插入特殊符號 36
2.1.10 插入橫線 37
2.1.11 添加多媒體元素 38
2.2 HTML5新增標簽 39
2.2.1 <article>標簽 39
2.2.2 <audio>標簽 40
2.2.3 <canvas>標簽 41
2.2.4 <time>標簽 42
2.2.5 <video>標簽 43
上機實戰 44
單元自測 45
單元小結 46
完成工單 46
工單評價 48
項目三 設計註冊頁面 49
工單任務 50
工作手冊 52
3.1 表格的應用 52
3.2 表單的應用 58
3.3 在表單中添加控件 59
3.3.1 輸入類控件 59
3.3.2 菜單列表類控件 65
3.3.3 文本域 66
3.4 HTML5新增表單輸入類型 67
3.4.1 email類型 67
3.4.2 number類型 68
3.4.3 range類型 69
3.4.4 search類型 70
3.4.5 url類型 70
上機實戰 71
單元自測 77
單元小結 78
完成工單 78
工單評價 80
項目四 名優特產模塊的美化 81
工單任務 82
工作手冊 85
4.1 初步認識CSS 85
4.1.1 什麽是CSS 85
4.1.2 CSS發展簡史 85
4.1.3 CSS基本語法 86
4.2 CSS語法結構分析 86
4.2.1 CSS屬性 86
4.2.2 CSS選擇器 87
4.3 CSS美化頁面 96
4.3.1 美化網頁文字 96
4.3.2 美化網頁按鈕 98
4.3.3 美化網頁圖片 101
4.3.4 美化網頁背景 102
4.3.5 美化網頁邊框 103
4.3.6 美化網頁表格 104
4.3.7 美化網頁表單 105
4.3.8 美化網頁導航欄 106
4.3.9 美化下拉菜單 107
4.3.10 CSS Sprite技術 109
4.4 CSS樣式的使用方式 111
4.4.1 行內樣式表 111
4.4.2 內部樣式表 112
4.4.3 外部樣式表 112
上機實戰 115
單元自測 116
單元小結 117
完成工單 118
工單評價 124
項目五 文學藝術模塊的佈局 125
工單任務 126
工作手冊 128
5.1 應用CSS佈局網頁 128
5.1.1 一列固定寬度及高度 128
5.1.2 一列自適應寬度 129
5.1.3 一列固定寬度居中 130
5.1.4 設置列數 131
5.1.5 設置列間距 132
5.1.6 設置列之間的規則 132
5.2 HTML列表的應用 133
5.2.1 ul無序列表和ol有序
列表 133
5.2.2 改變項目符號樣式 135
5.2.3 橫向圖文列表 137
5.2.4 浮動後父容器高度自
適應 139
5.3 超鏈接偽類的應用 139
5.3.1 超鏈接的4種樣式 139
5.3.2 將鏈接轉換為塊級元素 141
5.3.3 製作按鈕 142
5.3.4 首字下沉 143
上機實戰 144
單元自測 148
單元小結 149
完成工單 149
工單評價 156
項目六 名勝古跡模塊的展示 157
工單任務 158
工作手冊 160
6.1 理解表現和結構分離 160
6.1.1 什麽是內容、結構、
表現 160
6.1.2 DIV與CSS結合的優勢 162
6.1.3 怎麽改善現有的網站 163
6.2 DIV概述 166
6.2.1 DIV是什麽 166
6.2.2 如何使用DIV 166
6.2.3 理解DIV 167
6.2.4 並列與嵌套DIV結構 168
6.2.5 使用合適的對象來佈局 169
6.3 盒模型詳解 170
6.3.1 什麽是盒模型 170
6.3.2 盒模型的細節 170
6.3.3 上下margin疊加問題 172
6.3.4 左右margin加倍問題 173
6.4 完善盒模型 174
6.4.1 邊框顯示方式定義 174
6.4.2 溢出處理 176
6.4.3 輪廓樣式定義 178
6.5 浮動與定位 179
6.5.1 文檔流 179
6.5.2 浮動 180
6.5.3 浮動的清理 182
6.5.4 如何使用浮動進行佈局 183
6.5.5 定位 185
上機實戰 188
單元自測 192
單元小結 194
完成工單 194
工單評價 200
項目七 傳統工藝模塊的動畫設置 201
工單任務 202
工作手冊 205
7.1 過渡效果 205
7.1.1 transition-property屬性 205
7.1.2 transition-duration屬性 207
7.1.3 transition-timing-function
屬性 208
7.1.4 transition-delay屬性 209
7.1.5 transition屬性 209
7.2 變形效果 210
7.2.1 2D變形 210
7.2.2 3D變形 216
7.3 動畫效果 218
7.3.1 @keyframes規則 218
7.3.2 animation-name屬性 219
7.3.3 animation-duration屬性 219
7.3.4 animation-timing-function
屬性 220
7.3.5 animation-delay屬性 221
7.3.6 animation-iteration-count
屬性 221
7.3.7 animation-direction屬性 222
7.3.8 animation屬性 223
上機實戰 223
單元自測 226
單元小結 227
完成工單 227
工單評價 233
項目八 文旅網站的製作與整合 235
工單任務 236
工作手冊 240
8.1 網站開發流程 240
8.1.1 結構分析 240
8.1.2 搭建框架 242
8.2 網站頁面佈局 246
8.2.1 頭部 246
8.2.2 主體 253
8.2.3 底部及快捷操作部分 262
上機實戰 263
單元自測 270
單元小結 270
完成工單 270
工單評價 288
