【任务10-1】制作“E游天下”网站的主课件2

网页设计与制作任务驱动教程

（第3版）网页设计与制作任务驱动教程2单元10设计网站主页与整合网站【任务10-1】制作“E游天下”网站的主页2单元10设计网站主页与整合网站【任务10-1】制作“E游3网页index1001.html的浏览效果如图10-1所示。图10-1网页index1001.html的浏览效果3网页index1001.html的浏览效果如图10-1所示4【任务描述】【任务10-1-3】设计与制作网页的

顶部导航栏设计与制作网页index1001.html的顶部导航栏。4【任务描述】【任务10-1-3】设计与制作网页的设计与制作5【任务实施】1．定义网页顶部导航栏的CSS样式在文件夹style中创建一个CSS样式文件“topnav.css”，在该样式文件中定义顶部导航栏所需的CSS样式，该样式文件的CSS代码定义如表10-26所示。5【任务实施】1．定义网页顶部导航栏的CSS样式6表10-26样式文件topnav.css的CSS代码定义序号CSS代码序号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．在网页中插入HTML代码实现顶部导航功能在网页index1001.html中顶部位置插入实现导航栏的HTML代码，如表10-27所示。表10-27网页index1001.html顶部导航栏中的HTML代码行号JavaScript代码12345678910111213<divid="daohang"><ulid="nav"><li><ahref="index1001.html">首页</a></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>72．在网页中插入HTML代码实现顶部导航功能表10-278表10-27网页index1001.html顶部导航栏中的HTML代码（续表）行号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">神农架</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">庐山</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><li><ahref=""target="_blank">漓江</a></li></ul></li>8表10-27网页index1001.html顶部导航栏中9表10-27网页index1001.html顶部导航栏中的HTML代码（续表）行号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">长沙</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">虎跑泉</a></li></ul></li><li><ahref=""target="_blank">E游调查</a></li></ul></div>9表10-27网页index1001.html顶部导航栏中10【任务描述】【任务10-1-4】创建实现底部导航栏

和版权信息的脚本文件创建脚本文件footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。10【任务描述】【任务10-1-4】创建实现底部导航栏创建脚11【任务实施】在文件夹“js”中新建一个脚本文件“footer.js”，在该文件中输入表10-28所示的代码。表10-28脚本文件footer.js的代码行号JavaScript代码0102030405060708091011varfooterContent='';footerContent+='旅游服务|';footerContent+='联系我们|';footerContent+='网站地图|';footerContent+='旅游调查|';footerContent+='用户留言|';footerContent+='设为首页|';footerContent+='收藏本站<br/>';footerContent+='e游天下网版权所有Copyright2016-2020©蝴蝶工作室<br/>';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);11【任务实施】在文件夹“js”中新建一个脚本文件“foot12【任务描述】【任务10-1-5】设计与制作网站主页

的中部区域设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。12【任务描述】【任务10-1-5】设计与制作网站主页设计与13【任务实施】1．设计与制作网页的用户登录表单（1）定义用户登录表单的CSS样式在样式文件“style10.css”中定义网页中部区域所需的CSS样式。重新定义标签form的属性，代码如表10-29所示。表10-29标签form的属性设置行号HTML代码01020304form{padding:0px;margin:0px}13【任务实施】1．设计与制作网页的用户登录表单表10-2914定义样式div#panel-login内所包含元素的样式，代码如表10-30所示。表10-30样式div#panel-login内所包含元素的样式代码行号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内所包含元素的样式15定义标签input的属性及其所包含元素的样式，代码如表10-31所示表10-31标签input的属性设置及其所包含元素的样式行号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定义标签input的属性及其所包含元素的样式，代码如表116（2）编写验证用户输入信息的JavaScript代码验证表单控件中输入信息的JavaScript代码如表10-32所示。表10-32验证表单控件中输入信息的JavaScript代码行号JavaScript代码01020304050607080910111213<scriptlanguage=JavaScript>functiongetNewStr(){if(check()){try{returntrue;}catch(e){returnfalse;}returnfalse;}returnfalse;}16（2）编写验证用户输入信息的JavaScript代码表117表10-32验证表单控件中输入信息的JavaScript代码（续表）行号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("验证码不能为空！",document.all.captchafield);returnfalse;}returntrue;}

functionerrDeal(tip,obj){try{obj.focus();}catch(e){}alert(tip);}</script>17表10-32验证表单控件中输入信息的JavaScrip18（3）在用户登录表单插入form与div标签在网页index1001.html的用户登录表单中插入表单与div标签，且设置其属性，HTML代码如表10-33所示。表10-33用户登录表单插入的form与div标签的代码行号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标签表10-3319（4）在表单中插入表单控件在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮，插入完成的HTML代码如表10-34所示。用户登录表单的浏览效果如图10-3所示。图10-3用户登录表单的浏览效果19（4）在表单中插入表单控件用户登录表单的浏览效果如图1020表10-34用户登录表单对应的HTML代码行号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/>验证码<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="注册用户"/></div></form></div>20表10-34用户登录表单对应的HTML代码行号HTML212．设计与制作展示图片和播放视频的区块（1）定义展示图片和播放视频区块的CSS样式在样式文件“style10.css”中定义展示图片和播放视频区块所需的CSS样式。重新定义标签“td”的样式，代码如表10-35所示。表10-35标签“td”的样式代码行号CSS样式代码01020304050607td{font-family:"宋体";font-size:9pt;line-height:150%;font-weight:normal;}212．设计与制作展示图片和播放视频的区块表10-35标签22重新定义标签“a”的样式，代码如表10-36所示。表10-36标签”a”的样式代码行号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重新定义标签“a”的样式，代码如表10-36所示。表1023（2）编写自定义函数showContent()实现动态改变背景的功能自定义函数showContent()用于动态改变背景，其代码如表10-37所示。表10-37自定义函数showContent()的代码行号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）编写自定义函数showContent()实现动态24（3）插入一个1行1列表格table1在div标签<divclass=banner>与</div>之间插入一个1行1列的表格，设置其宽度为“175像素”，高度为“158像素”，填充、间距和边框都为“0”，其ID标识为“table1”，HTML代码如表10-38所示。表10-38

1行1列表格table1的HTML代码行号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）插入一个1行1列表格table1表10-381行25（4）在表格table1中插入两个表格在表格table1中先插入一个1行4列的表格，设置其宽度为“175像素”，高度为“30像素”，填充、间距和边框都为“0”，其ID标识为“table11”。在该表格的第2个和第3个单元格中输入文字，设置单元格的背景图像，输入必要的代码，代码如表10-39所示。25（4）在表格table1中插入两个表格26表10-39

4行1列表格table11的HTML代码行号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的下方插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“table12”，代码如表10-40所示。表10-40

1行1列表格table12的HTML代码行号HTML代码0102030405<tablewidth="175"border="0"cellpadding="0"cellspacing="0"id="table12"><tr><tdwidth="175"></td></tr></table>27在表格table11的下方插入一个1行1列的表格，设置其28（5）在表格table12中插入两个表格在表格table12中先插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“content_1”，显示方式为“block”，代码如表10-41所示。表10-41表格content_1的HTML代码行号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中插入两个表格表10-41表29将光标置于表格content_1的单元格中，在DreamweaverCC的主界面中，在【插入】面板的【HTML】类型面板中单击【FlashVideo】按钮，打开【插入FLV】对话框，在该对话框中输入Flv视频的URL，设置Flv视频的属性，设置结果如图10-4所示。图10-4【插入Flash视频】对话框29将光标置于表格content_1的单元格中，在Dream30然后单击【确定】按钮，在表格content_1的单元格中完成flv格式视频的插入。在表格content_1中选取所插入的Flv视频，在【属性】面板中对其属性进行设置，如图10-5所示。图10-5

Flv视频的【属性】面板30然后单击【确定】按钮，在表格content_1的单元格中31切换到【代码】视图，在表格content_1的下方输入HTML代码，插入另一个2行1列的表格，其ID标识为“content_2”，显示方式为“none”，且在表格content_2中的单元格中插入一幅图像01.jpg，代码如表10-42所示。表10-42表格content_2的HTML代码行号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．设计与制作主页index1001.html中部右侧的主体区域在网站主页index1001.html中部右侧的主体区域中输入文字，插入图像，HTML代码如表10-43所示，其浏览效果如图10-6所示。表10-43网站主页index1001.html中部右侧的主体区域的代码行号HTML代码010203040506070809<divid="content"><divid="proPanel"><divclass="left"><divclass="proPanelCon1"><divclass="pro-title">    <imgsrc="images/main_image/s01.gif"width="21"height="21"alt="中国名山"/>  名山</div><divclass="pro-img"><imgsrc="images/main_image/m01.jpg"width="230"height="150"/></div>324．设计与制作主页index1001.html中部右侧的33表10-43网站主页index1001.html中部右侧的主体区域的代码（续表）行号HTML代码10111213141516171819202122232425262728293031323334353637383940414243<divclass="pro-intro">中国的名山众多，数不胜数，雄、奇、灵、秀，各具特色。中国的名山首推五岳，泰山之雄伟、华山之险峻、衡山之烟云、恒山之奇崛、嵩山之萃秀，百态千姿，各怀绝景。而黄山更以奇松、怪石、云海、温泉闻名中外。中国的名山历来就是佛家、道家崇敬之地，因而也成就了以佛、道名扬天下的多座名山，佛教的"金五台、银普陀、铜峨眉、铁九华"；道教的武当山、青城山、龙虎山、齐云山等。/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">湖泊是大地的眼睛，站在高处俯瞰，它们真仿佛是和人的眼睛一样充满智慧、生机和灵气的大地之眼。<br/>

湖泊是美的，她所具有的形、影、声、色，以及她与日月相辉映、与山石相配合所形成的和谐之美，给大自然增添了无限风采。与山脉的伟岸崔嵬、沉雄苍郁相比，湖泊具有清奇淡逸、灵秀幽深的品性，更有一种纯洁、安宁、柔静的温情。</div><divclass="pro-more">查看更多景区<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">文明始自河流，这是亘古不变的。在中华大地上，自北往南，由西向东，奔流着数不清的大江大河，几千年流淌奔涌，几万年生生不息，她们在人们的心理构成中，凝结为一种根深蒂固的情结，一种图腾和象征：她们是我们的母亲河，是中华民族的摇篮。从尧舜始，江河孕育了世界上最优秀的文化，留下了深邃的思想和智慧；她们经历了频繁的战争，造就了名垂青史的英雄和史诗。</div><divclass="pro-more">查看更多景区<imgsrc="images/more.gif"/></div></div></div></div>33表10-43网站主页index1001.html中部右34图10-6网页中部右侧主体区域浏览效果34图10-6网页中部右侧主体区域浏览效果快乐学习、高效学习快乐学习、高效学习网页设计与制作任务驱动教程

（第3版）网页设计与制作任务驱动教程37单元10设计网站主页与整合网站【任务10-1】制作“E游天下”网站的主页2单元10设计网站主页与整合网站【任务10-1】制作“E游38网页index1001.html的浏览效果如图10-1所示。图10-1网页index1001.html的浏览效果3网页index1001.html的浏览效果如图10-1所示39【任务描述】【任务10-1-3】设计与制作网页的

顶部导航栏设计与制作网页index1001.html的顶部导航栏。4【任务描述】【任务10-1-3】设计与制作网页的设计与制作40【任务实施】1．定义网页顶部导航栏的CSS样式在文件夹style中创建一个CSS样式文件“topnav.css”，在该样式文件中定义顶部导航栏所需的CSS样式，该样式文件的CSS代码定义如表10-26所示。5【任务实施】1．定义网页顶部导航栏的CSS样式41表10-26样式文件topnav.css的CSS代码定义序号CSS代码序号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．在网页中插入HTML代码实现顶部导航功能在网页index1001.html中顶部位置插入实现导航栏的HTML代码，如表10-27所示。表10-27网页index1001.html顶部导航栏中的HTML代码行号JavaScript代码12345678910111213<divid="daohang"><ulid="nav"><li><ahref="index1001.html">首页</a></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>72．在网页中插入HTML代码实现顶部导航功能表10-2743表10-27网页index1001.html顶部导航栏中的HTML代码（续表）行号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">神农架</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">庐山</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><li><ahref=""target="_blank">漓江</a></li></ul></li>8表10-27网页index1001.html顶部导航栏中44表10-27网页index1001.html顶部导航栏中的HTML代码（续表）行号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">长沙</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">虎跑泉</a></li></ul></li><li><ahref=""target="_blank">E游调查</a></li></ul></div>9表10-27网页index1001.html顶部导航栏中45【任务描述】【任务10-1-4】创建实现底部导航栏

和版权信息的脚本文件创建脚本文件footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。10【任务描述】【任务10-1-4】创建实现底部导航栏创建脚46【任务实施】在文件夹“js”中新建一个脚本文件“footer.js”，在该文件中输入表10-28所示的代码。表10-28脚本文件footer.js的代码行号JavaScript代码0102030405060708091011varfooterContent='';footerContent+='旅游服务|';footerContent+='联系我们|';footerContent+='网站地图|';footerContent+='旅游调查|';footerContent+='用户留言|';footerContent+='设为首页|';footerContent+='收藏本站<br/>';footerContent+='e游天下网版权所有Copyright2016-2020©蝴蝶工作室<br/>';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);11【任务实施】在文件夹“js”中新建一个脚本文件“foot47【任务描述】【任务10-1-5】设计与制作网站主页

的中部区域设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。12【任务描述】【任务10-1-5】设计与制作网站主页设计与48【任务实施】1．设计与制作网页的用户登录表单（1）定义用户登录表单的CSS样式在样式文件“style10.css”中定义网页中部区域所需的CSS样式。重新定义标签form的属性，代码如表10-29所示。表10-29标签form的属性设置行号HTML代码01020304form{padding:0px;margin:0px}13【任务实施】1．设计与制作网页的用户登录表单表10-2949定义样式div#panel-login内所包含元素的样式，代码如表10-30所示。表10-30样式div#panel-login内所包含元素的样式代码行号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内所包含元素的样式50定义标签input的属性及其所包含元素的样式，代码如表10-31所示表10-31标签input的属性设置及其所包含元素的样式行号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定义