內容簡介
本教材是基於慕課《Web前端設計基礎》的配套教材。內容包括Web基礎知識、HTML、CSS、JavaScript四個單元,各內容單元又分別按照基礎知識、操作技能、套用提高三個層次組織教學內容。教材基於OBE理念及Web前端設計的工作過程,以培養學生的實踐套用能力為主線,通過具體網站建設項目的學習Web前端設計的相關規範、HTML超文本標記語言、CSS樣式、JavaScript腳本等基本知識和操作技術,通過任務實踐提升綜合套用能力。
圖書目錄
目 錄
項目1 認識Web前端設計 ··································································1
學習任務1.1 了解Web基礎知識 ··························································2
任務1.1.1 理解Web相關概念 ·····························································3
任務1.1.2 了解頁面元素 ··································································10
任務1.1.3 了解Web前端設計技術與工具 ···············································14
任務1.1.4 了解網站建設流程 ·····························································17
學習任務1.2 設計網站 ·····································································22
任務1.2.1 設計網站形象 ···································································23
任務1.2.2 設計頁面布局 ···································································28
任務1.2.3 設計網站導航及欄目 ···························································33
任務1.2.4 設計網頁層次及目錄結構 ·····················································37
項目2 創建及編輯Web網頁——HTML5 ················································41
學習任務2.1 創建網站首頁文檔 ··························································42
任務2.1.1 創建網站首頁 ··································································43
任務2.1.2 理解HTML標記語法 ·························································48
任務2.1.3 理解HTML布局標記 ·························································55
任務2.1.4 理解HTML5結構標記 ························································60
學習任務2.2 編輯網站首頁內容 ························································68
任務2.2.1 插入文本及列表 ································································70
任務2.2.2 插入圖像和媒體 ································································76
任務2.2.3 設定超連結和套用框架 ·······················································83
任務2.2.4 套用表格和表單 ································································91
項目3創建及套用Web樣式——CSS3···················································113
學習任務3.1 創建網站首頁樣式 ······················································114
任務3.1.1 理解CSS語法 ································································115
任務3.1.2 套用CSS樣式 ································································119
任務3.1.3 理解CSS選擇器 ·····························································125
任務3.1.4 理解CSS層疊性和繼承性 ·················································139
學習任務3.2 設計網站首頁樣式 ······················································145
任務3.2.1 設定CSS字型和文本屬性 ·················································146
任務3.2.2 設定CSS背景和列表屬性 ·················································151
任務3.2.3 設定CSS框線和表格屬性 ·················································158
任務3.2.4 套用CSS3效果 ·······························································165
學習任務3.3 定位網站頁面元素 ······················································179
任務3.3.1 理解CSS盒子模型 ··························································180
任務3.3.2 套用流布局 ····································································185
任務3.3.3 套用浮動布局 ·································································188
任務3.3.4 套用定位布局 ·································································194
任務3.3.5 製作移動端頁面 ······························································204
項目4套用Web網頁特效——JavaScript ··············································215
學習任務4.1 理解JavaScript語言基礎 ················································216
任務4.1.1 認識JavaScript ······························································217
任務4.1.2 認識JavaScript語言基礎 ···················································220
任務4.1.3 認識JavaScript自定義函式 ················································225
任務4.1.4 認識JavaScript控制語句 ···················································226
任務4.1.5 認識JavaScript對象 ·························································233
任務4.1.6 認識JavaScript內置對象 ···················································240
學習任務4.2 套用jQuery ································································247
任務4.2.1 理解jQuery框架·····························································248
任務4.2.2 利用jQuery實現網頁特效 ·················································256
任務4.2.3 了解Web前端框架技術 ····················································263
學習任務4.3 了解HTML5高級套用 ···················································266
任務4.3.1 了解HTML5畫布 ····························································267
任務4.3.2 了解HTML5拖放操作 ······················································276
任務4.3.3 了解HTML5地理定位 ······················································280
項目5 網站設計與開發綜合案例 ······················································287
實踐任務5.1 網站設計 ··································································288
實踐任務5.2 網站首頁布局及內容編輯 ·············································290
實踐任務5.3 套用CSS樣式美化網站首頁 ·······································297
實踐任務5.4 套用CSS樣式精準定位網站頁面元素 ···························305
參考文獻 ·············································································314