HTML5+CSS3網站設計基礎

HTML5+CSS3網站設計基礎

《HTML5+CSS3 網站設計基礎(第二版)微課版》是由朱翠苗、鄭廣成主編,為“十三五”“十四五”職業教育國家規劃教材。大連理工大學出版社於2023年1月出版的計算機類專業教材。全書共分十四個項目,系統講解HTML5與CSS3前端開發技術,並且通過三個完整項目,詳細演示從需求分析、頁面布局到代碼實現的全流程,踐行“做中學、學中產”的實訓教學思想。該教材在學銀線上配套《Web前端頁面設計》省級線上精品課程,方便學習者開展線上學習。

基本介紹

  • 中文名:HTML5+CSS3網站設計基礎 
  • 作者:朱翠苗 、鄭廣成 
  • 出版時間:2023年1月 
  • 出版社:大連理工大學出版社 
  • 頁數:286 頁 
  • 字數:475千字 
  • ISBN:9787568539708 
  • 開本:16 開 
內容簡介,圖書目錄,出版背景,

內容簡介

全書共設定14個項目,採用“基礎項目—專項任務—綜合實戰”的三階梯度編排,每個任務均遵循“任務需求—知識儲備—任務實現”的閉環邏輯組織內容。核心內容可分為三大模組:1. 基礎技術模組:涵蓋HTML5的文檔聲明、語法規範、基本標籤、表單元素、音頻與視頻套用等基礎內容;系統講解CSS3的基本語法、套用方式、選擇器分類,以及文字、背景、列表等樣式設定方法。2. 進階技能模組:重點介紹CSS盒子模型、浮動與定位機制,CSS3的2D/3D樣式、漸變背景、動畫與過渡效果等進階技術;同時補充HTML5新標籤、新表單元素的套用技巧。3. 綜合實戰模組:通過個人部落格製作、購物街網站製作、芙蓉商城製作三個完整項目,詳細演示從需求分析、頁面布局到代碼實現的全流程,踐行“做中學、學中產”的實訓教學思想;為完善知識體系,還增設了JavaScript基礎知識章節。全書每個項目均配備習題、習題答案及習題代碼,便於讀者邊學邊練、鞏固提升。

圖書目錄

項目1 認識HTML5 / 1
任務1.1 新的文檔聲明和語法規範 / 1
任務1.2 HTML5廢棄的標籤和屬性 / 2
1.2.1 HTML5廢棄的標籤 / 2
1.2.2 HTML5廢棄的屬性 / 3
任務1.3 HTML5新標籤 / 4
項目小結 / 7
習 題 / 7
項目2 使用HTML5的基本標籤 / 8
任務2.1 初識 HTML / 8
2.1.1 HTML檔案的基本結構 / 8
2.1.2 編輯工具 / 10
任務2.2 “李清照宋詞賞析”頁面製作 / 14
2.2.1 標題標籤<h1>~<h6> / 15
2.2.2 段落標籤<p> / 16
2.2.3 水平線標籤<hr/> / 17
任務2.3 “商品信息”頁面製作 / 19
2.3.1 有序列表標籤<ol> / 19
2.3.2 無序列表標籤<ul> / 22
2.3.3 定義列表標籤<dl> / 24
2.3.4 表格標籤<table> / 25
2.3.5 表單標籤<form> / 26
2.3.6 分區標籤<div> / 26
任務2.4 “相宜本草促銷信息”頁面製作 / 28
2.4.1 圖像標籤<img/> / 29
2.4.2 範圍標籤<span> / 30
2.4.3 換行標籤<br/> / 31
2.4.4 超連結標籤<a> / 31
任務2.5 注釋和特殊符號 / 35
2.5.1 HTML注釋 / 35
2.5.2 特殊符號 / 35
任務2.6 W3C標準 / 36
2.6.1 什麼是W3C標準 / 37
2.6.2 W3C提倡的Web頁結構 / 37
2.6.3 HTML5代碼規範 / 39
項目小結 / 40
習 題 / 40
項目3 表單套用 / 42
任務3.1 “會員註冊”頁面製作 / 42
3.1.1 表單的基本語法 / 43
3.1.2 表單基本元素的介紹 / 44
任務3.2 HTML5 新的input 類型 / 50
任務3.3 HTML5 新的表單元素 / 53
項目小結 / 55
習 題 / 55
項目4 表格套用和布局 / 57
任務4.1 表格基礎知識 / 57
4.1.1 表格的基本結構 / 58
4.1.2 表格的基本語法 / 58
任務4.2 跨行和跨列實現“商品分類” / 60
4.2.1 跨 列 / 60
4.2.2 跨 行 / 61
4.2.3 跨行和跨列 / 62
任務4.3 表格布局化妝品頁面 / 64
任務4.4 表格布局註冊頁面 / 67
任務4.5 “華人女歌手歌曲周排行榜”頁面製作 / 74
任務4.6 iframe框架 / 76
項目小結 / 77
習 題 / 78
項目5 HTML5中音頻和視頻的套用 / 80
任務5.1 video視頻元素 / 80
任務5.2 audio 音頻元素 / 82
項目小結 / 83
習 題 / 83
項目6 CSS3基礎套用 / 84
任務6.1 CSS基礎知識 / 84
6.1.1 為什麼使用CSS / 84
6.1.2 CSS的基本語法 / 85
任務6.2 CSS的套用方式 / 87
任務6.3 選擇器的分類 / 89
6.3.1 標籤選擇器 / 89
6.3.2 類選擇器 / 90
6.3.3 ID選擇器 / 92
任務6.4 CSS繼承性、層疊性、特殊性 / 95
6.4.1 繼承性 / 95
6.4.2 層疊性 / 96
6.4.3 特殊性 / 98
任務6.5 CSS3新增選擇器 / 99
6.5.1 屬性選擇器 / 99
6.5.2 結構(位置)偽類選擇器 / 100
6.5.3 偽元素選擇器 / 103
項目小結 / 104
習 題 / 104
項目7 CSS3美化網頁 / 106
任務7.1 用CSS設定字型樣式以及文本樣式 / 106
7.1.1 用CSS設定字型樣式 / 106
7.1.2 用CSS設定頁面的文本樣式 / 108
任務7.2 用CSS設定網頁背景圖片 / 112
任務7.3 CSS3新增背景樣式 / 118
任務7.4 CSS3新增漸變背景 / 121
7.4.1 線性漸變 / 122
7.4.2 徑向漸變 / 123
7.4.3 重複漸變 / 124
任務7.5 用CSS設定列表樣式 / 124
任務7.6 用CSS設定超連結偽類樣式 / 128
任務7.7 導航選單製作 / 131
項目小結 / 132
習 題 / 133
項目8 CSS盒子模型套用與CSS3動畫 / 134
任務8.1 盒子模型基礎知識 / 134
任務8.2 盒子模型屬性 / 136
8.2.1 邊界(margin) / 136
8.2.2 填充(padding) / 138
8.2.3 框線(border) / 139
8.2.4 CSS3新增圓角框線 / 146
任務8.3 CSS3動畫效果 / 148
8.3.1 過 渡 / 148
8.3.2 2D轉換 / 152
8.3.3 3D轉換 / 158
8.3.4 動 畫 / 160
任務8.4 網頁版面分欄 / 167
項目小結 / 172
習 題 / 173
項目9 浮動與定位 / 174
任務9.1 浮 動 / 174
9.1.1 為什麼需要浮動 / 174
9.1.2 浮動的含義及其在布局中的套用 / 176
任務9.2 定位機制 / 179
9.2.1 CSS的position屬性 / 180
9.2.2 CSS靜態定位 / 180
9.2.3 CSS相對定位 / 181
9.2.4 CSS絕對定位 / 184
9.2.5 CSS固定定位 / 187
9.2.6 CSS的z-index屬性 / 187
任務9.3 製作垂直導航選單和實現頂部布局 / 188
9.3.1 製作垂直導航選單 / 188
9.3.2 實現頂部布局 / 191
項目小結 / 194
習 題 / 194
項目10 典型頁面局部布局 / 195
任務10.1 div-ul-li實現橫嚮導航選單 / 195
任務10.2 div-dl-dt-dd實現圖文混排 / 201
項目小結 / 210
習 題 / 210
項目11 個人部落格製作 / 211
任務11.1 利用Dreamweaver搭建站點 / 211
任務11.2 製作部落格首頁 / 213
任務11.3 製作部落格分支頁 / 220
項目小結 / 224
習 題 / 224
項目12 購物街網站製作 / 225
任務12.1 設定通用樣式 / 225
任務12.2 設計網頁結構 / 228
任務12.3 設計頁面內容和樣式 / 230
項目小結 / 237
習 題 / 237
項目13 芙蓉商城製作 / 238
任務13.1 分塊製作商城網站首頁 / 238
13.1.1 利用Dreamweaver搭建站點 / 238
13.1.2 製作商城網站首頁的總體布局 / 241
13.1.3 實現頂部布局 / 247
13.1.4 實現左部商品分類 / 250
13.1.5 實現中部主題布局 / 253
13.1.6 實現右部布局 / 255
13.1.7 實現底部信息 / 258
任務13.2 製作商城分支頁——註冊頁面 / 258
任務13.3 製作商城分支頁——登錄頁面 / 263
任務13.4 製作商城分支頁——商品具體介紹頁面 / 265
任務13.5 建立頁面之間的連結和相關測試 / 267
13.5.1 建立頁面間的連結 / 268
13.5.2 網頁的兼容性測試 / 268
項目小結 / 269
習 題 / 269
項目14 JavaScript腳本編程 / 270
任務14.1 初識JavaScript / 270
任務14.2 JavaScript數據類型和數據基本操作 / 271
14.2.1 數據類型 / 271
14.2.2 數據基本操作 / 273
任務14.3 JavaScript流程控制 / 273
14.3.1 條件語句 / 274
14.3.2 循環語句 / 275
任務14.4 JavaScript函式 / 278
任務14.5 JavaScript對象 / 280
任務14.6 JavaScript事件 / 281
任務14.7 JavaScript完成圖片輪番播放 / 283
項目小結 / 285
習 題 / 286

出版背景

隨著HTML5和CSS3成為Web前端開發的主流技術標準,結合《國家職業教育改革實施方案》中推動“學歷證書+若干職業技能等級證書”制度的要求,為滿足計算機軟體行業對Web前端開發專業技術技能人才的培養需求,朱翠苗、鄭廣成聯合行業力量編寫了本教材,旨在解決傳統教材內容陳舊、與行業需求脫節的問題。
第二版修訂時,進一步結合“Web前端開發職業技能等級標準”及“套用軟體系統開發”“移動套用設計與開發”技能大賽要求,融入新技術與新標準,滿足“技能證書+技能大賽”雙重需求;同時得到北京中軟國際教育科技股份有限公司、蘇州雙藝科技諮詢有限公司的支持,是校企合作成果,且獲得江蘇省高校“青藍工程”項目資助。

熱門詞條

聯絡我們