《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第12課 網(wǎng)頁(yè)列表與超鏈接（三）_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第12課 網(wǎng)頁(yè)列表與超鏈接（三）_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第12課 網(wǎng)頁(yè)列表與超鏈接（三）_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第12課 網(wǎng)頁(yè)列表與超鏈接（三）_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第12課 網(wǎng)頁(yè)列表與超鏈接（三）_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

12第12第課網(wǎng)頁(yè)文本、圖像與多媒體（三）12（三12（三）網(wǎng)頁(yè)文本、圖像與多媒體第課PAGE4PAGE4PAGE5PAGE512第12第課網(wǎng)頁(yè)文本、圖像與多媒體（三） 課題網(wǎng)頁(yè)列表與超鏈接(三）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握使用DreamweaverCC為網(wǎng)頁(yè)添加導(dǎo)航欄的方法（2）能夠制作簡(jiǎn)單縱向?qū)Ш綑冢?）能夠制作簡(jiǎn)單橫向?qū)Ш綑冢?）能夠制作帶下拉菜單的橫向?qū)Ш綑谒颊四繕?biāo)：（1）保持積極的學(xué)習(xí)態(tài)度，增強(qiáng)自身工作能力。（2）了解“綠水青山就是金山銀山”的相關(guān)信息，增強(qiáng)熱愛(ài)自然、保護(hù)自然的意識(shí)。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：使用DreamweaverCC為網(wǎng)頁(yè)添加導(dǎo)航欄教學(xué)難點(diǎn)：制作帶下拉菜單的橫向?qū)Ш綑诮虒W(xué)方法情景模擬法、問(wèn)答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：傳授新知（23min）小組互助（15min）第2節(jié)課：

任務(wù)實(shí)施（25min）

實(shí)踐探索（15min）

課堂小結(jié)（3min）

作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP，查閱資料，了解在DreamweaverCC中如何添加導(dǎo)航欄【學(xué)生】按照教師要求完成課前任務(wù)通過(guò)課前的預(yù)熱，讓學(xué)生了解所學(xué)軟件，激發(fā)學(xué)生的學(xué)習(xí)欲望考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入

（10min）【教師】提出以下問(wèn)題：在網(wǎng)頁(yè)中超鏈接的種類(lèi)有哪些？【學(xué)生】思考、舉手發(fā)言橫向?qū)Ш綑?，縱向?qū)Ш綑?，帶有下拉菜單的?dǎo)航欄。通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動(dòng)學(xué)生的主觀能動(dòng)性，了解本節(jié)課要學(xué)習(xí)的內(nèi)容傳授新知

（23min）【教師】通過(guò)學(xué)生的發(fā)言，引入新的知識(shí)點(diǎn)，介紹使用DreamweaverCC制作導(dǎo)航欄的步驟一、制作簡(jiǎn)單縱向?qū)Ш綑诳v向?qū)Ш綑诩磳?dǎo)航鏈接垂直放置，相當(dāng)于一個(gè)模塊的側(cè)邊欄，通常是針對(duì)主體導(dǎo)航欄的二次細(xì)分。制作導(dǎo)航欄時(shí)，為了得到具有格式化的效果，通常需要改變?cè)氐娘@示方式。這時(shí)，需為元素設(shè)置display屬性，屬性值none表示不顯示該元素；inline是默認(rèn)值，表示將該元素轉(zhuǎn)換為行內(nèi)元素；block表示將該元素轉(zhuǎn)換為塊級(jí)元素；inline-block表示將該元素轉(zhuǎn)換為行內(nèi)塊元素，行內(nèi)塊元素即為可顯示在一行內(nèi)的塊級(jí)元素。（詳見(jiàn)教材）【教師】演示使用DreamweaverCC制作簡(jiǎn)單縱向?qū)Ш綑诘姆椒ǎ?）在DreamweaverCC中創(chuàng)建一個(gè)名為“nav1.html”的網(wǎng)頁(yè)文檔，將其網(wǎng)頁(yè)標(biāo)題修改為“縱向?qū)Ш綑凇薄＃?）在<body>標(biāo)簽中添加一個(gè)<nav>標(biāo)簽，然后在其中添加一個(gè)<h1>標(biāo)簽，輸入文本“快速訪(fǎng)問(wèn)”。在<h1>標(biāo)簽下方添加一個(gè)id屬性值為nav_a的<div>標(biāo)簽，并在其中添加10個(gè)<a>標(biāo)簽。（3）打開(kāi)“CSS設(shè)計(jì)器”面板，在“源”窗格中單擊“添加CSS源”按鈕，在展開(kāi)的列表中選擇“在頁(yè)面中定義”選項(xiàng)，網(wǎng)頁(yè)文檔的<head>標(biāo)簽中生成<style>標(biāo)簽，在該標(biāo)簽中添加樣式。（4）添加body選擇器，設(shè)置頁(yè)面的背景顏色為“#fffae8”。（5）添加nav選擇器，設(shè)置導(dǎo)航欄的樣式。（6）（7）添加nav_aa選擇器，設(shè)置導(dǎo)航欄中超鏈接的樣式。（8）添加nav_aa:last-child選擇器，設(shè)置導(dǎo)航欄中最后一個(gè)超鏈接的樣式。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解【課堂互動(dòng)】教師提出以下問(wèn)題：【學(xué)生】聆聽(tīng)、思考、舉手回答【教師】對(duì)學(xué)生的回答進(jìn)行總結(jié)二、制作簡(jiǎn)單橫向?qū)Ш綑跈M向?qū)Ш綑诘膽?yīng)用非常廣泛，一般網(wǎng)頁(yè)的頁(yè)眉部分都會(huì)選擇使用通版的橫向?qū)Ш綑?，統(tǒng)領(lǐng)整個(gè)頁(yè)面的效果【教師】演示使用DreamweaverCC制作簡(jiǎn)單橫向?qū)Ш綑诘姆椒ǎ?）在DreamweaverCC中創(chuàng)建一個(gè)名為“nav2.html”的網(wǎng)頁(yè)文檔，將其網(wǎng)頁(yè)標(biāo)題修改為“橫向?qū)Ш綑凇?。?）簽；接著在<div>標(biāo)簽中添加一個(gè)無(wú)序列表并添加7個(gè)列表項(xiàng)；最后為每一個(gè)列表項(xiàng)都添加一個(gè)<a>標(biāo)簽。（3）打開(kāi)“CSS設(shè)計(jì)器”面板，在“源”窗格中單擊“添加CSS源”按鈕，在展開(kāi)的列表中選擇“在頁(yè)面中定義”選項(xiàng)，網(wǎng)頁(yè)文檔的<head>標(biāo)簽中生成<style>標(biāo)簽，在該標(biāo)簽中添加樣式。（4）添加nav選擇器，設(shè)置導(dǎo)航欄整體的背景顏色為“#2F4F4F”。（5）加div選擇器，設(shè)置導(dǎo)航欄容器元素的。（6）添加ul選擇器，設(shè)置導(dǎo)航欄列表的的樣式。（7）添加li選擇器，設(shè)置導(dǎo)航欄列表項(xiàng)的。（8）添加li:hover選擇器，設(shè)置鼠標(biāo)移動(dòng)至列表項(xiàng)上時(shí)的樣式。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解三、制作帶下拉菜單的橫向?qū)Ш綑趯?duì)于內(nèi)容較多的網(wǎng)頁(yè)，一層導(dǎo)航欄無(wú)法將導(dǎo)航內(nèi)容全部顯示出來(lái)，這時(shí)一些網(wǎng)站會(huì)通過(guò)制作下拉菜單將導(dǎo)航欄進(jìn)行折疊來(lái)節(jié)省空間，同時(shí)豐富導(dǎo)航欄的功能?！窘處煛垦菔臼褂肈reamweaverCC制作帶下拉菜單的橫向?qū)Ш綑诘姆椒ǎ?）在DreamweaverCC中創(chuàng)建一個(gè)名為“nav3.html”的網(wǎng)頁(yè)文檔，將其網(wǎng)頁(yè)標(biāo)題修改為“帶下拉菜單的橫向?qū)Ш綑凇?。?）在<body>標(biāo)簽中添加一個(gè)<nav>標(biāo)簽；然后在<nav>標(biāo)簽中添加一個(gè)class屬性值為nav_t的<div>標(biāo)簽，并在該<div>標(biāo)簽中再添加一個(gè)class屬性值為t_d的<div>標(biāo)簽；接著在第二個(gè)<div>標(biāo)簽中添加一個(gè)class屬性值為til的<a>標(biāo)簽，并在<a>標(biāo)簽下方添加一個(gè)class屬性值為down的<div>標(biāo)簽；最后在第三個(gè)<div>標(biāo)簽中添加5個(gè)<a>標(biāo)簽，表示下拉菜單的子選項(xiàng)。（3）參考本書(shū)配套素材“項(xiàng)目五”→“任務(wù)三”→“nav3F.html”文件，繼續(xù)添加剩余的導(dǎo)航項(xiàng)目。（4）參考本書(shū)配套素材“項(xiàng)目五”→“任務(wù)三”→“nav3F.html”文件，繼續(xù)添加剩余的導(dǎo)航項(xiàng)目。（5）打開(kāi)“CSS設(shè)計(jì)器”面板，在“源”窗格中單擊“添加CSS源”按鈕，在展開(kāi)的列表中選擇“在頁(yè)面中定義”選項(xiàng)，網(wǎng)頁(yè)文檔的<head>標(biāo)簽中生成<style>標(biāo)簽，在該標(biāo)簽中添加樣式。（6）添加nav選擇器，設(shè)置導(dǎo)航欄的背景顏色為“#E7E7E7”，如圖5-45所示。（7）添加.nav_t選擇器，設(shè)置導(dǎo)航欄容器元素的寬度為“550px”，外邊距為“0auto”。（8）添加.t_d選擇器，設(shè)置導(dǎo)航欄選項(xiàng)容器元素的顯示方式為“inline-block”。（9）添加.til選擇器，設(shè)置導(dǎo)航欄選項(xiàng)超鏈接的樣式。（10）添加.til選擇器，設(shè)置導(dǎo)航欄選項(xiàng)超鏈接的樣式。（11）添加.downa選擇器，設(shè)置導(dǎo)航欄子選項(xiàng)超鏈接的顯示方式。（12）添加.downa:hover選擇器，設(shè)置當(dāng)鼠標(biāo)指針移動(dòng)至導(dǎo)航欄子選項(xiàng)超鏈接上時(shí)超鏈接的背景顏色為“#e7e7e7”。（13）添加.t_d:hover.til選擇器，設(shè)置當(dāng)鼠標(biāo)指針移動(dòng)至導(dǎo)航欄選項(xiàng)上時(shí)選項(xiàng)的樣式。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解【學(xué)生】聆聽(tīng)、思考、記憶通過(guò)講解，讓學(xué)生了解如何使用DreamweaverCC添加導(dǎo)航欄小組互助（15min）【教師】組織學(xué)生以小組為單位根據(jù)教材“制作常見(jiàn)導(dǎo)航欄”部分的內(nèi)容，保存網(wǎng)頁(yè)，設(shè)置導(dǎo)航欄【學(xué)生】閱讀、思考、上機(jī)操作，由組內(nèi)最先完成操作的學(xué)生幫助其他學(xué)生完成操作【教師】進(jìn)行巡視，解答學(xué)生的問(wèn)題以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)點(diǎn)第二節(jié)課任務(wù)實(shí)施

（25min）【教師】演示使用DreamweaverCC在網(wǎng)頁(yè)中添加列表與超鏈接，并對(duì)其進(jìn)行分析（1）打開(kāi)本書(shū)配套素材，將其中的“ilook.ste”站點(diǎn)附加到DreamweaverCC中。（2）打開(kāi)index.html網(wǎng)頁(yè)文檔，將插入點(diǎn)置于<header>→<nav>標(biāo)簽中，添加一個(gè)無(wú)序列表，并為其添加9個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)中再各添加一個(gè)超鏈接，分別輸入導(dǎo)航內(nèi)容。（3）在index.css文件中添加.nav-listli選擇器，設(shè)置導(dǎo)航欄列表項(xiàng)的左外邊距為“30px”，浮動(dòng)為（向左浮動(dòng)），字體粗細(xì)為“bold”，字號(hào)大小為“16px”；添加.nav-listli:hovera選擇器，設(shè)置當(dāng)鼠標(biāo)指針移動(dòng)至導(dǎo)航欄列表項(xiàng)上時(shí)超鏈接的文本顏色為“#FC2736”。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解，上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)任務(wù)實(shí)施，讓學(xué)生們主動(dòng)參與學(xué)習(xí)，熟悉使用

DreamweaverCC在網(wǎng)頁(yè)中添加列表和超鏈接，設(shè)置其樣式的步驟實(shí)踐探索

（15min）【教師】組織學(xué)生為“圖書(shū)交易網(wǎng)”的主頁(yè)制作導(dǎo)航欄【學(xué)生】參照任務(wù)實(shí)施的步驟上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題學(xué)生通過(guò)實(shí)踐探索，使學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)，了解更多關(guān)于網(wǎng)頁(yè)導(dǎo)航欄的知識(shí)課堂小結(jié)

（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課了解了導(dǎo)航欄的類(lèi)型，并在實(shí)踐中練習(xí)了如何添加導(dǎo)航欄。希望大家在課下多加練習(xí)，熟練掌握利用DreamweaverCC

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論