任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁_第1頁
任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁_第2頁
任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁_第3頁
任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁_第4頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

教案名稱任務(wù)1創(chuàng)建第一個HTML5網(wǎng)頁計劃學(xué)時2學(xué)時知識目標(biāo)了解Web前端開發(fā)技術(shù)及相關(guān)概念熟悉常用的瀏覽器熟悉前端開發(fā)常用的工具軟件掌握使用HBilderX軟件創(chuàng)建簡單的網(wǎng)頁能力目標(biāo)了解前端開發(fā)技術(shù)能熟練使用HBuilderX軟件素質(zhì)目標(biāo)引導(dǎo)學(xué)生做好職業(yè)規(guī)劃，在課程學(xué)習(xí)中樹立職業(yè)理想激發(fā)學(xué)生愛國熱情、為科技強(qiáng)國而努力學(xué)習(xí)教學(xué)重點URL、HTTP、HTML、網(wǎng)站、網(wǎng)頁、主頁等概念HBuilderX工具操作教學(xué)難點使用HBuilderX創(chuàng)建HTML5網(wǎng)頁教學(xué)模式教學(xué)做一體化線上+線下混合教學(xué)教學(xué)活動及主要環(huán)節(jié)思政元素切入點第1學(xué)時（認(rèn)識Web前端開發(fā)、Web相關(guān)概念）=1\*ROMANI.導(dǎo)入新課：（5分鐘）1．有無制作過網(wǎng)頁？以前學(xué)過網(wǎng)頁課程嗎？2．你喜歡什么樣的網(wǎng)頁？學(xué)完這門課程，我們也可以做靜態(tài)網(wǎng)頁。（學(xué)生回答，參與互動）=2\*ROMANII.課程前導(dǎo)：（15分鐘）1.為什么學(xué)習(xí)這門課？該門課程對應(yīng)的職業(yè)崗位是WEB前端開發(fā)工程師。2.這門課學(xué)什么內(nèi)容？HTML5、CSS3、HTML5+CSS3布局網(wǎng)頁、制作小型靜態(tài)網(wǎng)站。3.怎么學(xué)習(xí)這門課？多實踐、多利用拓展資源進(jìn)行學(xué)習(xí)、從模仿項目或案例中學(xué)習(xí)逐漸過渡到自己設(shè)計網(wǎng)站。=3\*ROMANIII.考試方法：（5分鐘）過程性考核+終結(jié)性考核過程性考核：出勤+課堂表現(xiàn)+作業(yè)+網(wǎng)站作品（60分）終結(jié)性考核：期末網(wǎng)上題庫抽題考試（40分）=4\*ROMANIV.新課內(nèi)容：（20分鐘）任務(wù)描述啟動HBuilderX，創(chuàng)建一個空項目，項目名稱為：chapter01,在該項目中新建一個html文件，文件名稱為：example01.html，在網(wǎng)頁上顯示：“只爭朝夕，不負(fù)韶華?！?。網(wǎng)頁瀏覽效果如圖1-1所示。圖1-1第一個網(wǎng)頁瀏覽效果二、認(rèn)識Web前端開發(fā)Web前端開發(fā)：主要包括HTML、CSS和JavaScript等技術(shù)。Web后端開發(fā)：通過編寫程序代碼與后臺服務(wù)器交互，來動態(tài)更新網(wǎng)站的內(nèi)容。包括PHP、JSP和ASP.NET等技術(shù)。三、相關(guān)概念1、IP地址和域名2、URL：統(tǒng)一資源定位符3、HTTP與HTTPS：超文本傳輸協(xié)議，提供一種發(fā)布和接收HTML頁面的方法。4、網(wǎng)站、網(wǎng)頁與主頁：主頁通常用index.htm或index.html表示。5、HTML:超文本標(biāo)記語言，在網(wǎng)頁空白位置單擊鼠標(biāo)右鍵，選擇“查看源文件”命令即可查看網(wǎng)頁源代碼。（學(xué)生動手操作，任意打開一個網(wǎng)頁，查看網(wǎng)頁源代碼）6.Web標(biāo)準(zhǔn)：為了使網(wǎng)頁在使用不同瀏覽器瀏覽時顯示相同的效果，在開發(fā)應(yīng)用程序時，瀏覽器開發(fā)商和Web開發(fā)商都必須共同遵守W3C與其他標(biāo)準(zhǔn)化組織共同制定的一系列Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)包括結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）、表現(xiàn)標(biāo)準(zhǔn)(CSS)和行為標(biāo)準(zhǔn)(JavaScript)。第2學(xué)時（創(chuàng)建第一個HTML5頁面）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.新課內(nèi)容：（35分鐘）一、HTML5概述HTML5主要優(yōu)勢：良好的移植性更直觀的結(jié)構(gòu)內(nèi)容和樣式分離新的表單元素更方便地嵌入音頻和視頻矢量圖繪制。二、常用的瀏覽器Edge瀏覽器（美國微軟公司）、火狐FireFox（開源基金組織mozilla研發(fā)的產(chǎn)品是一家美國公司）、谷歌Chrome（推薦使用，美國公司）、Safari、Opera瀏覽器。三、常用的網(wǎng)頁編輯軟件HBuilderX:本課程使用該軟件。VisualStudioCodeAdobeDremweaverSublimeText四、任務(wù)實現(xiàn)：創(chuàng)建第一個網(wǎng)頁1．創(chuàng)建項目執(zhí)行菜單欄的“文件”|“新建”｜“項目”選項，出現(xiàn)新建項目對話框，輸入項目名稱，選擇模板類型為“空項目”，單擊“創(chuàng)建”按鈕。2．新建文件在左側(cè)視圖中，右擊項目名稱，執(zhí)行“新建”命令，選擇“html文件”，出現(xiàn)“新建html文件”對話框，輸入文件名，單擊“創(chuàng)建”按鈕。在網(wǎng)頁文件代碼的<title>與</title>之間，輸入HTML文檔的標(biāo)題，這里輸入：“第一個html5網(wǎng)頁”然后在<body>與</body>標(biāo)記之間寫入<p>只爭朝夕，不負(fù)韶華。</p>3．保存文件Ctrl+S4．瀏覽網(wǎng)頁Ctrl+R（學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點的理解。）=2\*ROMANII.課堂小結(jié)：（10分鐘）作業(yè)1：課本實訓(xùn)1作業(yè)2：使用學(xué)習(xí)通平臺的教學(xué)視頻自學(xué)任務(wù)2中的HTML5常用文本標(biāo)記。隨著互聯(lián)網(wǎng)的飛速發(fā)展，各種智能終端的普及，前端開發(fā)越來越受到重視，人才需求量巨大。激發(fā)學(xué)生興趣，學(xué)好該門課，成為未來的優(yōu)秀Web前端開發(fā)工程師。介紹萬維網(wǎng)的發(fā)明者，蒂姆·伯納斯·李，互聯(lián)網(wǎng)之父，改變了人類的生活。引導(dǎo)學(xué)生立大志，科技報國

溫馨提示

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

評論

0/150

提交評論