《網(wǎng)頁設(shè)計與制作（活頁式）》 教案 項目5 列表和超鏈接

《網(wǎng)頁設(shè)計與制作》教學(xué)設(shè)計課程名稱：網(wǎng)頁設(shè)計與制作授課年級：20年級授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項目五列表和超鏈接計劃課時課時內(nèi)容分析一個網(wǎng)站由多個網(wǎng)頁構(gòu)成，每個網(wǎng)頁上都有大量的信息，要想使網(wǎng)頁中的信息排列有序、條理清晰，并且網(wǎng)頁與網(wǎng)頁之間有一定的關(guān)聯(lián)，就需要使用列表和超鏈接。本項目將對列表標(biāo)簽、CSS列表樣式、超鏈接和鏈接偽類進(jìn)行具體講解。教學(xué)目標(biāo)掌握無序、有序及定義列表的使用。掌握超鏈接標(biāo)簽的使用。掌握CSS偽類。重點及措施教學(xué)重點：利用無序、有序及定義列表制作常見的網(wǎng)頁模塊；使用超鏈接定義網(wǎng)頁元素；使用CSS偽類實現(xiàn)超鏈接特效措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點及措施教學(xué)難點：使用CSS偽類實現(xiàn)超鏈接特效措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程任務(wù)5.1列表標(biāo)簽5.1.1無序列表內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁中如何實現(xiàn)無序列表？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：無序列表使用<ul>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽，<li>是列表項。知識點講解講解無序列表（1）教師展示PPT，對無序列表進(jìn)行具體講解。ul是英文unorderedlist的縮寫，翻譯為中文是無序列表。無序列表是一種不分排序的列表，各個列表項之間沒有順序級別之分。無序列表使用<ul>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽，<li>是列表項。定義無序列表的基本語法格式如下：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ul><li>標(biāo)簽嵌套在<ul>標(biāo)簽中，用于描述具體的列表項，<ul>標(biāo)簽中至少應(yīng)包含一個<li>標(biāo)簽。<ul>和<li>標(biāo)簽都擁有type屬性，用于指定列表項目符號，不同type屬性值可以呈現(xiàn)不同的項目符號，無序列表常用的type屬性值及顯示效果如表所示。實例1使用無序列表若不設(shè)置type屬性時，列表項目符號顯示為默認(rèn)的“●”，設(shè)置type屬性后，列表項目符號會按相應(yīng)的樣式顯示。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.1.2有序列表內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁中如何實現(xiàn)有序列表？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：有序列表是一種強(qiáng)調(diào)排列順序的列表，使用<ol>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽。知識點講解講解有序列表（1）教師展示PPT，對有序列表進(jìn)行具體講解。ol是英文orderedlist的縮寫，翻譯為中文是有序列表。有序列表是一種強(qiáng)調(diào)排列順序的列表，使用<ol>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽。例如，網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。定義有序列表的基本語法格式如下：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ol>在上面的語法中，<ol></ol>標(biāo)簽用于定義有序列表，<li></li>標(biāo)簽為具體的列表項，和無序列表類似，每對<ol></ol>標(biāo)簽中也至少應(yīng)包含一對<li></li>標(biāo)簽。在有序列表中，除type屬性之外，還可以為<ol>標(biāo)簽定義start屬性，為<li>標(biāo)簽定義value屬性，它們決定有序列表的項目符號，有序列表相關(guān)的屬性和描述如表所示。有序列表相關(guān)的屬性和描述實例2使用有序列表本例定義了兩個有序列表。其中，第8~12行代碼中的有序列表沒有任何屬性，第13~17行代碼中的有序列表的列表項應(yīng)用了type和value屬性，用于設(shè)置特定的列表項目符號。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.1.3定義列表內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁中如何實現(xiàn)定義列表？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：dl是英文definitionlist短語的縮寫，翻譯為中文是定義列表。定義列表與有序列表、無序列表不同，它包含了三個標(biāo)簽，即<dl><dt><dd>。知識點講解講解定義列表（1）教師展示PPT，對定義列表進(jìn)行具體講解。dl是英文definitionlist短語的縮寫，翻譯為中文是定義列表。定義列表與有序列表、無序列表不同，它包含了三個標(biāo)簽，即<dl><dt><dd>。定義列表的基本語法格式如下：<dl><dt>名詞1</dt><dd>是名詞1的描述信息1</dd><dd>是名詞1的描述信息2</dd>...<dt>名詞2</dt><dd>是名詞2的描述信息1</dd><dd>是名詞2描述信息2</dd>...</dl>在上面的語法中，<dl>標(biāo)簽用于指定定義列表，<dt>標(biāo)簽和<dd>標(biāo)簽并列嵌套于<dl>標(biāo)簽中。其中，<dt>標(biāo)簽用于指定術(shù)語名詞，<dd>標(biāo)簽用于對名詞進(jìn)行解釋和描述。一對<dt>標(biāo)簽可以對應(yīng)多對<dd>標(biāo)簽，即可以對一個名詞進(jìn)行多項解釋。實例3使用定義列表第8~14行代碼定義了一個定義列表，其中<dt>標(biāo)簽中為名詞“紅色”，其后緊跟著四對<dd>標(biāo)簽，用于對<dt>標(biāo)簽中的名詞進(jìn)行解釋和描述。相對于<dt>標(biāo)簽中的術(shù)語或名詞，<dd>標(biāo)簽中解釋和描述性的內(nèi)容會產(chǎn)生一定的縮進(jìn)效果。相對于<dt>標(biāo)簽中的術(shù)語或名詞，<dd>標(biāo)簽中解釋和描述性的內(nèi)容會產(chǎn)生一定的縮進(jìn)效果。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.1.4列表的嵌套應(yīng)用內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：如何進(jìn)行列表嵌套？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：列表嵌套只需將子列表嵌套在上一級列表的列表項中。知識點講解講解列表的嵌套應(yīng)用（1）教師展示PPT，對列表的嵌套應(yīng)用進(jìn)行具體講解。在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到某一類商品被分為若干小類，這些小類通常還包含若干子類。同樣，在使用列表時，列表項中也有可能包含若干子列表項，要想在列表項中定義子列表項就需要將列表進(jìn)行嵌套。列表嵌套只需將子列表嵌套在上一級列表的列表項中。實例4飲品頁面列表嵌套飲品頁面中首先定義了一個包含兩個列表項的無序列表，然后在第1個列表項中嵌套一個有序列表，在第2個列表項中嵌套一個無序列表。咖啡和茶進(jìn)行了第2次分類，咖啡分類為拿鐵和摩卡，茶分類為龍井和碧螺春。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)5.2CSS控制列表樣式5.2.1list-style-type屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：list-style-type屬性的作用是什么？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在CSS中，list-style-type屬性用于控制列表項顯示符號的類型，其取值有多種，它們的顯示效果各不相同。知識點講解講解list-style-type屬性（1）教師展示PPT，對list-style-type屬性進(jìn)行具體講解。list-style-type屬性值及含義實例5設(shè)置列表樣式第13~17行代碼定義了一個無序列表，第19~23行代碼定義了一個有序列表。對無序列表應(yīng)用“l(fā)ist-style-type：square；”將其列表項顯示符號設(shè)置為實心方塊；同時，對有序列表應(yīng)用“l(fā)ist-style-type：decimal；”將其列表項顯示符號設(shè)置為阿拉伯?dāng)?shù)字。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.2.2list-style-image屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：list-style-image屬性的作用是什么？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：CSS提供了list-style-image屬性，其取值為圖像的url。使用list-style-image屬性可以為各個列表項設(shè)置項目圖像，使列表的樣式更加美觀。知識點講解講解list-style-image屬性（1）教師展示PPT，對list-style-image屬性進(jìn)行具體講解。一些常規(guī)的列表項顯示符號并不能滿足網(wǎng)頁制作的需求，為此CSS提供了list-style-image屬性，其取值為圖像的url。使用list-style-image屬性可以為各個列表項設(shè)置項目圖像，使列表的樣式更加美觀。實例6使用list-style-image屬性第7行代碼通過list-style-image屬性為列表項添加了圖像列表項目圖像和列表項沒有對齊，這是因為list-style-image屬性對列表項目圖像的控制能力不強(qiáng)。因此，一般不使用list-style-image屬性，常通過為<li>標(biāo)簽設(shè)置背景圖像的方式實現(xiàn)列表項目圖像。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.2.3list-style-position屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：list-style-position屬性的作用是什么？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在CSS中，list-style-position屬性用于控制列表項目符號的位置，其取值有inside和outside。inside指列表項目符號位于列表文本以內(nèi)，outside指列表項目符號位于列表文本以外。知識點講解講解動態(tài)網(wǎng)頁（1）教師展示PPT，對list-style-position屬性進(jìn)行具體講解。設(shè)置列表項目符號時，有時需要控制列表項目符號的位置，即列表項目符號相對于列表項內(nèi)容的位置。在CSS中，list-style-position屬性用于控制列表項目符號的位置，其取值有inside和outside。inside指列表項目符號位于列表文本以內(nèi)，outside指列表項目符號位于列表文本以外。實例7使用list-style-position屬性控制列表項顯示符號的位置第7行代碼對第1個無序列表應(yīng)用“l(fā)ist-style-position：inside；”，使其列表項目符號位于列表文本以內(nèi)，而第8行代碼對第2個無序列表應(yīng)用“l(fā)ist-style-position：outside；”，使其列表項顯示符號位于列表文本以外。為使顯示效果更加明顯，在第9行代碼中對<li>設(shè)置了邊框樣式。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.2.4list-style屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：list-style屬性有什么作用？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在CSS中，列表樣式也是一個復(fù)合屬性，可以將列表相關(guān)的樣式都綜合定義在一個復(fù)合屬性list-style中。知識點講解講解list-style屬性（1）教師展示PPT，對list-style屬性進(jìn)行具體講解。在CSS中，列表樣式也是一個復(fù)合屬性，可以將列表相關(guān)的樣式都綜合定義在一個復(fù)合屬性list-style中。使用list-style屬性綜合設(shè)置列表樣式的語法格式如下：list-style：列表項顯示符號列表項顯示符號的位置列表項目圖像；使用復(fù)合屬性list-style時，通常按上面語法格式中的順序書寫，各個樣式之間以空格隔開，不需要的樣式可以省略。實例8使用list-style屬性定義一個無序列表，第7~8行代碼通過復(fù)合屬性list-style分別控制<ul>標(biāo)簽和第一個<li>標(biāo)簽的樣式（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解使用背景屬性定義列表項顯示符號（1）教師展示PPT，對使用背景屬性定義列表項顯示符號進(jìn)行具體講解。實例9使用背景屬性定義列表項顯示符號添加一個定義列表，其中第8行代碼通過“l(fā)ist-style：none；”清除列表的默認(rèn)顯示樣式；第11行代碼通過為<dd>設(shè)置背景圖像的方式來定義列表項顯示符號；第19行代碼在<dt>內(nèi)部增加了一張熊貓的圖片。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)5.3超鏈接5.3.1創(chuàng)建超鏈接內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：如何創(chuàng)建超鏈接？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：<a>標(biāo)簽環(huán)繞需要被鏈接的對象。知識點講解講解創(chuàng)建超鏈接（1）教師展示PPT，對創(chuàng)建超鏈接進(jìn)行具體講解。超鏈接在網(wǎng)頁中占有不可替代的地位，在HTML5中創(chuàng)建超鏈接非常簡單，只需用<a>標(biāo)簽環(huán)繞需要被鏈接的對象即可，其基本語法格式如下：<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>在上面的語法格式中，<a>標(biāo)簽是一個行內(nèi)標(biāo)簽，用于定義超鏈接，href和target為其常用屬性，具體介紹如下。href：用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)簽設(shè)置href屬性時，它就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，意為在原窗口中打開，_blank為在新窗口中打開。實例10創(chuàng)建超鏈接創(chuàng)建兩個超鏈接，通過href屬性將它們的鏈接目標(biāo)分別指定為“知網(wǎng)”和“百度”，同時通過target屬性定義第1個鏈接頁面在原窗口打開，第2個鏈接頁面在新窗口打開（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。5.3.2錨點鏈接內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：錨點鏈接有什么作用？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：通過創(chuàng)建錨點鏈接，能夠直接跳轉(zhuǎn)到指定位置的內(nèi)容。知識點講解講解創(chuàng)建錨點鏈接（1）教師展示PPT，對創(chuàng)建錨點鏈接進(jìn)行具體講解。實例11創(chuàng)建錨點鏈接單擊前單擊后使用<a>標(biāo)簽應(yīng)用href屬性，其中href屬性=“#id”，如第10~14行代碼所示，只要單擊創(chuàng)建了超鏈接的對象就會跳到指定位置的內(nèi)容。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)5.4鏈接偽類控制超鏈接內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：鏈接偽類有什么用處？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：CSS通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)。知識點講解講解動態(tài)網(wǎng)頁（1）教師展示PPT，對鏈接偽類進(jìn)行具體講解。定義超鏈接時，為了提高用戶體驗，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在單擊前、單擊后和指針懸停時的樣式不同。CSS通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)。與超鏈接相關(guān)的四個偽類應(yīng)用比較廣泛，它們定義了超鏈接的四種不同狀態(tài)，<a>的偽類及描述如表所示。實例12使用超鏈接偽類選擇器（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)5.5綜合案例——制作新聞列表內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：如何制作新聞列表？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：實例13制作新聞列表實訓(xùn)12實訓(xùn)名稱制作新聞列表實訓(xùn)目標(biāo)使用CSS樣式設(shè)置頁面中的列表實訓(xùn)實施本實訓(xùn)分為兩部分第一部分使用HTML5標(biāo)簽搭建頁面結(jié)構(gòu)，頁面設(shè)置要求如下。1.使用<h