【任務(wù)10-1】制作“E游天下”網(wǎng)站的主課件2

網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程

（第3版）網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程2單元10設(shè)計(jì)網(wǎng)站主頁與整合網(wǎng)站【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁2單元10設(shè)計(jì)網(wǎng)站主頁與整合網(wǎng)站【任務(wù)10-1】制作“E游3網(wǎng)頁index1001.html的瀏覽效果如圖10-1所示。圖10-1網(wǎng)頁index1001.html的瀏覽效果3網(wǎng)頁index1001.html的瀏覽效果如圖10-1所示4【任務(wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作網(wǎng)頁的

頂部導(dǎo)航欄設(shè)計(jì)與制作網(wǎng)頁index1001.html的頂部導(dǎo)航欄。4【任務(wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作網(wǎng)頁的設(shè)計(jì)與制作5【任務(wù)實(shí)施】1．定義網(wǎng)頁頂部導(dǎo)航欄的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“topnav.css”，在該樣式文件中定義頂部導(dǎo)航欄所需的CSS樣式，該樣式文件的CSS代碼定義如表10-26所示。5【任務(wù)實(shí)施】1．定義網(wǎng)頁頂部導(dǎo)航欄的CSS樣式6表10-26樣式文件topnav.css的CSS代碼定義序號(hào)CSS代碼序號(hào)CSS代碼123456789101112131415161718192021222324252627282930313233343536373839404142434445#nav{width:980px;margin-left:40px;}

#nava{display:block;width:100px;text-align:center;line-height:40px;font-weight:bold;}

#nava:link{color:#2b98db;text-decoration:none;}

#nava:visited{color:#2b98db;text-decoration:none;}

#nava:hover{color:#2b98db;text-decoration:none;font-weight:bold;}

#navul{list-style-type:none;}

#navli{float:left;width:100px;margin:0px;padding:0px;list-style-type:none;}

#navlia:hover{background:#999;font-weight:bold;}464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990#navliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:100px;position:absolute;}

#navliulli{float:left;width:100px;background:#CCCCFF;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#FFF;display:block;z-index:0;}

#navliula{display:block;margin:0px;}

#navliula:link{color:#666;text-decoration:none;}

#navliula:visited{color:#666;text-decoration:none;}

#navliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#ccc;font-weight:bold;}

#navli:hoverul{left:auto;}6表10-26樣式文件topnav.css的CSS代碼定義72．在網(wǎng)頁中插入HTML代碼實(shí)現(xiàn)頂部導(dǎo)航功能在網(wǎng)頁index1001.html中頂部位置插入實(shí)現(xiàn)導(dǎo)航欄的HTML代碼，如表10-27所示。表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼行號(hào)JavaScript代碼12345678910111213<divid="daohang"><ulid="nav"><li><ahref="index1001.html">首頁</a></li><li><ahref=""target="_blank">生態(tài)游</a><ul><li><ahref=""target="_blank">九寨溝</a></li><li><ahref=""target="_blank">西雙版納</a></li><li><ahref=""target="_blank">香格里拉</a></li><li><ahref=""target="_blank">云南大理</a></li><li><ahref=""target="_blank">云南麗江</a></li><li><ahref=""target="_blank">桂林山水</a></li></ul></li>72．在網(wǎng)頁中插入HTML代碼實(shí)現(xiàn)頂部導(dǎo)航功能表10-278表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼（續(xù)表）行號(hào)JavaScript代碼14151617181920212223242526272829303132333435363738394041424344<li><ahref=""target="_blank">公園游</a><ul><li><ahref=""target="_blank">張家界</a></li><li><ahref=""target="_blank">天子山</a></li><li><ahref=""target="_blank">索溪峪</a></li><li><ahref=""target="_blank">五岳寨</a></li><li><ahref=""target="_blank">神農(nóng)架</a></li><li><ahref=""target="_blank">長(zhǎng)白山</a></li></ul></li><li><ahref=""target="_blank">山岳游</a><ul><li><ahref=""target="_blank">黃山</a></li><li><ahref=""target="_blank">泰山</a></li><li><ahref=""target="_blank">華山</a></li><li><ahref=""target="_blank">恒山</a></li><li><ahref=""target="_blank">嵩山</a></li><li><ahref=""target="_blank">廬山</a></li></ul></li><li><ahref=""target="_blank">江湖游</a><ul><li><ahref=""target="_blank">千島湖</a></li><li><ahref=""target="_blank">西湖</a></li><li><ahref=""target="_blank">洞庭湖</a></li><li><ahref=""target="_blank">鄱陽湖</a></li><li><ahref=""target="_blank">太湖</a></li><li><ahref=""target="_blank">長(zhǎng)江三峽</a></li><li><ahref=""target="_blank">漓江</a></li></ul></li>8表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中9表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼（續(xù)表）行號(hào)JavaScript代碼454647484950515253545556575859606162636465666768697071727374757677<li><ahref=""target="_blank">名城游</a><ul><li><ahref=""target="_blank">北京</a></li><li><ahref=""target="_blank">上海</a></li><li><ahref=""target="_blank">天津</a></li><li><ahref=""target="_blank">西安</a></li><li><ahref=""target="_blank">西安</a></li><li><ahref=""target="_blank">長(zhǎng)沙</a></li></ul></li><li><ahref=""target="_blank">古鎮(zhèn)游</a><ul><li><ahref=""target="_blank">湖南鳳凰</a></li><li><ahref=""target="_blank">安徽西遞</a></li><li><ahref=""target="_blank">浙江烏鎮(zhèn)</a></li><li><ahref=""target="_blank">江蘇周莊</a></li><li><ahref=""target="_blank">山西平遙</a></li><li><ahref=""target="_blank">江西婺源</a></li></ul></li><li><ahref=""target="_blank">瀑泉游</a><ul><li><ahref=""target="_blank">黃果樹瀑布</a></li><li><ahref=""target="_blank">壺口瀑布</a></li><li><ahref=""target="_blank">長(zhǎng)白瀑布</a></li><li><ahref=""target="_blank">趵突泉</a></li><li><ahref=""target="_blank">谷簾泉</a></li><li><ahref=""target="_blank">虎跑泉</a></li></ul></li><li><ahref=""target="_blank">E游調(diào)查</a></li></ul></div>9表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中10【任務(wù)描述】【任務(wù)10-1-4】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄

和版權(quán)信息的腳本文件創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的代碼。10【任務(wù)描述】【任務(wù)10-1-4】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄創(chuàng)建腳11【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer.js”，在該文件中輸入表10-28所示的代碼。表10-28腳本文件footer.js的代碼行號(hào)JavaScript代碼0102030405060708091011varfooterContent='';footerContent+='旅游服務(wù)|';footerContent+='聯(lián)系我們|';footerContent+='網(wǎng)站地圖|';footerContent+='旅游調(diào)查|';footerContent+='用戶留言|';footerContent+='設(shè)為首頁|';footerContent+='收藏本站<br/>';footerContent+='e游天下網(wǎng)版權(quán)所有Copyright2016-2020?蝴蝶工作室<br/>';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);11【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“foot12【任務(wù)描述】【任務(wù)10-1-5】設(shè)計(jì)與制作網(wǎng)站主頁

的中部區(qū)域設(shè)計(jì)與制作網(wǎng)站主頁的中部區(qū)域，該區(qū)域中包括用戶登錄表單、展示圖片和播放視頻區(qū)塊、圖片滾動(dòng)區(qū)塊。12【任務(wù)描述】【任務(wù)10-1-5】設(shè)計(jì)與制作網(wǎng)站主頁設(shè)計(jì)與13【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁的用戶登錄表單（1）定義用戶登錄表單的CSS樣式在樣式文件“style10.css”中定義網(wǎng)頁中部區(qū)域所需的CSS樣式。重新定義標(biāo)簽form的屬性，代碼如表10-29所示。表10-29標(biāo)簽form的屬性設(shè)置行號(hào)HTML代碼01020304form{padding:0px;margin:0px}13【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁的用戶登錄表單表10-2914定義樣式div#panel-login內(nèi)所包含元素的樣式，代碼如表10-30所示。表10-30樣式div#panel-login內(nèi)所包含元素的樣式代碼行號(hào)CSS樣式代碼010203040506070809101112131415161718192021div#panel-logindiv.panel-title{padding:5px0px0px65px;color:#F30;border-bottom:#FFF1pxsolid;height:20px;}

div#panel-logindiv.panel-content{border-top:1pxsolid#C5E4F7;border-bottom:1pxsolid#FFF;padding:8px0px2px10px;}

div#panel-logindiv.panel-btn{padding-top:5px;text-align:center;padding-bottom:5px;border-top:1pxsolid#C5E4F7;border-bottom:1pxsolid#C5E4F7;margin-bottom:5px;}14定義樣式div#panel-login內(nèi)所包含元素的樣式15定義標(biāo)簽input的屬性及其所包含元素的樣式，代碼如表10-31所示表10-31標(biāo)簽input的屬性設(shè)置及其所包含元素的樣式行號(hào)CSS樣式代碼0102030405060708091011121314151617181920212223242526272829303132input{font:12pxTahoma;}

input.login-text{background:url(../images/text_login_bg.gif)#FFFno-repeatcentercenter;width:110px;color:#467FB6;height:18px;border:1pxsolid#A2D4F2;}

input.btn-bs{width:40px;color:#CCC;height:21px;margin:1px;padding:1px;background:url(../images/menu/btn_bg_bs.gif)no-repeatcenter;border-style:none;font-weight:bolder;}

input.btn-rb{width:70px;color:#000;height:21px;margin:0px;padding:0px;background:url(../images/menu/btn_bg_rb.gif)no-repeatcenter;border-style:none;}15定義標(biāo)簽input的屬性及其所包含元素的樣式，代碼如表116（2）編寫驗(yàn)證用戶輸入信息的JavaScript代碼驗(yàn)證表單控件中輸入信息的JavaScript代碼如表10-32所示。表10-32驗(yàn)證表單控件中輸入信息的JavaScript代碼行號(hào)JavaScript代碼01020304050607080910111213<scriptlanguage=JavaScript>functiongetNewStr(){if(check()){try{returntrue;}catch(e){returnfalse;}returnfalse;}returnfalse;}16（2）編寫驗(yàn)證用戶輸入信息的JavaScript代碼表117表10-32驗(yàn)證表單控件中輸入信息的JavaScript代碼（續(xù)表）行號(hào)JavaScript代碼151617181920212223242526272829303132333435363738394041424344454647484950515253545556functionresetform(){document.all.loginUserform.reset();returnfalse;}

functiontrim(string){if(string==null){return"";}returnstring.replace(/(^\s*)|(\s*$)/g,"");}

functioncheck(){if(trim(document.all.userName.value)==""){errDeal("用戶名不能為空！",document.all.userName);returnfalse;}if(trim(document.all.password.value)==""){errDeal("密碼不能為空！",document.all.password);returnfalse;}if(trim(document.all.captchafield.value)==""){errDeal("驗(yàn)證碼不能為空！",document.all.captchafield);returnfalse;}returntrue;}

functionerrDeal(tip,obj){try{obj.focus();}catch(e){}alert(tip);}</script>17表10-32驗(yàn)證表單控件中輸入信息的JavaScrip18（3）在用戶登錄表單插入form與div標(biāo)簽在網(wǎng)頁index1001.html的用戶登錄表單中插入表單與div標(biāo)簽，且設(shè)置其屬性，HTML代碼如表10-33所示。表10-33用戶登錄表單插入的form與div標(biāo)簽的代碼行號(hào)HTML代碼01020304050607<divclass="panel"id="panel-login"><formname="loginUserform"action=""method="post"target="_blank"><divclass="panel-title"></div><divclass="panel-content"></div><divclass="panel-btn"></div></form></div>18（3）在用戶登錄表單插入form與div標(biāo)簽表10-3319（4）在表單中插入表單控件在用戶登錄表單的表單中分別輸入標(biāo)簽文字，插入文件域、圖像和按鈕，插入完成的HTML代碼如表10-34所示。用戶登錄表單的瀏覽效果如圖10-3所示。圖10-3用戶登錄表單的瀏覽效果19（4）在表單中插入表單控件用戶登錄表單的瀏覽效果如圖1020表10-34用戶登錄表單對(duì)應(yīng)的HTML代碼行號(hào)HTML代碼01020304050607080910111213141516<divclass="panel"id="panel-login"><formname="loginUserForm"action=""method="post"target="_blank"><divclass="panel-title">用戶登錄</div><divclass="panel-content">用戶名

<inputclass="login-text"name="userName"/><br/><br/>密

碼<inputclass="login-text"type="password"name="password"/><br/><br/>驗(yàn)證碼<inputclass="login-text"name="captchafield"/><br/><imgstyle="margin:5px0px0px45px"src="images/02.jpg"width="115"height="25"/></div><divclass="panel-btn"><inputclass="btn-bs"onClick="returngetNewStr();"type="submit"value="登錄"/><inputclass="btn-bs"onClick="resetForm();returnfalse;"type="button"value="重置"/><inputclass="btn-rb"type="button"value="注冊(cè)用戶"/></div></form></div>20表10-34用戶登錄表單對(duì)應(yīng)的HTML代碼行號(hào)HTML212．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊（1）定義展示圖片和播放視頻區(qū)塊的CSS樣式在樣式文件“style10.css”中定義展示圖片和播放視頻區(qū)塊所需的CSS樣式。重新定義標(biāo)簽“td”的樣式，代碼如表10-35所示。表10-35標(biāo)簽“td”的樣式代碼行號(hào)CSS樣式代碼01020304050607td{font-family:"宋體";font-size:9pt;line-height:150%;font-weight:normal;}212．設(shè)計(jì)與制作展示圖片和播放視頻的區(qū)塊表10-35標(biāo)簽22重新定義標(biāo)簽“a”的樣式，代碼如表10-36所示。表10-36標(biāo)簽”a”的樣式代碼行號(hào)CSS樣式代碼01020304050607080910111213141516a:link,a:visited,a:active{cursor:pointer;color:#1F6BAF;text-decoration:none;}

a:hover{color:#33ffcc!important;}

div#sidebara{color:#1F6BAF;font-family:"宋體";font-size:12px;}22重新定義標(biāo)簽“a”的樣式，代碼如表10-36所示。表1023（2）編寫自定義函數(shù)showContent()實(shí)現(xiàn)動(dòng)態(tài)改變背景的功能自定義函數(shù)showContent()用于動(dòng)態(tài)改變背景，其代碼如表10-37所示。表10-37自定義函數(shù)showContent()的代碼行號(hào)HTML代碼0102030405060708091011121314151617181920<scriptlanguage="javascript"type="text/javascript"><!--//functionshowContent(id){for(i=1;i<=2;i++){if(i!=id){document.getElementById("content_"+i).style.display="none";document.getElementById("menu_"+i).background="images/menu02.gif";}else{document.getElementById("content_"+i).style.display="block";document.getElementById("menu_"+i).background="images/menu01.gif";}}

}//--></script>23（2）編寫自定義函數(shù)showContent()實(shí)現(xiàn)動(dòng)態(tài)24（3）插入一個(gè)1行1列表格table1在div標(biāo)簽<divclass=banner>與</div>之間插入一個(gè)1行1列的表格，設(shè)置其寬度為“175像素”，高度為“158像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table1”，HTML代碼如表10-38所示。表10-38

1行1列表格table1的HTML代碼行號(hào)HTML代碼01020304050607<divclass="banner"><tablewidth="175"height="158"border="0"cellpadding="0"cellspacing="0"id="table1"><tr><tdvalign="middle"></td></tr></table></div>24（3）插入一個(gè)1行1列表格table1表10-381行25（4）在表格table1中插入兩個(gè)表格在表格table1中先插入一個(gè)1行4列的表格，設(shè)置其寬度為“175像素”，高度為“30像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table11”。在該表格的第2個(gè)和第3個(gè)單元格中輸入文字，設(shè)置單元格的背景圖像，輸入必要的代碼，代碼如表10-39所示。25（4）在表格table1中插入兩個(gè)表格26表10-39

4行1列表格table11的HTML代碼行號(hào)HTML代碼01020304050607080910<tablewidth="175"height="30"border="0"cellpadding="0"cellspacing="0"id="table11"><tr><tdwidth="28"> </td><tdbackground="images/menu01.gif"id="menu_1"align="center"><ahref="#"onMouseOver="showContent('1');">視頻欣賞</a></td><tdbackground="images/menu02.gif"id="menu_2"align="center"><ahref="#"onMouseOver="showContent('2');">圖片欣賞</a></td><tdwidth="28"> </td></tr></table>26表10-394行1列表格table11的HTML代碼行27在表格table11的下方插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“table12”，代碼如表10-40所示。表10-40

1行1列表格table12的HTML代碼行號(hào)HTML代碼0102030405<tablewidth="175"border="0"cellpadding="0"cellspacing="0"id="table12"><tr><tdwidth="175"></td></tr></table>27在表格table11的下方插入一個(gè)1行1列的表格，設(shè)置其28（5）在表格table12中插入兩個(gè)表格在表格table12中先插入一個(gè)1行1列的表格，設(shè)置其的寬度為“175像素”，填充、間距和邊框都為“0”，其ID標(biāo)識(shí)為“content_1”，顯示方式為“block”，代碼如表10-41所示。表10-41表格content_1的HTML代碼行號(hào)HTML代碼010203040506<tablewidth="175"border="0"align="center"cellpadding="0"cellspacing="0"id="content_1"style="display:block"><tr><td></td></tr></table>28（5）在表格table12中插入兩個(gè)表格表10-41表29將光標(biāo)置于表格content_1的單元格中，在DreamweaverCC的主界面中，在【插入】面板的【HTML】類型面板中單擊【FlashVideo】按鈕，打開【插入FLV】對(duì)話框，在該對(duì)話框中輸入Flv視頻的URL，設(shè)置Flv視頻的屬性，設(shè)置結(jié)果如圖10-4所示。圖10-4【插入Flash視頻】對(duì)話框29將光標(biāo)置于表格content_1的單元格中，在Dream30然后單擊【確定】按鈕，在表格content_1的單元格中完成flv格式視頻的插入。在表格content_1中選取所插入的Flv視頻，在【屬性】面板中對(duì)其屬性進(jìn)行設(shè)置，如圖10-5所示。圖10-5

Flv視頻的【屬性】面板30然后單擊【確定】按鈕，在表格content_1的單元格中31切換到【代碼】視圖，在表格content_1的下方輸入HTML代碼，插入另一個(gè)2行1列的表格，其ID標(biāo)識(shí)為“content_2”，顯示方式為“none”，且在表格content_2中的單元格中插入一幅圖像01.jpg，代碼如表10-42所示。表10-42表格content_2的HTML代碼行號(hào)HTML代碼0102030405060708091011<tableborder="0"align="center"cellpadding="0"cellspacing="0"id="content_2"style="display:none"><tr><tdwidth="175"height="4"></td></tr><tr><tdwidth="175"height="148"align="center"valign="middle"><imgsrc="images/01.jpg"width="175"height="175"alt=""/></td></tr></table>31切換到【代碼】視圖，在表格content_1的下方輸入H324．設(shè)計(jì)與制作主頁index1001.html中部右側(cè)的主體區(qū)域在網(wǎng)站主頁index1001.html中部右側(cè)的主體區(qū)域中輸入文字，插入圖像，HTML代碼如表10-43所示，其瀏覽效果如圖10-6所示。表10-43網(wǎng)站主頁index1001.html中部右側(cè)的主體區(qū)域的代碼行號(hào)HTML代碼010203040506070809<divid="content"><divid="proPanel"><divclass="left"><divclass="proPanelCon1"><divclass="pro-title">    <imgsrc="images/main_image/s01.gif"width="21"height="21"alt="中國(guó)名山"/>  名山</div><divclass="pro-img"><imgsrc="images/main_image/m01.jpg"width="230"height="150"/></div>324．設(shè)計(jì)與制作主頁index1001.html中部右側(cè)的33表10-43網(wǎng)站主頁index1001.html中部右側(cè)的主體區(qū)域的代碼（續(xù)表）行號(hào)HTML代碼10111213141516171819202122232425262728293031323334353637383940414243<divclass="pro-intro">中國(guó)的名山眾多，數(shù)不勝數(shù)，雄、奇、靈、秀，各具特色。中國(guó)的名山首推五岳，泰山之雄偉、華山之險(xiǎn)峻、衡山之煙云、恒山之奇崛、嵩山之萃秀，百態(tài)千姿，各懷絕景。而黃山更以奇松、怪石、云海、溫泉聞名中外。中國(guó)的名山歷來就是佛家、道家崇敬之地，因而也成就了以佛、道名揚(yáng)天下的多座名山，佛教的"金五臺(tái)、銀普陀、銅峨眉、鐵九華"；道教的武當(dāng)山、青城山、龍虎山、齊云山等。/div><divclass="pro-more">查看更多<imgsrc="images/more.gif"/></div></div></div><divclass="right"><divclass="proPanelCon3"><divclass="pro-title">    <imgsrc="images/main_image/s03.gif"width="21"height="21"alt="名湖"/>  名湖</div><divclass="pro-img"><imgsrc="images/main_image/m03.jpg"width="230"height="147"/></div><divclass="pro-intro">湖泊是大地的眼睛，站在高處俯瞰，它們真仿佛是和人的眼睛一樣充滿智慧、生機(jī)和靈氣的大地之眼。<br/>

湖泊是美的，她所具有的形、影、聲、色，以及她與日月相輝映、與山石相配合所形成的和諧之美，給大自然增添了無限風(fēng)采。與山脈的偉岸崔嵬、沉雄蒼郁相比，湖泊具有清奇淡逸、靈秀幽深的品性，更有一種純潔、安寧、柔靜的溫情。</div><divclass="pro-more">查看更多景區(qū)<imgsrc="images/more.gif"/></div></div></div><divclass="proPanelCon2"><divclass="pro-title">    <imgsrc="images/main_image/s02.gif"width="21"height="21"alt="名河"/>  名河</div><divclass="pro-img"><imgsrc="images/main_image/m02.jpg"width="230"height="150"/></div><divclass="pro-intro">文明始自河流，這是亙古不變的。在中華大地上，自北往南，由西向東，奔流著數(shù)不清的大江大河，幾千年流淌奔涌，幾萬年生生不息，她們?cè)谌藗兊男睦順?gòu)成中，凝結(jié)為一種根深蒂固的情結(jié)，一種圖騰和象征：她們是我們的母親河，是中華民族的搖籃。從堯舜始，江河孕育了世界上最優(yōu)秀的文化，留下了深邃的思想和智慧；她們經(jīng)歷了頻繁的戰(zhàn)爭(zhēng)，造就了名垂青史的英雄和史詩。</div><divclass="pro-more">查看更多景區(qū)<imgsrc="images/more.gif"/></div></div></div></div>33表10-43網(wǎng)站主頁index1001.html中部右34圖10-6網(wǎng)頁中部右側(cè)主體區(qū)域?yàn)g覽效果34圖10-6網(wǎng)頁中部右側(cè)主體區(qū)域?yàn)g覽效果快樂學(xué)習(xí)、高效學(xué)習(xí)快樂學(xué)習(xí)、高效學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程

（第3版）網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程37單元10設(shè)計(jì)網(wǎng)站主頁與整合網(wǎng)站【任務(wù)10-1】制作“E游天下”網(wǎng)站的主頁2單元10設(shè)計(jì)網(wǎng)站主頁與整合網(wǎng)站【任務(wù)10-1】制作“E游38網(wǎng)頁index1001.html的瀏覽效果如圖10-1所示。圖10-1網(wǎng)頁index1001.html的瀏覽效果3網(wǎng)頁index1001.html的瀏覽效果如圖10-1所示39【任務(wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作網(wǎng)頁的

頂部導(dǎo)航欄設(shè)計(jì)與制作網(wǎng)頁index1001.html的頂部導(dǎo)航欄。4【任務(wù)描述】【任務(wù)10-1-3】設(shè)計(jì)與制作網(wǎng)頁的設(shè)計(jì)與制作40【任務(wù)實(shí)施】1．定義網(wǎng)頁頂部導(dǎo)航欄的CSS樣式在文件夾style中創(chuàng)建一個(gè)CSS樣式文件“topnav.css”，在該樣式文件中定義頂部導(dǎo)航欄所需的CSS樣式，該樣式文件的CSS代碼定義如表10-26所示。5【任務(wù)實(shí)施】1．定義網(wǎng)頁頂部導(dǎo)航欄的CSS樣式41表10-26樣式文件topnav.css的CSS代碼定義序號(hào)CSS代碼序號(hào)CSS代碼123456789101112131415161718192021222324252627282930313233343536373839404142434445#nav{width:980px;margin-left:40px;}

#nava{display:block;width:100px;text-align:center;line-height:40px;font-weight:bold;}

#nava:link{color:#2b98db;text-decoration:none;}

#nava:visited{color:#2b98db;text-decoration:none;}

#nava:hover{color:#2b98db;text-decoration:none;font-weight:bold;}

#navul{list-style-type:none;}

#navli{float:left;width:100px;margin:0px;padding:0px;list-style-type:none;}

#navlia:hover{background:#999;font-weight:bold;}464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990#navliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:100px;position:absolute;}

#navliulli{float:left;width:100px;background:#CCCCFF;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#FFF;display:block;z-index:0;}

#navliula{display:block;margin:0px;}

#navliula:link{color:#666;text-decoration:none;}

#navliula:visited{color:#666;text-decoration:none;}

#navliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#ccc;font-weight:bold;}

#navli:hoverul{left:auto;}6表10-26樣式文件topnav.css的CSS代碼定義422．在網(wǎng)頁中插入HTML代碼實(shí)現(xiàn)頂部導(dǎo)航功能在網(wǎng)頁index1001.html中頂部位置插入實(shí)現(xiàn)導(dǎo)航欄的HTML代碼，如表10-27所示。表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼行號(hào)JavaScript代碼12345678910111213<divid="daohang"><ulid="nav"><li><ahref="index1001.html">首頁</a></li><li><ahref=""target="_blank">生態(tài)游</a><ul><li><ahref=""target="_blank">九寨溝</a></li><li><ahref=""target="_blank">西雙版納</a></li><li><ahref=""target="_blank">香格里拉</a></li><li><ahref=""target="_blank">云南大理</a></li><li><ahref=""target="_blank">云南麗江</a></li><li><ahref=""target="_blank">桂林山水</a></li></ul></li>72．在網(wǎng)頁中插入HTML代碼實(shí)現(xiàn)頂部導(dǎo)航功能表10-2743表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼（續(xù)表）行號(hào)JavaScript代碼14151617181920212223242526272829303132333435363738394041424344<li><ahref=""target="_blank">公園游</a><ul><li><ahref=""target="_blank">張家界</a></li><li><ahref=""target="_blank">天子山</a></li><li><ahref=""target="_blank">索溪峪</a></li><li><ahref=""target="_blank">五岳寨</a></li><li><ahref=""target="_blank">神農(nóng)架</a></li><li><ahref=""target="_blank">長(zhǎng)白山</a></li></ul></li><li><ahref=""target="_blank">山岳游</a><ul><li><ahref=""target="_blank">黃山</a></li><li><ahref=""target="_blank">泰山</a></li><li><ahref=""target="_blank">華山</a></li><li><ahref=""target="_blank">恒山</a></li><li><ahref=""target="_blank">嵩山</a></li><li><ahref=""target="_blank">廬山</a></li></ul></li><li><ahref=""target="_blank">江湖游</a><ul><li><ahref=""target="_blank">千島湖</a></li><li><ahref=""target="_blank">西湖</a></li><li><ahref=""target="_blank">洞庭湖</a></li><li><ahref=""target="_blank">鄱陽湖</a></li><li><ahref=""target="_blank">太湖</a></li><li><ahref=""target="_blank">長(zhǎng)江三峽</a></li><li><ahref=""target="_blank">漓江</a></li></ul></li>8表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中44表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中的HTML代碼（續(xù)表）行號(hào)JavaScript代碼454647484950515253545556575859606162636465666768697071727374757677<li><ahref=""target="_blank">名城游</a><ul><li><ahref=""target="_blank">北京</a></li><li><ahref=""target="_blank">上海</a></li><li><ahref=""target="_blank">天津</a></li><li><ahref=""target="_blank">西安</a></li><li><ahref=""target="_blank">西安</a></li><li><ahref=""target="_blank">長(zhǎng)沙</a></li></ul></li><li><ahref=""target="_blank">古鎮(zhèn)游</a><ul><li><ahref=""target="_blank">湖南鳳凰</a></li><li><ahref=""target="_blank">安徽西遞</a></li><li><ahref=""target="_blank">浙江烏鎮(zhèn)</a></li><li><ahref=""target="_blank">江蘇周莊</a></li><li><ahref=""target="_blank">山西平遙</a></li><li><ahref=""target="_blank">江西婺源</a></li></ul></li><li><ahref=""target="_blank">瀑泉游</a><ul><li><ahref=""target="_blank">黃果樹瀑布</a></li><li><ahref=""target="_blank">壺口瀑布</a></li><li><ahref=""target="_blank">長(zhǎng)白瀑布</a></li><li><ahref=""target="_blank">趵突泉</a></li><li><ahref=""target="_blank">谷簾泉</a></li><li><ahref=""target="_blank">虎跑泉</a></li></ul></li><li><ahref=""target="_blank">E游調(diào)查</a></li></ul></div>9表10-27網(wǎng)頁index1001.html頂部導(dǎo)航欄中45【任務(wù)描述】【任務(wù)10-1-4】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄

和版權(quán)信息的腳本文件創(chuàng)建腳本文件footer.js，該腳本文件包含實(shí)現(xiàn)底部導(dǎo)航欄和版權(quán)信息的代碼。10【任務(wù)描述】【任務(wù)10-1-4】創(chuàng)建實(shí)現(xiàn)底部導(dǎo)航欄創(chuàng)建腳46【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“footer.js”，在該文件中輸入表10-28所示的代碼。表10-28腳本文件footer.js的代碼行號(hào)JavaScript代碼0102030405060708091011varfooterContent='';footerContent+='旅游服務(wù)|';footerContent+='聯(lián)系我們|';footerContent+='網(wǎng)站地圖|';footerContent+='旅游調(diào)查|';footerContent+='用戶留言|';footerContent+='設(shè)為首頁|';footerContent+='收藏本站<br/>';footerContent+='e游天下網(wǎng)版權(quán)所有Copyright2016-2020?蝴蝶工作室<br/>';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);11【任務(wù)實(shí)施】在文件夾“js”中新建一個(gè)腳本文件“foot47【任務(wù)描述】【任務(wù)10-1-5】設(shè)計(jì)與制作網(wǎng)站主頁

的中部區(qū)域設(shè)計(jì)與制作網(wǎng)站主頁的中部區(qū)域，該區(qū)域中包括用戶登錄表單、展示圖片和播放視頻區(qū)塊、圖片滾動(dòng)區(qū)塊。12【任務(wù)描述】【任務(wù)10-1-5】設(shè)計(jì)與制作網(wǎng)站主頁設(shè)計(jì)與48【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁的用戶登錄表單（1）定義用戶登錄表單的CSS樣式在樣式文件“style10.css”中定義網(wǎng)頁中部區(qū)域所需的CSS樣式。重新定義標(biāo)簽form的屬性，代碼如表10-29所示。表10-29標(biāo)簽form的屬性設(shè)置行號(hào)HTML代碼01020304form{padding:0px;margin:0px}13【任務(wù)實(shí)施】1．設(shè)計(jì)與制作網(wǎng)頁的用戶登錄表單表10-2949定義樣式div#panel-login內(nèi)所包含元素的樣式，代碼如表10-30所示。表10-30樣式div#panel-login內(nèi)所包含元素的樣式代碼行號(hào)CSS樣式代碼010203040506070809101112131415161718192021div#panel-logindiv.panel-title{padding:5px0px0px65px;color:#F30;border-bottom:#FFF1pxsolid;height:20px;}

div#panel-logindiv.panel-content{border-top:1pxsolid#C5E4F7;border-bottom:1pxsolid#FFF;padding:8px0px2px10px;}

div#panel-logindiv.panel-btn{padding-top:5px;text-align:center;padding-bottom:5px;border-top:1pxsolid#C5E4F7;border-bottom:1pxsolid#C5E4F7;margin-bottom:5px;}14定義樣式div#panel-login內(nèi)所包含元素的樣式50定義標(biāo)簽input的屬性及其所包含元素的樣式，代碼如表10-31所示表10-31標(biāo)簽input的屬性設(shè)置及其所包含元素的樣式行號(hào)CSS樣式代碼0102030405060708091011121314151617181920212223242526272829303132input{font:12pxTahoma;}

input.login-text{background:url(../images/text_login_bg.gif)#FFFno-repeatcentercenter;width:110px;color:#467FB6;height:18px;border:1pxsolid#A2D4F2;}

input.btn-bs{width:40px;color:#CCC;height:21px;margin:1px;padding:1px;background:url(../images/menu/btn_bg_bs.gif)no-repeatcenter;border-style:none;font-weight:bolder;}

input.btn-rb{width:70px;color:#000;height:21px;margin:0px;padding:0px;background:url(../images/menu/btn_bg_rb.gif)no-repeatcenter;border-style:none;}15定義