版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
模塊六綜合案例本模塊通過小米商城網(wǎng)站和美麗山東網(wǎng)站2個(gè)綜合案例的實(shí)現(xiàn),介紹網(wǎng)站開發(fā)的完整流程。知識(shí)目標(biāo):掌握網(wǎng)站規(guī)劃的方法;掌握使用HTML5+CSS3布局網(wǎng)頁方法;掌握使用JavaScript添加網(wǎng)頁動(dòng)態(tài)效果的方法。能力目標(biāo):會(huì)對網(wǎng)站進(jìn)行統(tǒng)籌規(guī)劃,做好網(wǎng)站前期準(zhǔn)備工作;會(huì)熟練使用HTML5編輯網(wǎng)頁結(jié)構(gòu)代碼;會(huì)熟練使用CSS3編輯網(wǎng)頁樣式代碼;會(huì)熟練使用JavaScript編輯和調(diào)試腳本代碼。素質(zhì)目標(biāo):培養(yǎng)整理規(guī)劃能力,具有大局意識(shí);培養(yǎng)耐心細(xì)致、精益求精的工匠精神;培養(yǎng)文化自信和民族自豪感。教案25案例25小米商城網(wǎng)站(1)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作;掌握浮動(dòng)與定位布局的使用技巧,能夠運(yùn)用CSS+DIV為網(wǎng)頁布局;掌握盒子的相關(guān)屬性,能夠制作常見的盒子模型效果;掌握J(rèn)avaScript語言的用法,能夠制作網(wǎng)頁中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁面的設(shè)計(jì)與制作能力;具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹立學(xué)生勤于動(dòng)手,獨(dú)立思考的觀念;培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度,提高分析和解決實(shí)際問題的能力;在編寫代碼中養(yǎng)成正確的代碼編寫規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁布局;HTML5新增頁面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化;線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)(前期工作、搭建主頁結(jié)構(gòu))=1\*ROMANI.問題討論:(5分鐘)對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn):(40分鐘)一、案例描述制作小米商城網(wǎng)站,該網(wǎng)站由3個(gè)頁面構(gòu)成,分別為主頁、登錄頁和注冊頁,從主頁可以進(jìn)入登錄頁和注冊頁,從登錄頁和注冊頁可以返回主頁。主頁有輪播圖效果和限時(shí)促銷效果。網(wǎng)站瀏覽效果如圖25-1~圖25-3所示。圖25-1小米商城網(wǎng)站主頁圖25-2小米商城網(wǎng)站登錄頁圖25-3小米商城網(wǎng)站注冊頁二、前期工作1.收集素材2.新建項(xiàng)目3.創(chuàng)建樣式表文件三、制作網(wǎng)站主頁1.主頁結(jié)構(gòu)分析主頁由頭部、導(dǎo)航條、輪播圖、主體部分和版權(quán)信息等構(gòu)成,主體部分從上到下又細(xì)分為圖片展示、產(chǎn)品促銷、廣告圖片、手機(jī)、電視、視頻和售后服務(wù)部分,主頁結(jié)構(gòu)劃分如圖所示。2.編寫主頁布局代碼學(xué)生同步操作,做學(xué)教一體略。第2學(xué)時(shí)(制作主頁頭部)一、制作頭部1.案例分析頭部分為左、右兩部分,對每部分可以使用無序列表搭建結(jié)構(gòu)。鼠標(biāo)指針劃過“下載App”時(shí),顯示二維碼,如圖25-7所示,對二維碼可以使用<img>標(biāo)記定義,通過定義樣式使二維碼隱藏,鼠標(biāo)指針劃過時(shí)再顯示。購物車左側(cè)的圖標(biāo)使用字體庫中的圖標(biāo)字體。2.案例實(shí)現(xiàn)學(xué)生同步操作,做學(xué)教一體(1)搭建頭部結(jié)構(gòu)代碼略。(2)定義頭部CSS樣式代碼略。二、制作導(dǎo)航條部分1.案例分析該部分內(nèi)容分為3部分:左側(cè)是Logo、中間是導(dǎo)航條目、右側(cè)是搜索框。對Logo使用<img>標(biāo)記定義,并給圖像添加超鏈接,鏈接到主頁。對導(dǎo)航條目使用無序列表來構(gòu)建。對右側(cè)的搜索框使用<input>標(biāo)記定義,按鈕使用<button>標(biāo)記定義,按鈕上面的放大鏡圖像使用字體庫中的圖標(biāo)字體。2.案例實(shí)現(xiàn)學(xué)生同步操作,做學(xué)教一體(1)搭建導(dǎo)航條結(jié)構(gòu)代碼略。(2)定義導(dǎo)航條CSS樣式代碼略。三=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站。在制作主頁時(shí),按照從上到下的順序,完成頭部、導(dǎo)航條的制作,綜合利用了HTML5的各種標(biāo)記搭建頁面結(jié)構(gòu),使用了CSS3定義網(wǎng)頁樣式。作業(yè)1:課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2:掃碼觀看案例25中的微課,學(xué)習(xí)輪播圖和圖片展示部分以及產(chǎn)品促銷部分的制作。課前
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(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ǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 《偵查策略》課件
- 外陰濕疹的臨床護(hù)理
- 孕期中暑的健康宣教
- 傳導(dǎo)性耳鳴的健康宣教
- 這位廳官的講話火了
- 雙曲線定義課件
- 你們想錯(cuò)了課件
- 化膿性腮腺炎的健康宣教
- 科學(xué)探究:物質(zhì)的比熱容課件滬科
- 鼻毛孔粗大伴白色分泌物的臨床護(hù)理
- 用愛心說實(shí)話【經(jīng)典繪本】
- 《小花籽找快樂》課件
- 基建安全風(fēng)險(xiǎn)分級(jí)管控實(shí)施細(xì)則
- 海南省建筑施工現(xiàn)場安全生產(chǎn)管理資料(一冊和二冊)
- 2023年中國鐵路南寧局招聘筆試參考題庫附帶答案詳解
- 大概念教學(xué):素養(yǎng)導(dǎo)向的單元整體設(shè)計(jì)
- 初中學(xué)段勞動(dòng)任務(wù)清單(七到九年級(jí))
- 支氣管鏡吸痰操作標(biāo)準(zhǔn)
- 山東2023泰安銀行春季校園招聘25人上岸提分題庫3套【500題帶答案含詳解】
- 山東省政府采購專家復(fù)審考試題庫
- GB/T 3246.2-2000變形鋁及鋁合金制品低倍組織檢驗(yàn)方法
評論
0/150
提交評論