Web前端開發案例教程（HTML5+CSS3）（微課版）教學教案_第1頁
Web前端開發案例教程（HTML5+CSS3）（微課版）教學教案_第2頁
Web前端開發案例教程（HTML5+CSS3）（微課版）教學教案_第3頁
Web前端開發案例教程（HTML5+CSS3）（微課版）教學教案_第4頁
Web前端開發案例教程（HTML5+CSS3）（微課版）教學教案_第5頁
已閱讀5頁，還剩110頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

教案名稱任務1創建第一個HTML5網頁計劃學時2學時

了解Web前端開發技術及相關概念

熟悉常用的瀏覽器

知識目標

熟悉前端開發常用的工具軟件

掌握使用HBilderX軟件創建簡單的網頁

引導學生做好職業規劃，在課程學習中樹立職業理想。

素質目標

激發學生愛國熱情、為科技強國而努力學習

URL、HTTP、HTML、網站、網頁、主頁等概念

教學重點

HBuilderX工具操作

教學難點使用HBuilderX創建HTML5網頁

教學做一體化

教學模式

線上+線下混合教學

思政元素

教學活動及主要環節

切入點

第1學時

（認識Web前端開發、Web相關概念）

I.導入新課：（5分鐘）隨著互聯網

1.有無制作過網頁？的飛速發

2.以前學過網頁課程嗎？展，各種智

（學生回答，參與互動）

能終端的普

II.課程前導：（15分鐘）

及，前端開

1.為什么學習這門課？

發越來越受

該門課程對應的職業崗位是WEB前端開發工程師。

2.這門課學什么內容？到重視，人

HTML5、CSS3、HTML5+CSS布局網頁、制作小型靜態網站。才需求量巨

3.怎么學習這門課？大。

多實踐、多利用拓展資源進行學習、從模仿項目或案例中學習逐漸過渡激發學生學

到自己設計網站。

好該門課，

III.考試方法：（5分鐘）

成為未來的

過程性考核+終結性考核

優秀Web前

過程性考核：出勤+課堂表現+作業+網站作品（60分）

終結性考核：期末網上題庫抽題考試（40分）端開發工程

師。

一、HTML5概述

?HTML5主要優勢：

?良好的移植性

?更直觀的結構

?內容和樣式分離

新的表單元素

更方便地嵌入音頻和視頻

?矢量圖繪制。

二、常用的瀏覽器

三大瀏覽器：IE瀏覽器（美國微軟公司）、火狐FireFox（開源基金組

織mozilla研發的產品是一家美國公司）、谷歌Chrome（推薦使用，美

國公司）。

我國的瀏覽器：百度瀏覽器、360瀏覽器、UC瀏覽器、QQ瀏覽器

三、常用的網頁編輯軟件

HBilderX:本課程使用該軟件。

HBilderX是

VisualStudioCode由Dcloud

AdobeDremweaver即數字天堂

SublimeText（北京）網

絡技術有限

四、任務實現：創建第一個網頁

公司推出的

■5twiMD■?!!KN05IWt<u)WB(V)IAT)MynHS1Ato>X2JJ□X

一*款支持

HTML5的

Web開發編

輯器，是一

款優秀的國

a，**aB0?

產免費軟

1.創建項目件，在前端

執行菜單欄的“文件”1“新建”命令，選擇“項目”，出現新建項目對開發、移動

話框，輸入項目名稱，選擇模板類型為“空項目”，單擊“創建”按鈕。開發方面提

2.新建文件供了豐富的

在左側視圖中，右擊項目名稱，執行“新建”命令，選擇"html文件”，功能和貼心

出現“新建html文件”對話框，輸入文件名，單擊“創建”按鈕。的用戶體

在網頁文件代碼的＜出怕＞與之間，輸入HTML文檔的標題，這里驗。

輸入：”第一個html5網頁”然后在vbody＞與＜/body＞標記之間寫入

<p>helloworld!</p>

3.保存文件Ctrl+S

4.瀏覽網頁Ctrl+R

（學生一起操作，實現教學做一體化，加強學生對知識難點的理解。）

II.課堂小結：（10分鐘）

重點理解IP地址、域名、URL,HTTP、HTTPS、HTML、Web標準等概念，

會使用HBuilder軟件創建項目及簡單的網頁。

作業1：

課本實訓1

作業2：

使用學習通平臺的教學視頻自學任務2中的HTML5常用文本標記

教案名稱任務2搭建簡單學院網站計劃學時12學時

掌握HTML5的基本結構

學習目標熟悉常用的HTML文本標記、列表標記、超鏈接標記、圖像標記

會熟練使用HTML標記創建簡單網頁

在編寫代碼中養成精益求精的工匠精神

素質目標

通過案例融入價值觀塑造

HTML5文檔基本結構

教學重點

HTML文本標記、列表標記、超鏈接標記、圖像標記

教學難點使用HTML標記創建簡單網頁

任務驅動教學法

教學模式

線上+線下混合教學模式

思政元素

教學活動及主要環節

切入點

第1、2學時

（HTML文本標記）

課前發布任務：通過學習通

觀看學習通平臺相關學習視頻。平臺拓展閱

做課前測試題。讀使學生了

I.學生討論：（10分鐘）解HTML5標

準規范的制

使用HBuilder新建HTML5默認文檔時，HTML5文檔的基本格式包括哪些

訂，激發同

標記？每個標記的作用是什么？

<!doctypehtml>學們科技報

<html>國的雄心，

<head>

增強使命擔

<metacharset="utf-8n>

無標題文檔當意識。

</head>

<body>

</body>

</html>

II.重難點內容講授：

一、HTML文本標記（40分鐘）

L標題標記（實現example02.html）

2.段落標記（實現example03.html）

3.水平線標記（實現example04.html）單標記

4.換行標記重點強調單標記（實現example05.html）

5.字體樣式標記（實現example。己html）

6.特殊字符（實現example07.html）

通過編寫

（教師多媒體演示、學生一起操作，實現教學做一體化）

HTML5代

二、【任務實現】學院簡介頁面制作（15分鐘）

碼，讓學生

效果圖如下：_______________________________

了解代碼書

D映的x+

?rC?A848/chapter02/example07.htmid☆3孑寫要遵循規

未來信息學院簡介

范，小錯誤

未13名學院8!古人期r高屹隹0立.飲育部名知依辦省履售通離學學校，學校秉特“涸務發慎

力家園,以他遇款業為WT的辦學方科道泌?以人為本.拈技雙■.產&Ig.BSHS-的分

學理令,以設有特色總水▼高嘲力口標.盅立7開放瞬得設程式.京R7優廟的鐵白窗

X,形成了出好的育人IMI.學鉉的管理水平.畋學急■.辦學特色而到社會各界的廣泛雕.可能會導致

學檸月筑育部息施的.08型示范性軟然BH業技本學院”nma&ww.E士官人才培養瞪點慶

校.3*2-對口費通分較培養本科招生試的校.省示范3職公校招生試的校,是因家白

枇?電亍值總產業星技旋人才培訓墨tT窮外&人才培UllMUT????物外摩蛤訓?頁面崩潰，

?-'MIML安全培訓用心?，萍&,全0M謖產虹建%ifiM體.?餐職亞校日先汨第<V-?R

工作優秀???哥蛛號.要養成嚴謹

版校所向?未來信室學院

細致的工匠

代碼如下：精神。

<body>

<h2>未來信息物面介（/h2>

”>未來信總郛選■人民政府耽府設立.故甫那赫索的公辦校.學校9U科以■傍&II為宗旨,以促迸就業為導向臉力學，針

.愛籍“人為本.■技雙■.產權?含、IK務社會F辦學理念.以“窿設有特色同K窣ERI麗為目標.it立

溫馨提示

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

評論

0/150

提交評論