（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子教案

1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八-1電子教案教學(xué)課題項(xiàng)目8 CSS 3創(chuàng)建網(wǎng)頁(yè)菜單8.1項(xiàng)目描述、8.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握CSS 3美化超鏈接。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過前面知識(shí)的學(xué)習(xí)，已經(jīng)掌握了HTML的基本結(jié)構(gòu)、圖文混排的方法、網(wǎng)頁(yè)中表格的制作方法、如何創(chuàng)建超鏈接和制作音視頻播放器、網(wǎng)頁(yè)中的表單創(chuàng)建方

2、法、CSS 3的各類選擇器的應(yīng)用和CSS 3美化文本、段落和圖片的方法。通過網(wǎng)頁(yè)菜單可以在不同的網(wǎng)頁(yè)分類中自由切換，網(wǎng)頁(yè)菜單也是網(wǎng)站內(nèi)容條理化、交互人性化不可或缺的元素之一。利用項(xiàng)目列表、超鏈接和CSS 3屬性，能夠制作出美觀大方的網(wǎng)頁(yè)菜單。教學(xué)重點(diǎn)1.改變超鏈接的基本樣式；2.設(shè)置帶有提示信息的超鏈接；3.設(shè)置超鏈接的背景圖；4.設(shè)置超鏈接的按鈕效果；5.設(shè)置超鏈接的鼠標(biāo)樣式。教學(xué)難點(diǎn)1.改變超鏈接的基本樣式；2.設(shè)置超鏈接的鼠標(biāo)樣式。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁(yè)頁(yè)面，通過網(wǎng)頁(yè)中超鏈接的效果，導(dǎo)入本節(jié)課的內(nèi)容。教師

3、提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)單元格列行單元格列行單元格列行一、改變超鏈接的基本樣式單元格列行單元格列行單元格列行偽類是CSS本身定義的一種類，使用偽類可以定義超鏈接在不同狀態(tài)下的樣式效果。超鏈接的偽類有四種狀態(tài)，詳細(xì)信息如表所示。屬性說明a:link定義a元素未訪問時(shí)的樣式a:visited定義a元素訪問后的樣式a:hover定義鼠標(biāo)經(jīng)過顯示的樣式a:active定義鼠標(biāo)單擊激活時(shí)的樣式想要定義未被訪問的超鏈接樣式，可以通過a:link來實(shí)現(xiàn)，要設(shè)置被訪問過的超鏈接樣式，可以通過a:visited來實(shí)現(xiàn)，要設(shè)置鼠標(biāo)經(jīng)過和激活時(shí)的樣式用a:hover和a:active來實(shí)現(xiàn)。格式

4、為：a:linkCSS樣式a:visitedCSS樣式a:hoverCSS樣式a:activedCSS樣式二、設(shè)置帶有提示信息的超鏈接超鏈接的文字比較簡(jiǎn)潔，有時(shí)候不能表達(dá)這個(gè)超鏈接的含義，通常是為超鏈接添加上一些介紹性信息，即提示信息。要設(shè)置這樣的信息，可以通過超鏈接信息的描述標(biāo)記title來實(shí)現(xiàn)，title屬性的值為提示的內(nèi)容。格式為：【例8-1】超鏈接基本樣式和提示信息實(shí)例，代碼如下所示。1 2 3 4 5 超鏈接基本樣式和提示信息6 7 #nav1padding:20px; 8 acolor:#545454;text-decoration: none;margin:3px;padding

5、: 3px;9 a:linkcolor:#545454;10 a:visitedcolor:#545454;11 a:hovercolor:#f60;text-decoration: underline;12 a:activecolor:#f63;13 14 15 16 17 首頁(yè)|18 產(chǎn)品展示|19 售后服務(wù)|20 聯(lián)系我們|21 關(guān)于我們22 23 24 在瀏覽器中預(yù)覽效果如圖所示。三、設(shè)置超鏈接的背景圖超鏈接添加背景圖片，使用background-image來實(shí)現(xiàn)，超鏈接添加背景顏色，使用background-color來實(shí)現(xiàn)?！纠?-2】設(shè)置超鏈接的背景顏色實(shí)例，代碼如下所示。1 2

6、 3 4 5 設(shè)置超鏈接背景顏色6 7 .navmargin:20px;font-size:14px;font-family: 微軟雅黑;8 a 9 color:#333;10 text-decoration:none;11 display: block;12 float: left;13 text-align: center; 14 height:30px; 15 line-height:30px; 16 width:100px; 17 background-color:#efefef; 18 margin-left:6px;19 20 a:hover background-color:#F

7、60; color:#fff21 22 23 24 25 首頁(yè)26 關(guān)于我們27 產(chǎn)品展示28 售后服務(wù)29 聯(lián)系我們30 31 32 在瀏覽器中預(yù)覽效果如圖所示。四、設(shè)置超鏈接的按鈕效果利用CSS中的a:hover，當(dāng)鼠標(biāo)經(jīng)過連接時(shí)，鏈接向下、向右各移一個(gè)像素，這樣顯示效果就想按鈕按下了一樣?！纠?-3】超鏈接按鈕效果實(shí)例，代碼如下所示。1 2 3 4 5 超鏈接按鈕效果6 7 #navmargin-top:10px; padding:20px;border:1px red solid;8 afont-family: 微軟雅黑;text-align: center;margin:3px;9

8、a:link,a:visited10 color:#ac2300;11 padding:4px 10px 4px 10px;12 background-color: #ccd8db;13 text-decoration: none;14 border-top:1px solid #eeeeee;15 border-left:1px solid #eeeeee;16 border-bottom:1px solid #717171;17 border-right:1px solid #717171;18 19 a:hover20 color:#821821;21 padding:5px 8px 3

9、px 12px;22 background-color: #e2c4c9;23 text-decoration: none;24 border-top:1px solid #717171;25 border-left:1px solid #717171;26 border-bottom:1px solid #eeeeee;27 border-right:1px solid #eeeeee;28 29 30 31 32 33 首頁(yè)34 關(guān)于我們35 品牌特賣36 產(chǎn)品展示37 聯(lián)系我們38 39 40 在瀏覽器中預(yù)覽效果如圖所示。五、設(shè)置超鏈接的鼠標(biāo)樣式想要在網(wǎng)頁(yè)中實(shí)現(xiàn)鼠標(biāo)樣式改變的效果，可以通

10、過CSS屬性設(shè)置來實(shí)現(xiàn)。CSS3中鼠標(biāo)箭頭樣式可以通過cursor屬性來實(shí)現(xiàn)，一般情況常用的有“default”和“pointer”這兩個(gè)屬性值。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識(shí)歸納本節(jié)課學(xué)習(xí)了使用CSS3對(duì)超鏈接的美化方法。1去除超鏈接的自帶的下劃線，使用text-decoration: non

11、e;來實(shí)現(xiàn) 。2定義四個(gè)偽類的CSS樣式：a:link、a:visited、a:hover、a:active 。3注意定義四個(gè)偽類的順序：link、visited、hover、active 。4超鏈接添加背景圖片，使用background-image來實(shí)現(xiàn)。5超鏈接添加背景顏色使用background-color來實(shí)現(xiàn)。6超鏈接的按鈕效果，使用CSS中的a:hover，當(dāng)鼠標(biāo)經(jīng)過連接時(shí)，鏈接向下、向右各移一個(gè)像素，這樣顯示效果就想按鈕按下了一樣。7超鏈接的鼠標(biāo)樣式，使用cursor來實(shí)現(xiàn)，常用的有curdor:pointer 。教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.下列超鏈接狀態(tài)中，_是錯(cuò)誤的。A a是聲明超鏈接樣式 B a:link設(shè)置已鏈接的樣式C a:active設(shè)置激活時(shí)超鏈接的樣式 D a