任務(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ù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

提交評論