Web 前端設計基礎

本書是中國大學 MOOC 平臺慕課“Web 前端設計基礎”、國家級精品資源共享課“Web 技術應用基礎”、北京市高校優質本科課程“Web 前端設計”的配套教材。 本書基於 Web 前端設計的工作過程，採用“項目→學習任務→任務”的編寫方式，以培養學生的實踐應用能力為主線，通過具體的網站建設項目，介紹 Web 基礎、HTML、CSS、JavaScript 等網站前端開發必備的基本知識和操作技術，為從事 Web 前端設計工作打下堅實的基礎。本書內容結構合理、語言簡練、示例翔實，掃描相應的二維碼可觀看相應知識點示例的視頻操作和講解。 本書主要面向 Web 前端設計的學習人員，適合作為普通高等院校相關專業 Web 前端設計、網頁設計與製作等課程的教材，還可作為 Web 前端設計與開發從業人員的參考資料。

目 錄

 

項目1 認識Web前端設計 ···································································································1

 

學習任務1 瞭解Web基礎知識 ·············································································2

 

任務1.1.1 理解Web相關概念 ··················································································3

 

任務1.1.2 瞭解頁面元素··························································································11

 

任務1.1.3 瞭解Web前端設計技術與工具 ····························································17

 

任務1.1.4 瞭解網站建設流程··················································································21

 

學習任務2 設計網站 ·······························································································29

 

任務1.2.1 設計網站形象··························································································30

 

任務1.2.2 設計頁面佈局··························································································36

 

任務1.2.3 設計網站導航及欄目··············································································42

 

任務1.2.4 設計網頁層次及目錄結構······································································47

 

項目2 創建及編輯Web網頁——HTML5 ···································································53

 

學習任務1 創建網站首頁文檔 ···············································································54

 

任務2.1.1 創建網站首頁··························································································55

 

任務2.1.2 理解HTML標記語法 ············································································61

 

任務2.1.3 理解HTML佈局標記 ············································································68

 

任務2.1.4 理解HTML5結構標記 ··········································································73

 

學習任務2 編輯網站首頁內容 ···············································································85

 

任務2.2.1 插入文本及列表······················································································86

 

任務2.2.2 插入圖像和媒體······················································································95

 

任務2.2.3 設置超鏈接和應用框架········································································102

 

任務2.2.4 應用表格和表單····················································································111

 

 

 

項目3 創建及應用Web 樣式——CSS3 ······································································135 

 

學習任務1 創建網站首頁樣式·············································································136 

 

任務3.1.1 理解CSS 語法 ······················································································137 

任務3.1.2 應用CSS 樣式 ······················································································141 

任務3.1.3 理解CSS 選擇器 ··················································································149 

任務3.1.4 理解CSS 層疊性和繼承性 ··································································164 

 

學習任務2 設計網站首頁樣式·············································································172 

 

任務3.2.1 設置CSS 字體和文本屬性 ··································································173 

任務3.2.2 設置CSS 背景和列表屬性 ··································································181 

任務3.2.3 設置CSS 邊框和表格屬性 ··································································189 

任務3.2.4 應用CSS3 效果 ····················································································199 

 

學習任務3 定位網站頁面元素·············································································216 

 

任務3.3.1 理解CSS 盒子模型 ··············································································217 

任務3.3.2 應用流佈局····························································································222 

任務3.3.3 應用浮動佈局························································································225 

任務3.3.4 應用定位佈局························································································232 

任務3.3.5 製作移動端頁面····················································································245 

 

項目4 應用Web 網頁特效——JavaScript·································································257 

 

學習任務1 理解JavaScript 

語言基礎·····························································258 

 

任務4.1.1 認識JavaScript ······················································································ 259 

任務4.1.2 認識JavaScript 語言基礎·····································································262 

任務4.1.3 認識JavaScript 自定義函數·································································267 

任務4.1.4 認識JavaScript 控制語句·····································································268 

任務4.1.5 認識JavaScript 對象·············································································275 

任務4.1.6 認識JavaScript 內置對象·····································································283 

 

學習任務2 應用jQuery······················································································291 

 

任務4.2.1 理解jQuery 框架 ··················································································292 

 

 

任務4.2.2 利用jQuery 實現網頁特效 ··································································300 

任務4.2.3 jQuery 插件的應用 ···············································································307 

 

學習任務3 瞭解HTML5 

高級應用 ···································································312 

 

任務4.3.1 瞭解HTML5 畫布 ················································································313 

任務4.3.2 瞭解HTML5 拖放操作 ········································································326 

任務4.3.3 瞭解HTML5 地理定位 ········································································331 

 

參考文獻····································································································································340