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

下載本文檔

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

文檔簡介

PAGE1PAGE1PAGE2PAGE2

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

（2）設計并制作購物網(wǎng)站的主頁。其中包括頁面頭部信息、頁面整體結構、頂部信息欄、頁眉、Banner、購物導覽模塊、熱銷榜單模塊、公司頭條模塊、頁腳。（3）設計并制作全部商品頁。其中包括頁面頭部信息、商品列表模塊。（4）【學生】總結回顧知

溫馨提示

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

評論

0/150

提交評論