下載本文檔
版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
PAGE1PAGE1PAGE2PAGE2
課題第32課創(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)：制作購(gòu)物車(chē)頁(yè)教學(xué)難點(diǎn)：制作登錄頁(yè)教學(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é)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)查看主頁(yè)的購(gòu)物車(chē)頁(yè)面和登錄頁(yè)面，分析其功能以及實(shí)現(xiàn)方法【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，讓學(xué)生提前分析購(gòu)物車(chē)頁(yè)面和登錄頁(yè)面的功能和實(shí)現(xiàn)方法，為課堂上學(xué)習(xí)相關(guān)知識(shí)點(diǎn)做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況實(shí)戰(zhàn)演練（33min）14.4制作購(gòu)物車(chē)頁(yè)面14.4.1頁(yè)面分析【教師】展示“購(gòu)物車(chē)頁(yè)面”，并提問(wèn)學(xué)生主頁(yè)共分為哪些模塊，每個(gè)模塊新的功能是什么購(gòu)物車(chē)頁(yè)在購(gòu)物網(wǎng)站中是必不可少的，通常需要使用js實(shí)現(xiàn)商品數(shù)量、價(jià)格等的計(jì)算。本網(wǎng)站購(gòu)物車(chē)頁(yè)的頁(yè)面效果如圖所示?！窘處煛看蜷_(kāi)項(xiàng)目展示“購(gòu)物車(chē)頁(yè)面”【學(xué)生】觀看效果、思考、舉手回答【教師】講解購(gòu)物車(chē)頁(yè)面模塊及功能本頁(yè)面可分為4部分，分別為頂部信息欄、頁(yè)眉、購(gòu)物車(chē)列表模塊和頁(yè)腳。其中，頂部信息欄、頁(yè)眉和頁(yè)腳都與主頁(yè)相同，購(gòu)物車(chē)列表模塊放置在<main>標(biāo)簽中。14.4.2制作頁(yè)面【教師】講解頁(yè)面模塊實(shí)現(xiàn)思路，演示步驟中較為容易出錯(cuò)的地方，之后讓學(xué)生動(dòng)手制作此部分,可以互相幫助或咨詢老師1．設(shè)置頁(yè)面頭部信息并制作與主頁(yè)相同的模塊步驟1打開(kāi)網(wǎng)站項(xiàng)目wjshop中的cart.html文件。步驟2在<head>標(biāo)簽中設(shè)置頁(yè)面頭部信息，具體可參考主頁(yè)頭部信息的代碼。同樣應(yīng)將主頁(yè)頭部信息中鏈接到樣式表文件index.css的代碼改為鏈接到cart.css文件的代碼，具體可參考以下代碼?！ㄔ斠?jiàn)教材）步驟3將index.html文件中的頂部信息欄模塊、頁(yè)眉與頁(yè)腳的代碼復(fù)制并粘貼到cart.html文件的<body>標(biāo)簽中。此時(shí)的頁(yè)面效果與全部商品頁(yè)初步效果（即圖14-19）大致相同?！ㄔ斠?jiàn)教材）2．制作購(gòu)物車(chē)列表模塊步驟1在<header>標(biāo)簽與<footer>標(biāo)簽之間添加<main>標(biāo)簽，并在其中輸入代碼，構(gòu)建購(gòu)物車(chē)列表模塊的結(jié)構(gòu)。…（詳見(jiàn)教材）步驟2在<body>標(biāo)簽之后輸入以下代碼，鏈接js文件?！ㄔ斠?jiàn)教材）步驟3在cart.css文件中設(shè)置商品列表模塊的樣式?！ㄔ斠?jiàn)教材）步驟4在cart.js文件中輸入以下代碼，制作購(gòu)物車(chē)模塊的交互效果?！ㄔ斠?jiàn)教材）、討論通過(guò)教師的講解，讓學(xué)生再動(dòng)手制作項(xiàng)目，使學(xué)生掌握購(gòu)物車(chē)頁(yè)面的制作方法課堂評(píng)價(jià)（10min）【教師】統(tǒng)一講解學(xué)生遇到的問(wèn)題，糾正學(xué)生的錯(cuò)誤【學(xué)生】通過(guò)講解學(xué)生出現(xiàn)的問(wèn)題，可以讓多數(shù)學(xué)生避免犯同樣的錯(cuò)誤第二節(jié)課實(shí)戰(zhàn)演練（35min）14.5制作登錄頁(yè)14.5.1頁(yè)面分析網(wǎng)站的登錄頁(yè)一般由幾個(gè)簡(jiǎn)單的模塊組成，重點(diǎn)實(shí)現(xiàn)登錄與注冊(cè)功能，它們通常可以通過(guò)js代碼實(shí)現(xiàn)兩個(gè)功能之間的切換。本頁(yè)面可分為3部分，分別為頁(yè)眉、登錄與注冊(cè)模塊和頁(yè)腳?！窘處煛空故緢D“全部商品頁(yè)的效果”，并提問(wèn)學(xué)生主頁(yè)共分為哪些模塊，每個(gè)模塊新的功能是什么14.3.1頁(yè)面分析全部商品頁(yè)用于展示網(wǎng)站提供的所有商品，便于用戶隨心所欲地進(jìn)行選購(gòu)。本網(wǎng)站全部商品頁(yè)的頁(yè)面效果如圖所示?！窘處煛看蜷_(kāi)項(xiàng)目展示“全部商品頁(yè)”【學(xué)生】觀看效果、思考、舉手回答【教師】講解商品頁(yè)模塊及功能本頁(yè)面可分為4部分，分別為頂部信息欄、頁(yè)眉、商品列表模塊和頁(yè)腳。其中，頂部信息欄與主頁(yè)相似，右側(cè)的登錄與注冊(cè)按鈕改為購(gòu)物車(chē)與用戶名按鈕；頁(yè)眉和頁(yè)腳都與主頁(yè)相同，商品列表模塊放置在<main>標(biāo)簽中。14.3.2制作頁(yè)面【教師】講解頁(yè)面模塊實(shí)現(xiàn)思路，演示步驟中較為容易出錯(cuò)的地方，之后讓學(xué)生動(dòng)手制作此部分,可以互相幫助或咨詢老師1．設(shè)置頁(yè)面頭部信息并制作與主頁(yè)相同的模塊步驟1打開(kāi)網(wǎng)站項(xiàng)目wjshop中的login.html文件。步驟2在<head>標(biāo)簽中設(shè)置頁(yè)面頭部信息，具體可參考主頁(yè)頭部信息的代碼。同樣應(yīng)將主頁(yè)頭部信息中鏈接到樣式表文件index.css的代碼改為鏈接到login.css文件的代碼，具體可參考以下代碼。步驟3將index.html文件中頁(yè)眉與頁(yè)腳的代碼復(fù)制并粘貼到list.html文件的<body>標(biāo)簽中。需要注意的是，應(yīng)刪除頁(yè)眉搜索框部分的代碼。2．制作登錄與注冊(cè)模塊步驟1在<header>標(biāo)簽與<footer>之間添加<main>標(biāo)簽，并在其中輸入代碼，構(gòu)建登錄與注冊(cè)模塊的結(jié)構(gòu)。步驟2在login.css文件中設(shè)置登錄與注冊(cè)模塊的樣式。此時(shí)頁(yè)面效果如圖所示。步驟3在<body>標(biāo)簽之后輸入以下代碼，制作登錄與注冊(cè)模塊的交互效果?！緦W(xué)生】通過(guò)教師引導(dǎo)學(xué)生制作登錄頁(yè)，引發(fā)學(xué)生主動(dòng)思考能力，動(dòng)手制作項(xiàng)目可培養(yǎng)學(xué)生的編程能力課堂評(píng)價(jià)（10min）【教師】統(tǒng)一講解學(xué)生遇到的問(wèn)題，糾正學(xué)生的錯(cuò)誤【學(xué)生】通過(guò)講解學(xué)生出現(xiàn)的問(wèn)題，可以讓多數(shù)學(xué)生避免犯同樣的錯(cuò)誤課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要講解了購(gòu)物網(wǎng)站的制作方法，通過(guò)本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）規(guī)劃和創(chuàng)建一個(gè)網(wǎng)站。
（2）設(shè)計(jì)并制作購(gòu)物網(wǎng)站的主頁(yè)。其中包括頁(yè)面頭部信息、頁(yè)面整體結(jié)構(gòu)、頂部信息欄、頁(yè)眉、Banner、購(gòu)物導(dǎo)覽模塊、熱銷(xiāo)榜單模塊、公司頭條模塊、頁(yè)腳。（3）設(shè)計(jì)并制作全部商品頁(yè)。其中包括頁(yè)面頭部信息、商品列表模塊。（4）【學(xué)生】總結(jié)回顧知
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(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私人住宅裝修施工安全責(zé)任具體合同版B版
- 2024年04月海南民生銀行?？诜中猩鐣?huì)招考（48）筆試歷年參考題庫(kù)附帶答案詳解
- 2025年度現(xiàn)代物流中心廠房轉(zhuǎn)讓居間合同范本4篇
- 二零二五年度電子產(chǎn)品市場(chǎng)代理銷(xiāo)售返利合同模板3篇
- 2024版新能源汽車(chē)租賃及銷(xiāo)售合同
- 專(zhuān)項(xiàng)污水泵裝置施工協(xié)議2024版版B版
- 專(zhuān)用檢測(cè)代理協(xié)議2024年版版A版
- 中介居間服務(wù)合同(2024版)
- 2024版建筑工程泥工勞務(wù)分包合同
- 阿拉善2025年內(nèi)蒙古中共額濟(jì)納旗委員會(huì)黨校引進(jìn)急需緊缺專(zhuān)職教師8人筆試歷年參考題庫(kù)附帶答案詳解
- GB/T 6913-2008鍋爐用水和冷卻水分析方法磷酸鹽的測(cè)定
- GB/T 18717.2-2002用于機(jī)械安全的人類(lèi)工效學(xué)設(shè)計(jì)第2部分：人體局部進(jìn)入機(jī)械的開(kāi)口尺寸確定原則
- 教案：第三章 公共管理職能（《公共管理學(xué)》課程）
- 中國(guó)文化概論（第三版）全套課件
- 117-鋼結(jié)構(gòu)工程質(zhì)量常見(jiàn)問(wèn)題與管控措施
- SHS5230三星指紋鎖中文說(shuō)明書(shū)
- 諾和關(guān)懷俱樂(lè)部對(duì)外介紹
- 保定市縣級(jí)地圖PPT可編輯矢量行政區(qū)劃(河北省)
- 新蘇教版科學(xué)六年級(jí)下冊(cè)全冊(cè)教案(含反思)
- 供方注冊(cè)指南-ZTE
- 真心英雄合唱歌詞
評(píng)論
0/150
提交評(píng)論