Web前端開發(fā)案例教程（HTML5 CSS3） 教案 任務(wù)1創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)

教案名稱任務(wù)1創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解Web前端開發(fā)技術(shù)及相關(guān)概念熟悉常用的瀏覽器熟悉前端開發(fā)常用的工具軟件掌握使用HBilderX軟件創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)素質(zhì)目標(biāo)引導(dǎo)學(xué)生做好職業(yè)規(guī)劃，在課程學(xué)習(xí)中樹立職業(yè)理想。激發(fā)學(xué)生愛國(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前端開發(fā)、Web相關(guān)概念）.導(dǎo)入新課：（5分鐘）.有無制作過網(wǎng)頁(yè)？.以前學(xué)過網(wǎng)頁(yè)課程嗎？（學(xué)生回答，參與互動(dòng)）II.課程前導(dǎo)：（15分鐘）.為什么學(xué)習(xí)這門課？該門課程對(duì)應(yīng)的職業(yè)崗位是WEB前端開發(fā)工程師。.這門課學(xué)什么內(nèi)容？HTML5、CSS3、HTML5+CSS布局網(wǎng)頁(yè)、制作小型靜態(tài)網(wǎng)站。.怎么學(xué)習(xí)這門課？多實(shí)踐、多利用拓展資源進(jìn)行學(xué)習(xí)、從模仿項(xiàng)目或案例中學(xué)習(xí)逐漸過渡到自己設(shè)計(jì)網(wǎng)站。IH.考試方法：（5分鐘）過程性考核+終結(jié)性考核過程性考核：出勤+課堂表現(xiàn)+作業(yè)+網(wǎng)站作品（60分）終結(jié)性考核：期末網(wǎng)上題庫(kù)抽題考試（40分）隨著互聯(lián)網(wǎng)的飛速發(fā)展，各種智能終端的普及，前端開發(fā)越來越受到重視，人才需求量巨大。激發(fā)學(xué)生學(xué)好該門課，成為未來的優(yōu)秀Web前端開發(fā)工程師。IV.新課內(nèi)容：（20分鐘）一、任務(wù)描述啟動(dòng)HBilderX,創(chuàng)建一個(gè)空項(xiàng)目，項(xiàng)目名稱為：chapterOl,在該項(xiàng)目中新建一個(gè)html文件，文件名稱為：exampleOl.html,在網(wǎng)頁(yè)上顯示：“這是我的第一個(gè)網(wǎng)頁(yè)哦。。網(wǎng)頁(yè)瀏覽效果如圖17所示。0X+~°X一6C①含Qi圖1-1第一個(gè)網(wǎng)頁(yè)瀏覽效果二、認(rèn)識(shí)Web前端開發(fā)介紹萬維網(wǎng)的發(fā)明者，蒂姆介紹萬維網(wǎng)的發(fā)明者，蒂姆?伯納斯?李，互聯(lián)網(wǎng)之父，改變了人類的生活。引導(dǎo)學(xué)生立大志，科技報(bào)國(guó)，實(shí)現(xiàn)人生價(jià)值。介紹萬維網(wǎng)的發(fā)明者，蒂姆?伯納斯?李，互聯(lián)網(wǎng)之父，改變了人類的生活。引導(dǎo)學(xué)生立大志，科技報(bào)國(guó)，實(shí)現(xiàn)人生價(jià)值。Web前端開發(fā):主要包括HTML、介紹萬維網(wǎng)的發(fā)明者，蒂姆?伯納斯?李，互聯(lián)網(wǎng)之父，改變了人類的生活。引導(dǎo)學(xué)生立大志，科技報(bào)國(guó)，實(shí)現(xiàn)人生價(jià)值。Web后端開發(fā)：通過編寫程序代碼與后臺(tái)服務(wù)器交互，來動(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)手操作，任意打開一個(gè)網(wǎng)頁(yè)，查看網(wǎng)頁(yè)源代碼）6.Web標(biāo)準(zhǔn)：為了使網(wǎng)頁(yè)在使用不同瀏覽器瀏覽時(shí)顯示相同的效果，在開發(fā)應(yīng)用程序時(shí)，瀏覽器開發(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é)時(shí)（創(chuàng)建第一個(gè)HTML5頁(yè)面）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。I.新課內(nèi)容：（35分鐘）tstmADMtstmADMHBilderX是由Dcloud即數(shù)字天堂（北京）網(wǎng)絡(luò)技術(shù)有限公司推出的一款支持HTML5的Web開發(fā)編輯那，是一款優(yōu)秀的國(guó)產(chǎn)免費(fèi)軟件，在前端開發(fā)、移動(dòng)開發(fā)方面提供了豐富的功能和貼心的用戶體驗(yàn)。一、HTML5概述HTML5主要優(yōu)勢(shì)：*良好的移植性?：?更直觀的結(jié)構(gòu)?內(nèi)容和樣式分離新的表單元素?更方便地嵌入音頻和視頻矢量圖繪制。二、常用的瀏覽器三大瀏覽器：IE瀏覽器（美國(guó)微軟公司）、火狐FireFox（開源基金組織mozilla研發(fā)的產(chǎn)品是一家美國(guó)公司）、谷歌Chrome（推薦使用，美國(guó)公司）。我國(guó)的瀏覽器：百度瀏覽器、360瀏覽器、UC瀏覽器、QQ瀏覽器三、常用的網(wǎng)頁(yè)編輯軟件HBilderX:本課程使用該軟件。VisualStudioCodeAdobeDremweaverSublimeText四、任務(wù)實(shí)現(xiàn)：創(chuàng)建第一個(gè)網(wǎng)頁(yè)務(wù)均目nHB*1.創(chuàng)建項(xiàng)目執(zhí)行菜單欄的“文件”I“新建”命令，選擇“項(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è)htm15網(wǎng)頁(yè)”然后在＜body＞與＜/body＞標(biāo)記之間寫入

<p>helloworld!</p>.保存文件Ctrl+S.瀏覽網(wǎng)頁(yè)Ctrl+R（學(xué)生一起操作，實(shí)現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對(duì)知識(shí)難點(diǎn)的理解。）口.課堂小結(jié)：（1