Web前端開發項目化教程(第2版)

胡平,林雪華,李知菲

  • 出版商: 電子工業
  • 出版日期: 2020-08-01
  • 售價: $318
  • 貴賓價: 9.5$302
  • 語言: 簡體中文
  • 頁數: 260
  • ISBN: 7121381257
  • ISBN-13: 9787121381256

立即出貨

商品描述

本書使用HTML5+CSS3技術,採用校企合作、校校合作方式編寫,註重培養學生的Web前端開發能力。全書分為8個項目。項目1~項目5是成長項目,案例中既有HTML+CSS的基礎技能,更著重介紹HTML5的新標簽、CSS3的新屬性,包括浮動、定位、文本、背景、邊框、表單、多列佈局、動畫、音視頻等內容。這5個項目是Web前端的必要技能,也是必修內容,滿足大多數院校的課程教學需要。在內容設計上,將知識點融入項目開發的各個子任務中,讓學生邊學、邊操作、邊提高,其中項目5是採用響應式佈局的模擬項目。Web前端開發是教育部首批“1+X”職業技能等級證書之一,為使學生在提高操作技能的同時掌握必要的理論知識,本書附有職業技能客觀測試題目。項目6~項目8是選修或拓展內容,供教師和學生按需選擇;其中項目6是實戰項目,由真實項目的開發者帶著讀者一起開發一個企業官網;項目7是提升項目,是一個移動端推廣項目;項目8是拓展的游戲開發項目,使用canvas技術製作飛機大戰游戲。

目錄大綱

項目1 簡單網頁設計 1 教學導航 1 項目描述 1 1.1 前端開發語言 2 1.1.1 認識前端開發語言 2 1.1.2 開發環境 3 任務1-1 創建Web項目 6 1.2 HTML和CSS基礎 11 1.2.1 HTML常用標簽 11 1.2.2 CSS基礎選擇器 12 1.2.3 常用CSS樣式 14 1.2.4 盒模型 16 任務1-2 製作“五環之歌”頁面 16 1.3 CSS3常用的新增選擇器 22 任務1-3 給導航條添加CSS樣式 23 職業技能知識點考核1 27 1.4 浮動和定位 30 1.4.1 浮動 30 1.4.2 定位 33 任務1-4 製作網頁焦點圖 33 職業技能知識點考核2 37 1.5 HTML5常用的新增標簽 38 任務1-5 製作一個常見問題答疑頁面 40 職業技能知識點考核3 42 項目2 文本類網頁設計 43 教學導航 43 項目描述 43 2.1 文本處理 44 2.1.1 文本陰影 44 2.1.2 溢出文本處理 45 任務2-1 製作網站新聞列表區 46 職業技能知識點考核4 49 2.2 特殊字體 49 任務2-2 製作白居易的《池上》頁面 50 2.3 表單 54 2.3.1 表單輸入類型 54 2.3.2 新的表單元素 56 2.3.3 新的表單屬性 56 任務2-3 製作學員信息頁 57 職業技能知識點考核5 63 項目3 圖像類網頁設計 65 教學導航 65 項目描述 65 3.1 背景 66 3.1.1 背景的定義 66 3.1.2 背景的原點位置 67 3.1.3 背景的顯示區域 69 3.1.4 背景圖像的大小 70 3.1.5 背景圖像的定位 71 任務3-1 製作信紙頁面 72 職業技能知識點考核6 77 3.2 邊框 78 3.2.1 圓角邊框 78 3.2.2 圖片邊框 80 3.2.3 漸變 82 任務3-2 製作風景頁面 85 職業技能知識點考核7 91 3.3 盒陰影 91 3.3.1 盒子陰影 91 3.3.2 溢出處理 93 任務3-3 製作文明公約頁面 93 職業技能知識點考核8 96 項目4 媒體雜志類網頁設計 98 教學導航 98 項目描述 98 4.1 多列佈局 99 任務4-1 製作電子雜志頁面 100 4.2 簡單動畫 106 4.2.1 元素的變形 106 4.2.2 元素的旋轉 106 4.2.3 元素的縮放和翻轉 107 4.2.4 元素的移動 108 4.2.5 同時使用多個變形函數 109 4.2.6 定義變形原點 110 4.2.7 過渡效果 110 任務4-2 製作滑動的導航條 112 任務4-3 製作照片牆頁面 115 職業技能知識點考核9 121 4.3 音頻和視頻 122 4.3.1 插入音頻 122 4.3.2 插入視頻 123 任務4-4 製作音頻頁面 123 職業技能知識點考核10 125 項目5 響應式佈局網站設計 126 教學導航 126 項目描述 126 5.1 響應式網站首頁的製作 127 任務5-1 製作位置固定的導航條 127 任務5-2 製作響應式網頁主體部分 132 任務5-3 製作兩欄式網頁尾部 138 5.2 項目整合 144 職業技能知識點考核11 145 項目6 企業官網設計 146 教學導航 146 項目描述 146 任務6-1 創建項目 147 任務6-2 觀察效果圖 148 任務6-3 編寫初始化CSS樣式 149 任務6-4 編寫可復用的header 149 任務6-5 編寫可復用的footer 151 任務6-6 首頁引入已編寫好的header 155 任務6-7 首頁引入已編寫好的footer 156 任務6-8 編寫首頁banner部分 157 任務6-9 編寫首頁兒童精品課模塊 160 任務6-10 編寫首頁父母充電站模塊 163 任務6-11 編寫首頁剩餘部分 165 任務6-12 “關於我們”頁面引入公用部分 167 任務6-13 正式編寫“關於我們”頁面 167 任務6-14 “聯系我們”頁面前期準備 168 任務6-15 正式編寫“聯系我們”頁面 169 任務6-16 收尾工作 172 項目7 移動端推廣項目製作 174 教學導航 174 項目描述 174 7.1 大圖輪播雛形——Swiper的使用方法 176 7.2 大圖輪播的修飾 180 7.3 大圖輪播的個性化設計——API文檔的使用 181 7.4 真正的大“圖”輪播——用圖片替換文字 183 7.5 設置動畫——Swiper Animate的使用方法 184 任務7-1 移動端推廣項目準備工作 187 任務7-2 製作簡歷首頁 190 任務7-3 製作基本資料頁 193 任務7-4 製作榮譽頁 195 任務7-5 製作“我的技能”頁 197 任務7-6 製作“我的作品”頁 199 任務7-7 製作尾頁 199 7.6 代碼匯總 200 項目擴展 204 項目8 使用canvas製作飛機大戰游戲 205 教學導航 205 項目描述 205 8.1 canvas簡介 206 8.2 canvas元素知識 207 8.3 canvas繪圖基礎 208 8.4 canvas動畫基礎 213 8.5 動畫中的碰撞檢測 215 任務8-1 游戲功能分析 219 任務8-2 圖片預加載 220 任務8-3 繪制滾動背景圖 222 任務8-4 創建英雄機對象 224 任務8-5 繪制子彈 226 任務8-6 監聽鍵盤事件控制英雄機方向 232 任務8-7 繪制敵機 237 參考文獻 251