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

下載本文檔

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

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論