網(wǎng)頁設(shè)計與制作全能一本通 教學(xué)大綱

PAGEPAGE6《網(wǎng)頁設(shè)計與制作全能一本通HTML5+CSS3+JavaScript（微課版）》教學(xué)大綱課程介紹：HTML5是HTML的最新版本，HTML5應(yīng)用開發(fā)生態(tài)和CSS3與JavaScript緊密結(jié)合，是目前最流行的應(yīng)用開發(fā)技術(shù)之一。學(xué)習(xí)HTML5、CSS3和JavaScript開發(fā)后，不僅可以開發(fā)出能在多種設(shè)備上運(yùn)行的程序，還可以實(shí)現(xiàn)媲美原生應(yīng)用的能力。同時HTML5應(yīng)用開發(fā)技術(shù)簡潔直觀，容易上手，適合初學(xué)者學(xué)習(xí)。本書內(nèi)容分為三大部分，第一部分講解技術(shù)的基礎(chǔ)，第二部分講解高級應(yīng)用技巧，第三部分則根據(jù)實(shí)戰(zhàn)項目引導(dǎo)學(xué)生掌握實(shí)際的HTML5網(wǎng)頁設(shè)計和開發(fā)技能。培訓(xùn)目標(biāo)：認(rèn)識HTML5——網(wǎng)頁用戶界面的載體學(xué)習(xí)HTML5的標(biāo)簽——網(wǎng)頁的基本元素學(xué)習(xí)和認(rèn)識CSS3——網(wǎng)頁格式控制學(xué)習(xí)和認(rèn)識JavaScript——網(wǎng)頁瀏覽器端程序開發(fā)掌握HTML5應(yīng)用開發(fā)工具——高效應(yīng)用開發(fā)學(xué)習(xí)和認(rèn)識node.js——現(xiàn)代化前端開發(fā)的基礎(chǔ)學(xué)習(xí)和認(rèn)識前端開發(fā)框架——借助框架快速開發(fā)高質(zhì)量應(yīng)用學(xué)習(xí)頁面加載原理——資源加載管理學(xué)習(xí)JavaScript事件模型——動態(tài)與交互學(xué)習(xí)時間：60學(xué)時。培訓(xùn)內(nèi)容：項目一、HTML5基礎(chǔ)——HTML5簡介了解HTML5的歷史和發(fā)展。掌握HTML5的基本概念。了解HTML5，CSS3和JavaScript的關(guān)系項目二、熟悉開發(fā)與運(yùn)行環(huán)境——學(xué)習(xí)VisualStudioCode、常用瀏覽器，了解Dreamweaver了解VisualStduioCode軟件的操作界面。掌握在瀏覽器中打開HTML5文件的方法。掌握通過HTTP服務(wù)器打開HTML5文件的方法。了解包括Dreamwaver等多種網(wǎng)頁開發(fā)工具的優(yōu)缺點(diǎn)。安裝和使用瀏覽器。通過HTTP服務(wù)器訪問HTML文檔任務(wù)1.1創(chuàng)建第一個HTML5頁面了解HTML文檔的基本格式。了解HTML中幾個常用的標(biāo)簽。用瀏覽器打開本地HTML文檔。在瀏覽器查看HTML文檔源碼。任務(wù)1.2使用HTML5創(chuàng)建個人簡歷使用HTML5標(biāo)簽創(chuàng)建章節(jié)和段落使用HTML5完成簡單的排版任務(wù)1.3使用代碼托管平臺發(fā)布HTML5頁面到互聯(lián)網(wǎng)創(chuàng)建本地代碼倉庫注冊代碼托管平臺賬戶推送代碼到遠(yuǎn)端倉庫開通靜態(tài)頁面托管服務(wù)項目二、學(xué)習(xí)HTML5的標(biāo)簽——網(wǎng)頁的基本元素HTML5文檔由相互嵌套的HTML元素定義。一個HTML元素由一個開始標(biāo)簽和一個結(jié)束標(biāo)簽構(gòu)成，開始標(biāo)簽和結(jié)束標(biāo)簽被稱為HTML標(biāo)簽，也被稱為HTML標(biāo)記標(biāo)簽。為了更好的構(gòu)建互聯(lián)網(wǎng)應(yīng)用，HTML5新增了結(jié)構(gòu)標(biāo)簽、多媒體標(biāo)簽等新的標(biāo)簽類型。任務(wù)2.1制作HTML5相冊創(chuàng)建頁面基本布局使用多媒體標(biāo)簽顯示圖片控制圖片大小使用錨標(biāo)簽實(shí)現(xiàn)點(diǎn)擊查看原圖功能項目三、HTML5中的對象——HTML5與JavaScript間的橋梁HTML5文檔由標(biāo)簽的嵌套組合而成。瀏覽器解析HTML5文檔以后，除了生成可視的界面與用戶交互，還會生成被稱為文檔對象模型（DOM）的對象系統(tǒng)方便HTML文檔與程序設(shè)計語言的交互。任務(wù)3.1開發(fā)顯示瀏覽器信息的HTML5程序通過JavaScript代碼獲取瀏覽器信息通過JavaScript代碼在頁面上顯示內(nèi)容任務(wù)3.2HTML5小游戲2048：自動適應(yīng)屏幕大小適應(yīng)屏幕大小問題的介紹2048游戲介紹通過JavaScript獲取屏幕大小并判斷屏幕比例窗口大小與頁面布局任務(wù)3.3HTML5小游戲2048：繪制方格學(xué)習(xí)使用SVG標(biāo)簽使用SVG標(biāo)簽繪制圖形獲取URL中的參數(shù)項目四、學(xué)習(xí)和掌握J(rèn)avaScript基礎(chǔ)——網(wǎng)頁中的程序設(shè)計語言JavaScript是一種計算機(jī)程序設(shè)計語言，與標(biāo)記語言不同，程序設(shè)計語言通常用來描述算法邏輯。如在HTML5開發(fā)中，通常使用JavaScript描述用戶的輸入應(yīng)該如何被處理。例如，前一章的2048小游戲，需要規(guī)定如用戶在屏幕滑動時，程序該怎樣計算出方格合并后的結(jié)果，怎樣更新屏幕上方格中的數(shù)字。任務(wù)4.1開發(fā)HTML5計算器計算機(jī)功能設(shè)計與界面布局按鈕事件的處理實(shí)現(xiàn)計算功能任務(wù)4.22048小游戲?qū)崿F(xiàn)邏輯在方格內(nèi)繪制數(shù)字在空白格子隨機(jī)放置數(shù)字合并數(shù)字的操作處理用戶輸入項目五、學(xué)習(xí)和掌握CSS3——樣式、布局與動態(tài)效果CSS是層疊樣式表，用于渲染網(wǎng)頁、展示制定的樣式，例如，為文字設(shè)置大小、顏色、字體等，還可以為文本改變布局，甚至可以設(shè)計一些動態(tài)效果，來提高網(wǎng)頁的可閱讀性。任務(wù)5.1使用CSS3制作動態(tài)導(dǎo)航菜單靜態(tài)菜單框架使用CSS3美化菜單使用CSS3給菜單添加動態(tài)效果任務(wù)5.2制作獅立地板網(wǎng)頁1.通過對任務(wù)的引入和設(shè)計理念的講解，使讀者掌握制作獅立地板網(wǎng)頁的設(shè)計思路。2.通過對任務(wù)知識的講解，熟練掌握軟件中相關(guān)工具的使用方法。3.通過具體的任務(wù)實(shí)施，掌握制作獅立地板網(wǎng)頁的方法和技巧。項目六、HTML5頁面加載——深入了解HTML5頁面加載原理頁面加載是瀏覽器解析HTML5文件，構(gòu)建DOM樹，計算元素位置，獲取需要的資源，最終渲染顯示的過程。HTML5文檔是文本文件，但可以引用多種資源，頁面加載的過程除了解析和計算，還需要獲取所需要的資源。本章將繼續(xù)深入瀏覽器加載HTML5頁面的細(xì)節(jié)。任務(wù)6.1動態(tài)加載的HTML5相冊使用JavaScript動態(tài)生成IMG標(biāo)簽實(shí)現(xiàn)動態(tài)顯示圖片點(diǎn)擊出發(fā)圖片加載項目七、JavaScript高級應(yīng)用——“現(xiàn)代化”前端開發(fā)從Node.js——一個HTML5之外的JavaScript運(yùn)行環(huán)境講起。Node.js是一個用來執(zhí)行JavaScript的軟件，Node.js的出現(xiàn)和發(fā)展促進(jìn)JavaScript從瀏覽器環(huán)境逐漸走向服務(wù)器程序、桌面應(yīng)用甚至物聯(lián)網(wǎng)等嵌入式設(shè)備程序開發(fā)。任務(wù)7.1生成二維碼的HTML5應(yīng)用創(chuàng)建npm包并安裝webpack安裝和使用qrcode包使用qrcode包生成二維碼發(fā)布HTML5應(yīng)用任務(wù)7.2制作足球運(yùn)動網(wǎng)頁1.通過對任務(wù)的引入和設(shè)計理念的講解，使讀者掌握制作足球運(yùn)動網(wǎng)頁的設(shè)計思路。2.通過對任務(wù)知識的講解，熟練掌握軟件中相關(guān)工具的使用方法。3.通過具體的任務(wù)實(shí)施，掌握制作足球運(yùn)動網(wǎng)頁的方法和技巧。項目八、使用前端框架——提高開發(fā)效率框架是用來提高開發(fā)效率的工具，一個框架通常包含預(yù)先定義好的通用代碼，開發(fā)應(yīng)用時，可引入框架中的代碼作為基礎(chǔ)?？蚣芤渤x一些開發(fā)規(guī)范，使用框架開發(fā)需要遵循特定規(guī)范。任務(wù)8.1HTML5英漢詞典準(zhǔn)備詞典數(shù)據(jù)通過包管理器創(chuàng)建項目在HTML5應(yīng)用獲取詞典數(shù)據(jù)實(shí)現(xiàn)查詞邏輯通過中文查詢英文單詞英文單詞的模糊匹配項目九、綜合實(shí)訓(xùn)——HTML5掃雷游戲本章將使用HTML5開發(fā)掃雷游戲，掃雷游戲曾是Windows操作系統(tǒng)自帶的游戲之一，操作簡單，可玩性高，風(fēng)靡一時。本章主要涉及到的知識點(diǎn)有：使用SVG繪制游戲界面使用事件托管使用class組織代碼支持觸摸事件任務(wù)9.1掃雷游戲的設(shè)計游戲規(guī)則和游戲玩法游戲界面繪制任務(wù)9.2掃雷游戲開發(fā)表示和保存游戲狀態(tài)計算提示數(shù)字處理用戶操作判斷過關(guān)條件任務(wù)9.3使用class組織代碼學(xué)習(xí)JavaScript中的面向?qū)ο髢?yōu)化：確保第一次操作不會觸雷項目十、綜合實(shí)訓(xùn)——開發(fā)通過二維碼傳輸文件的應(yīng)用項目七實(shí)現(xiàn)了把用戶輸入的文字轉(zhuǎn)換成二維碼的簡單應(yīng)用。那里使用的二維碼是名為QRCode（QuickResponseCode），是最常見的二維碼之一。很多應(yīng)用都可以通過掃描二維碼獲取信息。事實(shí)上借助二維碼，不僅可以傳輸文字信息，還可以傳輸包括圖片，音頻在內(nèi)的任何文件，但對于較大文件需要采用特殊處理，例如本章將開發(fā)一種把大文件轉(zhuǎn)換成多個二維碼并通過屏幕傳輸?shù)募夹g(shù)。本章主要涉及到的知識點(diǎn)有：使用QRCode編碼信息開發(fā)可以掃描QRCode的應(yīng)用開發(fā)可以讀取文件的HTML5應(yīng)用使用HTML5應(yīng)用處理文件使用HTML5通過二進(jìn)制數(shù)據(jù)生成和下載文件任