網(wǎng)頁設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第1章 HTML基礎(chǔ)_第1頁
網(wǎng)頁設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第1章 HTML基礎(chǔ)_第2頁
網(wǎng)頁設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第1章 HTML基礎(chǔ)_第3頁
網(wǎng)頁設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第1章 HTML基礎(chǔ)_第4頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

第1課HTML基礎(chǔ)（3學(xué)時(shí)）本章內(nèi)容：師生互相認(rèn)識學(xué)習(xí)要求課程簡介開發(fā)環(huán)境創(chuàng)建網(wǎng)頁（HTML標(biāo)記符和網(wǎng)頁的基本結(jié)構(gòu)）綜合實(shí)例與作業(yè)（個人簡歷）1、師生互相認(rèn)識通過作業(yè)（簡歷）自我介紹2、學(xué)習(xí)要求不允許缺勤。（如有特殊原因缺勤，必須自行課后找老師和同學(xué)補(bǔ)上當(dāng)次課的內(nèi)容，并按要求完成作業(yè)。）嚴(yán)禁干擾他人學(xué)習(xí)。上課攜帶電腦、電源線和插座。攜帶教材和參考書。嚴(yán)格按照教師要求完成所有教學(xué)活動，包括：聽課、現(xiàn)場操作、課堂討論與問答、課后作業(yè)、自學(xué)等。3、課程簡介一句話簡介：針對初學(xué)者的前端開發(fā)課，主要學(xué)習(xí)如何使用前端開發(fā)技術(shù)進(jìn)行網(wǎng)頁設(shè)計(jì)，最主要的內(nèi)容是：HTML、CSS和JavaScript。學(xué)習(xí)方法：動手開發(fā)，動手開發(fā)，動手開發(fā)。具體而言，跟上教師進(jìn)度，完成課上練習(xí)和課后作業(yè)。學(xué)有余力的同學(xué)，做personalproject或groupproject。學(xué)習(xí)資源：樂學(xué)，教材，參考書，教學(xué)視頻（Youtube/B站），DeepSeek/ChatGPT4、前端開發(fā)環(huán)境的安裝和使用安裝VSCode和相關(guān)插件使用DeepSeek搜索：1）如何使用VSCode進(jìn)行前端開發(fā)；2）需要哪些插件編寫第一個網(wǎng)頁：HelloWorldV1.0：不用任何標(biāo)記符，直接存成.html文件，在瀏覽器中預(yù)覽5、創(chuàng)建網(wǎng)頁（HelloWorld）V2.0：用p標(biāo)記符V3.0：用h1標(biāo)記符V4.0：結(jié)構(gòu)完整的HelloWorld，講解網(wǎng)頁的結(jié)構(gòu)，講解標(biāo)記符、屬性的概念和用法V5.0：加入CSS，提出響應(yīng)式的概念。<!DOCTYPEhtml><html><head><title>炫酷HelloWorld</title><style>body{margin:0;padding:0;height:100vh;background:linear-gradient(135deg,#ff9a9e,#fad0c4);text-align:center;/*文字水平居中*/font-family:Arial,sans-serif;}h1{position:relative;/*相對定位*/top:50%;/*從上到下50%的位置*/transform:translateY(-50%);/*向上偏移自身高度的50%*/font-size:48px;color:white;text-shadow:2px2px4pxrgba(0,0,0,0.3);animation:float3sease-in-outinfinite;}@keyframesfloat{0%,100%{transform:translateY(-50%);/*保持居中*/}50%{transform:translateY(-60%);/*向上浮動*/}}</style></head><body><h1>HelloWorld!</h1></body></html>V6.0：加入JS，提出Web標(biāo)準(zhǔn)的概念（教材p5）<!DOCTYPEhtml><html><head><title>炫酷HelloWorld</title><style>body{margin:0;padding:0;height:100vh;background:linear-gradient(135deg,#ff9a9e,#fad0c4);text-align:center;/*文字水平居中*/font-family:Arial,sans-serif;cursor:pointer;/*鼠標(biāo)指針變?yōu)槭中?/}h1{position:relative;/*相對定位*/top:50%;/*從上到下50%的位置*/transform:translateY(-50%);/*向上偏移自身高度的50%*/font-size:48px;color:white;text-shadow:2px2px4pxrgba(0,0,0,0.3);animation:float3sease-in-outinfinite;display:none;/*默認(rèn)隱藏*/}@keyframesfloat{0%,100%{transform:translateY(-50%);/*保持居中*/}50%{transform:translateY(-60%);/*向上浮動*/}}</style></head><body><h1id="helloText">HelloWorld!</h1><script>//獲取文本元素consthelloText=document.getElementById('helloText');//監(jiān)聽整個body的點(diǎn)擊事件document.body.addEventListener('click',function(){//切換文本的顯示狀態(tài)if(helloText.style.display==="none"){helloText.style.display="block";//顯示}else{helloText.style.display="none";//隱藏}});</script></body></html>6、綜合實(shí)例與作業(yè)（1）綜合實(shí)例教材1

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論