《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第10課 使用CSS3美化超鏈接_第1頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第10課 使用CSS3美化超鏈接_第2頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第10課 使用CSS3美化超鏈接_第3頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第10課 使用CSS3美化超鏈接_第4頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第10課 使用CSS3美化超鏈接_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

101第101第課使用CSS3美化超鏈接的基基本本PAGE1010使用CSS3美化超鏈接10使用CSS3美化超鏈接第課PAGE1110000212使用CSS3美化超鏈接10000212使用CSS3美化超鏈接第課PAGE1

課題使用CSS3美化超鏈接課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）學(xué)習(xí)CSS3設(shè)置超鏈接樣式的方法（2）掌握使用CSS3和超鏈接制作新聞列表和圖形化按鈕的方法思政育人目標(biāo)：通過學(xué)習(xí)CSS3美化超鏈接，提高學(xué)生的代碼能力，在實(shí)踐中不斷的提高自己，勤于實(shí)踐，敢于動(dòng)手，不斷的磨練自己教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：了解CSS3設(shè)置超鏈接樣式的方法教學(xué)難點(diǎn)：操作CSS3和超鏈接制作新聞列表和圖形化按鈕教學(xué)方法啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具講授法、電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（2min）→知識(shí)講解（22min）→課堂練習(xí)（15min）→交流討論（4min）第2節(jié)課：類比分析（2min）→知識(shí)講解（15min）→案例分析（21min）→課堂小結(jié)（5min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

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

（2min）【教師】復(fù)習(xí)上一節(jié)課內(nèi)容，引出新知識(shí)點(diǎn)前面兩節(jié)課，已經(jīng)學(xué)習(xí)了如何在HTML5中添加超鏈接，使得內(nèi)容更加的完整和豐富這一節(jié)課，將在前面課程的基礎(chǔ)上，完成對(duì)超鏈接的美化，使得網(wǎng)頁的整體效果更加的美觀、整潔【學(xué)生】聆聽、思考通過對(duì)上一節(jié)課的復(fù)習(xí)，讓學(xué)生主動(dòng)學(xué)習(xí)美化超鏈接的方法，引出本節(jié)課的內(nèi)容知識(shí)講解

（22min）【教師】講述與超鏈接相關(guān)的基本樣式超鏈接中的文本具有默認(rèn)的下劃線效果，且訪問前文本顏色為藍(lán)色；訪問時(shí)文本顏色為紅色；訪問后文本顏色為紫色。一般在制作網(wǎng)頁時(shí)都需要重新設(shè)置超鏈接的樣式，以適合當(dāng)前頁面的風(fēng)格。使用前面課程介紹的“:link”“:visited”“:hover”“:active”4種偽類選擇器可以設(shè)置超鏈接訪問前、訪問后、鼠標(biāo)指針經(jīng)過和訪問時(shí)的樣式?！緦W(xué)生】聆聽、理解、思考【教師】編寫參考代碼在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置兩個(gè)超鏈接不同狀態(tài)下的樣式。.a1:link{color:#000000;text-decoration:none;}/*設(shè)置超鏈接訪問前的文本顏色，去除下劃線效果*/.a1:visited{color:#717799;}/*設(shè)置超鏈接訪問后的文本顏色*/.a1:hover{font-size:1.1em;text-decoration:underline;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)的字號(hào)，添加下劃線效果*/.a1:active{font-size:1em;color:#9ca8c8;}/*設(shè)置超鏈接訪問時(shí)的字號(hào)、文本顏色*/.a2:hover{opacity:0.6;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)的透明度*/【學(xué)生】模仿老師代碼，運(yùn)行程序【教師】講解制作新聞列表制作新聞列表使用列表、錨點(diǎn)鏈接和CSS3可以實(shí)現(xiàn)新聞列表。單擊右側(cè)的超鏈接標(biāo)題，左側(cè)將顯示與其對(duì)應(yīng)的內(nèi)容。這類新聞列表的實(shí)現(xiàn)原理是，先將標(biāo)題與其對(duì)應(yīng)的內(nèi)容嵌套到列表中，設(shè)置顯示區(qū)域（容器元素）為一個(gè)列表項(xiàng)的大小，隱藏溢出部分。然后使用錨點(diǎn)鏈接將標(biāo)題與內(nèi)容一一對(duì)應(yīng)，通過單擊錨點(diǎn)鏈接使對(duì)應(yīng)列表項(xiàng)移動(dòng)到顯示區(qū)域，即可實(shí)現(xiàn)“切換”效果，如圖5-22所示圖5-22新聞列表的實(shí)現(xiàn)原理【教師】演示【例5-10】的操作流程，實(shí)現(xiàn)圖5-21的效果（1）創(chuàng)建“study.html”文檔，在<body>標(biāo)簽中輸入以下代碼（省略的列表項(xiàng)內(nèi)容見圖5-23），創(chuàng)建嵌套列表并為列表標(biāo)題和列表項(xiàng)設(shè)置錨點(diǎn)鏈接與普通鏈接。<dl> <dt><ahref="#a">小學(xué)古詩</a><ahref="#b">初中古詩</a><ahref="#c">高中古詩</a></dt> <dd> <ulid="a"> <li><ahref="#">靜夜思——李白（床前明月光，疑是地上霜?！?lt;/a></li> <li><ahref="#">春曉——孟浩然（春眠不覺曉，處處聞啼鳥?！?lt;/a></li>…… </ul> <ulid="b"> <li><ahref="#">觀滄?！懿伲|臨碣石，以觀滄海?！?lt;/a></li> <li><ahref="#">夜雨寄北——李商隱（君問歸期未有期，巴山夜雨漲秋池?！?lt;/a></li>…… </ul> <ulid="c"> <li><ahref="#">赤壁賦——蘇軾（壬戌之秋，七月既望，蘇子與客泛舟游于赤壁之下?！?lt;/a></li> <li><ahref="#">阿房宮賦——杜牧（六王畢，四海一，蜀山兀，阿房出?！?lt;/a></li>…… </ul> </dd></dl>圖5-23嵌套列表的默認(rèn)效果（2）在頭部標(biāo)簽中添加<style>標(biāo)簽，并在其中輸入以下代碼，設(shè)置外層列表的樣式，此時(shí)頁面效果如圖5-24所示。dl{width:500px;height:170px;border:10pxsolid#eeeeee;border-radius:40px0040px;background-color:#5e8d8b;}/*設(shè)置外層自定義列表的寬度、高度、邊框、圓角與背景顏色*/dt{float:right;}/*設(shè)置列表標(biāo)題向右浮動(dòng)*/dd{margin:0;width:415px;height:170px;overflow:hidden;}/*設(shè)置列表內(nèi)容的外邊距、寬度與高度，并隱藏溢出部分*/圖5-24設(shè)置外層列表的頁面效果（3）繼續(xù)在<style>標(biāo)簽中添加以下代碼，設(shè)置內(nèi)層列表與超鏈接的樣式。ul{list-style:none;padding:0;margin:0;width:500px;height:170px;}/*去除內(nèi)層無序列表的列表樣式，并設(shè)置其內(nèi)外邊距、寬度與高度*/li{margin-top:5px;padding-left:20px;width:405px;height:27px;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*設(shè)置列表項(xiàng)的上外邊距、左內(nèi)邊距、寬度、高度與文本顏色，文本不換行，隱藏溢出部分并顯示省略標(biāo)記*/dta{display:block;margin:1px;width:80px;height:55px;text-align:center;color:#ffffff;background:#666666;text-decoration:none;}/*將列表標(biāo)題中的超鏈接轉(zhuǎn)換為塊級(jí)元素，設(shè)置外邊距、寬度、高度、居中對(duì)齊、文本顏色與背景顏色，去除下劃線效果*/dda{margin-top:5px;line-height:36px;color:#ffffff;text-decoration:none;}/*設(shè)置列表內(nèi)容中超鏈接的上外邊距、行高與文本顏色，去除下劃線效果*/dta:hover{color:#334d4c;background:#99e6e3;}/*設(shè)置鼠標(biāo)指針經(jīng)過列表標(biāo)題中超鏈接時(shí)的文本顏色與背景顏色*/【學(xué)生】思考、理解、記錄通過講解知識(shí)點(diǎn)，讓學(xué)生了解CSS3美化超鏈接的使用課堂練習(xí)

（15min）【教師】布置課堂練習(xí)完成圖5-21所示的“古詩”新聞列表。圖5-21“古詩”新聞列表【學(xué)生】完成課堂練習(xí)【教師】巡視課堂，督促學(xué)生完成課堂練習(xí)【學(xué)生】對(duì)不理解的知識(shí)向老師提問【教師】回答學(xué)生提問，多媒體公布參考答案【學(xué)生】對(duì)比參考答案，修改內(nèi)容通過練習(xí)法，讓學(xué)生熟練掌握CSS3美化超鏈接的操作，加深對(duì)CSS3語言的印象第二節(jié)課類比分析

（2min）【教師】將CSS3美化超鏈接的操作與之前美化列表、文本等內(nèi)容進(jìn)行類比，引出本節(jié)課內(nèi)容CSS3不僅可以美化超鏈接中的基本樣式，跟CSS3美化列表的操作一樣，CSS3還可以對(duì)圖像化按鈕進(jìn)行操作，對(duì)其進(jìn)行美化，本節(jié)課將重點(diǎn)講解制作圖像化按鈕【學(xué)生】聆聽、思考、理解通過類比分析答的方法，激發(fā)學(xué)生進(jìn)一步對(duì)CSS3美化超鏈接的探索欲，引起學(xué)生的思考知識(shí)講解

（15min）【教師】講解制作圖像化按鈕超鏈接的功能基本等同于按鈕，有時(shí)為了呈現(xiàn)按鈕的顯示效果，需要編寫許多樣式代碼。實(shí)際上，為超鏈接設(shè)置背景圖像即可簡單地實(shí)現(xiàn)各種風(fēng)格的按鈕效果。1．隱藏超鏈接文本當(dāng)超鏈接的按鈕效果無法使用CSS3樣式實(shí)現(xiàn)時(shí)，可以先在圖像處理軟件中制作好按鈕的圖像文件，然后將其設(shè)置為超鏈接的背景圖像。需要注意的是，為體現(xiàn)HTML5語義化的特點(diǎn)，<a>標(biāo)簽中一般會(huì)添加文本內(nèi)容，當(dāng)不需要顯示文本內(nèi)容時(shí)可以將它們的縮進(jìn)設(shè)置為絕對(duì)值較大的負(fù)數(shù)，如“text-indent:-2000px;”，以達(dá)到隱藏文本內(nèi)容的效果。【教師】演示【例5-11】操作流程，實(shí)現(xiàn)圖5-25的效果使用一個(gè)圖像文件為兩個(gè)超鏈接設(shè)置背景圖像，并隱藏鏈接文本，原始圖像及頁面效果如圖5-25所示。圖5-25原始圖像及隱藏超鏈接文本后的按鈕效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記兩個(gè)超鏈接標(biāo)簽。<aclass="a1"href="#">播放</a><aclass="a2"href="#">暫停</a>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置兩個(gè)超鏈接的背景圖像并隱藏鏈接文本。a{display:inline-block;width:65px;height:70px;background:URL('images/p11.png')no-repeat;text-indent:-999px;}/*將超鏈接轉(zhuǎn)換為行內(nèi)塊元素，并設(shè)置其背景圖像，在此基礎(chǔ)上設(shè)置縮進(jìn)為負(fù)數(shù)隱藏其中的文本*/.a1{background-position:left;} /*設(shè)置背景圖像靠左顯示*/.a2{background-position:right;} /*設(shè)置背景圖像靠右顯示*/2．自動(dòng)伸縮按鈕網(wǎng)頁中的導(dǎo)航條一般都是由超鏈接組成的，各超鏈接往往需要顯示長度不同的文本，如果直接添加背景圖像，不僅比較麻煩，效果也不理想。此時(shí)，可以使用滑動(dòng)門技術(shù)制作出可以自動(dòng)伸縮的按鈕效果?；瑒?dòng)門技術(shù)利用背景圖像的層疊性，將第一層背景圖像設(shè)置得盡可能窄并靠一側(cè)固定顯示，第二層背景圖像設(shè)置得盡可能寬并靠另一側(cè)顯示，調(diào)整鏈接文本塊的內(nèi)外邊距后，輸入不同長度的文本（不超過第二層背景圖像的寬度），第二層背景圖像會(huì)根據(jù)文本長度自動(dòng)伸縮?！窘處煛垦菔尽纠?-12】操作流程，實(shí)現(xiàn)圖5-27的效果制作自動(dòng)伸縮按鈕，頁面效果如圖5-27所示。圖5-27自動(dòng)伸縮按鈕的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，標(biāo)記超鏈接標(biāo)簽。<ahref="#"><span>HTML5</span></a><ahref="#"><span>CSS3</span></a><ahref="#"><span>JavaScript</span></a><ahref="#"><span>更多其他擴(kuò)展學(xué)習(xí)</span></a><ahref="#"><span>相關(guān)鏈接網(wǎng)站</span></a>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，將如圖5-26所示的兩個(gè)圖像文件設(shè)置為超鏈接的背景圖像，并分別靠左與靠右顯示，實(shí)現(xiàn)自動(dòng)伸縮按鈕效果color:white;margin-left:10px;text-decoration:none;background:url('images/p12.png')no-repeatleft;}/*設(shè)置第一層背景圖像靠左顯示*/aspan{display:block;margin-left:12px;padding-right:10px;background:url('images/p13.png')no-repeatright;}/*設(shè)置第二層背景圖像靠右顯示*/【學(xué)生】聆聽、思考、理解【教師】安排熟悉的學(xué)生對(duì)不熟悉操作的學(xué)生進(jìn)行指導(dǎo)【學(xué)生】互相學(xué)習(xí)指導(dǎo)通過講解知識(shí)點(diǎn)，讓學(xué)生進(jìn)一步了解CSS3美化超鏈接的功能，加強(qiáng)對(duì)CSS3語言的使用案例分析

（21min）【教師】多媒體展示典型案例美化“網(wǎng)上書店”頁面中的超鏈接【學(xué)生】分析、思考、討論【教師】分析案例【學(xué)生】編寫代碼流程圖【教師】展示操作流程在DW中打開本書配套素材“項(xiàng)目5”→“任務(wù)5.2”→“bsonline”中的“main.html”和“main.css”文檔。在網(wǎng)頁文檔中為導(dǎo)航條列表的每一個(gè)列表項(xiàng)中的文本添加href屬性值為“#”的超鏈接，此時(shí)頁面效果如圖5-30所示。圖5-30添加超鏈接后的導(dǎo)航列表在樣式文檔中添加以下代碼，重新設(shè)置導(dǎo)航條的樣式#nav_topulli{float:left;margin:15px25px00;list-style:none;}/*重新設(shè)置列表項(xiàng)的外邊距*/#nav_topa{font-size:1.2em;text-shadow:2px03px#66687f;font-weight:bold;color:#ffffff;text-decoration:none;}/*設(shè)置超鏈接的樣式，在保留原樣式的基礎(chǔ)上去除下劃線效果*/#nav_topula:hover{color:#f5f5f5;text-shadow:1px0px2px#f7f7f7;text-decoration:underline;}/*設(shè)置鼠標(biāo)指針移動(dòng)至超鏈接上時(shí)在列表項(xiàng)樣式的基礎(chǔ)上增加下劃線效果*/#nav_top#nav_n{font-size:1.8em;margin-right:30px;margin-to

溫馨提示

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

評(píng)論

0/150

提交評(píng)論