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

下載本文檔

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

文檔簡(jiǎn)介

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論