任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條_第1頁(yè)
任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條_第2頁(yè)
任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條_第3頁(yè)
任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條_第4頁(yè)
任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條_第5頁(yè)
已閱讀5頁(yè)，還剩1頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

教案名稱任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條計(jì)劃學(xué)時(shí)4學(xué)時(shí)知識(shí)目標(biāo)掌握無(wú)序列表樣式設(shè)置掌握超鏈接樣式設(shè)置掌握網(wǎng)站導(dǎo)航條的制作方法能力目標(biāo)掌握導(dǎo)航條的構(gòu)建及導(dǎo)航條樣式設(shè)置方法素質(zhì)目標(biāo)在編寫代碼中養(yǎng)成精益求精的工匠精神通過(guò)案例融入價(jià)值觀塑造教學(xué)重點(diǎn)導(dǎo)航條的樣式設(shè)置方法教學(xué)難點(diǎn)元素類型的轉(zhuǎn)換教學(xué)模式任務(wù)驅(qū)動(dòng)教學(xué)法線上+線下混合教學(xué)模式教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素切入點(diǎn)第1、2學(xué)時(shí)(制作水平導(dǎo)航條)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（10分鐘）無(wú)序列表的項(xiàng)目符號(hào)如何設(shè)置？超鏈接的樣式如何設(shè)置？=2\*ROMANII.重難點(diǎn)內(nèi)容講授：一、無(wú)序列表樣式設(shè)置（10分鐘）例5-1樣式代碼如下：二、超鏈接樣式設(shè)置：（10分鐘）a:link{CSS樣式規(guī)則;}a:visited{CSS樣式規(guī)則;}a:hover{CSS樣式規(guī)則;}a:active{CSS樣式規(guī)則;}例5-2 <body> <ahref="#">學(xué)院簡(jiǎn)介</a> <ahref="#">學(xué)院新聞</a> <ahref="#">專業(yè)介紹</a> <ahref="#">招生就業(yè)</a> </body>樣式代碼如下：a{ color:#4c4c4c; /*超鏈接文字的顏色*/ text-decoration:none; /*設(shè)置超鏈接文字無(wú)下畫(huà)線*/ } a:hover{ color:#FF8400; text-decoration:underline; /*設(shè)置鼠標(biāo)指針懸停時(shí)超鏈接文字有下畫(huà)線*/ }三、元素的類型與轉(zhuǎn)換（15分鐘）1.塊元素常見(jiàn)的塊元素有h1~h6、p、ul、ol、li、div、header、nav、article、aside、section、footer等。2.行內(nèi)元素常見(jiàn)的行內(nèi)元素有a、span、strong、ins、em、del等，其中a和span元素是最典型的行內(nèi)元素。注意：行內(nèi)元素一般不可以設(shè)置寬度、高度和對(duì)齊等屬性。3．元素的轉(zhuǎn)換格式：display:inline|

block|inline-block|

none四、制作垂直導(dǎo)航條。（40分鐘）教學(xué)做一體1．搭建導(dǎo)航條結(jié)構(gòu) <nav> <ul> <li><ahref="#">首頁(yè)</a></li> <li><ahref="#">美食</a></li> <li><ahref="#">養(yǎng)生</a></li> <li><ahref="#">保健</a></li> <li><ahref="#">健身</a></li> <li><ahref="#">飲料</a></li> <li><ahref="#">心理</a></li> <li><ahref="#">論壇</a></li> </ul> </nav> 2.定義導(dǎo)航條CSS樣式<styletype="text/css"> ul,li{ list-style:none; /*去掉列表項(xiàng)的項(xiàng)目符號(hào)*/ margin:0; /*設(shè)置外邊距為0*/ padding:0; /*設(shè)置內(nèi)邊距為0*/ } nav{ width:120px; height:240px; margin:0auto; } navulli{ width:120px; height:29px; line-height:29px; /*設(shè)置行高為29像素*/ border-bottom:1pxsolid#FFF;/*下邊框1像素、實(shí)線、顏色為白色*/ background-color:#09F; text-align:center; /*設(shè)置文字水平居中*/ } navullia{ display:block; /*轉(zhuǎn)換為塊元素*/ width:112px; height:29px; border-left:8pxsolid#03C;/*設(shè)置左側(cè)8像素、實(shí)線、藍(lán)色邊框*/ font-size:14px; font-weight:bold; /*設(shè)置文字為粗體效果*/ color:#FFF; text-decoration:none; } navullia:hover{ background-color:#03C; /*背景顏色和左側(cè)邊框顏色相同*/ } </style>=3\*ROMANIII.課堂小結(jié)：（5分鐘）無(wú)序列表的樣式設(shè)置方法；超鏈接的樣式設(shè)置方法；垂直導(dǎo)航條的制作。課后作業(yè)：1.課后實(shí)訓(xùn)52.超星學(xué)習(xí)通平臺(tái)作業(yè)第3、4學(xué)時(shí)（制作學(xué)院網(wǎng)站導(dǎo)航條）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（10分鐘）問(wèn)題：水平導(dǎo)航條如何制作？=2\*ROMANII.講授重難點(diǎn)內(nèi)容：制作學(xué)院網(wǎng)站導(dǎo)航條1.搭建導(dǎo)航條的結(jié)構(gòu)（15分鐘）<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>水平導(dǎo)航條</title></head><body> <nav> <ulclass="navCon"> <li><ahref="#">網(wǎng)站首頁(yè)</a></li> <li><ahref="#">學(xué)院概況</a></li> <li><ahref="#">新聞中心</a></li> <li><ahref="#">機(jī)構(gòu)設(shè)置</a></li> <li><ahref="#">教學(xué)科研</a></li> <li><ahref="#">團(tuán)學(xué)在線</a></li> <li><ahref="#">招生就業(yè)</a></li> <li><ahref="#">公共服務(wù)</a></li> <li><ahref="#">信息公開(kāi)</a></li> <li><ahref="#">統(tǒng)一信息門戶</a></li> </ul> </nav> </body></html>2.定義學(xué)院導(dǎo)航條CSS樣式（60分鐘）<styletype="text/css"> body,ul,li{ margin:0; padding:0; list-style:none; /*去掉列表項(xiàng)的項(xiàng)目符號(hào)*/ } body{ background:url("images/bodybg.jpg");/*設(shè)置背景圖像*/ font-family:"微軟雅黑"; font-size:14px; /*文字大小設(shè)置為14像素*/ } a{ text-decoration:none; } nav{ /*導(dǎo)航條的樣式*/ background:rgb(28,75,169); margin:50pxauto; height:42px; width:100%; /*設(shè)置寬度與瀏覽器相同*/ } .navCon{ /*導(dǎo)航條中無(wú)序列表的樣式*/ margin:0pxauto; /*內(nèi)容在導(dǎo)航塊中居中*/ width:1200px; height:42px; } .navConli{ /*導(dǎo)航條中每個(gè)列表項(xiàng)的樣式*/ width:120px; float:left;/*每個(gè)列表項(xiàng)左浮動(dòng)，使列表項(xiàng)水平排列*/ } .navConlia{ /*超鏈接文字的樣式*/ display:block; /*變?yōu)閴K元素，可以設(shè)置寬度和高度*/ width:120px; height:42px; line-height:42px; text-align:center; color:#FFF; } .navConlia:hover{ /*鼠標(biāo)懸停到超鏈接文字時(shí)的樣式*/ col

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論