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

下載本文檔

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

文檔簡介

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

block|inline-block|

none四、制作垂直導(dǎo)航條。（40分鐘）教學(xué)做一體1．搭建導(dǎo)航條結(jié)構(gòu) <nav> <ul> <li><ahref="#">首頁</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; /*去掉列表項的項目符號*/ 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像素、實線、顏色為白色*/ background-color:#09F; text-align:center; /*設(shè)置文字水平居中*/ } navullia{ display:block; /*轉(zhuǎn)換為塊元素*/ width:112px; height:29px; border-left:8pxsolid#03C;/*設(shè)置左側(cè)8像素、實線、藍(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分鐘）無序列表的樣式設(shè)置方法；超鏈接的樣式設(shè)置方法；垂直導(dǎo)航條的制作。課后作業(yè)：1.課后實訓(xùn)52.超星學(xué)習(xí)通平臺作業(yè)第3、4學(xué)時（制作學(xué)院網(wǎng)站導(dǎo)航條）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（10分鐘）問題：水平導(dǎo)航條如何制作？=2\*ROMANII.講授重難點內(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)站首頁</a></li> <li><ahref="#">學(xué)院概況</a></li> <li><ahref="#">新聞中心</a></li> <li><ahref="#">機構(gòu)設(shè)置</a></li> <li><ahref="#">教學(xué)科研</a></li> <li><ahref="#">團學(xué)在線</a></li> <li><ahref="#">招生就業(yè)</a></li> <li><ahref="#">公共服務(wù)</a></li> <li><ahref="#">信息公開</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; /*去掉列表項的項目符號*/ } 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)航條中無序列表的樣式*/ margin:0pxauto; /*內(nèi)容在導(dǎo)航塊中居中*/ width:1200px; height:42px; } .navConli{ /*導(dǎo)航條中每個列表項的樣式*/ width:120px; float:left;/*每個列表項左浮動，使列表項水平排列*/ } .navConlia{ /*超鏈接文字的樣式*/ display:block; /*變?yōu)閴K元素，可以設(shè)置寬度和高度*/ width:120px; height:42px; line-height:42px; text-align:center; color:#FFF; } .navConlia:hover{ /*鼠標(biāo)懸停到超鏈接文字時的樣式*/ col

溫馨提示

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

評論

0/150

提交評論