網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主課件_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主課件_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主課件_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主課件_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主課件_第5頁(yè)
已閱讀5頁(yè)，還剩81頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作單元10設(shè)計(jì)與制作網(wǎng)站主頁(yè)教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航

】

1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)訓(xùn)練考核評(píng)價(jià)】3【同步訓(xùn)練/同步訓(xùn)練考核評(píng)價(jià)】

4【拓展訓(xùn)練/拓展訓(xùn)練考核評(píng)價(jià)】5教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航】1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的主體布局結(jié)構(gòu)（2）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的局部布局結(jié)構(gòu)（3）能設(shè)計(jì)與制作導(dǎo)航欄，會(huì)使用浮動(dòng)框架（4）會(huì)插入Flv視頻、APDiv對(duì)象和SWF動(dòng)畫(huà)（5）會(huì)設(shè)計(jì)連續(xù)滾動(dòng)圖片的特效（6）會(huì)創(chuàng)建包含底部導(dǎo)航欄和版權(quán)信息的腳本文件，在網(wǎng)頁(yè)中插入外部腳本文件（7）會(huì)設(shè)計(jì)用戶(hù)登錄表單（8）了解實(shí)現(xiàn)狀態(tài)欄中文字移動(dòng)功能的方法

本單元重點(diǎn)（1）應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)頁(yè)的布局結(jié)構(gòu)（2）設(shè)計(jì)與制作導(dǎo)航欄（3）插入Flv視頻、APDiv對(duì)象和SWF動(dòng)畫(huà)

本單元難點(diǎn)（1）設(shè)計(jì)與制作導(dǎo)航欄（2）設(shè)計(jì)連續(xù)滾動(dòng)圖片的特效（3）實(shí)現(xiàn)狀態(tài)欄中文字移動(dòng)功能

教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、四步訓(xùn)練法（操作準(zhǔn)備－引導(dǎo)訓(xùn)練－同步訓(xùn)練－拓展訓(xùn)練）

課時(shí)建議2課時(shí)（含考核評(píng)價(jià)）【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的主體【操作準(zhǔn)備】（1）創(chuàng)建所需的文件夾，拷貝所需的資源（2）啟動(dòng)DreamweaverCS6（3）創(chuàng)建本地站點(diǎn)（4）新建一個(gè)網(wǎng)頁(yè)文檔（5）設(shè)置網(wǎng)頁(yè)標(biāo)題（6）保存該網(wǎng)頁(yè)?！静僮鳒?zhǔn)備】（1）創(chuàng)建所需的文件夾，拷貝所需的資源【引導(dǎo)訓(xùn)練】【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁(yè)本單元“引導(dǎo)訓(xùn)練”的任務(wù)卡如表10-1所示?！疽龑?dǎo)訓(xùn)練】【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁(yè)【引導(dǎo)訓(xùn)練】設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的主體布局結(jié)構(gòu)，應(yīng)用div+CSS對(duì)網(wǎng)站主頁(yè)的主體結(jié)構(gòu)進(jìn)行布局。【任務(wù)描述】【任務(wù)10-1-1】網(wǎng)站主頁(yè)主體布局結(jié)構(gòu)設(shè)計(jì)【引導(dǎo)訓(xùn)練】設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的主體布【任務(wù)實(shí)施】1．定義網(wǎng)頁(yè)主體布局結(jié)構(gòu)的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“style.css”，在該樣式文件中定義網(wǎng)頁(yè)布局結(jié)構(gòu)所需的CSS樣式。網(wǎng)站主頁(yè)index1001.html的主體布局示意圖如圖10-1所示。圖10-1網(wǎng)站主頁(yè)index1001.html的主體布局示意圖

【任務(wù)實(shí)施】1．定義網(wǎng)頁(yè)主體布局結(jié)構(gòu)的CSS樣式圖10-1【任務(wù)實(shí)施】（1）定義body標(biāo)簽的樣式body標(biāo)簽的屬性設(shè)置如表10-3所示。（2）定義innerWrapper樣式innerWrapper樣式的屬性設(shè)置如表10-4所示。（3）定義ly-header樣式ly-header樣式的屬性設(shè)置如表10-5所示。（4）定義sidebar樣式sidebar樣式的屬性設(shè)置如表10-6所示。（5）定義content樣式content樣式的屬性設(shè)置如表10-7所示。（6）定義proPanel樣式proPanel樣式的屬性設(shè)置如表10-8所示。（7）定義left樣式left樣式的屬性設(shè)置如表10-9所示?！救蝿?wù)實(shí)施】（1）定義body標(biāo)簽的樣式【任務(wù)實(shí)施】（8）定義right樣式right樣式的屬性設(shè)置如表10-10所示。（9）定義proPanelCon2樣式proPanelCon2樣式的屬性設(shè)置如表10-11所示。（10）定義ly-footer樣式ly-footer樣式的屬性設(shè)置如表10-12所示。2．鏈接外部樣式文件style.css在網(wǎng)頁(yè)index1001.html中鏈接外部樣式文件style.css，在網(wǎng)頁(yè)的“<head></head>”內(nèi)新增一行代碼：<linkhref="style/style.css"rel="stylesheet"type="text/css"/>3．應(yīng)用div+CSS布局網(wǎng)頁(yè)在網(wǎng)站主頁(yè)中插入div標(biāo)簽布局該網(wǎng)頁(yè)，網(wǎng)站主頁(yè)的主體布局結(jié)構(gòu)代碼如表10-13所示?！救蝿?wù)實(shí)施】（8）定義right樣式【引導(dǎo)訓(xùn)練】（1）在樣式文件“style.css”中定義網(wǎng)站主頁(yè)index1001.html的局部布局結(jié)構(gòu)所需的CSS樣式。（2）設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的局部布局結(jié)構(gòu)，應(yīng)用div+CSS對(duì)網(wǎng)站主頁(yè)的局部結(jié)構(gòu)進(jìn)行布局?！救蝿?wù)描述】【任務(wù)10-1-2】網(wǎng)站主頁(yè)局部布局結(jié)構(gòu)設(shè)計(jì)【引導(dǎo)訓(xùn)練】（1）在樣式文件“style.css”中定義網(wǎng)站【任務(wù)實(shí)施】1．定義中部左側(cè)區(qū)塊布局結(jié)構(gòu)的CSS樣式（1）定義panel樣式panel樣式的屬性設(shè)置如表10-14所示。（2）定義panel-login樣式panel-login樣式的屬性設(shè)置如表10-15所示。（3）定義banner樣式banner樣式的屬性設(shè)置如表10-16所示。（4）定義panel-title樣式panel-title樣式的屬性設(shè)置如表10-17所示。2．應(yīng)用div+CSS布局中部左側(cè)區(qū)塊中部左側(cè)區(qū)塊的布局結(jié)構(gòu)代碼如表10-18所示?！救蝿?wù)實(shí)施】1．定義中部左側(cè)區(qū)塊布局結(jié)構(gòu)的CSS樣式【任務(wù)實(shí)施】3．定義中部右側(cè)主體區(qū)塊布局結(jié)構(gòu)的CSS樣式（1）定義proPanelCon1樣式proPanelCon1樣式的屬性設(shè)置如表10-19所示。（2）定義proPanelCon3樣式proPanelCon3樣式的屬性設(shè)置如表10-20所示。（3）定義mapPanel樣式mapPanel樣式的屬性設(shè)置如表10-21所示。（4）定義pro-title樣式pro-title樣式的屬性設(shè)置如表10-22所示。（5）定義pro-img樣式pro-img樣式的屬性設(shè)置如表10-23所示。（6）定義pro-intro樣式pro-intro樣式的屬性設(shè)置如表10-24所示。（7）定義pro-more樣式pro-more樣式的屬性設(shè)置如表10-25所示?！救蝿?wù)實(shí)施】3．定義中部右側(cè)主體區(qū)塊布局結(jié)構(gòu)的CSS樣式【任務(wù)實(shí)施】4．應(yīng)用div+CSS布局右側(cè)的主體區(qū)塊右側(cè)主體區(qū)塊的布局結(jié)構(gòu)代碼如表10-26所示。5．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的左部右側(cè)主體區(qū)塊左部的布局結(jié)構(gòu)代碼如表10-27所示。6．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的右部右側(cè)主體區(qū)塊右部的布局結(jié)構(gòu)代碼如表10-28所示。7．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的中部右側(cè)主體區(qū)塊中部的布局結(jié)構(gòu)代碼如表10-29所示?！救蝿?wù)實(shí)施】4．應(yīng)用div+CSS布局右側(cè)的主體區(qū)塊【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作一個(gè)包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav.html，該網(wǎng)頁(yè)顯示在網(wǎng)站主頁(yè)index1001.html的頂部浮動(dòng)框架中?！救蝿?wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav.html

【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作一個(gè)包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav【任務(wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔top_nav.html在文件夾“webPage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔top_nav.html，該網(wǎng)頁(yè)將在網(wǎng)站主頁(yè)頂部的浮動(dòng)框架中顯示。2．定義網(wǎng)頁(yè)文檔top_nav.html的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“menu.css”，在該樣式文件中定義網(wǎng)頁(yè)top_nav.html中所需的CSS樣式。（1）定義標(biāo)簽td的樣式標(biāo)簽td樣式的屬性設(shè)置如表10-30所示?！救蝿?wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔top_nav.html【任務(wù)實(shí)施】（2）定義標(biāo)簽a的樣式標(biāo)簽a的屬性設(shè)置如表10-31所示。（3）定義first_nav樣式first_nav樣式的屬性設(shè)置如表10-32所示。（4）定義樣式first_nav內(nèi)所包含元素的樣式first_nav樣式內(nèi)所包含元素的樣式的屬性設(shè)置如表10-33所示。（5）定義second_nav樣式second_nav樣式的屬性設(shè)置如表10-34所示。（6）定義樣式second_nav內(nèi)所包含元素的樣式樣式second_nav內(nèi)所包含元素的樣式的屬性設(shè)置如表10-35所示。（7）定義網(wǎng)站主頁(yè)index1001.html的二級(jí)導(dǎo)航菜單的樣式二級(jí)導(dǎo)航菜單的樣式的屬性設(shè)置如表10-36所示?！救蝿?wù)實(shí)施】（2）定義標(biāo)簽a的樣式【任務(wù)實(shí)施】3．編寫(xiě)JavaScript代碼，實(shí)現(xiàn)網(wǎng)頁(yè)特效（1）在網(wǎng)頁(yè)中顯示當(dāng)前日期在網(wǎng)頁(yè)中顯示當(dāng)前日期的JavaScript代碼如表10-37所示，在網(wǎng)頁(yè)文檔top_nav.html的<head>與</head>之間添加這些JavaScript代碼。然后在網(wǎng)頁(yè)中需要顯示當(dāng)前日期的位置添加以下代碼即可。<scriptlanguage="javascript"type="text/javascript">showNowDate()</script>【任務(wù)實(shí)施】3．編寫(xiě)JavaScript代碼，實(shí)現(xiàn)網(wǎng)頁(yè)特效【任務(wù)實(shí)施】（2）動(dòng)態(tài)切換二級(jí)菜單在文件夾“js”中創(chuàng)建一個(gè)JavaScript文檔“menu.js”，在該文檔中編寫(xiě)動(dòng)態(tài)切換二級(jí)菜單的JavaScript代碼，如表10-38所示。在網(wǎng)頁(yè)文檔top_nav.html的<head>與</head>之間添加以下代碼鏈接外部腳本文件menu.js：<scriptlanguage='JavaScript'type='text/JavaScript'src='../js/menu.js'></script>。4．應(yīng)用div+CSS布局網(wǎng)頁(yè)文檔top_nav.html（1）編寫(xiě)一級(jí)導(dǎo)航菜單的布局結(jié)構(gòu)代碼（2）編寫(xiě)二級(jí)導(dǎo)航菜單的布局結(jié)構(gòu)代碼【任務(wù)實(shí)施】（2）動(dòng)態(tài)切換二級(jí)菜單【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)頁(yè)image_move.htm，該頁(yè)面中包含連續(xù)滾動(dòng)圖片的網(wǎng)頁(yè)特效?！救蝿?wù)描述】【任務(wù)10-1-4】設(shè)計(jì)與制作包含連續(xù)滾動(dòng)圖片特效的的網(wǎng)頁(yè)文檔【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)頁(yè)image_move.htm，該頁(yè)【任務(wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔image_move.html在文件夾“webPage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔image_move.html，該網(wǎng)頁(yè)將在網(wǎng)站主頁(yè)左側(cè)的浮動(dòng)框架中顯示。2．添加div標(biāo)簽和多幅圖片在網(wǎng)頁(yè)文檔image_move.html中插入div標(biāo)簽，然后插入多幅圖片，HTML代碼如表10-39所示。3．編寫(xiě)實(shí)現(xiàn)連續(xù)滾動(dòng)圖片的JavaScript代碼在網(wǎng)頁(yè)文檔image_move.html中添加實(shí)現(xiàn)連續(xù)滾動(dòng)圖片的JavaScript代碼，這些代碼位于已插入的div標(biāo)簽之后，如表10-40所示?！救蝿?wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔image_move.html【引導(dǎo)訓(xùn)練】創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的代碼?！救蝿?wù)描述】【任務(wù)10-1-5】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的腳本文件【引導(dǎo)訓(xùn)練】創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer.js”，在該文件中輸入表10-41所示的代碼。表10-41腳本文件footer.js的代碼行號(hào)JavaScript代碼010203040506070809101112varfooterContent='';footerContent+='旅游服務(wù)

|

';footerContent+='聯(lián)系我們

|

';footerContent+='網(wǎng)站地圖

|

';footerContent+='旅游調(diào)查

|

';footerContent+='用戶(hù)留言

|

';footerContent+='設(shè)為首頁(yè)

|

';footerContent+='收藏本站<br/>';footerContent+='e游天下網(wǎng)版權(quán)所有Copyright2013-2016?

蝴蝶工作室<br/>';footerContent+='為了您正常的瀏覽頁(yè)面，推薦使用分辨率為1024×768及以上';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html的頂部導(dǎo)航區(qū)域插入浮動(dòng)框架<iframe>…</iframe>?！救蝿?wù)描述】【任務(wù)10-1-6】在網(wǎng)站主頁(yè)的頂部導(dǎo)航區(qū)域插入浮動(dòng)框架【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html的頂部導(dǎo)航【任務(wù)實(shí)施】在網(wǎng)頁(yè)index1001.html中div標(biāo)簽<divid=ly-header></div>內(nèi)插入浮動(dòng)框架，代碼如表10-42所示。表10-42包含浮動(dòng)框架的導(dǎo)航區(qū)域的代碼行號(hào)JavaScript代碼010203040506<divid="ly-header"><iframesrc="webpage/top_nav.html"name="top_nav"id="top_nav"width="100%"marginwidth="0"height="63"marginheight="0"align="middle"scrolling="no"frameborder="0">圖片移動(dòng)

</iframe></div>【任務(wù)實(shí)施】在網(wǎng)頁(yè)index1001.html中div標(biāo)簽<【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域，該區(qū)域中包括用戶(hù)登錄表單、展示圖片和播放視頻區(qū)塊、圖片滾動(dòng)區(qū)塊?！救蝿?wù)描述】【任務(wù)10-1-7】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域，該區(qū)域中包括用戶(hù)登【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁(yè)的用戶(hù)登錄表單（1）定義用戶(hù)登錄表單的CSS樣式在樣式文件“style.css”中定義網(wǎng)頁(yè)中部區(qū)域所需的CSS樣式。重新定義標(biāo)簽form的屬性，代碼如表10-43所示。定義樣式div#panel-login內(nèi)所包含元素的樣式，代碼如表10-44所示。定義標(biāo)簽input的屬性及其所包含元素的樣式，代碼如表10-45所示（2）編寫(xiě)驗(yàn)證用戶(hù)輸入信息的JavaScript代碼驗(yàn)證表單控件中輸入信息的JavaScript代碼如表10-46所示。（3）在用戶(hù)登錄表單插入form與div標(biāo)簽在網(wǎng)頁(yè)index1001.html的用戶(hù)登錄表單中插入表單與div標(biāo)簽，且設(shè)置其屬性，HTML代碼如表10-47所示。（4）在表單中插入表單控件在用戶(hù)登錄表單的表單中分別輸入標(biāo)簽文字，插入文件域、圖像和按鈕?！救蝿?wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁(yè)的用戶(hù)登錄表單【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊（1）定義展示圖片和播放視頻區(qū)塊的CSS樣式在樣式文件“style.css”中定義展示圖片和播放視頻區(qū)塊所需的CSS樣式。重新定義標(biāo)簽“td”的樣式，代碼如表10-49所示。重新定義標(biāo)簽“a”的樣式，代碼如表10-50所示。（2）編寫(xiě)自定義函數(shù)showContent()實(shí)現(xiàn)動(dòng)態(tài)改變背景的功能自定義函數(shù)showContent()用于動(dòng)態(tài)改變背景，其代碼如表10-51所示。（3）插入一個(gè)1行1列表格table1在div標(biāo)簽<divclass=banner>與</div>之間插入一個(gè)1行1列的表格，設(shè)置其寬度為“175像素”，高度為“128像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table1”，HTML代碼如表10-52所示?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊（4）在表格table1中插入兩個(gè)表格在表格table1中先插入一個(gè)4行1列的表格，設(shè)置其寬度為“175像素”，高度為“20像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table11”。在該表格的第2個(gè)和第3個(gè)單元格中輸入文字，設(shè)置單元格的背景圖像，輸入必要的代碼，代碼如表10-53所示。在表格table11的下方插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table12”，代碼如表10-54所示。（5）在表格table12中插入兩個(gè)表格在表格table12中先插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“content_1”，顯示方式為“block”，代碼如表10-55所示?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊將光標(biāo)置于表格content_1的單元格中，在DreamweaverCS6的主界面中，選擇命令【插入】→【媒體】→【FLV…】，打開(kāi)【插入FLV】對(duì)話(huà)框，在該對(duì)話(huà)框中輸入Flv視頻的URL，設(shè)置Flv視頻的屬性。然后單擊【確定】按鈕，在表格content_1的單元格中完成flv格式視頻的插入。在表格content_1中選取所插入的Flv視頻，在【屬性】面板中對(duì)其屬性進(jìn)行設(shè)置。切換到【代碼】視圖，在表格content_1的下方輸入HTML代碼，插入另一個(gè)1行1列的表格，其ID標(biāo)識(shí)為“content_2”，顯示方式為“none”，且在表格content_2中的單元格中插入一幅圖像，代碼如表10-56所示。在div標(biāo)簽<divclass=panel-title>與</div>之間輸入文字“神奇的自然界”，插入文件夾“images”中的圖像“more.gif”?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】3．設(shè)計(jì)與制作主頁(yè)的圖片滾動(dòng)區(qū)域在div標(biāo)簽<divclass=banner>與</div>之間插入浮動(dòng)框架，顯示網(wǎng)頁(yè)“image_move.html”，代碼如表10-57所示。4．設(shè)計(jì)與制作主頁(yè)index1001.html中部右側(cè)的主體區(qū)域（1）在proPanel區(qū)域輸入文字和插入圖像在網(wǎng)站主頁(yè)index1001.html中部右側(cè)的主體區(qū)域中輸入文字，插入圖像，HTML代碼如表10-58所示，其瀏覽效果如圖10-5所示。（2）在mapPanel區(qū)域插入景點(diǎn)分布圖在mapPanel區(qū)域插入一幅景點(diǎn)分布圖，HTML代碼如表10-59所示。圖10-5網(wǎng)頁(yè)中部右側(cè)主體區(qū)域?yàn)g覽效果

【任務(wù)實(shí)施】3．設(shè)計(jì)與制作主頁(yè)的圖片滾動(dòng)區(qū)域圖10-5網(wǎng)頁(yè)【引導(dǎo)訓(xùn)練】先在網(wǎng)頁(yè)中插入兩個(gè)APDiv對(duì)象，然后在APDiv對(duì)象中各插入一個(gè)SWF動(dòng)畫(huà)?！救蝿?wù)描述】【任務(wù)10-1-8】在主頁(yè)中插入APDiv對(duì)象和SWF動(dòng)畫(huà)【引導(dǎo)訓(xùn)練】先在網(wǎng)頁(yè)中插入兩個(gè)APDiv對(duì)象，然后在AP【任務(wù)實(shí)施】1．插入APDiv對(duì)象在網(wǎng)頁(yè)index1001.html中景點(diǎn)分布圖map01.gif左下角插入一個(gè)APDiv對(duì)象layer1，且設(shè)置其屬性。同樣在圖像m03.jpg的位置插入一個(gè)APDiv對(duì)象layer2且設(shè)置其屬性。兩個(gè)APDiv對(duì)象的CSS樣式代碼如表10-60所示。2．在APDiv對(duì)象中插入SWF動(dòng)畫(huà)在APDiv對(duì)象layer1中插入文件夾“flash”中的SWF動(dòng)畫(huà)“01.swf”，且將其寬度設(shè)置為“233”，高度設(shè)置為“122”。同樣，在APDiv對(duì)象layer2中插入文件夾“flash”中的SWF動(dòng)畫(huà)“02.swf”，且將其寬度設(shè)置為“147”，高度設(shè)置為“102”?！救蝿?wù)實(shí)施】1．插入APDiv對(duì)象【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html中插入外部腳本文件footer.js，設(shè)置網(wǎng)頁(yè)的底部導(dǎo)航欄和版權(quán)信息?！救蝿?wù)描述】【任務(wù)10-1-9】在主頁(yè)index1001.html中插入外部腳本文件【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html中插入外部【任務(wù)實(shí)施】在div標(biāo)簽<divid=ly-footer>與</div>之間插入文件夾“js”中的腳本文件“footer.js”

，設(shè)置網(wǎng)頁(yè)的底部導(dǎo)航欄和版權(quán)信息，代碼如下所示。<scriptlanguage=javascriptsrc="js/footer.js"type=text/javascript></script>【任務(wù)實(shí)施】在div標(biāo)簽<divid=ly-foo【引導(dǎo)訓(xùn)練】編寫(xiě)JavaScript代碼，實(shí)現(xiàn)主頁(yè)index1001.html的狀態(tài)欄中文字的移動(dòng)功能。【任務(wù)描述】【任務(wù)10-1-10】在主頁(yè)index1001.html中實(shí)現(xiàn)狀態(tài)欄中文字的移動(dòng)效果【引導(dǎo)訓(xùn)練】編寫(xiě)JavaScript代碼，實(shí)現(xiàn)主頁(yè)index【任務(wù)實(shí)施】切換到【代碼】視圖，在網(wǎng)頁(yè)index1001.html的head部分輸入如表10-61所示JavaScript代碼，實(shí)現(xiàn)狀態(tài)欄中文字的移動(dòng)效果?！救蝿?wù)實(shí)施】切換到【代碼】視圖，在網(wǎng)頁(yè)index1001.h【引導(dǎo)訓(xùn)練考核實(shí)戰(zhàn)】本單元的“引導(dǎo)訓(xùn)練”考核評(píng)價(jià)內(nèi)容如表10-62所示。表10-62單元10“引導(dǎo)訓(xùn)練”考核評(píng)價(jià)表

【引導(dǎo)訓(xùn)練考核實(shí)戰(zhàn)】本單元的“引導(dǎo)訓(xùn)練”考核評(píng)價(jià)內(nèi)容【同步訓(xùn)練】【任務(wù)描述】【任務(wù)10-2】制作“快樂(lè)旅游”網(wǎng)站的主頁(yè)

表10-63單元10“同步訓(xùn)練”任務(wù)卡本單元“同步訓(xùn)練”的任務(wù)卡如表10-63所示?！就接?xùn)練】【任務(wù)描述】【任務(wù)10-2】制作“快樂(lè)旅游”網(wǎng)站【同步訓(xùn)練考核實(shí)戰(zhàn)】本單元的“同步訓(xùn)練”考核評(píng)價(jià)內(nèi)容如表10-71所示。表10-71單元10“同步訓(xùn)練”考核評(píng)價(jià)表

【同步訓(xùn)練考核實(shí)戰(zhàn)】本單元的“同步訓(xùn)練”考核評(píng)價(jià)內(nèi)容如表1【拓展訓(xùn)練】【任務(wù)描述】【任務(wù)10-3】制作“愛(ài)旅游”網(wǎng)站的主頁(yè)

表10-72單元10“拓展訓(xùn)練”任務(wù)卡本單元“拓展訓(xùn)練”的任務(wù)卡如表10-72所示?！就卣褂?xùn)練】【任務(wù)描述】【任務(wù)10-3】制作“愛(ài)旅游”網(wǎng)站的【拓展訓(xùn)練考核實(shí)戰(zhàn)】本單元的“拓展訓(xùn)練”考核評(píng)價(jià)內(nèi)容如表10-74所示。表10-74單元10“拓展訓(xùn)練”考核評(píng)價(jià)表

【拓展訓(xùn)練考核實(shí)戰(zhàn)】本單元的“拓展訓(xùn)練”考核評(píng)價(jià)內(nèi)容如表【單元小結(jié)】本單元綜合運(yùn)用了多方面的知識(shí)和技能設(shè)計(jì)與制作網(wǎng)站的主頁(yè)，詳細(xì)介紹了該網(wǎng)頁(yè)的主體布局結(jié)構(gòu)和局部布局結(jié)構(gòu)的設(shè)計(jì)過(guò)程。本單元運(yùn)用了div+CSS布局網(wǎng)頁(yè)，該網(wǎng)頁(yè)中包含了多種網(wǎng)頁(yè)元素：文字、圖像、導(dǎo)航欄、浮動(dòng)框架、表單、視頻、APDiv、SWF動(dòng)畫(huà)，也展示了這些網(wǎng)頁(yè)元素的綜合運(yùn)用效果。該網(wǎng)頁(yè)的底部導(dǎo)航欄和版權(quán)信息通過(guò)插入外部腳本文件footer.js獲取，同時(shí)使用了JavaScript程序?qū)崿F(xiàn)狀態(tài)欄中文字的移動(dòng)功能。【單元小結(jié)】本單元綜合運(yùn)用了多方面的知識(shí)和技能設(shè)計(jì)快樂(lè)學(xué)習(xí)、高效學(xué)習(xí)快樂(lè)學(xué)習(xí)、高效學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程單元10設(shè)計(jì)與制作網(wǎng)站主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作單元10設(shè)計(jì)與制作網(wǎng)站主頁(yè)教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航

】

1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)訓(xùn)練考核評(píng)價(jià)】3【同步訓(xùn)練/同步訓(xùn)練考核評(píng)價(jià)】

4【拓展訓(xùn)練/拓展訓(xùn)練考核評(píng)價(jià)】5教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航】1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的主體布局結(jié)構(gòu)（2）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的局部布局結(jié)構(gòu)（3）能設(shè)計(jì)與制作導(dǎo)航欄，會(huì)使用浮動(dòng)框架（4）會(huì)插入Flv視頻、APDiv對(duì)象和SWF動(dòng)畫(huà)（5）會(huì)設(shè)計(jì)連續(xù)滾動(dòng)圖片的特效（6）會(huì)創(chuàng)建包含底部導(dǎo)航欄和版權(quán)信息的腳本文件，在網(wǎng)頁(yè)中插入外部腳本文件（7）會(huì)設(shè)計(jì)用戶(hù)登錄表單（8）了解實(shí)現(xiàn)狀態(tài)欄中文字移動(dòng)功能的方法

本單元重點(diǎn)（1）應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)頁(yè)的布局結(jié)構(gòu)（2）設(shè)計(jì)與制作導(dǎo)航欄（3）插入Flv視頻、APDiv對(duì)象和SWF動(dòng)畫(huà)

本單元難點(diǎn)（1）設(shè)計(jì)與制作導(dǎo)航欄（2）設(shè)計(jì)連續(xù)滾動(dòng)圖片的特效（3）實(shí)現(xiàn)狀態(tài)欄中文字移動(dòng)功能

教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、四步訓(xùn)練法（操作準(zhǔn)備－引導(dǎo)訓(xùn)練－同步訓(xùn)練－拓展訓(xùn)練）

課時(shí)建議2課時(shí)（含考核評(píng)價(jià)）【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）能應(yīng)用CSS樣式設(shè)計(jì)網(wǎng)站主頁(yè)的主體【操作準(zhǔn)備】（1）創(chuàng)建所需的文件夾，拷貝所需的資源（2）啟動(dòng)DreamweaverCS6（3）創(chuàng)建本地站點(diǎn)（4）新建一個(gè)網(wǎng)頁(yè)文檔（5）設(shè)置網(wǎng)頁(yè)標(biāo)題（6）保存該網(wǎng)頁(yè)?！静僮鳒?zhǔn)備】（1）創(chuàng)建所需的文件夾，拷貝所需的資源【引導(dǎo)訓(xùn)練】【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁(yè)本單元“引導(dǎo)訓(xùn)練”的任務(wù)卡如表10-1所示。【引導(dǎo)訓(xùn)練】【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁(yè)【引導(dǎo)訓(xùn)練】設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的主體布局結(jié)構(gòu)，應(yīng)用div+CSS對(duì)網(wǎng)站主頁(yè)的主體結(jié)構(gòu)進(jìn)行布局?！救蝿?wù)描述】【任務(wù)10-1-1】網(wǎng)站主頁(yè)主體布局結(jié)構(gòu)設(shè)計(jì)【引導(dǎo)訓(xùn)練】設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的主體布【任務(wù)實(shí)施】1．定義網(wǎng)頁(yè)主體布局結(jié)構(gòu)的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“style.css”，在該樣式文件中定義網(wǎng)頁(yè)布局結(jié)構(gòu)所需的CSS樣式。網(wǎng)站主頁(yè)index1001.html的主體布局示意圖如圖10-1所示。圖10-1網(wǎng)站主頁(yè)index1001.html的主體布局示意圖

【任務(wù)實(shí)施】1．定義網(wǎng)頁(yè)主體布局結(jié)構(gòu)的CSS樣式圖10-1【任務(wù)實(shí)施】（1）定義body標(biāo)簽的樣式body標(biāo)簽的屬性設(shè)置如表10-3所示。（2）定義innerWrapper樣式innerWrapper樣式的屬性設(shè)置如表10-4所示。（3）定義ly-header樣式ly-header樣式的屬性設(shè)置如表10-5所示。（4）定義sidebar樣式sidebar樣式的屬性設(shè)置如表10-6所示。（5）定義content樣式content樣式的屬性設(shè)置如表10-7所示。（6）定義proPanel樣式proPanel樣式的屬性設(shè)置如表10-8所示。（7）定義left樣式left樣式的屬性設(shè)置如表10-9所示。【任務(wù)實(shí)施】（1）定義body標(biāo)簽的樣式【任務(wù)實(shí)施】（8）定義right樣式right樣式的屬性設(shè)置如表10-10所示。（9）定義proPanelCon2樣式proPanelCon2樣式的屬性設(shè)置如表10-11所示。（10）定義ly-footer樣式ly-footer樣式的屬性設(shè)置如表10-12所示。2．鏈接外部樣式文件style.css在網(wǎng)頁(yè)index1001.html中鏈接外部樣式文件style.css，在網(wǎng)頁(yè)的“<head></head>”內(nèi)新增一行代碼：<linkhref="style/style.css"rel="stylesheet"type="text/css"/>3．應(yīng)用div+CSS布局網(wǎng)頁(yè)在網(wǎng)站主頁(yè)中插入div標(biāo)簽布局該網(wǎng)頁(yè)，網(wǎng)站主頁(yè)的主體布局結(jié)構(gòu)代碼如表10-13所示?！救蝿?wù)實(shí)施】（8）定義right樣式【引導(dǎo)訓(xùn)練】（1）在樣式文件“style.css”中定義網(wǎng)站主頁(yè)index1001.html的局部布局結(jié)構(gòu)所需的CSS樣式。（2）設(shè)計(jì)網(wǎng)站主頁(yè)index1001.html的局部布局結(jié)構(gòu)，應(yīng)用div+CSS對(duì)網(wǎng)站主頁(yè)的局部結(jié)構(gòu)進(jìn)行布局?！救蝿?wù)描述】【任務(wù)10-1-2】網(wǎng)站主頁(yè)局部布局結(jié)構(gòu)設(shè)計(jì)【引導(dǎo)訓(xùn)練】（1）在樣式文件“style.css”中定義網(wǎng)站【任務(wù)實(shí)施】1．定義中部左側(cè)區(qū)塊布局結(jié)構(gòu)的CSS樣式（1）定義panel樣式panel樣式的屬性設(shè)置如表10-14所示。（2）定義panel-login樣式panel-login樣式的屬性設(shè)置如表10-15所示。（3）定義banner樣式banner樣式的屬性設(shè)置如表10-16所示。（4）定義panel-title樣式panel-title樣式的屬性設(shè)置如表10-17所示。2．應(yīng)用div+CSS布局中部左側(cè)區(qū)塊中部左側(cè)區(qū)塊的布局結(jié)構(gòu)代碼如表10-18所示?！救蝿?wù)實(shí)施】1．定義中部左側(cè)區(qū)塊布局結(jié)構(gòu)的CSS樣式【任務(wù)實(shí)施】3．定義中部右側(cè)主體區(qū)塊布局結(jié)構(gòu)的CSS樣式（1）定義proPanelCon1樣式proPanelCon1樣式的屬性設(shè)置如表10-19所示。（2）定義proPanelCon3樣式proPanelCon3樣式的屬性設(shè)置如表10-20所示。（3）定義mapPanel樣式mapPanel樣式的屬性設(shè)置如表10-21所示。（4）定義pro-title樣式pro-title樣式的屬性設(shè)置如表10-22所示。（5）定義pro-img樣式pro-img樣式的屬性設(shè)置如表10-23所示。（6）定義pro-intro樣式pro-intro樣式的屬性設(shè)置如表10-24所示。（7）定義pro-more樣式pro-more樣式的屬性設(shè)置如表10-25所示?！救蝿?wù)實(shí)施】3．定義中部右側(cè)主體區(qū)塊布局結(jié)構(gòu)的CSS樣式【任務(wù)實(shí)施】4．應(yīng)用div+CSS布局右側(cè)的主體區(qū)塊右側(cè)主體區(qū)塊的布局結(jié)構(gòu)代碼如表10-26所示。5．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的左部右側(cè)主體區(qū)塊左部的布局結(jié)構(gòu)代碼如表10-27所示。6．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的右部右側(cè)主體區(qū)塊右部的布局結(jié)構(gòu)代碼如表10-28所示。7．應(yīng)用div+CSS布局右側(cè)主體區(qū)塊的中部右側(cè)主體區(qū)塊中部的布局結(jié)構(gòu)代碼如表10-29所示?！救蝿?wù)實(shí)施】4．應(yīng)用div+CSS布局右側(cè)的主體區(qū)塊【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作一個(gè)包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav.html，該網(wǎng)頁(yè)顯示在網(wǎng)站主頁(yè)index1001.html的頂部浮動(dòng)框架中?！救蝿?wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav.html

【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作一個(gè)包含導(dǎo)航欄的網(wǎng)頁(yè)文檔top_nav【任務(wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔top_nav.html在文件夾“webPage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔top_nav.html，該網(wǎng)頁(yè)將在網(wǎng)站主頁(yè)頂部的浮動(dòng)框架中顯示。2．定義網(wǎng)頁(yè)文檔top_nav.html的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“menu.css”，在該樣式文件中定義網(wǎng)頁(yè)top_nav.html中所需的CSS樣式。（1）定義標(biāo)簽td的樣式標(biāo)簽td樣式的屬性設(shè)置如表10-30所示?！救蝿?wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔top_nav.html【任務(wù)實(shí)施】（2）定義標(biāo)簽a的樣式標(biāo)簽a的屬性設(shè)置如表10-31所示。（3）定義first_nav樣式first_nav樣式的屬性設(shè)置如表10-32所示。（4）定義樣式first_nav內(nèi)所包含元素的樣式first_nav樣式內(nèi)所包含元素的樣式的屬性設(shè)置如表10-33所示。（5）定義second_nav樣式second_nav樣式的屬性設(shè)置如表10-34所示。（6）定義樣式second_nav內(nèi)所包含元素的樣式樣式second_nav內(nèi)所包含元素的樣式的屬性設(shè)置如表10-35所示。（7）定義網(wǎng)站主頁(yè)index1001.html的二級(jí)導(dǎo)航菜單的樣式二級(jí)導(dǎo)航菜單的樣式的屬性設(shè)置如表10-36所示?！救蝿?wù)實(shí)施】（2）定義標(biāo)簽a的樣式【任務(wù)實(shí)施】3．編寫(xiě)JavaScript代碼，實(shí)現(xiàn)網(wǎng)頁(yè)特效（1）在網(wǎng)頁(yè)中顯示當(dāng)前日期在網(wǎng)頁(yè)中顯示當(dāng)前日期的JavaScript代碼如表10-37所示，在網(wǎng)頁(yè)文檔top_nav.html的<head>與</head>之間添加這些JavaScript代碼。然后在網(wǎng)頁(yè)中需要顯示當(dāng)前日期的位置添加以下代碼即可。<scriptlanguage="javascript"type="text/javascript">showNowDate()</script>【任務(wù)實(shí)施】3．編寫(xiě)JavaScript代碼，實(shí)現(xiàn)網(wǎng)頁(yè)特效【任務(wù)實(shí)施】（2）動(dòng)態(tài)切換二級(jí)菜單在文件夾“js”中創(chuàng)建一個(gè)JavaScript文檔“menu.js”，在該文檔中編寫(xiě)動(dòng)態(tài)切換二級(jí)菜單的JavaScript代碼，如表10-38所示。在網(wǎng)頁(yè)文檔top_nav.html的<head>與</head>之間添加以下代碼鏈接外部腳本文件menu.js：<scriptlanguage='JavaScript'type='text/JavaScript'src='../js/menu.js'></script>。4．應(yīng)用div+CSS布局網(wǎng)頁(yè)文檔top_nav.html（1）編寫(xiě)一級(jí)導(dǎo)航菜單的布局結(jié)構(gòu)代碼（2）編寫(xiě)二級(jí)導(dǎo)航菜單的布局結(jié)構(gòu)代碼【任務(wù)實(shí)施】（2）動(dòng)態(tài)切換二級(jí)菜單【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)頁(yè)image_move.htm，該頁(yè)面中包含連續(xù)滾動(dòng)圖片的網(wǎng)頁(yè)特效?！救蝿?wù)描述】【任務(wù)10-1-4】設(shè)計(jì)與制作包含連續(xù)滾動(dòng)圖片特效的的網(wǎng)頁(yè)文檔【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)頁(yè)image_move.htm，該頁(yè)【任務(wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔image_move.html在文件夾“webPage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔image_move.html，該網(wǎng)頁(yè)將在網(wǎng)站主頁(yè)左側(cè)的浮動(dòng)框架中顯示。2．添加div標(biāo)簽和多幅圖片在網(wǎng)頁(yè)文檔image_move.html中插入div標(biāo)簽，然后插入多幅圖片，HTML代碼如表10-39所示。3．編寫(xiě)實(shí)現(xiàn)連續(xù)滾動(dòng)圖片的JavaScript代碼在網(wǎng)頁(yè)文檔image_move.html中添加實(shí)現(xiàn)連續(xù)滾動(dòng)圖片的JavaScript代碼，這些代碼位于已插入的div標(biāo)簽之后，如表10-40所示?！救蝿?wù)實(shí)施】1．創(chuàng)建網(wǎng)頁(yè)文檔image_move.html【引導(dǎo)訓(xùn)練】創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的代碼?！救蝿?wù)描述】【任務(wù)10-1-5】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的腳本文件【引導(dǎo)訓(xùn)練】創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer.js”，在該文件中輸入表10-41所示的代碼。表10-41腳本文件footer.js的代碼行號(hào)JavaScript代碼010203040506070809101112varfooterContent='';footerContent+='旅游服務(wù)

|

';footerContent+='聯(lián)系我們

|

';footerContent+='網(wǎng)站地圖

|

';footerContent+='旅游調(diào)查

|

';footerContent+='用戶(hù)留言

|

';footerContent+='設(shè)為首頁(yè)

|

';footerContent+='收藏本站<br/>';footerContent+='e游天下網(wǎng)版權(quán)所有Copyright2013-2016?

蝴蝶工作室<br/>';footerContent+='為了您正常的瀏覽頁(yè)面，推薦使用分辨率為1024×768及以上';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html的頂部導(dǎo)航區(qū)域插入浮動(dòng)框架<iframe>…</iframe>?！救蝿?wù)描述】【任務(wù)10-1-6】在網(wǎng)站主頁(yè)的頂部導(dǎo)航區(qū)域插入浮動(dòng)框架【引導(dǎo)訓(xùn)練】在網(wǎng)站主頁(yè)index1001.html的頂部導(dǎo)航【任務(wù)實(shí)施】在網(wǎng)頁(yè)index1001.html中div標(biāo)簽<divid=ly-header></div>內(nèi)插入浮動(dòng)框架，代碼如表10-42所示。表10-42包含浮動(dòng)框架的導(dǎo)航區(qū)域的代碼行號(hào)JavaScript代碼010203040506<divid="ly-header"><iframesrc="webpage/top_nav.html"name="top_nav"id="top_nav"width="100%"marginwidth="0"height="63"marginheight="0"align="middle"scrolling="no"frameborder="0">圖片移動(dòng)

</iframe></div>【任務(wù)實(shí)施】在網(wǎng)頁(yè)index1001.html中div標(biāo)簽<【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域，該區(qū)域中包括用戶(hù)登錄表單、展示圖片和播放視頻區(qū)塊、圖片滾動(dòng)區(qū)塊?！救蝿?wù)描述】【任務(wù)10-1-7】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域【引導(dǎo)訓(xùn)練】設(shè)計(jì)與制作網(wǎng)站主頁(yè)的中部區(qū)域，該區(qū)域中包括用戶(hù)登【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁(yè)的用戶(hù)登錄表單（1）定義用戶(hù)登錄表單的CSS樣式在樣式文件“style.css”中定義網(wǎng)頁(yè)中部區(qū)域所需的CSS樣式。重新定義標(biāo)簽form的屬性，代碼如表10-43所示。定義樣式div#panel-login內(nèi)所包含元素的樣式，代碼如表10-44所示。定義標(biāo)簽input的屬性及其所包含元素的樣式，代碼如表10-45所示（2）編寫(xiě)驗(yàn)證用戶(hù)輸入信息的JavaScript代碼驗(yàn)證表單控件中輸入信息的JavaScript代碼如表10-46所示。（3）在用戶(hù)登錄表單插入form與div標(biāo)簽在網(wǎng)頁(yè)index1001.html的用戶(hù)登錄表單中插入表單與div標(biāo)簽，且設(shè)置其屬性，HTML代碼如表10-47所示。（4）在表單中插入表單控件在用戶(hù)登錄表單的表單中分別輸入標(biāo)簽文字，插入文件域、圖像和按鈕?！救蝿?wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁(yè)的用戶(hù)登錄表單【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊（1）定義展示圖片和播放視頻區(qū)塊的CSS樣式在樣式文件“style.css”中定義展示圖片和播放視頻區(qū)塊所需的CSS樣式。重新定義標(biāo)簽“td”的樣式，代碼如表10-49所示。重新定義標(biāo)簽“a”的樣式，代碼如表10-50所示。（2）編寫(xiě)自定義函數(shù)showContent()實(shí)現(xiàn)動(dòng)態(tài)改變背景的功能自定義函數(shù)showContent()用于動(dòng)態(tài)改變背景，其代碼如表10-51所示。（3）插入一個(gè)1行1列表格table1在div標(biāo)簽<divclass=banner>與</div>之間插入一個(gè)1行1列的表格，設(shè)置其寬度為“175像素”，高度為“128像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table1”，HTML代碼如表10-52所示?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊（4）在表格table1中插入兩個(gè)表格在表格table1中先插入一個(gè)4行1列的表格，設(shè)置其寬度為“175像素”，高度為“20像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table11”。在該表格的第2個(gè)和第3個(gè)單元格中輸入文字，設(shè)置單元格的背景圖像，輸入必要的代碼，代碼如表10-53所示。在表格table11的下方插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table12”，代碼如表10-54所示。（5）在表格table12中插入兩個(gè)表格在表格table12中先插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“content_1”，顯示方式為“block”，代碼如表10-55所示?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊將光標(biāo)置于表格content_1的單元格中，在DreamweaverCS6的主界面中，選擇命令【插入】→【媒體】→【FLV…】，打開(kāi)【插入FLV】對(duì)話(huà)框，在該對(duì)話(huà)框中輸入Flv視頻的URL，設(shè)置Flv視頻的屬性。然后單擊【確定】按鈕，在表格content_1的單元格中完成flv格式視頻的插入。在表格content_1中選取所插入的Flv視頻，在【屬性】面板中對(duì)其屬性進(jìn)行設(shè)置。切換到【代碼】視圖，在表格content_1的下方輸入HTML代碼，插入另一個(gè)1行1列的表格，其ID標(biāo)識(shí)為“content_2”，顯示方式為“none”，且在表格content_2中的單元格中插入一幅圖像，代碼如表10-56所示。在div標(biāo)簽<divclass=panel-title>與</div>之間輸入文字“神奇的自然界”，插入文件夾“images”中的圖像“more.gif”?！救蝿?wù)實(shí)施】2．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊【任務(wù)實(shí)施】3．設(shè)計(jì)與制作主頁(yè)的圖片滾動(dòng)區(qū)域在div標(biāo)簽<divclass=banner>與</div>之間插入浮動(dòng)框架，顯示網(wǎng)頁(yè)“image_move.html”，代碼如表10-57所示。4．設(shè)計(jì)與制作主頁(yè)index1001.html中部右側(cè)的主體區(qū)域（1）在proPanel區(qū)域輸入文字和插入圖像在網(wǎng)站主頁(yè)index1001.html中部右側(cè)的主體區(qū)域中輸入文字，插入圖像，HTML代碼如表10-58所示，其瀏覽效果如圖10-5所示。

溫馨提示

  • 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)論