dreamweaver課件第五單元(編輯修改稿)
2025-06-14 02:40 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 至此，“家鄉(xiāng)山水”欄目的制作全部完成，保存并預(yù)覽檢查效果。 任務(wù)三 制作頁(yè)面動(dòng)態(tài)效果 目錄 上一頁(yè) 下一頁(yè) 退出 任務(wù)小結(jié) 1．掌握為熱點(diǎn)添加“顯示 隱藏層”行為。 2．掌握為熱點(diǎn)添加“顯示層文本”行為。 任務(wù)三 制作頁(yè)面動(dòng)態(tài)效果 目錄 上一頁(yè) 下一頁(yè) 退出 舉一反三： 將本單元“舉一反三”文件夾中的“ pra53”文件夾拷貝到D盤(pán)根目錄，為其中的兩個(gè)網(wǎng)頁(yè)“ ”、“ ”添加“打開(kāi)瀏覽器窗口”行為，設(shè)置事件為“ onLoad”，使瀏覽任一網(wǎng)頁(yè)時(shí)，兩個(gè)網(wǎng)頁(yè)在兩個(gè)瀏覽器窗口中同時(shí)打開(kāi)。 1．啟發(fā)思路： 注意選擇正確的行為和事件。 2．分組完成任務(wù)。 任務(wù)三 制作頁(yè)面動(dòng)態(tài)效果 目錄 上一頁(yè) 下一頁(yè) 退出 作業(yè) 任務(wù)三 制作頁(yè)面動(dòng)態(tài)效果 1． 創(chuàng)建網(wǎng)頁(yè)“ ”，插入本單元素材“舉一反三”文件夾中的圖像“ ”，為圖像添加“彈出信息”行為，使鼠標(biāo)經(jīng)過(guò)圖像時(shí)彈出信息“月到中秋分外明”。 2．創(chuàng)建網(wǎng)頁(yè)“ ”，使用表格、層及行為創(chuàng)建如課本圖 JYFS56所示菜單，鼠標(biāo)移到菜單選項(xiàng)時(shí)顯示下拉列表，移出時(shí)下拉列表隱藏，目錄結(jié)構(gòu)參照課本表 JYFS51。 目錄 上一頁(yè) 下一頁(yè) 退出 任務(wù)四 使用代碼制作“異國(guó)風(fēng)情”網(wǎng)頁(yè) 任務(wù)描述： 使用 HTML代碼編寫(xiě)網(wǎng)頁(yè)，當(dāng)單擊導(dǎo)航圖像中不同文字時(shí)，在網(wǎng)頁(yè)中顯示不同的內(nèi)容。 任務(wù)分析： 網(wǎng)頁(yè)由上下兩部分組成，上半部分添加用于導(dǎo)航的文字圖像，下半部分顯示文字對(duì)應(yīng)的風(fēng)景圖像。這些風(fēng)景圖像分別放在不同的層中，這些層重疊在相同位置，并且大小相同。通過(guò)為上半部分導(dǎo)航圖像上的文字添加三個(gè)矩形熱點(diǎn)、把熱點(diǎn)鏈接到一段 JavaScript代碼，該代碼功能為調(diào)用ShowDiv函數(shù)，該函數(shù)控制層的顯示與隱藏，實(shí)現(xiàn)各熱點(diǎn)的行為。 第五單元 制作 “ 家鄉(xiāng)山水 ” 網(wǎng)頁(yè) 目錄 上一頁(yè) 下一頁(yè) 退出 自己動(dòng)手： 1．準(zhǔn)備工作。 在 D盤(pán)新建一個(gè)名為“ ygfq”的文件夾，將光盤(pán)中本單元素材“ html”文件夾中的“ htmlimages”文件夾拷貝到新建的文件夾中。在 Dreamweaver 8中新建一個(gè)網(wǎng)頁(yè)文件，命名為“ ”，保存在新建的“ ygfg”文件夾中。 將“文檔”窗口切換到“代碼”視圖， title標(biāo)簽中的內(nèi)容以及 body標(biāo)簽進(jìn)行如下修改。 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 目錄 上一頁(yè) 下一頁(yè) 退出 head meta equiv=ContentType content=text/html。 charset=gb2312 / title異國(guó)風(fēng)情 /title /head body bgcolor=3399FF topmargin=35!topmargin:設(shè)置頁(yè)面的上邊矩 /body !修改網(wǎng)頁(yè)的標(biāo)題 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 目錄 上一頁(yè) 下一頁(yè) 退出 在 body……/body 標(biāo)簽之間，添加的代碼如下。 center pimg src=htmlimages/ width=500 height=30 border=0 / /center 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 瀏覽效果如下： 目錄 上一頁(yè) 下一頁(yè) 退出 center pimg src=htmlimages/ width=500 height=30 border=0 usemap=Map /! usemap屬性指向熱點(diǎn)地圖 map name=Map id=Map!設(shè)置熱點(diǎn)地圖名稱和 id為“ Map” area shape=rect coords=26,3,140,28 href=javascript:ShowDiv() / area shape=rect coords=192,4,307,26 href=javascript:ShowDiv() / area shape=rect coords=365,4,473,27 href=javascript:ShowDiv() / /map /p /center 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 熱點(diǎn)標(biāo)簽語(yǔ)句格式講解 目錄 上一頁(yè) 下一頁(yè) 退出 在 /title和 /head之間插入 Javascript代碼如下 。 script language=javascript!用來(lái)說(shuō)明腳本代碼使用JavaScript語(yǔ)言 function ShowDiv(Tdiv) !ShowDiv(Tdiv)函數(shù)完成顯示一個(gè)層隱藏其他層的功能，該顯示層由被單擊的熱點(diǎn)決定 { =none。!先將三個(gè)層全部設(shè)置為不可見(jiàn) =none。 =none。 =。!將函數(shù)傳遞過(guò)來(lái)要顯示的層設(shè)置為可見(jiàn) } /script 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 目錄 上一頁(yè) 下一頁(yè) 退出 在 /map和 /p標(biāo)簽之間添加代碼如下 ，完成本任務(wù) div id=aa style= position:relative。 width:499px。 height:241px。 zindex:1。img src=htmlimages/ width=499 height=374 border=0 //div div id=bb style=position:relative。 width:499px。 height:241px。 zindex:2。 display:noneimg src=htmlimages/ width=499 height=374 border=0 //div div id=cc style=position:relative。 width:499px。 height:241px。 zindex:3。display:noneimg src=htmlimages/ width=499 height=374 border=0 //div 任務(wù)四 使用代碼制作 “ 異國(guó)風(fēng)情 ” 網(wǎng)頁(yè) 層標(biāo)簽語(yǔ)句格式講解 目錄 上一頁(yè) 下一頁(yè) 退出 通過(guò)完成本任務(wù)學(xué)習(xí)了使用 HTML代碼插入圖像和層、 為
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1