《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ù)免費閱讀

下載本文檔

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

文檔簡介

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

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

課堂練習（18min）

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論