內容簡介
本教材是基於慕課《Web前端設計基礎》的配套教材。內容包括Web基礎知識、HTML、CSS、JavaScript四個單元,各內容單元又分別按照基礎知識、操作技能、應用提高三個層次組織教學內容。教材基於OBE理念及Web前端設計的工作過程,以培養學生的實踐應用能力為主線,通過具體網站建設項目的學習Web前端設計的相關規範、HTML超文本標記語言、CSS樣式、JavaScript腳本等基本知識和操作技術,通過任務實踐提升綜合應用能力。
《Web前端設計基礎》教材內容豐富、結構合理、思路清晰、語言簡練流暢、示例翔實,適合作為高等院校電子商務、信息管理等相關專業Web前端設計、網頁設計等課程的教材,還可作為Web前端設計與開發從業人員的參考資料。
作者簡介
李立威
博士,教授,北京聯合大學電子商務國家級一流本科專業建設點負責人,北京市屬高校高水平科研創新團隊帶頭人,北京聯合大學數字經濟與創新研究中心主任,京津冀應用型本科院校電子商務專業虛擬教研室負責人。
發表學術論文50餘篇,主編教材6部,主講的「Web前端設計」「移動網際網路產品創新設計」2門慕課入選教育部電子商務類專業教學指導委員會推薦慕課並在國家高等教育智慧教育平台上線。
目錄
目 錄
項目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
目錄
VII
任務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
參考文獻