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

下載本文檔

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

文檔簡(jiǎn)介

模塊一使用HTML5搭建網(wǎng)頁(yè)本模塊使用HTML5實(shí)現(xiàn)4個(gè)案例，在這些案例中重點(diǎn)介紹HTML5文檔的基本結(jié)構(gòu)、常用的文本標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記和圖像標(biāo)記等，幫助讀者熟練運(yùn)用HTML5標(biāo)記構(gòu)建HTML5頁(yè)面。知識(shí)目標(biāo)：掌握使用HbilderX網(wǎng)頁(yè)編輯工具創(chuàng)建簡(jiǎn)單網(wǎng)頁(yè)的步驟；了解IP地址、域名、URL、HTTP、HTTPS、HTML5、WEB標(biāo)準(zhǔn)等相關(guān)概念；掌握HTML5文檔的基本結(jié)構(gòu);掌握常用的文本標(biāo)記的語(yǔ)法格式及使用方法；掌握列表標(biāo)記的語(yǔ)法格式及使用方法；掌握超鏈接標(biāo)記的語(yǔ)法格式及使用方法；掌握?qǐng)D像標(biāo)記的語(yǔ)法格式及使用方法。能力目標(biāo)：能使用網(wǎng)頁(yè)編輯軟件編輯網(wǎng)頁(yè)代碼；會(huì)使用HTML5常用標(biāo)記搭建網(wǎng)頁(yè)結(jié)構(gòu)。素質(zhì)目標(biāo)：養(yǎng)成編寫(xiě)HTML5代碼的正確規(guī)范；培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神。教案1案例1第一個(gè)HTML5網(wǎng)頁(yè)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念熟悉常用的瀏覽器熟悉網(wǎng)頁(yè)設(shè)計(jì)常用的工具軟件掌握使用HBilderX軟件創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)能力目標(biāo)能理解并說(shuō)出網(wǎng)頁(yè)相關(guān)的概念會(huì)使用HBilderX軟件創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)素質(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é)做一體化線(xiàn)上+線(xiàn)下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（課程前導(dǎo)、案例實(shí)現(xiàn)）=1\*ROMANI.導(dǎo)入新課：（5分鐘）1．有無(wú)制作過(guò)網(wǎng)頁(yè)？談?wù)勀銓?duì)網(wǎng)頁(yè)的理解？2．以前學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)課程嗎？=2\*ROMANII.課程前導(dǎo)：（15分鐘）1.為什么學(xué)習(xí)這門(mén)課？該門(mén)課程對(duì)應(yīng)的職業(yè)崗位是網(wǎng)頁(yè)設(shè)計(jì)師(也稱(chēng)為WEB前端開(kāi)發(fā)工程師)。2.這門(mén)課學(xué)什么內(nèi)容？HTML5語(yǔ)言、CSS3樣式、HTML5+CSS3布局網(wǎng)頁(yè)、JavaScript腳本語(yǔ)言、制作小型靜態(tài)網(wǎng)站。3.如何學(xué)好這門(mén)課？線(xiàn)上自主學(xué)習(xí)+線(xiàn)下教師導(dǎo)學(xué)；多實(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分鐘）案例描述創(chuàng)建一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)，在該網(wǎng)頁(yè)顯示“志向和熱愛(ài)是偉大行為的雙翼?！璧隆?，網(wǎng)頁(yè)瀏覽效果如圖1-1所示。圖1-1第一個(gè)HTML5網(wǎng)頁(yè)案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．啟動(dòng)HBuilderX雙界面。2．新建項(xiàng)目項(xiàng)目用來(lái)存儲(chǔ)一個(gè)網(wǎng)站的所有文件，這些文件包括網(wǎng)頁(yè)文件、圖像及音視頻文件、腳本文件、樣式表文件等。從菜單欄中選擇“文件”|“新建”｜“項(xiàng)目”命令。3．在項(xiàng)目中創(chuàng)建網(wǎng)頁(yè)文件在左側(cè)視圖中右擊項(xiàng)目名稱(chēng)，在彈出的快捷菜單中選擇“新建”｜“html文件”命令。4．輸入網(wǎng)頁(yè)代碼在網(wǎng)頁(yè)文件代碼的<title>與</title>之間輸入網(wǎng)頁(yè)的標(biāo)題，在<body>與</body>之間添加網(wǎng)頁(yè)的主體內(nèi)容。5．保存文件在菜單欄中選擇“文件”｜“保存”命令，或按“Ctrl+S”組合鍵，即可保存文件。6．瀏覽網(wǎng)頁(yè)在HBuilderX中單擊工具欄中的“瀏覽器運(yùn)行”按鈕，或按“Ctrl+R”組合鍵，使用谷歌瀏覽器瀏覽網(wǎng)頁(yè)。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、網(wǎng)頁(yè)相關(guān)概念（20分鐘）1．IP地址2．域名3．URL：統(tǒng)一資源定位符4．HTTP與HTTPS：HTTP:超文本傳輸協(xié)議(HyperTextTransferProtocol)，提供一種發(fā)布和接收HTML頁(yè)面的方法。HTTPS：超文本傳輸安全協(xié)議（HyperTextTransferProtocolSecure，）可進(jìn)行身份認(rèn)證的加密傳輸協(xié)議，比HTTP更安全。5．網(wǎng)站、網(wǎng)頁(yè)與主頁(yè)：主頁(yè)通常用index.htm或index.html表示。6．HTML與HTML5:HTML：超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage)。HTML5：是第5代超文本標(biāo)記語(yǔ)言。7.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)。二、常用的網(wǎng)頁(yè)編輯軟件（10分鐘）HBilderX:本課程使用該軟件，國(guó)產(chǎn)軟件，數(shù)字天堂公司產(chǎn)品。VisualStudioCode：簡(jiǎn)稱(chēng)VSCode，微軟公司產(chǎn)品。AdobeDremweaver：擁有可視化編輯界面的編輯器，Adobe公司產(chǎn)品。三、常用的瀏覽器（10分鐘）1．Edge瀏覽器Edge瀏覽器是微軟公司推出的新一代瀏覽器，是IE的替代產(chǎn)品，對(duì)HTML5有很好的支持。2．火狐瀏覽器火狐瀏覽器是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器，由Mozilla基金會(huì)和開(kāi)源開(kāi)發(fā)者一起開(kāi)發(fā)，對(duì)HTML5的支持度也很好。3．Chrome瀏覽器Chrome瀏覽器是由谷歌公司開(kāi)發(fā)的開(kāi)放源代碼的瀏覽器，完全支持HTML5的功能。4．Safari瀏覽器和Opera瀏覽器Safari瀏覽器是蘋(píng)果公司開(kāi)發(fā)的瀏覽器，Opera瀏覽器是Opera軟件公司開(kāi)發(fā)的瀏覽器，這兩款瀏覽器都對(duì)HTML5有很好的支持。提問(wèn)：除了上面的瀏覽器，同學(xué)們還用過(guò)哪些瀏覽器？360瀏覽器、QQ瀏覽器……等。四=2\*ROMAN、小結(jié)（5分鐘）重點(diǎn)理解IP地址、域名、URL、HTTP、HTTPS、HTML、Web標(biāo)準(zhǔn)等概念，會(huì)使用HBuilder軟件創(chuàng)建項(xiàng)目及簡(jiǎn)單的網(wǎng)頁(yè)。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例2中的微課，學(xué)習(xí)HTML5常用文本標(biāo)記隨著互聯(lián)網(wǎng)的飛速發(fā)展，各種智能終端的普及，網(wǎng)頁(yè)設(shè)計(jì)（Web前端開(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)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論