《HTML5 CSS3項(xiàng)目開(kāi)發(fā)案例教程》（袁明蘭）770-5教案 第7課 使用HTML5添加列表

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

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

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

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

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

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

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

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

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

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

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