《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表_第1頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表_第2頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表_第3頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表_第4頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第課使用HTML5添加列表的第課使用HTML5添加列表的基基本本PAGE873173217321使用HTML5添加列表第課PAGE973212使用HTML5添加列表第73212使用HTML5添加列表第課PAGE1

課題使用HTML5添加列表課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）掌握無序列表、有序列表及自定義列表標(biāo)簽的使用方法（2）學(xué)習(xí)列表嵌套的方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生敢于嘗試的勇氣（2）使學(xué)生學(xué)會多角度看待問題，了解事物的多面性教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：學(xué)習(xí)無序列表、有序列表及自定義列表的標(biāo)簽教學(xué)難點(diǎn)：在HTML5網(wǎng)頁中操作列表嵌套教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計第1節(jié)課：知識講解（24min）第2節(jié)課：導(dǎo)入新知（4min）知識講解（19min）

課堂練習(xí)（18min）

課堂小結(jié)（2min）作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】提出問題，引出新知識點(diǎn)如今，隨著技術(shù)的不斷發(fā)展，數(shù)據(jù)量變得非常的復(fù)雜，單個模塊已經(jīng)無法滿足其需求，所以引入新的數(shù)據(jù)結(jié)構(gòu)：列表試問：列表的定義是什么？列表又分為哪幾種類型？HTML5中的列表與之前學(xué)習(xí)的列表有什么不同嗎？同學(xué)們使用過列表嗎【學(xué)生】思考、發(fā)言【教師】總結(jié)發(fā)言列表是一種復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在HTML5中分為有序、無序和自定義三大類，跟之前編程語言中的列表有異曲同工之處，列表在網(wǎng)頁中應(yīng)用廣泛，除文字列表、圖文列表外，導(dǎo)航條、菜單欄等常見模塊一般也是用列表實現(xiàn)的通過提問的方式，讓學(xué)生了解HTML5中列表的概念，激發(fā)學(xué)生的求知欲知識講解

（24min）【教師】講述無序列表無序列表無序列表會將列表項的內(nèi)容依次排列，并在每一個列表項前添加項目符號（默認(rèn)為實心圓）。無序列表的列表項之間沒有先后、主次、輕重之分。在HTML5中，使用<ul>標(biāo)簽標(biāo)記無序列表，它還有一個用于標(biāo)記列表項的子標(biāo)簽<li>，一個<ul>標(biāo)簽中可以包含一個或多個<li>標(biāo)簽。具體格式為：<ul> <li>…</li> …… <li>…</li></ul>【學(xué)生】聆聽、思考【教師】演示【例4-1】的操作流程，實現(xiàn)圖4-1的效果使用無序列表制作商品分類欄（部分代碼），頁面效果如圖4-1所示<p>商品分類</p><ul> <li>家用電器</li> <li>手機(jī)/數(shù)碼</li> <li>家具/家居/家裝/廚具</li> <li>男裝/女裝/童裝</li> <li>美妝/清潔</li></ul>圖4-1商品分類欄的頁面效果【學(xué)生】模仿參考代碼，編寫程序【教師】講述有序列表有序列表有序列表中的列表項是有先后順序的，列表項前的項目符號為數(shù)字序號，默認(rèn)為阿拉伯?dāng)?shù)字。在HTML5中，使用<ol>標(biāo)簽標(biāo)記有序列表，使用子標(biāo)簽<li>標(biāo)記列表項，具體格式為：<ol> <li>…</li> …… <li>…</li></ol>對于強(qiáng)調(diào)列表項排列順序的內(nèi)容，如排行榜、新聞列表等，可以使用有序列表結(jié)構(gòu)。列表項的排序方式可使用<ol>標(biāo)簽的屬性設(shè)置，常用屬性及其含義如下（1）reversed。表示列表的順序為降序，屬性值為reversed。（2）start。表示列表排序的起始值，屬性值為數(shù)值。（3）type。表示列表序號的類型，屬性值有1、A、a、Ⅰ、ⅰ。【學(xué)生】聆聽、思考【教師】演示【例4-2】的操作流程，實現(xiàn)圖4-2的效果使用有序列表制作電影票房排行榜（部分代碼），頁面效果如圖4-2所示。<p>2010年內(nèi)地電影票房總排行榜</p><ol> <li>阿凡達(dá)——13.28億</li> <li>唐山大地震——6.73億</li> <li>讓子彈飛——6.61億</li> <li>非誠勿擾2——4.81億</li> <li>盜夢空間——4.6億</li></ol>圖4-2電影票房排行榜的頁面效果【教師】演示【例4-3】的操作流程，實現(xiàn)圖4-3的效果更改有序列表的排序方式（部分代碼），頁面效果如圖4-3所示。<p>2008年北京奧運(yùn)會乒乓球男子單打前三名：</p><olreversed="reversed"start="3"type="i"> <li>季軍：王勵勤</li> <li>亞軍：王皓</li> <li>冠軍：馬琳</li></ol>圖4-3更改有序列表排序方式的頁面效果<li>標(biāo)簽也可以設(shè)置屬性value和type。其中，value表示列表項的序號，屬性值為數(shù)值。當(dāng)使用value屬性修改某個列表項的編號后，后續(xù)的列表項會重新編號。因此，可以使用value屬性指定兩個編號相同的列表項（如有必要）。【學(xué)生】聆聽、思考、記錄通過講解知識點(diǎn)，讓學(xué)生進(jìn)一步了解HTML5中的有序列表和無序列表，為后面的知識打下基礎(chǔ)課堂練習(xí)

（15min）【教師】組織趣味游戲【學(xué)生】參與課堂練習(xí)【教師】公布小組成績通過課堂練習(xí)，加強(qiáng)學(xué)生對HTML5中無序列表和有序列表的理解第二節(jié)課導(dǎo)入新知

（4min）【教師】復(fù)習(xí)上一節(jié)課內(nèi)容，引出新的知識點(diǎn)上一節(jié)課的內(nèi)容中，學(xué)習(xí)了無序列表和有序列表，但是有時候復(fù)雜的結(jié)構(gòu)體以及自身特殊的需求，需要我們自定義列表，甚至對列表進(jìn)行嵌套操作，這就對列表的操作提出了更高的要求【學(xué)生】聆聽、思考、理解、記憶通過復(fù)習(xí)上一節(jié)課的內(nèi)容，引起學(xué)生的學(xué)習(xí)興趣，激發(fā)學(xué)生對列表操作的思考知識講解

（19min）【教師】講述自定義列表自定義列表是一種特殊的列表結(jié)構(gòu)，它包含列表標(biāo)題與列表內(nèi)容，列表內(nèi)容是對列表標(biāo)題的解釋說明。在HTML5中，使用<dl>標(biāo)簽標(biāo)記自定義列表，它包含<dt>與<dd>兩個子標(biāo)簽，<dt>標(biāo)簽標(biāo)記列表標(biāo)題，<dd>標(biāo)簽標(biāo)記列表內(nèi)容，具體格式為<dl> <dt>列表標(biāo)題1</dt> <dd>列表內(nèi)容1.1</dd> <dd>列表內(nèi)容1.2</dd> <dt>列表標(biāo)題2</dt> <dd>列表內(nèi)容2</dd></dl>其中，一個<dl>標(biāo)簽可以包含一個或多個<dt>標(biāo)簽，一個<dt>標(biāo)簽可以包含一個或多個<dd>標(biāo)簽。一個<dt>標(biāo)簽及其下的所有<dd>標(biāo)簽為一個列表項，列表項沒有項目符號，它們之間也不強(qiáng)調(diào)排列順序?！窘處煛垦菔尽纠?-4】的操作流程，實現(xiàn)圖4-4的效果自定義列表的應(yīng)用（部分代碼），頁面效果如圖4-4所示。<p>HTML5列表：</p><dl> <dt>無序列表</dt> <dd><ul>標(biāo)簽+<li>標(biāo)簽</dd> <dt>有序列表</dt> <dd><ol>標(biāo)簽+<li>標(biāo)簽</dd> <dt>自定義列表</dt> <dd><dl>標(biāo)簽+<dt>標(biāo)簽+<dd>標(biāo)簽</dd></dl>圖4-4自定義列表的頁面效果【學(xué)生】聆聽、思考【教師】講述使用嵌套列表的方法嵌套列表就是在一個列表的列表項中插入另一個列表。嵌套無序列表可以制作帶有子菜單的導(dǎo)航條，嵌套有序列表可以制作分級大綱。嵌套無序列表時，瀏覽器會根據(jù)嵌套的層級修改列表項前面的修飾符?！窘處煛垦菔尽纠?-6】的操作流程，實現(xiàn)圖4-6的效果制作測試題內(nèi)容，頁面效果如圖4-6所示。圖4-6嵌套有序列表的頁面效果創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，嵌套有序列表制作測試題內(nèi)容。<ol> <li>關(guān)于CSS3，下列說法錯誤的是（）。 <oltype="A"> <li>CSS3語句由選擇器和聲明組成</li> <li>CSS3樣式不能寫在HTML5文檔中</li> <li>行內(nèi)樣式只對其所在的標(biāo)簽起作用</li> <li>繼承的樣式優(yōu)先級最低</li> </ol> </li></ol>【學(xué)生】聆聽、思考【教師】詢問學(xué)生，是否有不理解的地方【學(xué)生】回顧內(nèi)容，提出問題通過講解知識點(diǎn)，讓學(xué)生了解HTML5中自定義列表和嵌套列表操作課堂練習(xí)

（18min）【教師】布置課堂練習(xí)制作“網(wǎng)上書店”頁面的導(dǎo)航條本任務(wù)實施通過制作“網(wǎng)上書店”頁面的導(dǎo)航條，練習(xí)無序列表在實際網(wǎng)頁制作中的應(yīng)用【教師】多媒體播放操作流程在DW中打開本書配套素材“項目4”→“任務(wù)4.1”→“bsonline”→“main.html”文檔，其中已經(jīng)創(chuàng)建了導(dǎo)航條的容器元素（nav元素）。將其頁面標(biāo)題設(shè)置為“網(wǎng)上書店——火熱開售【海量圖書，歡迎選購】”。在nav元素中的<divclass="menu"></div>標(biāo)簽中輸入以下代碼，添加無序列表，頁面效果如圖4-8所示。<ul> <liid="nav_n"><em>網(wǎng)上書店</em></li> <li>文學(xué)</li> <li>哲學(xué)</li> <li>歷史</li> <li>小說</li> <li>少兒</li> <li>教輔</li> <li>網(wǎng)絡(luò)</li> <li>青春</li> <li>科技</li> <li>藝術(shù)</li> <li>管理</li></ul>圖4-8添加無序列表后的頁面效果本例使用鏈接樣式表添加樣式。在頭部標(biāo)簽中輸入以下代碼，鏈接到樣式表文件“main.css”。<linkhref="main.css"rel="stylesheet"type="text/css"/>【學(xué)生】觀看多媒體，完成課堂練習(xí)【教師】巡視課堂，督促學(xué)生完成課堂練習(xí)【學(xué)生】對自己不了解的地方，對老師提出問題【教師】回答學(xué)生提問【教師】公布參考案例【教師】總結(jié)課堂內(nèi)容利用練習(xí)法，加強(qiáng)學(xué)生對HTML5中自定義列表和嵌套列表操作的熟練程度，強(qiáng)化對列表操作方法的使用課

溫馨提示

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

最新文檔

評論

0/150

提交評論