網(wǎng)頁設(shè)計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例3新聞列表頁面

教案3案例3新聞列表網(wǎng)頁計劃學(xué)時2學(xué)時知識目標(biāo)掌握無序列表標(biāo)記的使用方法；掌握有序列表標(biāo)記的使用方法；掌握列表嵌套標(biāo)記的使用方法；掌握自定義列表標(biāo)記的使用方法。能力目標(biāo)會使用列表標(biāo)記構(gòu)建網(wǎng)頁內(nèi)容；能說出各種列表標(biāo)記的區(qū)別。素質(zhì)目標(biāo)引導(dǎo)學(xué)生關(guān)心時事、與時俱進(jìn)，做科技時代的先行者在代碼編寫中養(yǎng)成良好的職業(yè)規(guī)范。教學(xué)重點(diǎn)無序列表標(biāo)記（ul/li）；列表標(biāo)記的嵌套。教學(xué)難點(diǎn)自定義列表標(biāo)記；列表標(biāo)記的嵌套。教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建新聞列表網(wǎng)頁，網(wǎng)頁中有標(biāo)題、水平線和列表項等內(nèi)容，列表項采用無序列表來呈現(xiàn)，網(wǎng)頁瀏覽效果如圖3-1所示。圖3-1新聞列表網(wǎng)頁二、案例分析與實(shí)現(xiàn)1．案例分析圖3-1所示的網(wǎng)頁內(nèi)容由3部分構(gòu)成，分別為標(biāo)題、水平線和新聞條目。標(biāo)題使用<h2>標(biāo)記定義，水平線使用<hr>標(biāo)記定義，新聞條目使用無序列表標(biāo)記<ul>和<li>定義。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時（相關(guān)知識點(diǎn)）一、無序列表學(xué)生已觀看微課，略講<ul>

<li>列表項1</li>

<li>列表項2</li>

<li>列表項3</li>

......</ul>例3-1：學(xué)生同步操作，做學(xué)教一體二、有序列表略講<ol>

<li>列表項1</li>

<li>列表項2</li>

<li>列表項3</li>

......</ol>例3-2：學(xué)生同步操作，做學(xué)教一體三、列表嵌套無序列表或有序列表的列表項中還可以包含有序列表或無序列表。例3-3：學(xué)生同步操作，做學(xué)教一體四、自定義列表<dl>

<dt>條目1</dt>

<dd>數(shù)據(jù)</dd>

<dd>數(shù)據(jù)</dd>

……

<dt>條目2</dt>

<dd>數(shù)據(jù)</dd>

<dd>數(shù)據(jù)</dd>

…………</dl>例3-4：學(xué)生同步操作，做學(xué)教一體五、小結(jié)掌握無序列表（ul）、有序列表（ol）、列表嵌套（ul|ol）和自定義列表(dl|dt|dd)的語法格式及使用方法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)。作業(yè)2：掃碼觀看案例4中的微課，學(xué)習(xí)H