下載本文檔
版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
PAGE1PAGE1PAGE2PAGE2
課題第31課創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：熟悉Web前端技術(shù)的應(yīng)用素質(zhì)目標(biāo)：鍛煉實(shí)踐能力，提升工作競(jìng)爭(zhēng)力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：制作全部商品頁教學(xué)難點(diǎn)：制作主頁模塊教學(xué)方法討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→實(shí)戰(zhàn)演練（33min）→課堂評(píng)價(jià)（10min）第2節(jié)課：實(shí)戰(zhàn)演練（35min）→課堂評(píng)價(jià)（10min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)了解主頁的作購物導(dǎo)覽、熱銷榜單、公司頭條、頁腳等模塊【學(xué)生】完成課前任務(wù)通過課前任務(wù)，讓學(xué)生提前了解主頁的作購物導(dǎo)覽、熱銷榜單、公司頭條、頁腳等模塊，為課堂上學(xué)習(xí)相關(guān)知識(shí)點(diǎn)做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況實(shí)戰(zhàn)演練（33min）14.2制作主頁14.2.2制作頁面【教師】講解模塊實(shí)現(xiàn)思路，演示步驟中較為容易出錯(cuò)的地方，之后讓學(xué)生動(dòng)手制作此部分,可以互相幫助或咨詢老師6.制作購物導(dǎo)覽模塊步驟1在<divclass="purchase-nav"></div>標(biāo)簽中輸入代碼，構(gòu)建購物導(dǎo)覽模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置購物導(dǎo)覽模塊的樣式，具體可參考以下代碼。…（詳見教材）7．制作熱銷榜單模塊步驟1在<divclass="hot-sale"></div>標(biāo)簽中輸入代碼，構(gòu)建熱銷榜單模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置熱銷榜單模塊的樣式，具體可參考以下代碼?！ㄔ斠娊滩模?．制作公司頭條模塊步驟1在<main>標(biāo)簽中的最后一個(gè)<div>標(biāo)簽中輸入代碼，構(gòu)建公司頭條模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置公司頭條模塊的樣式，具體可參考以下代碼?！ㄔ斠娊滩模?．制作頁腳步驟1在<footerclass="footer"></footer>標(biāo)簽中輸入代碼，構(gòu)建頁腳的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在common.css文件中設(shè)置頁腳的樣式，具體可參考以下代碼。…（詳見教材）、討論通過教師的講解，讓學(xué)生再動(dòng)手制作項(xiàng)目，使學(xué)生掌握購物導(dǎo)覽、熱銷榜單、公司頭條、頁腳等模塊的制作方法課堂評(píng)價(jià)（10min）【教師】統(tǒng)一講解學(xué)生遇到的問題，糾正學(xué)生的錯(cuò)誤【學(xué)生】通過講解學(xué)生出現(xiàn)的問題，可以讓多數(shù)學(xué)生避免犯同樣的錯(cuò)誤第二節(jié)課實(shí)戰(zhàn)演練（35min）14.3制作全部商品頁【教師】展示圖“全部商品頁的效果”，并提問學(xué)生主頁共分為哪些模塊，每個(gè)模塊新的功能是什么14.3.1頁面分析全部商品頁用于展示網(wǎng)站提供的所有商品，便于用戶隨心所欲地進(jìn)行選購。本網(wǎng)站全部商品頁的頁面效果如圖所示?！窘處煛看蜷_項(xiàng)目展示“全部商品頁”【學(xué)生】觀看效果、思考、舉手回答【教師】講解商品頁模塊及功能本頁面可分為4部分，分別為頂部信息欄、頁眉、商品列表模塊和頁腳。其中，頂部信息欄與主頁相似，右側(cè)的登錄與注冊(cè)按鈕改為購物車與用戶名按鈕；頁眉和頁腳都與主頁相同，商品列表模塊放置在<main>標(biāo)簽中。14.3.2制作頁面【教師】講解頁面模塊實(shí)現(xiàn)思路，演示步驟中較為容易出錯(cuò)的地方，之后讓學(xué)生動(dòng)手制作此部分,可以互相幫助或咨詢老師1．設(shè)置頁面頭部信息并制作與主頁相同的模塊步驟1打開網(wǎng)站項(xiàng)目wjshop中的list.html文件。步驟2在<head>標(biāo)簽中設(shè)置頁面頭部信息，具體可參考主頁頭部信息的代碼。需要注意的是，最后一個(gè)鏈接樣式表文件的代碼有所不同。…（詳見教材）步驟3將index.html文件中頁眉與頁腳的代碼復(fù)制并粘貼到list.html文件的<body>標(biāo)簽中?！ㄔ斠娊滩模┎襟E4在<header>標(biāo)簽之前輸入代碼，構(gòu)建頂部信息欄的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E5在common.css文件中設(shè)置頂部信息欄右側(cè)按鈕的樣式，具體可參考以下代碼?！ㄔ斠娊滩模?．制作商品列表模塊步驟1在<header>標(biāo)簽與<footer>標(biāo)簽之間添加<main>標(biāo)簽，并在其中構(gòu)建商品列表模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在list.css文件中設(shè)置商品列表模塊的樣式，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E3在<body>標(biāo)簽之后輸入以下代碼，制作商品列表模塊左側(cè)分類導(dǎo)航及右側(cè)排序選項(xiàng)按鈕的交互效果。…（詳見教材）【學(xué)生】通過教師引導(dǎo)學(xué)生制作全部商品頁，引發(fā)學(xué)生主動(dòng)思考能力，動(dòng)手制作項(xiàng)目可培養(yǎng)學(xué)生的編程能力課堂評(píng)價(jià)（10min）【教師】統(tǒng)一講解學(xué)生遇到的問題，糾正學(xué)生的錯(cuò)誤【學(xué)生】通過講解學(xué)生出現(xiàn)的問題，可以讓多數(shù)學(xué)生避免犯同樣的錯(cuò)誤教學(xué)反思本次課主要讓學(xué)生動(dòng)手制作了WJ自制女裝品牌店主頁的部分模塊以及全部商品頁，相比上次課，學(xué)生的制作
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年高速公路服務(wù)區(qū)停車場(chǎng)承包經(jīng)營(yíng)協(xié)議3篇
- 2025年度奧迪Q3L插電混動(dòng)版購車與充電樁安裝合同2篇
- 2024版水管勞務(wù)合同范本
- 二零二五年度影視制作公司實(shí)習(xí)生實(shí)習(xí)合同書3篇
- 農(nóng)村土地承包經(jīng)營(yíng)權(quán)流轉(zhuǎn)安全協(xié)議書
- 電子競(jìng)技比賽贊助合同
- 電影制作行業(yè)演員保險(xiǎn)免責(zé)協(xié)議書
- 農(nóng)業(yè)種植行業(yè)農(nóng)產(chǎn)品銷售質(zhì)量保障協(xié)議
- 2024年大數(shù)據(jù)處理與分析合作合同
- 專業(yè)技術(shù)培訓(xùn)服務(wù)提供免責(zé)協(xié)議書
- 班組長(zhǎng)培訓(xùn)之品質(zhì)意識(shí)培訓(xùn)
- 道德經(jīng)中德文對(duì)照版
- 公路工程隨機(jī)抽樣一覽表(路基路面現(xiàn)場(chǎng)測(cè)試隨機(jī)選點(diǎn)方法自動(dòng)計(jì)算)
- 2021版中醫(yī)癥候醫(yī)保對(duì)應(yīng)中醫(yī)癥候醫(yī)保2
- 2023年山東省青島市中考化學(xué)試題（含答案解析）
- 商業(yè)計(jì)劃書（BP）產(chǎn)品與服務(wù)的撰寫秘籍
- 安徽華塑股份有限公司年產(chǎn) 4萬噸氯化石蠟項(xiàng)目環(huán)境影響報(bào)告書
- 世界奧林匹克數(shù)學(xué)競(jìng)賽6年級(jí)試題
- 藥用植物學(xué)-課件
- 文化差異與跨文化交際課件(完整版)
- 國(guó)貨彩瞳美妝化消費(fèi)趨勢(shì)洞察報(bào)告
評(píng)論
0/150
提交評(píng)論