網(wǎng)頁(yè)設(shè)計(jì)與制作教案授課教師授課班級(jí)授課日期課題制作“助農(nóng)樂購(gòu)”網(wǎng)站商品頁(yè)面計(jì)劃學(xué)時(shí)6教學(xué)目標(biāo)知識(shí)目標(biāo)了解表單的概念，能說(shuō)出其作用。知道表單控件元素的類型并能夠區(qū)分。理解CSS進(jìn)階選擇器的用途。能力目標(biāo)掌握表單及其控件元素的使用方法。掌握CSS進(jìn)階選擇器的使用方法。素質(zhì)目標(biāo)通過(guò)“助農(nóng)樂購(gòu)”網(wǎng)頁(yè)內(nèi)容的制作，讓學(xué)生樹立推動(dòng)農(nóng)村經(jīng)濟(jì)發(fā)展，助力鄉(xiāng)村振興的意識(shí)，培養(yǎng)學(xué)生的社會(huì)責(zé)任感。通過(guò)規(guī)范編碼習(xí)慣，培養(yǎng)學(xué)生精益求精的工匠精神，提升職業(yè)素養(yǎng)。教學(xué)重點(diǎn)表單及其控件元素的編碼規(guī)則及設(shè)置方法CSS進(jìn)階選擇器的編碼規(guī)則及設(shè)置方法教學(xué)難點(diǎn)根據(jù)實(shí)際需求，合理應(yīng)用表單控件元素根據(jù)實(shí)際需求，合理選擇CSS進(jìn)階選擇器的類型教學(xué)模式及教學(xué)方法理實(shí)一體化、線上+線下混合教學(xué)模式項(xiàng)目教學(xué)法、任務(wù)驅(qū)動(dòng)法、講授法。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)課前導(dǎo)學(xué)1.觀看學(xué)習(xí)平臺(tái)相關(guān)微課視頻。2.讓學(xué)生搜集不同網(wǎng)站的注冊(cè)表，至少3個(gè)。3.完成課前測(cè)試題。課中踐學(xué)【情景導(dǎo)入】通過(guò)微課視頻進(jìn)行情景導(dǎo)入，引出“助農(nóng)樂購(gòu)”電商網(wǎng)站的開發(fā)項(xiàng)目，讓學(xué)生明確學(xué)習(xí)任務(wù)。【項(xiàng)目實(shí)施】任務(wù)4.1：創(chuàng)建“助農(nóng)樂購(gòu)”網(wǎng)站項(xiàng)目一、任務(wù)分析根據(jù)網(wǎng)站開發(fā)需求以及UI設(shè)計(jì)師提供的素材，創(chuàng)建網(wǎng)站項(xiàng)目，項(xiàng)目信息如下表所示：“助農(nóng)樂購(gòu)”網(wǎng)站項(xiàng)目信息一覽表項(xiàng)目名稱助農(nóng)樂購(gòu)項(xiàng)目頁(yè)面主頁(yè)（index.html）、注冊(cè)頁(yè)（reg.html）、商品頁(yè)（goods.html）資源目錄樣式表目錄（css）、圖片目錄（img）二、操作實(shí)施1.新建網(wǎng)站項(xiàng)目在開發(fā)軟件HBuilderX中新建“助農(nóng)樂購(gòu)”網(wǎng)站項(xiàng)目，具體步驟如下：打開開發(fā)軟件HBuilderX，選擇“文件”菜單中的“新建”→“項(xiàng)目”命令。在“選擇模板”界面中選擇“基本HTML項(xiàng)目”，填寫項(xiàng)目名稱“助農(nóng)樂購(gòu)”，瀏覽選擇目錄存儲(chǔ)的路徑位置。2.網(wǎng)站資源管理根據(jù)網(wǎng)站資源需求新建目錄和文件，在模板基礎(chǔ)上，在“助農(nóng)樂購(gòu)”根目錄上點(diǎn)擊右鍵，選擇“新建”→“html文件”，建立reg.html、goods.html文件，并將素材文件夾中的圖片資源整理拷貝到img目錄內(nèi)由于本項(xiàng)目是綜合電商類網(wǎng)頁(yè)的開發(fā)，網(wǎng)頁(yè)的CSS樣式代碼量會(huì)比較大，所以本項(xiàng)目的CSS樣式均采用外部引入的方式，后續(xù)新建.css文件時(shí)需將其都整理到CSS目錄內(nèi)。任務(wù)4.2制作“助農(nóng)樂購(gòu)”網(wǎng)站注冊(cè)頁(yè)面一、任務(wù)分析小丁先制作“助農(nóng)樂購(gòu)”網(wǎng)站注冊(cè)頁(yè)面，根據(jù)頁(yè)面的設(shè)計(jì)需求和最終效果圖，分析頁(yè)面的框架結(jié)構(gòu)，主要包括頭部區(qū)、主體區(qū)、腳部區(qū)3個(gè)部分，得到框架結(jié)構(gòu)圖及主要設(shè)置參數(shù)。三個(gè)部分主要內(nèi)容如下：1.頭部區(qū)包括網(wǎng)站logo圖片、歡迎詞、5個(gè)超鏈接。2.主體區(qū)包括一個(gè)注冊(cè)表單。3.腳部區(qū)分上下兩個(gè)區(qū)域，上面友情鏈接區(qū)域包括2個(gè)鏈接圖片和6個(gè)鏈接列表，下面版權(quán)信息區(qū)域包括一段版權(quán)聲明文字。二、知識(shí)儲(chǔ)備根據(jù)任務(wù)分析，在之前掌握知識(shí)的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識(shí)點(diǎn)有表單、選擇器進(jìn)階。新知學(xué)習(xí)1：表單提出問題：表單在網(wǎng)頁(yè)中的作用？（學(xué)生分組討論回答，然后教師進(jìn)行講解。）1.表單元素form（1）講解表單元素的作用以及form元素的基本語(yǔ)法格式；（2）講解<form>標(biāo)簽的常用屬性：action、method、name。2.表單控件講解表單控件及其屬性：輸入元素input、標(biāo)注元素label、多行文本元素textarea、下拉列表元素select、按鈕元素button。新知學(xué)習(xí)2:CSS選擇器進(jìn)階復(fù)習(xí)上個(gè)項(xiàng)目CSS選擇器的相關(guān)知識(shí)，引出CSS選擇器的進(jìn)階知識(shí)學(xué)習(xí)任務(wù)。1.講解屬性選擇器的作用及設(shè)置方法2.講解后代選擇器的作用及設(shè)置方法3.講解子選擇器的作用及設(shè)置方法通過(guò)例題讓學(xué)生鞏固練習(xí)其編碼規(guī)則。三、操作實(shí)施任務(wù)實(shí)踐4.2.1：搭建頁(yè)面基礎(chǔ)任務(wù)實(shí)踐4.2.2：制作頁(yè)面頭部區(qū)任務(wù)實(shí)踐4.2.3：制作頁(yè)面主體區(qū)任務(wù)實(shí)踐4.2.4：制作頁(yè)面腳部區(qū)學(xué)生在知識(shí)學(xué)習(xí)的基礎(chǔ)上，對(duì)照任務(wù)分析，進(jìn)行操作實(shí)踐，完成“助農(nóng)樂購(gòu)”網(wǎng)站注冊(cè)頁(yè)面的制作。（學(xué)生動(dòng)手操作，教師巡回指導(dǎo)，對(duì)共性問題進(jìn)行講解，對(duì)個(gè)性問題進(jìn)行答疑。）四、任務(wù)拓展布置拓展任務(wù)：利用所學(xué)，根據(jù)以上注冊(cè)頁(yè)面的效果，設(shè)計(jì)制作一個(gè)登錄頁(yè)面。（學(xué)生可在完成基本任務(wù)的前提下，完成拓展任務(wù)。）備注：如果是項(xiàng)目最后一個(gè)教案，記得加上“項(xiàng)目小結(jié)”和“項(xiàng)目延伸”的內(nèi)容，PPT課件同。分別放在如下位置：【項(xiàng)目小結(jié)】課后拓學(xué)1.完成任務(wù)4.2的課后練習(xí)。2.掃碼觀看任務(wù)4.3中的微課視頻，預(yù)習(xí)新課。3.完成項(xiàng)目延伸任務(wù)，將結(jié)果文件上傳至教學(xué)平臺(tái)。通過(guò)學(xué)習(xí)平臺(tái)學(xué)習(xí)相關(guān)內(nèi)容，讓學(xué)生養(yǎng)成自主學(xué)習(xí)的習(xí)慣。通過(guò)“助農(nóng)樂購(gòu)”網(wǎng)頁(yè)內(nèi)容的制作，讓學(xué)生樹立推動(dòng)農(nóng)村經(jīng)濟(jì)發(fā)展，助力鄉(xiāng)村振興的意識(shí)，培養(yǎng)學(xué)生的社會(huì)責(zé)任感。通過(guò)項(xiàng)目式的教學(xué)內(nèi)容的，培養(yǎng)學(xué)生的整體思維和工程思維。通過(guò)任務(wù)分析，鍛煉學(xué)生分析問題的能力，以及用數(shù)字