《web前端技術(shù)》(趙敏)003-0教案 第31課 創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）_第1頁
《web前端技術(shù)》(趙敏)003-0教案 第31課 創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）_第2頁
《web前端技術(shù)》(趙敏)003-0教案 第31課 創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）_第3頁
《web前端技術(shù)》(趙敏)003-0教案 第31課 創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）_第4頁
全文預覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

PAGE1PAGE1PAGE2PAGE2

課題第31課創(chuàng)建WJ自制女裝品牌店網(wǎng)站（中）課時2課時（90min）教學目標知識技能目標：熟悉Web前端技術(shù)的應用素質(zhì)目標：鍛煉實踐能力，提升工作競爭力教學重難點教學重點：制作全部商品頁教學難點：制作主頁模塊教學方法討論法、講授法、實踐練習法、演示法教學用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學設(shè)計第1節(jié)課：→→實戰(zhàn)演練（33min）→課堂評價（10min）第2節(jié)課：實戰(zhàn)演練（35min）→課堂評價（10min）教學過程主要教學內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP或其他學習軟件，完成課前任務(wù)了解主頁的作購物導覽、熱銷榜單、公司頭條、頁腳等模塊【學生】完成課前任務(wù)通過課前任務(wù)，讓學生提前了解主頁的作購物導覽、熱銷榜單、公司頭條、頁腳等模塊，為課堂上學習相關(guān)知識點做準備考勤（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況實戰(zhàn)演練（33min）14.2制作主頁14.2.2制作頁面【教師】講解模塊實現(xiàn)思路，演示步驟中較為容易出錯的地方，之后讓學生動手制作此部分,可以互相幫助或咨詢老師6.制作購物導覽模塊步驟1在<divclass="purchase-nav"></div>標簽中輸入代碼，構(gòu)建購物導覽模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置購物導覽模塊的樣式，具體可參考以下代碼。…（詳見教材）7．制作熱銷榜單模塊步驟1在<divclass="hot-sale"></div>標簽中輸入代碼，構(gòu)建熱銷榜單模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置熱銷榜單模塊的樣式，具體可參考以下代碼?！ㄔ斠娊滩模?．制作公司頭條模塊步驟1在<main>標簽中的最后一個<div>標簽中輸入代碼，構(gòu)建公司頭條模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在index.css文件中設(shè)置公司頭條模塊的樣式，具體可參考以下代碼。…（詳見教材）9．制作頁腳步驟1在<footerclass="footer"></footer>標簽中輸入代碼，構(gòu)建頁腳的結(jié)構(gòu)，具體可參考以下代碼。…（詳見教材）步驟2在common.css文件中設(shè)置頁腳的樣式，具體可參考以下代碼?！ㄔ斠娊滩模⒂懻撏ㄟ^教師的講解，讓學生再動手制作項目，使學生掌握購物導覽、熱銷榜單、公司頭條、頁腳等模塊的制作方法課堂評價（10min）【教師】統(tǒng)一講解學生遇到的問題，糾正學生的錯誤【學生】通過講解學生出現(xiàn)的問題，可以讓多數(shù)學生避免犯同樣的錯誤第二節(jié)課實戰(zhàn)演練（35min）14.3制作全部商品頁【教師】展示圖“全部商品頁的效果”，并提問學生主頁共分為哪些模塊，每個模塊新的功能是什么14.3.1頁面分析全部商品頁用于展示網(wǎng)站提供的所有商品，便于用戶隨心所欲地進行選購。本網(wǎng)站全部商品頁的頁面效果如圖所示?！窘處煛看蜷_項目展示“全部商品頁”【學生】觀看效果、思考、舉手回答【教師】講解商品頁模塊及功能本頁面可分為4部分，分別為頂部信息欄、頁眉、商品列表模塊和頁腳。其中，頂部信息欄與主頁相似，右側(cè)的登錄與注冊按鈕改為購物車與用戶名按鈕；頁眉和頁腳都與主頁相同，商品列表模塊放置在<main>標簽中。14.3.2制作頁面【教師】講解頁面模塊實現(xiàn)思路，演示步驟中較為容易出錯的地方，之后讓學生動手制作此部分,可以互相幫助或咨詢老師1．設(shè)置頁面頭部信息并制作與主頁相同的模塊步驟1打開網(wǎng)站項目wjshop中的list.html文件。步驟2在<head>標簽中設(shè)置頁面頭部信息，具體可參考主頁頭部信息的代碼。需要注意的是，最后一個鏈接樣式表文件的代碼有所不同?！ㄔ斠娊滩模┎襟E3將index.html文件中頁眉與頁腳的代碼復制并粘貼到list.html文件的<body>標簽中?！ㄔ斠娊滩模┎襟E4在<header>標簽之前輸入代碼，構(gòu)建頂部信息欄的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E5在common.css文件中設(shè)置頂部信息欄右側(cè)按鈕的樣式，具體可參考以下代碼?！ㄔ斠娊滩模?．制作商品列表模塊步驟1在<header>標簽與<footer>標簽之間添加<main>標簽，并在其中構(gòu)建商品列表模塊的結(jié)構(gòu)，具體可參考以下代碼?！ㄔ斠娊滩模┎襟E2在list.css文件中設(shè)置商品列表模塊的樣式，具體可參考以下代碼。…（詳見教材）步驟3在<body>標簽之后輸入以下代碼，制作商品列表模塊左側(cè)分類導航及右側(cè)排序選項按鈕的交互效果?！ㄔ斠娊滩模緦W生】通過教師引導學生制作全部商品頁，引發(fā)學生主動思考能力，動手制作項目可培養(yǎng)學生的編程能力課堂評價（10min）【教師】統(tǒng)一講解學生遇到的問題，糾正學生的錯誤【學生】通過講解學生出現(xiàn)的問題，可以讓多數(shù)學生避免犯同樣的錯誤教學反思本次課主要讓學生動手制作了WJ自制女裝品牌店主頁的部分模塊以及全部商品頁，相比上次課，學生的制作

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論