《web前端技術(shù)》(趙敏)003-0教案 第3課 文本 圖像_第1頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第3課 文本 圖像_第2頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第3課 文本 圖像_第3頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第3課 文本 圖像_第4頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第3課 文本 圖像_第5頁(yè)
已閱讀5頁(yè)，還剩1頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

PAGE1PAGE1PAGE2PAGE2

課題第3課文本、圖像課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握標(biāo)題和段落標(biāo)簽的使用方法（2）熟悉文本格式化標(biāo)簽的使用方法和特殊字符的表示方法（3）了解網(wǎng)頁(yè)中圖像格式和路徑的表示方法，掌握?qǐng)D像、圖標(biāo)和流標(biāo)簽的使用方法素質(zhì)目標(biāo)：（1）強(qiáng)化實(shí)踐練習(xí)，提升專(zhuān)業(yè)技能，增強(qiáng)實(shí)戰(zhàn)體驗(yàn)感（2）熱愛(ài)中國(guó)傳統(tǒng)文化，增強(qiáng)民族意識(shí)和愛(ài)國(guó)主義情感教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：標(biāo)題和段落標(biāo)簽的使用方法、文本格式化標(biāo)簽的使用方法教學(xué)難點(diǎn)：圖像、圖標(biāo)和流標(biāo)簽的使用方法教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（28min）→課堂練習(xí)（10min）第2節(jié)課：→傳授新知（20min）→實(shí)戰(zhàn)演練（10min）→實(shí)戰(zhàn)拓展（8min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP，完成課前任務(wù)預(yù)習(xí)了解文本、圖像、多媒體和列表的設(shè)置方法，每個(gè)隊(duì)伍先準(zhǔn)備好自己網(wǎng)站的文本、圖像【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，讓學(xué)生提前預(yù)習(xí)知識(shí)點(diǎn)，了解文本、圖像、多媒體和列表的設(shè)置方法考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（5min）【教師】提出問(wèn)題在上節(jié)課我們學(xué)習(xí)了HTML5的基本語(yǔ)法，要做好一個(gè)網(wǎng)站，僅僅學(xué)好代碼是不行的，我們還有設(shè)計(jì)好看的頁(yè)面，融入豐富的元素，同學(xué)們知道網(wǎng)頁(yè)上有哪些元素么？我們?cè)撚檬裁捶绞桨阉麄兣虐娴骄W(wǎng)頁(yè)上呢?【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（28min）3.1文本3.1.1標(biāo)題和段落1．標(biāo)題【教師】講解標(biāo)題的概念，并通過(guò)例子演示效果在HTML5中，可用<h1>～<h6>標(biāo)簽分別標(biāo)記6個(gè)級(jí)別的標(biāo)題。其中，<h1>標(biāo)簽標(biāo)記的標(biāo)題級(jí)別最高，<h6>標(biāo)簽標(biāo)記的標(biāo)題級(jí)別最低。……（詳見(jiàn)教材）【例3-1】標(biāo)題標(biāo)簽的應(yīng)用。創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，頁(yè)面效果如圖所示?！ㄔ斠?jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀看效果段落【教師】講解段落的概念，并通過(guò)例子演示效果網(wǎng)頁(yè)的正文部分一般使用段落文本顯示，在HTML5中使用<p>標(biāo)簽標(biāo)記段落文本。【課堂拓展】?【教師】提出問(wèn)題在HTML5文檔中，還有什么標(biāo)簽?zāi)軜?biāo)記段落文本？?【學(xué)生】討論、回答?【教師】講解拓展知識(shí)使用其他標(biāo)簽（如<div>或<br/>等標(biāo)簽）也能實(shí)現(xiàn)段落文本的顯示效果，但是不建議使用，因?yàn)檫@樣不符合語(yǔ)義，可能會(huì)妨礙搜索引擎的識(shí)別。?【學(xué)生】聆聽(tīng)、記錄、理解【例3-2】段落標(biāo)簽的應(yīng)用。創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，……（詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀看效果【課堂拓展】《七絕·改詩(shī)贈(zèng)父親》是毛澤東于1910年秋天離開(kāi)家鄉(xiāng)奔向外面世界前所作的詩(shī)。毛澤東用此詩(shī)表達(dá)了自己一心求學(xué)、胸懷四方的遠(yuǎn)大抱負(fù)，以及對(duì)父親的深厚感情。3.1.2文本格式化標(biāo)簽【教師】講解文本格式化標(biāo)簽，并通過(guò)表格和例子等輔助理解在網(wǎng)頁(yè)中，除了為文本設(shè)置標(biāo)題和段落外，有時(shí)還需要為文本設(shè)置粗體、斜體、下畫(huà)線等效果，因此，HTML5專(zhuān)門(mén)提供了一些文本格式化標(biāo)簽，用于實(shí)現(xiàn)文本在網(wǎng)頁(yè)中的特殊顯示。常見(jiàn)的文本格式化標(biāo)簽有……（詳見(jiàn)教材）1.強(qiáng)調(diào)……（詳見(jiàn)教材）2．上下標(biāo)……（詳見(jiàn)教材）3．插入和刪除的文本……（詳見(jiàn)教材）4．縮寫(xiě)詞……（詳見(jiàn)教材）5．文本換行和水平線……（詳見(jiàn)教材）6．其他文本格式化標(biāo)簽……（詳見(jiàn)教材）【例3-3】文本格式化標(biāo)簽的應(yīng)用。創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，……（詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀看效果3.1.3特殊字符【教師】展示表格“常用特殊字符的代碼”講解特殊字符，并通過(guò)例子演示效果在網(wǎng)頁(yè)中編輯文本時(shí)，可能會(huì)遇到無(wú)法直接輸入的字符，如版權(quán)符號(hào)“?”、注冊(cè)商標(biāo)符號(hào)“?”等。HTML5為這些特殊字符準(zhǔn)備了專(zhuān)門(mén)的代碼，……（詳見(jiàn)教材）【例3-4】使用代碼輸出特殊字符。創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，……（詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀看效果通過(guò)教師的講解和案例演示，使學(xué)生了解標(biāo)題和段落標(biāo)簽的使用方法、文本格式化標(biāo)簽的使用方法和特殊字符的表示方法課堂練習(xí)（10min）【教師】要求每個(gè)隊(duì)伍根據(jù)【例3-1】【例3-2】【例3-3】【例3-4】,發(fā)揮自己的創(chuàng)意，將準(zhǔn)備好的文字，利用標(biāo)題、段落、文本格式化、特殊等標(biāo)簽，對(duì)文本格式進(jìn)行排版，有疑問(wèn)的可互相討論或咨詢(xún)教師【學(xué)生】創(chuàng)作項(xiàng)目，討論通過(guò)模仿例子動(dòng)制作自己的項(xiàng)目，使學(xué)生鞏固所學(xué)知識(shí)，掌握不同選擇器的使用方法，鍛煉動(dòng)手操作能力和創(chuàng)新能力第二節(jié)課問(wèn)題導(dǎo)入（2min）【教師】通過(guò)展示一個(gè)純文本網(wǎng)頁(yè)，和一個(gè)有圖像的網(wǎng)頁(yè)，提問(wèn)，引入新課同學(xué)們看下這兩個(gè)網(wǎng)頁(yè)，效果哪個(gè)好些呢？怎么往網(wǎng)頁(yè)里插入圖像？【學(xué)生】觀看效果、思考、回答通過(guò)問(wèn)題導(dǎo)入的方法，引發(fā)學(xué)生思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）3.2圖像3.2.1網(wǎng)頁(yè)中的圖像格式【教師】提問(wèn)學(xué)生，并講解網(wǎng)頁(yè)中的圖像格式提問(wèn)：圖片都有哪些格式？網(wǎng)頁(yè)中常用的圖片格式有哪些？講解：市場(chǎng)上有多種不同格式的圖像，不同瀏覽器對(duì)不同格式的圖像有不同的識(shí)別能力，并不是所有的圖像都能用于網(wǎng)頁(yè)中。目前，網(wǎng)頁(yè)中常用的圖像格式有JPEG、GIF和PNG。1．JPEGJPEG（jointphotographicexpertsgroup）即聯(lián)合圖像專(zhuān)家組，……（詳見(jiàn)教材）【課堂拓展】JPEG格式的圖像在壓縮時(shí)會(huì)丟失一些數(shù)據(jù)，所以會(huì)降低最終文件的質(zhì)量，但是由于數(shù)據(jù)丟失的很少，所以在視覺(jué)上圖像質(zhì)量并不會(huì)受到太大的影響。2．GIFGIF（graphicsinterchangeformat）即圖形交換格式，……（詳見(jiàn)教材）3．PNGPNG（portablenetworkgraphics）即便攜式網(wǎng)絡(luò)圖形，……（詳見(jiàn)教材）【學(xué)生】回答、聆聽(tīng)、記錄、理解3.2.2相對(duì)路徑和絕對(duì)路徑【教師】找出兩段不同的代碼，一段為相對(duì)路徑引用，一段為絕對(duì)路徑引用，提問(wèn)學(xué)生，并講解引用圖片的相對(duì)路徑和絕對(duì)路徑提問(wèn)：大家看下這兩段代碼，為什么一個(gè)帶有D:/，一個(gè)沒(méi)有呢？1．相對(duì)路徑相對(duì)路徑是指素材文件相對(duì)于當(dāng)前文件的地址，通常以網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述素材文件的位置。一般有以下3種情況?！ㄔ斠?jiàn)教材）【課堂拓展】如果要引用的素材文件位于網(wǎng)頁(yè)文件的上兩級(jí)文件夾中，則需要先輸入“../../”，再輸入文件夾名，最后輸入素材文件名，如“../../img/img1.png”；依此類(lèi)推。2．絕對(duì)路徑絕對(duì)路徑是指帶有盤(pán)符或網(wǎng)絡(luò)協(xié)議的完整路徑，下面介紹使用方法。（1）帶有盤(pán)符的完整路徑，……（詳見(jiàn)教材）【學(xué)生】回答、聆聽(tīng)、記錄、理解3.2.3圖像和圖標(biāo)標(biāo)簽【教師】講解圖像和圖標(biāo)標(biāo)簽的具體使用方法，并演示例子輔助理解1．添加圖像在HTML5中，使用<img/>標(biāo)簽標(biāo)記圖像，具體格式為：……（詳見(jiàn)教材）【例3-5】在網(wǎng)頁(yè)中添加圖像（以下提供部分代碼），……（詳見(jiàn)教材）【課堂拓展】在網(wǎng)頁(yè)中添加圖像時(shí)，一定要注意圖像路徑的正確性……（詳見(jiàn)教材）<img/>標(biāo)簽還有一些其他屬性……（詳見(jiàn)教材）【課堂拓展】《清明上河圖》描繪了北宋時(shí)期都城汴京東角子門(mén)內(nèi)外和汴河兩岸的自然風(fēng)光……（詳見(jiàn)教材）2．添加圖標(biāo)此處的圖標(biāo)是指網(wǎng)站的Logo，又稱(chēng)網(wǎng)站圖標(biāo)?！ㄔ斠?jiàn)教材）【例3-6】為網(wǎng)站添加圖標(biāo)（以下提供部分代碼），……（詳見(jiàn)教材）【課堂拓展】圖標(biāo)一般使用擴(kuò)展名為“.ico”的圖像文件，但在使用<link/>標(biāo)簽添加圖標(biāo)時(shí)，也可以使用其他格式的圖像，如JPEG、PNG等。【學(xué)生】觀看效果、聆聽(tīng)、記錄、理解3.2.4流標(biāo)簽【教師】講解流標(biāo)簽的具體使用方法，并演示例子輔助理解在HTML5中，新增了流標(biāo)簽<figure>，它表示頁(yè)面中一塊獨(dú)立的內(nèi)容，如圖像、圖表、代碼片段等。其中的內(nèi)容應(yīng)與網(wǎng)頁(yè)主體內(nèi)容相關(guān)但又獨(dú)立于上下文，在頁(yè)面中顯示為具有左右縮進(jìn)的內(nèi)容塊。……（詳見(jiàn)教材）【例3-7】在例3-6的頁(yè)面中應(yīng)用流標(biāo)簽（以下提供部分代碼）……（詳見(jiàn)教材）【學(xué)生】觀看效果、聆聽(tīng)、記錄、理解通過(guò)講解，和課堂互動(dòng)，使學(xué)生掌握?qǐng)D像、圖標(biāo)和流標(biāo)簽的使用方法實(shí)戰(zhàn)演練（10min）【教師】要求學(xué)生制作“金企鵝教育”主頁(yè)“精品圖書(shū)”模塊，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁(yè)“精品圖書(shū)”模塊“（詳見(jiàn)教材）圖書(shū)研發(fā)是金企鵝教育公司的核心業(yè)務(wù)，因此該公司在其網(wǎng)站主頁(yè)專(zhuān)門(mén)設(shè)置了“精品圖書(shū)”模塊，該模塊最終的頁(yè)面效果……（詳見(jiàn)教材）【課堂拓展】為更好地展示頁(yè)面效果，本書(shū)在HTML篇實(shí)戰(zhàn)演練的HTML文檔中鏈接了CSS樣式表文件和JavaScript文件，有關(guān)這兩部分的內(nèi)容將在后面的篇章中詳細(xì)講解。步驟1打開(kāi)HBuilderX，選擇“文件”→“導(dǎo)入”→“從本地目錄導(dǎo)入”菜單項(xiàng)，……（詳見(jiàn)教材）步驟2添加“精品圖書(shū)”標(biāo)題。在“index.html”文檔中表示精品圖書(shū)區(qū)塊的<sectionid="main_book">…</section>……（詳見(jiàn)教材）步驟3展示圖書(shū)。在標(biāo)簽<divclass="book_showfl">…</div>中添加以下代碼，……（詳見(jiàn)教材）【課堂拓展】若需要展示多本圖書(shū)，可以復(fù)制并粘貼<divclass="book_showfl">…</div>……（詳見(jiàn)教材）步驟4鏈接CSS樣式表文件。在標(biāo)簽<head>…</head>中添加以下代碼，鏈接CSS樣式表文件“index.css”，……（詳見(jiàn)教材）【教師】要求學(xué)生制作“金企鵝教育”主頁(yè)“精品圖書(shū)”模塊，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁(yè)“精品圖書(shū)”模塊“（詳見(jiàn)教材）制作項(xiàng)目，觀看微課通過(guò)實(shí)操練習(xí)制作“金企鵝教育”主頁(yè)“精品圖書(shū)”模塊，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力實(shí)戰(zhàn)拓展（8min）【教師】每個(gè)隊(duì)伍制作自己項(xiàng)目的主頁(yè)，要求包括文本和圖片，可自行分配任務(wù)和討論，遇到疑問(wèn)可咨詢(xún)老師制作項(xiàng)目，討論通過(guò)團(tuán)隊(duì)任務(wù)，拓展學(xué)生所學(xué)知識(shí)，培養(yǎng)學(xué)生創(chuàng)新能力和團(tuán)協(xié)作能力課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了HTML5中文本、圖像、多媒體和列表的相關(guān)知識(shí)。通過(guò)本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）文本是網(wǎng)頁(yè)中最基本的元素。在HTML5中，使用<h1>～<h6>標(biāo)簽分別標(biāo)記6個(gè)級(jí)別的標(biāo)題；使用<p>標(biāo)簽標(biāo)記段落文本；使用文本格式化標(biāo)簽實(shí)現(xiàn)文本在網(wǎng)頁(yè)中的特殊顯示。（2）在HTML5中，使用<img/>標(biāo)簽標(biāo)記圖像；使用<link/>標(biāo)簽添加圖標(biāo)；使用<figure>標(biāo)簽表示頁(yè)面中一塊獨(dú)立的內(nèi)容，如圖像、圖表、代碼片

溫馨提示

  • 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)論