版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
教案名稱任務1創(chuàng)建第一個HTML5網(wǎng)頁計劃學時2學時
了解Web前端開發(fā)技術及相關概念
熟悉常用的瀏覽器
知識目標
熟悉前端開發(fā)常用的工具軟件
掌握使用HBilderX軟件創(chuàng)建簡單的網(wǎng)頁
引導學生做好職業(yè)規(guī)劃，在課程學習中樹立職業(yè)理想。
素質目標
激發(fā)學生愛國熱情、為科技強國而努力學習
URL、HTTP、HTML、網(wǎng)站、網(wǎng)頁、主頁等概念
教學重點
HBuilderX工具操作
教學難點使用HBuilderX創(chuàng)建HTML5網(wǎng)頁
教學做一體化
教學模式
線上+線下混合教學
思政元素
教學活動及主要環(huán)節(jié)
切入點
第1學時
（認識Web前端開發(fā)、Web相關概念）
I.導入新課：（5分鐘）隨著互聯(lián)網(wǎng)
1.有無制作過網(wǎng)頁？的飛速發(fā)
2.以前學過網(wǎng)頁課程嗎？展，各種智
（學生回答，參與互動）
能終端的普
II.課程前導：（15分鐘）
及，前端開
1.為什么學習這門課？
發(fā)越來越受
該門課程對應的職業(yè)崗位是WEB前端開發(fā)工程師。
2.這門課學什么內容？到重視，人
HTML5、CSS3、HTML5+CSS布局網(wǎng)頁、制作小型靜態(tài)網(wǎng)站。才需求量巨
3.怎么學習這門課？大。
多實踐、多利用拓展資源進行學習、從模仿項目或案例中學習逐漸過渡激發(fā)學生學
到自己設計網(wǎng)站。
好該門課，
III.考試方法：（5分鐘）
成為未來的
過程性考核+終結性考核
優(yōu)秀Web前
過程性考核：出勤+課堂表現(xiàn)+作業(yè)+網(wǎng)站作品（60分）
終結性考核：期末網(wǎng)上題庫抽題考試（40分）端開發(fā)工程
師。
一、HTML5概述
?HTML5主要優(yōu)勢：
?良好的移植性
?更直觀的結構
?內容和樣式分離
新的表單元素
更方便地嵌入音頻和視頻
?矢量圖繪制。
二、常用的瀏覽器
三大瀏覽器：IE瀏覽器（美國微軟公司）、火狐FireFox（開源基金組
織mozilla研發(fā)的產品是一家美國公司）、谷歌Chrome（推薦使用，美
國公司）。
我國的瀏覽器：百度瀏覽器、360瀏覽器、UC瀏覽器、QQ瀏覽器
三、常用的網(wǎng)頁編輯軟件
HBilderX:本課程使用該軟件。
HBilderX是
VisualStudioCode由Dcloud
AdobeDremweaver即數(shù)字天堂
SublimeText（北京）網(wǎng)
絡技術有限
四、任務實現(xiàn)：創(chuàng)建第一個網(wǎng)頁
公司推出的
■5twiMD■?!!KN05IWt<u)WB(V)IAT)MynHS1Ato>X2JJ□X
一*款支持
HTML5的
Web開發(fā)編
輯器，是一
款優(yōu)秀的國
a，**aB0?
產免費軟
1.創(chuàng)建項目件，在前端
執(zhí)行菜單欄的“文件”1“新建”命令，選擇“項目”，出現(xiàn)新建項目對開發(fā)、移動
話框，輸入項目名稱，選擇模板類型為“空項目”，單擊“創(chuàng)建”按鈕。開發(fā)方面提
2.新建文件供了豐富的
在左側視圖中，右擊項目名稱，執(zhí)行“新建”命令，選擇"html文件”，功能和貼心
出現(xiàn)“新建html文件”對話框，輸入文件名，單擊“創(chuàng)建”按鈕。的用戶體
在網(wǎng)頁文件代碼的＜出怕＞與之間，輸入HTML文檔的標題，這里驗。
輸入：”第一個html5網(wǎng)頁”然后在vbody＞與＜/body＞標記之間寫入
<p>helloworld!</p>
3.保存文件Ctrl+S
4.瀏覽網(wǎng)頁Ctrl+R
（學生一起操作，實現(xiàn)教學做一體化，加強學生對知識難點的理解。）
II.課堂小結：（10分鐘）
重點理解IP地址、域名、URL,HTTP、HTTPS、HTML、Web標準等概念，
會使用HBuilder軟件創(chuàng)建項目及簡單的網(wǎng)頁。
作業(yè)1：
課本實訓1
作業(yè)2：
使用學習通平臺的教學視頻自學任務2中的HTML5常用文本標記
教案名稱任務2搭建簡單學院網(wǎng)站計劃學時12學時
掌握HTML5的基本結構
學習目標熟悉常用的HTML文本標記、列表標記、超鏈接標記、圖像標記
會熟練使用HTML標記創(chuàng)建簡單網(wǎng)頁
在編寫代碼中養(yǎng)成精益求精的工匠精神
素質目標
通過案例融入價值觀塑造
HTML5文檔基本結構
教學重點
HTML文本標記、列表標記、超鏈接標記、圖像標記
教學難點使用HTML標記創(chuàng)建簡單網(wǎng)頁
任務驅動教學法
教學模式
線上+線下混合教學模式
思政元素
教學活動及主要環(huán)節(jié)
切入點
第1、2學時
（HTML文本標記）
課前發(fā)布任務：通過學習通
觀看學習通平臺相關學習視頻。平臺拓展閱
做課前測試題。讀使學生了
I.學生討論：（10分鐘）解HTML5標
準規(guī)范的制
使用HBuilder新建HTML5默認文檔時，HTML5文檔的基本格式包括哪些
訂，激發(fā)同
標記？每個標記的作用是什么？
<!doctypehtml>學們科技報
<html>國的雄心，
<head>
增強使命擔
<metacharset="utf-8n>
無標題文檔當意識。
</head>
<body>
</body>
</html>
II.重難點內容講授：
一、HTML文本標記（40分鐘）
L標題標記（實現(xiàn)example02.html）
2.段落標記（實現(xiàn)example03.html）
3.水平線標記（實現(xiàn)example04.html）單標記
4.換行標記重點強調單標記（實現(xiàn)example05.html）
5.字體樣式標記（實現(xiàn)example。己html）
6.特殊字符（實現(xiàn)example07.html）
通過編寫
（教師多媒體演示、學生一起操作，實現(xiàn)教學做一體化）
HTML5代
二、【任務實現(xiàn)】學院簡介頁面制作（15分鐘）
碼，讓學生
效果圖如下：_______________________________
了解代碼書
D映的x+
?rC?A848/chapter02/example07.htmid☆3孑寫要遵循規(guī)
未來信息學院簡介
范，小錯誤
未13名學院8!古人期r高屹隹0立.飲育部名知依辦省履售通離學學校，學校秉特“涸務發(fā)慎
力家園,以他遇款業(yè)為WT的辦學方科道泌?以人為本.拈技雙■.產&Ig.BSHS-的分
學理令,以設有特色總水▼高嘲力口標.盅立7開放瞬得設程式.京R7優(yōu)廟的鐵白窗
X,形成了出好的育人IMI.學鉉的管理水平.畋學急■.辦學特色而到社會各界的廣泛雕.可能會導致
學檸月筑育部息施的.08型示范性軟然BH業(yè)技本學院”nma&ww.E士官人才培養(yǎng)瞪點慶
校.3*2-對口費通分較培養(yǎng)本科招生試的校.省示范3職公校招生試的校,是因家白
枇?電亍值總產業(yè)星技旋人才培訓墨tT窮外&人才培UllMUT????物外摩蛤訓?頁面崩潰，
?-'MIML安全培訓用心?，萍&,全0M謖產虹建%ifiM體.?餐職亞校日先汨第<V-?R
工作優(yōu)秀???哥蛛號.要養(yǎng)成嚴謹
版校所向?未來信室學院
細致的工匠
代碼如下：精神。
<body>
<h2>未來信息物面介（/h2>
”>未來信總郛選■人民政府耽府設立.故甫那赫索的公辦校.學校9U科以■傍&II為宗旨,以促迸就業(yè)為導向臉力學，針
.愛籍“人為本.■技雙■.產權?含、IK務社會F辦學理念.以“窿設有特色同K窣ERI麗為目標.it立
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 車間生產環(huán)節(jié)管理制度
- 集裝箱運輸車管理制度
- 頂板管理日常管理制度
- 公司工作群管理制度
- 酒店吧臺禮儀管理制度
- 公司安全管理制度牌
- 酒店封閉空間管理制度
- 讀公司管理制度觀后感
- 裝飾公司鑰匙管理制度
- 酒店薪酬管理制度模板
- 2024年中考英語真題-帶答案
- 人教版八年級物理第八章運動和力專項訓練
- （2024版）機動車查驗員理論知識考試題庫及答案
- 2022年10月自考00233稅法試題及答案含解析
- 2024智能AI中臺白皮書
- 意大利古羅馬斗獸場課件
- 《萬以內數(shù)的認識》大單元整體設計
- 供配電技術 課件 第4章-變配電系統(tǒng)的電氣設備及選擇
- 二模沖刺動員主題班會通用課件
- 大學國旗護衛(wèi)班培訓方案
- 胃腸術后吻合口瘺的觀察與護理
評論
0/150
提交評論