版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
教案名稱任務(wù)1創(chuàng)建第一個(gè)HTML5網(wǎng)頁計(jì)劃學(xué)時(shí)2學(xué)時(shí)
了解Web前端開發(fā)技術(shù)及相關(guān)概念
熟悉常用的瀏覽器
知識(shí)目標(biāo)
熟悉前端開發(fā)常用的工具軟件
掌握使用HBilderX軟件創(chuàng)建簡單的網(wǎng)頁
引導(dǎo)學(xué)生做好職業(yè)規(guī)劃，在課程學(xué)習(xí)中樹立職業(yè)理想。
素質(zhì)目標(biāo)
激發(fā)學(xué)生愛國熱情、為科技強(qiáng)國而努力學(xué)習(xí)
URL、HTTP、HTML、網(wǎng)站、網(wǎng)頁、主頁等概念
教學(xué)重點(diǎn)
HBuilderX工具操作
教學(xué)難點(diǎn)使用HBuilderX創(chuàng)建HTML5網(wǎng)頁
教學(xué)做一體化
教學(xué)模式
線上+線下混合教學(xué)
思政元素
教學(xué)活動(dòng)及主要環(huán)節(jié)
切入點(diǎn)
第1學(xué)時(shí)
（認(rèn)識(shí)Web前端開發(fā)、Web相關(guān)概念）
I.導(dǎo)入新課：（5分鐘）隨著互聯(lián)網(wǎng)
1.有無制作過網(wǎng)頁？的飛速發(fā)
2.以前學(xué)過網(wǎng)頁課程嗎？展，各種智
（學(xué)生回答，參與互動(dòng)）
能終端的普
II.課程前導(dǎo)：（15分鐘）
及，前端開
1.為什么學(xué)習(xí)這門課？
發(fā)越來越受
該門課程對(duì)應(yīng)的職業(yè)崗位是WEB前端開發(fā)工程師。
2.這門課學(xué)什么內(nèi)容？到重視，人
HTML5、CSS3、HTML5+CSS布局網(wǎng)頁、制作小型靜態(tài)網(wǎng)站。才需求量巨
3.怎么學(xué)習(xí)這門課？大。
多實(shí)踐、多利用拓展資源進(jìn)行學(xué)習(xí)、從模仿項(xiàng)目或案例中學(xué)習(xí)逐漸過渡激發(fā)學(xué)生學(xué)
到自己設(shè)計(jì)網(wǎng)站。
好該門課，
III.考試方法：（5分鐘）
成為未來的
過程性考核+終結(jié)性考核
優(yōu)秀Web前
過程性考核：出勤+課堂表現(xiàn)+作業(yè)+網(wǎng)站作品（60分）
終結(jié)性考核：期末網(wǎng)上題庫抽題考試（40分）端開發(fā)工程
師。
一、HTML5概述
?HTML5主要優(yōu)勢(shì)：
?良好的移植性
?更直觀的結(jié)構(gòu)
?內(nèi)容和樣式分離
新的表單元素
更方便地嵌入音頻和視頻
?矢量圖繪制。
二、常用的瀏覽器
三大瀏覽器：IE瀏覽器（美國微軟公司）、火狐FireFox（開源基金組
織mozilla研發(fā)的產(chǎn)品是一家美國公司）、谷歌Chrome（推薦使用，美
國公司）。
我國的瀏覽器：百度瀏覽器、360瀏覽器、UC瀏覽器、QQ瀏覽器
三、常用的網(wǎng)頁編輯軟件
HBilderX:本課程使用該軟件。
HBilderX是
VisualStudioCode由Dcloud
AdobeDremweaver即數(shù)字天堂
SublimeText（北京）網(wǎng)
絡(luò)技術(shù)有限
四、任務(wù)實(shí)現(xiàn)：創(chuàng)建第一個(gè)網(wǎng)頁
公司推出的
■5twiMD■?!!KN05IWt<u)WB(V)IAT)MynHS1Ato>X2JJ□X
一*款支持
HTML5的
Web開發(fā)編
輯器，是一
款優(yōu)秀的國
a，**aB0?
產(chǎn)免費(fèi)軟
1.創(chuàng)建項(xiàng)目件，在前端
執(zhí)行菜單欄的“文件”1“新建”命令，選擇“項(xiàng)目”，出現(xiàn)新建項(xiàng)目對(duì)開發(fā)、移動(dòng)
話框，輸入項(xiàng)目名稱，選擇模板類型為“空項(xiàng)目”，單擊“創(chuàng)建”按鈕。開發(fā)方面提
2.新建文件供了豐富的
在左側(cè)視圖中，右擊項(xiàng)目名稱，執(zhí)行“新建”命令，選擇"html文件”，功能和貼心
出現(xiàn)“新建html文件”對(duì)話框，輸入文件名，單擊“創(chuàng)建”按鈕。的用戶體
在網(wǎng)頁文件代碼的＜出怕＞與之間，輸入HTML文檔的標(biāo)題，這里驗(yàn)。
輸入：”第一個(gè)html5網(wǎng)頁”然后在vbody＞與＜/body＞標(biāo)記之間寫入
<p>helloworld!</p>
3.保存文件Ctrl+S
4.瀏覽網(wǎng)頁Ctrl+R
（學(xué)生一起操作，實(shí)現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對(duì)知識(shí)難點(diǎn)的理解。）
II.課堂小結(jié)：（10分鐘）
重點(diǎn)理解IP地址、域名、URL,HTTP、HTTPS、HTML、Web標(biāo)準(zhǔn)等概念，
會(huì)使用HBuilder軟件創(chuàng)建項(xiàng)目及簡單的網(wǎng)頁。
作業(yè)1：
課本實(shí)訓(xùn)1
作業(yè)2：
使用學(xué)習(xí)通平臺(tái)的教學(xué)視頻自學(xué)任務(wù)2中的HTML5常用文本標(biāo)記
教案名稱任務(wù)2搭建簡單學(xué)院網(wǎng)站計(jì)劃學(xué)時(shí)12學(xué)時(shí)
掌握HTML5的基本結(jié)構(gòu)
學(xué)習(xí)目標(biāo)熟悉常用的HTML文本標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記、圖像標(biāo)記
會(huì)熟練使用HTML標(biāo)記創(chuàng)建簡單網(wǎng)頁
在編寫代碼中養(yǎng)成精益求精的工匠精神
素質(zhì)目標(biāo)
通過案例融入價(jià)值觀塑造
HTML5文檔基本結(jié)構(gòu)
教學(xué)重點(diǎn)
HTML文本標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記、圖像標(biāo)記
教學(xué)難點(diǎn)使用HTML標(biāo)記創(chuàng)建簡單網(wǎng)頁
任務(wù)驅(qū)動(dòng)教學(xué)法
教學(xué)模式
線上+線下混合教學(xué)模式
思政元素
教學(xué)活動(dòng)及主要環(huán)節(jié)
切入點(diǎn)
第1、2學(xué)時(shí)
（HTML文本標(biāo)記）
課前發(fā)布任務(wù)：通過學(xué)習(xí)通
觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。平臺(tái)拓展閱
做課前測(cè)試題。讀使學(xué)生了
I.學(xué)生討論：（10分鐘）解HTML5標(biāo)
準(zhǔn)規(guī)范的制
使用HBuilder新建HTML5默認(rèn)文檔時(shí)，HTML5文檔的基本格式包括哪些
訂，激發(fā)同
標(biāo)記？每個(gè)標(biāo)記的作用是什么？
<!doctypehtml>學(xué)們科技報(bào)
<html>國的雄心，
<head>
增強(qiáng)使命擔(dān)
<metacharset="utf-8n>
無標(biāo)題文檔當(dāng)意識(shí)。
</head>
<body>
</body>
</html>
II.重難點(diǎn)內(nèi)容講授：
一、HTML文本標(biāo)記（40分鐘）
L標(biāo)題標(biāo)記（實(shí)現(xiàn)example02.html）
2.段落標(biāo)記（實(shí)現(xiàn)example03.html）
3.水平線標(biāo)記（實(shí)現(xiàn)example04.html）單標(biāo)記
4.換行標(biāo)記重點(diǎn)強(qiáng)調(diào)單標(biāo)記（實(shí)現(xiàn)example05.html）
5.字體樣式標(biāo)記（實(shí)現(xiàn)example。己html）
6.特殊字符（實(shí)現(xiàn)example07.html）
通過編寫
（教師多媒體演示、學(xué)生一起操作，實(shí)現(xiàn)教學(xué)做一體化）
HTML5代
二、【任務(wù)實(shí)現(xiàn)】學(xué)院簡介頁面制作（15分鐘）
碼，讓學(xué)生
效果圖如下：_______________________________
了解代碼書
D映的x+
?rC?A848/chapter02/example07.htmid☆3孑寫要遵循規(guī)
未來信息學(xué)院簡介
范，小錯(cuò)誤
未13名學(xué)院8!古人期r高屹隹0立.飲育部名知依辦省履售通離學(xué)學(xué)校，學(xué)校秉特“涸務(wù)發(fā)慎
力家園,以他遇款業(yè)為WT的辦學(xué)方科道泌?以人為本.拈技雙■.產(chǎn)&Ig.BSHS-的分
學(xué)理令,以設(shè)有特色總水▼高嘲力口標(biāo).盅立7開放瞬得設(shè)程式.京R7優(yōu)廟的鐵白窗
X,形成了出好的育人IMI.學(xué)鉉的管理水平.畋學(xué)急■.辦學(xué)特色而到社會(huì)各界的廣泛雕.可能會(huì)導(dǎo)致
學(xué)檸月筑育部息施的.08型示范性軟然BH業(yè)技本學(xué)院”nma&ww.E士官人才培養(yǎng)瞪點(diǎn)慶
校.3*2-對(duì)口費(fèi)通分較培養(yǎng)本科招生試的校.省示范3職公校招生試的校,是因家白
枇?電亍值總產(chǎn)業(yè)星技旋人才培訓(xùn)墨tT窮外&人才培UllMUT????物外摩蛤訓(xùn)?頁面崩潰，
?-'MIML安全培訓(xùn)用心?，萍&,全0M謖產(chǎn)虹建%ifiM體.?餐職亞校日先汨第<V-?R
工作優(yōu)秀???哥蛛號(hào).要養(yǎng)成嚴(yán)謹(jǐn)
版校所向?未來信室學(xué)院
細(xì)致的工匠
代碼如下：精神。
<body>
<h2>未來信息物面介（/h2>
”>未來信總郛選■人民政府耽府設(shè)立.故甫那赫索的公辦校.學(xué)校9U科以■傍&II為宗旨,以促迸就業(yè)為導(dǎo)向臉力學(xué)，針
.愛籍“人為本.■技雙■.產(chǎn)權(quán)?含、IK務(wù)社會(huì)F辦學(xué)理念.以“窿設(shè)有特色同K窣ERI麗為目標(biāo).it立
溫馨提示
- 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年度大數(shù)據(jù)中心運(yùn)營維護(hù)合同
- 2024年建筑工程設(shè)計(jì)與咨詢合同
- 2024年度航空公司機(jī)票代理合同
- 2024年度環(huán)保工程與技術(shù)咨詢合同
- 幼兒食品課件教學(xué)課件
- 美術(shù)課件價(jià)格教學(xué)課件
- 尿道異物課件教學(xué)課件
- 2024年塑料纖維生產(chǎn)加工許可合同
- 2024年建筑人才中介服務(wù)協(xié)議
- 2024年度南京市存量房購買合同
- （統(tǒng)編2024版）道德與法治七上10.1愛護(hù)身體 課件
- GB/T 30391-2024花椒
- 供電線路維護(hù)合同
- 胸部術(shù)后護(hù)理科普
- 鞋子工廠供貨合同模板
- 2024碼頭租賃合同范本
- 木材采運(yùn)智能決策支持系統(tǒng)
- 【產(chǎn)業(yè)圖譜】2024年青島市重點(diǎn)產(chǎn)業(yè)規(guī)劃布局全景圖譜（附各地區(qū)重點(diǎn)產(chǎn)業(yè)、產(chǎn)業(yè)體系布局、未來產(chǎn)業(yè)發(fā)展規(guī)劃等）
- 上海市市轄區(qū)(2024年-2025年小學(xué)四年級(jí)語文)部編版期末考試（下學(xué)期）試卷及答案
- 認(rèn)識(shí)梯形（課件）四年級(jí)上冊(cè)人教版
- 【期中考后反思】《反躬自省,砥礪奮進(jìn)》-2022-2023學(xué)年初中主題班會(huì)課件
評(píng)論
0/150
提交評(píng)論