動(dòng)態(tài)導(dǎo)航欄spry布局控件(教案)

1、動(dòng)態(tài)導(dǎo)航欄-spry布局控件（教案）一、 教學(xué)目標(biāo)1、 動(dòng)作與技能：學(xué)會(huì)spry布局控件的編輯、應(yīng)用。 學(xué)會(huì)使用spry布局控件創(chuàng)建動(dòng)態(tài)導(dǎo)航欄的方法。2、 知識(shí)目標(biāo)：在運(yùn)用中理解spry框架是一組用標(biāo)準(zhǔn)html、css和javascript編寫(xiě)的可重用控件。3、 情感態(tài)度與價(jià)值觀：提高了對(duì)網(wǎng)頁(yè)設(shè)計(jì)的理解能力和認(rèn)識(shí)水平，能夠樹(shù)立學(xué)生探索知識(shí)的興趣。二、 教學(xué)重點(diǎn)、難點(diǎn)：1、 學(xué)會(huì)spry布局控件的編輯、應(yīng)用。2、 學(xué)會(huì)使用spry布局控件創(chuàng)建動(dòng)態(tài)導(dǎo)航欄的方法。三、 教學(xué)準(zhǔn)備：1、 完整的實(shí)訓(xùn)8的步驟。2、 課件的準(zhǔn)備3、 應(yīng)用軟件dreamweaver cs5安裝良好。教學(xué)過(guò)程1、 首先引入sp

2、ry，說(shuō)出本節(jié)課需要學(xué)習(xí)的內(nèi)容的重難點(diǎn)。2、 啟動(dòng)dreamweaver cs5,選擇站點(diǎn)“網(wǎng)頁(yè)特效制作”，新建文件spry1.html.3、 選擇“插入spryspry菜單欄”命令，打開(kāi)“spry菜單欄”對(duì)話框，如圖3-57所示。選擇“水平”單選項(xiàng)，單擊“確定”按鈕，網(wǎng)頁(yè)效果如圖3-58所示。圖3-57 “spry菜單欄”對(duì)話框圖3-58 網(wǎng)頁(yè)效果圖4、 在“屬性”面板中或者在“設(shè)計(jì)”視圖中添加項(xiàng)目的屬性值，“項(xiàng)目1：站內(nèi)質(zhì)詢，項(xiàng)目2：原創(chuàng)圖書(shū)，項(xiàng)目3：圖文教程，項(xiàng)目4：視頻教程”，如圖3-59和3-60所示：圖3-59 屬性面板圖3-60 網(wǎng)頁(yè)“設(shè)計(jì)”視圖5、 繼續(xù)在“屬性”面板中或者在“

3、設(shè)計(jì)”視圖中添加“站內(nèi)咨詢”的二級(jí)項(xiàng)目的屬性值，”項(xiàng)目1.1：圖書(shū)咨詢，項(xiàng)目1.2：會(huì)員信息，項(xiàng)目1.3：業(yè)界新聞，項(xiàng)目1.4：課件質(zhì)詢“，如圖3-61和3-62圖3-61 “屬性”對(duì)話框圖3-62 網(wǎng)頁(yè)“設(shè)計(jì)”視圖6、 同樣的操作，添加“圖文教程“的”二級(jí)項(xiàng)目“的屬性值，“項(xiàng)目3.1：文化課，項(xiàng)目3.2：職業(yè)生涯，項(xiàng)目3.3：專業(yè)課，項(xiàng)目3.4：選修課”，添加“專業(yè)課”的下級(jí)項(xiàng)目屬性值，“項(xiàng)目3.3.1：網(wǎng)頁(yè)制作，項(xiàng)目3.3.2：ps圖像處理，項(xiàng)目3.3.3：flash動(dòng)畫(huà)”，如圖3-63和圖3-64所示：圖3-63 “屬性”面板7、 按【f12】鍵保存并瀏覽網(wǎng)頁(yè)，在瀏覽器窗口顯示網(wǎng)頁(yè)spr

4、y1.htm，如圖3-65所示。8、 新建文件spry2.htm，選擇“插入spryspry選項(xiàng)卡面板”命令，在屬性面板中或者設(shè)計(jì)視圖中添加“標(biāo)簽”的屬性值，”標(biāo)簽1：咨詢，標(biāo)簽2：音樂(lè)，標(biāo)簽3：電視，標(biāo)簽4：電影“，并在電影選項(xiàng)卡下的內(nèi)容區(qū)域插入圖像images/dy.jpg和文字，在css中調(diào)整”tabbedpanels層“的寬度為”190px”,如圖3-66、圖3-67和圖3-68所示：9、 按【f12】鍵保存并瀏覽網(wǎng)頁(yè)，在瀏覽器窗口顯示網(wǎng)頁(yè)spry2.htm，如圖3-69所示。10、 新建文件spry3.htm，選擇“插入spryspry折疊式”命令，在“屬性”面板中或者在“設(shè)計(jì)”視圖

5、中，首先添加標(biāo)簽的屬性值，“標(biāo)簽1：含笑，標(biāo)簽2：荷包牡丹，標(biāo)簽3：春蘭，標(biāo)簽4：爆杖花”，然后在內(nèi)容1，內(nèi)容2，內(nèi)容3，內(nèi)容4，“區(qū)域內(nèi)分別插入圖像images文件夾中的”hx.jpg,hbmd.jpg,xcl.jpg,和pzh.jpg”,最后在css中調(diào)整“acction層”的寬度230px,”accordionpanelcontent層“的寬度230，高度圖3-64 網(wǎng)頁(yè)“設(shè)計(jì)”視圖圖3-65 添加“spry菜單欄”的導(dǎo)航欄效果圖3-66 “tabbedpanels層”的屬性圖3-67 “屬性”面板 圖3-68 網(wǎng)頁(yè)“設(shè)計(jì)”視圖 圖3-69 添加“spry選項(xiàng)卡是面板”的導(dǎo)航欄效果為，如圖圖所示。圖3-70調(diào)整“acction的屬性 圖3-71 調(diào)整“acctionpanelcontent”的屬性圖3-72 “屬性”面板圖3-73 網(wǎng)頁(yè)“設(shè)計(jì)”視圖11、 按【f12】鍵保存并瀏覽網(wǎng)頁(yè)，在瀏覽器窗口顯示spry3.htm，效果如圖3-75所示。12、 新建文件spry4.htm，選擇“插入spryspry可折疊式面板”命令，在設(shè)計(jì)視圖中，首先添加“標(biāo)簽”的屬性值為“唯美油畫(huà)”，然后在內(nèi)容區(qū)域內(nèi)插入圖象images/yh.jpg,最后在css中調(diào)整“collapsiblepanel