任務(wù)2搭建簡單學(xué)院網(wǎng)站_第1頁
任務(wù)2搭建簡單學(xué)院網(wǎng)站_第2頁
任務(wù)2搭建簡單學(xué)院網(wǎng)站_第3頁
任務(wù)2搭建簡單學(xué)院網(wǎng)站_第4頁
任務(wù)2搭建簡單學(xué)院網(wǎng)站_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

教案名稱任務(wù)2搭建簡單學(xué)院網(wǎng)站計劃學(xué)時12學(xué)時知識目標(biāo)掌握HTML5的基本結(jié)構(gòu)熟悉常用的HTML文本標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記、圖像標(biāo)記能力目標(biāo)會熟練使用HTML標(biāo)記創(chuàng)建簡單網(wǎng)頁素質(zhì)目標(biāo)在編寫代碼中養(yǎng)成精益求精的工匠精神通過案例融入價值觀塑造教學(xué)重點HTML5文檔基本結(jié)構(gòu)HTML文本標(biāo)記、列表標(biāo)記、超鏈接標(biāo)記、圖像標(biāo)記教學(xué)難點使用HTML標(biāo)記創(chuàng)建簡單網(wǎng)頁教學(xué)模式任務(wù)驅(qū)動教學(xué)法線上+線下混合教學(xué)模式教學(xué)活動及主要環(huán)節(jié)思政元素切入點第1、2學(xué)時(HTML文本標(biāo)記)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）使用HBuilder新建HTML5默認(rèn)文檔時，HTML5文檔的基本格式包括哪些標(biāo)記？每個標(biāo)記的作用是什么？<!doctypehtml><html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title></head><body></body></html>=2\*ROMANII.重難點內(nèi)容講授：一、HTML文本標(biāo)記（40分鐘）1.標(biāo)題標(biāo)記（實現(xiàn)example02.html）段落標(biāo)記（實現(xiàn)example03.html）水平線標(biāo)記（實現(xiàn)example04.html）單標(biāo)記換行標(biāo)記重點強調(diào)單標(biāo)記（實現(xiàn)example05.html）字體樣式標(biāo)記（實現(xiàn)example06.html）特殊字符（實現(xiàn)example07.html）（教師多媒體演示、學(xué)生一起操作，實現(xiàn)教學(xué)做一體化）二、【任務(wù)實現(xiàn)】學(xué)院簡介頁面制作（15分鐘）效果圖如下：代碼如下：三、練習(xí)：制作自己的個人介紹頁面。（20分鐘）教師巡視，答疑=3\*ROMANIII.課堂小結(jié)：（5分鐘）本次課介紹了HTML文本標(biāo)記及利用HTML文本標(biāo)記創(chuàng)建簡單的學(xué)院簡介頁面。課后作業(yè)：1.課后實訓(xùn)22.超星學(xué)習(xí)通平臺作業(yè)第3、4學(xué)時（HTML列表標(biāo)記）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）問題：為什么要學(xué)習(xí)各種列表標(biāo)記？各種列表標(biāo)記之間又有什么區(qū)別？=2\*ROMANII.講授重難點內(nèi)容：一、無序列表（10分鐘）對“無序列表”的概念、基本語法格式及常用屬性值進行講解，并列舉網(wǎng)頁中常見的例子進行說明，進行代碼演示。（學(xué)生同步操作，教師巡視，答疑）強調(diào)：定義“無序列表”時需要注意的問題。二、有序列表（10分鐘）對“有序列表”的概念、基本語法格式及常用屬性值進行講解，并列舉網(wǎng)頁中常見的例子進行說明，進行代碼演示。（學(xué)生同步操作，教師巡視，答疑）強調(diào)：定義“有序列表”時需要注意的問題。三、列表的嵌套應(yīng)用（15分鐘）打開瀏覽器，輸入淘寶網(wǎng)址，對“列表嵌套”在網(wǎng)頁中的常見效果進行展示，進行講解。代碼演示嵌套應(yīng)用。強調(diào)：定義“列表嵌套”時需要注意的問題（學(xué)生一起操作，教師巡視，答疑）四、【任務(wù)實現(xiàn)】學(xué)院新聞頁面制作（35分鐘）【實現(xiàn)步驟】1、新建網(wǎng)頁打開HBuilder創(chuàng)建項目，在項目名稱上右擊，選擇“新建”|“html文件”，在“新建html文件”對話框中輸入文件名稱：news.html，單擊“創(chuàng)建”按鈕，創(chuàng)建文件。2、分析頁面效果，該頁面主要由標(biāo)題和列表文字組成。標(biāo)題文字使用<h2>，列表文字使用<ul>，編寫源碼如下。3、保存文件Ctrl+S4、瀏覽網(wǎng)頁Ctrl+R同步練習(xí)：使用列表標(biāo)記列出你的家鄉(xiāng)特產(chǎn)。=3\*ROMANIII．課堂小結(jié)：（10分鐘）掌握有序列表、無序列表、列表嵌套以及自定義列表標(biāo)記的使用，最常用的是無序列表和無序列表嵌套。課后作業(yè)：超星學(xué)習(xí)通平臺作業(yè)。預(yù)習(xí)：HTML超鏈接標(biāo)簽、圖像標(biāo)簽第5、6學(xué)時（創(chuàng)建超鏈接、錨點鏈接）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.導(dǎo)入新課：（10分鐘）創(chuàng)建超鏈接的學(xué)習(xí)中，你遇到了哪些問題？如何解決的？=2\*ROMANII.重難點內(nèi)容講授：一、超鏈接標(biāo)簽（45分鐘）1、超鏈接標(biāo)簽的語法格式：<ahref="目標(biāo)地址"target="目標(biāo)窗口"title="提示文字">熱點文字</a>（操作演示講解超鏈接標(biāo)簽的各個屬性，學(xué)生同步練習(xí)）2、超鏈接的幾種形式：頁面間的超鏈接：該鏈接指向當(dāng)前頁面以外的其他頁面，單擊該鏈接將完成頁面之間的跳轉(zhuǎn)。實例講解（學(xué)生同步操作，教師巡視，答疑）錨點鏈接：該鏈接指向頁面內(nèi)的某一個地方，單擊該鏈接可以完成頁面內(nèi)的跳轉(zhuǎn)。（師生互動：列舉網(wǎng)頁瀏覽需求，引入特殊鏈接--錨點鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容）錨點鏈接創(chuàng)建步驟：第一步：定義錨點；第二步：創(chuàng)建指向錨點的鏈接。（針對“錨點鏈接”的作用及創(chuàng)建步驟進行講解，代碼演示說明）（學(xué)生一起操作，教師巡視，答疑）對“創(chuàng)建超鏈接”與“錨點鏈接”進行對比分析，并總結(jié)其注意事項?？真溄樱簡螕粼撴溄訒r不進行任何跳轉(zhuǎn)。<ahref="#">熱點文字</a>二、練習(xí)：完成專業(yè)介紹頁面。（30分鐘）=3\*ROMANIII.課堂小結(jié)：（5分鐘）本次課介紹了超鏈接的語法格式、形式、利用超鏈接實現(xiàn)頁面間、頁面內(nèi)的跳轉(zhuǎn)。課后作業(yè)：超星學(xué)習(xí)通平臺作業(yè)第7、8學(xué)時圖像標(biāo)簽、絕對路徑課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.討論：（10分鐘）在學(xué)習(xí)圖像標(biāo)記的過程中，你遇到了哪些問題？同學(xué)們討論解決方法。=2\*ROMANII.重難點講授：一、圖像標(biāo)簽（20分鐘）1.語法格式：<imgsrc="圖像路徑"alt="替換文本"title="提示文本"width="圖像寬度"height="圖像高度">對“圖像標(biāo)記”及其屬性進行講解，代碼演示說明。（學(xué)生一起操作，教師巡視，答疑）2.絕對路徑和相對路徑通過文件夾的層級關(guān)系對“路徑”進行講解。展示PPT對“絕對路徑”進行講解，并舉例說明。展示PPT對“相對路徑”進行講解，并通過“圖像文件和html文件”的不同位置進行演示。（學(xué)生提問，教師答疑）圖像標(biāo)簽應(yīng)用（15分鐘）學(xué)生同步練習(xí)。三、練習(xí)：制作一個圖文并茂的個人介紹頁面并展示（40分鐘）教師巡視答疑=3\*ROMANIII.課堂小結(jié)：（5分鐘）本次課學(xué)習(xí)了HTML5圖像標(biāo)記和路徑的使用，重點掌握相對路徑的表示方法。課后作業(yè)：1.課后實訓(xùn)22.學(xué)習(xí)通平臺作業(yè)第9~10學(xué)時(任務(wù)實現(xiàn)：創(chuàng)建簡單學(xué)校網(wǎng)站)按照課本2.3任務(wù)實現(xiàn)步驟，創(chuàng)建簡單學(xué)校網(wǎng)站。一、創(chuàng)建項目（1）打開HBuilderX工具，選擇“文件”｜“新建”選項，再選擇“項目”選項，在“新建項目”對話框中輸入項目名稱school，位置選擇一個合適的位置，選擇模板“空項目”，單擊“創(chuàng)建”按鈕。（2）右擊項目名稱school，選擇“新建”|“目錄”選項，創(chuàng)建目錄images，用于存放圖像文件，把本任務(wù)提供的素材中的圖像復(fù)制到該目錄中。二、創(chuàng)建網(wǎng)站各頁面課后作業(yè)：學(xué)習(xí)通平臺作業(yè)第11~12學(xué)時(實訓(xùn)：創(chuàng)建個人介紹網(wǎng)站)創(chuàng)意設(shè)計：創(chuàng)建一個個人網(wǎng)站項目，對自己進行全面介紹，要求如下。（1）包含一個主頁和三個子頁，主頁和子頁可以相互鏈接。（2）在主頁中創(chuàng)建友情鏈接，鏈接到自己喜歡的兩個網(wǎng)站。（3）至少有一個頁面包含無序列表。（4）至少有一個頁面包含錨點鏈接。（5）在每個頁面中合理使用文字、圖像等。課后作業(yè)：學(xué)習(xí)通平臺作業(yè)通過學(xué)習(xí)通平臺拓展閱讀使學(xué)生了解HTML5標(biāo)準(zhǔn)規(guī)范的制定，激發(fā)同學(xué)們科技報國的雄心，增強使命擔(dān)當(dāng)意識。通過編寫HTML5代碼，讓學(xué)生了解代碼書

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論