網(wǎng)頁設(shè)計與制作教案授課教師授課班級授課日期課題前端開發(fā)概念及技術(shù)計劃學(xué)時2教學(xué)目標(biāo)知識目標(biāo)了解Web的起源及相關(guān)概念。知道常見的前端開發(fā)技術(shù)。能力目標(biāo)確定Web各種概念的關(guān)聯(lián)。確定前端開發(fā)技術(shù)和后端開發(fā)技術(shù)之間的聯(lián)系與區(qū)別。素質(zhì)目標(biāo)通過了解Web的起源讓學(xué)生感受到信息時代技術(shù)的快速進(jìn)步，進(jìn)而培養(yǎng)良好的學(xué)習(xí)習(xí)慣。教學(xué)重點Web標(biāo)準(zhǔn)三劍客：HTML、CSS、JavaScript的基本概念和語法。HTML、CSS、JavaScript在網(wǎng)頁制作中的作用。教學(xué)難點HTML、CSS、JavaScript的基本概念和語法。后端開發(fā)技術(shù)的概念。教學(xué)模式及教學(xué)方法線上+線下混合教學(xué)模式講授法、小組討論法教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)課前導(dǎo)學(xué)1.在網(wǎng)上搜索前端開發(fā)的相關(guān)內(nèi)容，了解什么是萬維網(wǎng)。2.下載幾個喜歡的網(wǎng)頁，至少3個。3.完成課前測試題。課中踐學(xué)【情景導(dǎo)入】通過微課視頻進(jìn)行情景導(dǎo)入，引出本次課的學(xué)習(xí)任務(wù)?！卷椖繉嵤咳蝿?wù)1.1：前端開發(fā)相關(guān)概念一、知識儲備新知學(xué)習(xí)1：Web的起源1.萬維網(wǎng)（WorldWideWeb），簡稱Web，起源于1980年。2.Internet由Web和其他服務(wù)所組成。除了Web，Internet還包含以下服務(wù)。（1）E-mail：電子郵件。（2）FTP：FileTransferProtocol，文件傳輸協(xié)議。（3）Newsgroups：新聞組。（4）其他服務(wù)：遠(yuǎn)程登錄（Telnet）、論壇等。新知學(xué)習(xí)2：Web的相關(guān)概念1.網(wǎng)站（Website）是指在Internet上根據(jù)一定的規(guī)則，使用超文本標(biāo)記語言（HypetextMarkupLanguage，HTML）等工具制作的、用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。2.網(wǎng)頁是網(wǎng)站中的一個頁面，是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。3.Web是基于客戶機/服務(wù)器方式的信息發(fā)現(xiàn)技術(shù)和超文本技術(shù)的綜合。4.URL（UniformResourceLocator），即統(tǒng)一資源定位符，包括協(xié)議、域名、端口、路徑、攜帶的參數(shù)、哈希值等部分。5.HTTP是HypertextTransferProtocol（超文本傳輸協(xié)議）的縮寫，是一種應(yīng)用層協(xié)議，基于標(biāo)準(zhǔn)的客戶機/服務(wù)器模型。6.Web瀏覽器，簡稱瀏覽器，是用來檢索、展示以及傳遞Web信息資源的應(yīng)用程序。7.Web服務(wù)器一般指網(wǎng)站服務(wù)器。二、知識拓展Web的特點1.豐富的多媒體表現(xiàn)特性2.超鏈接和快速導(dǎo)航能力3.平臺獨立特性4.分布自治特性5.動態(tài)交互特性任務(wù)1.2前端開發(fā)技術(shù)一、知識儲備新知學(xué)習(xí)1：“Web標(biāo)準(zhǔn)三劍客”1．HTML2．CSS3．JavaScript新知學(xué)習(xí)2：前端框架技術(shù)1．jQuery框架2．Vue框架3．React框架4．Angular框架二、知識拓展后端開發(fā)技術(shù)1．PHP2．ASP3．JSP4．ASPNET前端開發(fā)學(xué)習(xí)的建議路線HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ASP.NET(或PHP)課后拓學(xué)1.完成任務(wù)1.1的課后練習(xí)。2.完成任務(wù)1.2的課后練習(xí)。3.掃碼觀看任務(wù)1.3和1.4中的微課視頻，預(yù)習(xí)新課。讓