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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

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

最新文檔

評論

0/150

提交評論