（任务10-1）制作“E游天下”网站的主课件2.pptx

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

2、顶部导航栏设计与制作网页设计与制作网页index1001.html的顶部导航栏。的顶部导航栏。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5【任务实施】1 1定义网页顶部导航栏的CSSCSS样式在文件夹在文件夹style中创建一个中创建一个CSS样式文件样式文件“topnav.css”，在该样式文件中定义顶部导，在该样式文件中定义顶部导航栏所需的航栏所需的CSS样式，该样式文件的样式，该样式文件的CSS代码代码定义如表定义如表10-26所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6表表10-2610-26样式文件样式文件t

3、opnav.csstopnav.css的的CSSCSS代码定义代码定义序号序号CSS代码代码序号序号CSS代码代码123456789101112131415161718192021222324252627282930313233343536373839404142434445#nav width:980px;margin-left:40px;#nav a display:block;width:100px;text-align:center;line-height:40px;font-weight:bold;#nav a:link color:#2b98db;text-decoration:n

4、one;#nav a:visited color:#2b98db;text-decoration:none;#nav a:hover color:#2b98db;text-decoration:none;font-weight:bold;#nav ul list-style-type:none;#nav li float:left;width:100px;margin:0px;padding:0px;list-style-type:none;#nav li a:hover background:#999;font-weight:bold;4647484950515253545556575859

5、60616263646566676869707172737475767778798081828384858687888990#nav li ul line-height:27px;list-style-type:none;text-align:left;left:-999em;width:100px;position:absolute;#nav li ul li float:left;width:100px;background:#CCCCFF;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-

6、bottom-color:#FFF;display:block;z-index:0;#nav li ul a display:block;margin:0px;#nav li ul a:link color:#666;text-decoration:none;#nav li ul a:visited color:#666;text-decoration:none;#nav li ul a:hover color:#F3F3F3;text-decoration:none;font-weight:normal;background:#ccc;font-weight:bold;#nav li:hov

7、er ul left:auto;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）72 2在网页中插入HTMLHTML代码实现顶部导航功能在网页在网页index1001.html中顶部位置插入实现导航中顶部位置插入实现导航栏的栏的HTML代码，如表代码，如表10-27所示。所示。表表10-2710-27网页网页index1001.htmlindex1001.html顶部导航栏中的顶部导航栏中的HTMLHTML代码代码行号行号JavaScript代码代码12345678910111213 首页首页 生态游生态游 九寨沟九寨沟 西双版纳西双版纳 香格里拉香格里拉 云南大理云

8、南大理 云南丽江云南丽江 桂林山水桂林山水 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8表表10-2710-27网页网页index1001.htmlindex1001.html顶部导航顶部导航栏中的栏中的HTMLHTML代码代码（续表）（续表）行号行号JavaScript代码代码14151617181920212223242526272829303132333435363738394041424344 公园游公园游 张家界张家界 天子山天子山 索溪峪索溪峪 五岳寨五岳寨 神农架神农架 长白山长白山 山岳游山岳游 黄山黄山 泰山泰山 华山华山 恒山恒山 嵩山嵩山

9、庐山庐山 江湖游江湖游 千岛湖千岛湖 西湖西湖 洞庭湖洞庭湖 鄱阳湖鄱阳湖 太湖太湖 长江三峡长江三峡 漓江漓江 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）9表表10-2710-27网页网页index1001.htmlindex1001.html顶顶部导航栏中的部导航栏中的HTMLHTML代码代码（续表）（续表）行号行号JavaScript代码代码454647484950515253545556575859606162636465666768697071727374757677 名城游名城游 北京北京 上海上海 天津天津 西安西安 西安西安 长沙长沙 古镇游古镇

10、游 湖南凤凰湖南凤凰 安徽西递安徽西递 浙江乌镇浙江乌镇 江苏周庄江苏周庄 山西平遥山西平遥 江西婺源江西婺源 瀑泉游瀑泉游 黄果树瀑布黄果树瀑布 壶口瀑布壶口瀑布 长白瀑布长白瀑布 趵突泉趵突泉 谷帘泉谷帘泉 虎跑泉虎跑泉 E游调查游调查 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）10【任务描述】【任务10-1-4】创建实现底部导航栏 和版权信息的脚本文件创建脚本文件创建脚本文件footer.js，该脚本文件包含实现，该脚本文件包含实现底部导航栏和版权信息的代码。底部导航栏和版权信息的代码。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）

11、版）11【任务实施】在文件夹在文件夹“js”中新建一个脚本文件中新建一个脚本文件“footer.js”，在该文件中输入表在该文件中输入表10-28所示的代码。所示的代码。表表10-2810-28脚本文件脚本文件footer.jsfooter.js的代码的代码行号行号JavaScript代码代码0102030405060708091011var footerContent=;footerContent+=旅游服务旅游服务|;footerContent+=联系我们联系我们|;footerContent+=网站地图网站地图|;footerContent+=旅游调查旅游调查|;footerConten

12、t+=用户留言用户留言|;footerContent+=设为首页设为首页|;footerContent+=收藏本站收藏本站;footerContent+=e游天下网游天下网 版权所有版权所有 Copyright 2016-2020 蝴蝶工作室蝴蝶工作室;footerContent+=;document.write(footerContent);网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）12【任务描述】【任务10-1-5】设计与制作网站主页 的中部区域设计与制作网站主页的中部区域，该区域设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区中

13、包括用户登录表单、展示图片和播放视频区块、图片滚动区块。块、图片滚动区块。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13【任务实施】1 1设计与制作网页的用户登录表单（1 1）定义用户登录表单的）定义用户登录表单的CSSCSS样式样式在样式文件在样式文件“style10.css”中定义网页中部区中定义网页中部区域所需的域所需的CSS样式。重新定义标签样式。重新定义标签form的属性，代的属性，代码如表码如表10-29所示。所示。表表10-2910-29标签标签formform的属性设置的属性设置行号行号HTML代码代码01020304form padding:0

14、px;margin:0px网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）14定义样式定义样式div#panel-login内所包含元素的样式，内所包含元素的样式，代码如表代码如表10-30所示。所示。表表10-3010-30样式样式div#panel-logindiv#panel-login内所包含元素的样式代码内所包含元素的样式代码行号行号CSS样式代码样式代码010203040506070809101112131415161718192021div#panel-login div.panel-title padding:5px 0px 0px 65px;colo

15、r:#F30;border-bottom:#FFF 1px solid;height:20px;div#panel-login div.panel-content border-top:1px solid#C5E4F7;border-bottom:1px solid#FFF;padding:8px 0px 2px 10px;div#panel-login div.panel-btn padding-top:5px;text-align:center;padding-bottom:5px;border-top:1px solid#C5E4F7;border-bottom:1px solid#C5

16、E4F7;margin-bottom:5px;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）15定义标签定义标签input的属性及其所包含元素的样式，的属性及其所包含元素的样式，代码如表代码如表10-31所示所示表表10-3110-31标签标签inputinput的属性的属性设置及其所包含元素的样式设置及其所包含元素的样式行号行号CSS样式代码样式代码0102030405060708091011121314151617181920212223242526272829303132input font:12px Tahoma;input.login-text backg

17、round:url(./images/text_login_bg.gif)#FFF no-repeat center center;width:110px;color:#467FB6;height:18px;border:1px solid#A2D4F2;input.btn-bs width:40px;color:#CCC;height:21px;margin:1px;padding:1px;background:url(./images/menu/btn_bg_bs.gif)no-repeat center;border-style:none;font-weight:bolder;input

18、.btn-rb width:70px;color:#000;height:21px;margin:0px;padding:0px;background:url(./images/menu/btn_bg_rb.gif)no-repeat center;border-style:none;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）16（2 2）编写验证用户输入信息的）编写验证用户输入信息的JavaScriptJavaScript代码代码验证表单控件中输入信息的验证表单控件中输入信息的JavaScript代码如表代码如表10-32所示。所示。表表10-3210-32验

19、证表单控件中输入信息的验证表单控件中输入信息的JavaScriptJavaScript代码代码行号行号JavaScript代码代码01020304050607080910111213 function getNewStr()if(check()try return true;catch(e)return false;return false;return false;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）17表表10-3210-32验证表单控件验证表单控件中输入信息的中输入信息的JavaScriptJavaScript代码代码（续表）（续表）行号行号Java

20、Script代码代码151617181920212223242526272829303132333435363738394041424344454647484950515253545556 function resetform()document.all.loginUserform.reset();return false;function trim(string)if(string=null)return;return string.replace(/(s*)|(s*$)/g,);function check()if(trim(document.all.userName.value)=)er

21、rDeal(用户名不能为空！用户名不能为空！,document.all.userName);return false;if(trim(document.all.password.value)=)errDeal(密码不能为空！密码不能为空！,document.all.password);return false;if(trim(document.all.captchafield.value)=)errDeal(验证码不能为空！验证码不能为空！,document.all.captchafield);return false;return true;function errDeal(tip,obj)

22、try obj.focus();catch(e)alert(tip);网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18（3 3）在用户登录表单插入）在用户登录表单插入formform与与divdiv标签标签在网页在网页index1001.html的用户登录表单中插入表的用户登录表单中插入表单与单与div标签，且设置其属性，标签，且设置其属性，HTML代码如表代码如表10-33所示。所示。表表10-3310-33用户登录表单插入的用户登录表单插入的formform与与divdiv标签的代码标签的代码行号行号HTML代码代码01020304050607 网页设计与制作

23、任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）19（4 4）在表单中插入表单控件）在表单中插入表单控件在用户登录表单的表单中分别输入标签文字，在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮，插入完成的插入文件域、图像和按钮，插入完成的HTML代码代码如表如表10-34所示。所示。用户登录表单的浏览效果如图用户登录表单的浏览效果如图10-3所示。所示。图10-3用户登录表单的浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）20表表10-3410-34用户登录表单对应的用户登录表单对应的HTMLHTML代码代码行号行号HTML代码代码

24、01020304050607080910111213141516 用户登录用户登录 用户名用户名  密密  码码 验证码验证码 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）212 2设计与制作展示图片和播放视频的区块（1 1）定义展示图片和播放视频区块的）定义展示图片和播放视频区块的CSSCSS样样式式在样式文件在样式文件“style10.css”中定义展示图片和播放中定义展示图片和播放视频区块所需的视频区块所需的CSS样式。重新定义标签样式。重新定义标签“td”的样的样式，代码如表式，代码如表10-35所示。所示。表表10

25、-3510-35标签标签“tdtd”的样式代码的样式代码行号行号CSS样式代码样式代码01020304050607td font-family:宋体宋体;font-size:9pt;line-height:150%;font-weight:normal;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）22重新定义标签重新定义标签“a”的样式，代码如表的样式，代码如表10-36所示。所示。表表10-3610-36标签标签”a a”的样式代码的样式代码行号行号CSS样式代码样式代码01020304050607080910111213141516a:link,a:visit

26、ed,a:active cursor:pointer;color:#1F6BAF;text-decoration:none;a:hover color:#33ffcc!important;div#sidebar a color:#1F6BAF;font-family:宋体宋体;font-size:12px;网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）23（2 2）编写自定义函数）编写自定义函数showContentshowContent()()实实现动态改变背景的功能现动态改变背景的功能自定义函数自定义函数showContent()用于动态改变背景，用于动态改变背

27、景，其代码如表其代码如表10-37所示。所示。表表10-3710-37自定义函数自定义函数showContentshowContent()()的代码的代码行号行号HTML代码代码0102030405060708091011121314151617181920!-/function showContent(id)for(i=1;i 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）24（3 3）插入一个）插入一个1 1行行1 1列表格列表格table1table1在在div标签标签与与之间插入之间插入一个一个1行行1列的表格，设置其宽度为列的表格，设置其宽度为“175像素

28、像素”，高，高度为度为“158像素像素”，填充、间距和边框都为，填充、间距和边框都为“0”，其其ID标识为标识为“table1”，HTML代码如表代码如表10-38所示。所示。表表10-3810-381 1行行1 1列表格列表格table1table1的的HTMLHTML代码代码行号行号HTML代码代码01020304050607 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）25（4 4）在表格）在表格table1table1中插入两个表格中插入两个表格在表格在表格table1中先插入一个中先插入一个1行行4列的表格，设列的表格，设置其宽度为置其宽度为“175像素

29、像素”，高度为，高度为“30像素像素”，填，填充、间距和边框都为充、间距和边框都为“0”，其，其ID标识为标识为“table11”。在该表格的第。在该表格的第2个和第个和第3个单元格中输个单元格中输入文字，设置单元格的背景图像，输入必要的代码，入文字，设置单元格的背景图像，输入必要的代码，代码如表代码如表10-39所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）26表表10-3910-394 4行行1 1列表格列表格table11table11的的HTMLHTML代码代码行号行号HTML代码代码01020304050607080910 视频欣赏视

30、频欣赏 图片欣赏图片欣赏 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）27在表格在表格table11的下方插入一个的下方插入一个1行行1列的表格，设列的表格，设置其的宽度为置其的宽度为“175像素像素”，填充、间距和边框都为，填充、间距和边框都为“0”，其，其ID标识为标识为“table12”，代码如表，代码如表10-40所示。所示。表表10-4010-401 1行行1 1列表格列表格table12table12的的HTMLHTML代码代码行号行号HTML代码代码0102030405 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）

31、版）28（5 5）在表格）在表格table12table12中插入两个表格中插入两个表格在表格在表格table12中先插入一个中先插入一个1行行1列的表格，设列的表格，设置其的宽度为置其的宽度为“175像素像素”，填充、间距和边框都，填充、间距和边框都为为“0”，其，其ID标识为标识为“content_1”，显示方式为，显示方式为“block”，代码如表，代码如表10-41所示。所示。表表10-4110-41表格表格content_1content_1的的HTMLHTML代码代码行号行号HTML代码代码010203040506 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3

32、版）版）29将光标置于表格将光标置于表格content_1的单元格中，在的单元格中，在Dreamweaver CC的主界面中，在【插入】的主界面中，在【插入】面板的【面板的【HTML】类型面板中】类型面板中单击【单击【Flash Video】按钮，打】按钮，打开【插入开【插入 FLV】对话框，在该】对话框，在该对话框中输入对话框中输入Flv视频的视频的URL，设置设置Flv视频的属性，设置结果视频的属性，设置结果如图如图10-4所示。所示。图10-4【插入 Flash 视频】对话框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）30然后单击【确定】按钮，在表格然后单击

33、【确定】按钮，在表格content_1的单的单元格中完成元格中完成flv格式视频的插入。格式视频的插入。在表格在表格content_1中选取所插入的中选取所插入的Flv视频，在视频，在【属性】面板中对其属性进行设置，如图【属性】面板中对其属性进行设置，如图10-5所示。所示。图10-5Flv视频的【属性】面板网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）31切换到【代码】视图，在表格切换到【代码】视图，在表格content_1的下方的下方输入输入HTML代码，插入另一个代码，插入另一个2行行1列的表格，其列的表格，其ID标识为标识为“content_2”，显示方式为

34、，显示方式为“none”，且在，且在表格表格content_2中的单元格中插入一幅图像中的单元格中插入一幅图像01.jpg，代码如表代码如表10-42所示。所示。表表10-4210-42表格表格content_2content_2的的HTMLHTML代码代码行号行号HTML代码代码0102030405060708091011 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）324 4设计与制作主页index1001.htmlindex1001.html中部右侧的主体区域在网站主页在网站主页index1001.html中部右侧的主体区中部右侧的主体区域中输入文字，插入图

35、像，域中输入文字，插入图像，HTML代码如表代码如表10-43所示，其浏览效果如图所示，其浏览效果如图10-6所示。所示。表表10-4310-43网站主页网站主页index1001.htmlindex1001.html中部右侧的主体区域的代码中部右侧的主体区域的代码行号行号HTML代码代码010203040506070809      名山名山 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）33表表10-4310-43网站主页网站主页index1001.htmlindex1001.html中部右侧的主体区域

36、的中部右侧的主体区域的代码代码（续表）（续表）行号行号HTML代码代码10111213141516171819202122232425262728293031323334353637383940414243 中国的名山众多，数不胜数，雄、奇、灵、秀，各具特色。中国的名山首推五岳，泰山之雄伟、华山之险峻、中国的名山众多，数不胜数，雄、奇、灵、秀，各具特色。中国的名山首推五岳，泰山之雄伟、华山之险峻、衡山之烟云、恒山之奇崛、嵩山之萃秀，百态千姿，各怀绝景。而黄山更以奇松、怪石、云海、温泉闻名中外。中国的名山历来就是佛家、衡山之烟云、恒山之奇崛、嵩山之萃秀，百态千姿，各怀绝景。而黄山更以奇松、怪石、

37、云海、温泉闻名中外。中国的名山历来就是佛家、道家崇敬之地，因而也成就了以佛、道名扬天下的多座名山，佛教的道家崇敬之地，因而也成就了以佛、道名扬天下的多座名山，佛教的金五台、银普陀、铜峨眉、铁九华金五台、银普陀、铜峨眉、铁九华；道教的武当山、青城山、龙虎山、；道教的武当山、青城山、龙虎山、齐云山等。齐云山等。/div 查看更多查看更多      名湖名湖 湖泊是大地的眼睛，站在高处俯瞰，它们真仿佛是和人的眼睛一样充满智慧、生机和灵气的大地之眼。湖泊是大地的眼睛，站在高处俯瞰，它们真仿佛是和人的眼睛一样充满智慧、生机和灵气的大地之眼。&n

38、bsp;   湖泊是美的，她所具有的形、影、声、色，以及她与日月相辉映、与山石相配合所形成的和谐之美，给大自然湖泊是美的，她所具有的形、影、声、色，以及她与日月相辉映、与山石相配合所形成的和谐之美，给大自然增添了无限风采。与山脉的伟岸崔嵬、沉雄苍郁相比，湖泊具有清奇淡逸、灵秀幽深的品性，更有一种纯洁、安宁、柔静的温情。增添了无限风采。与山脉的伟岸崔嵬、沉雄苍郁相比，湖泊具有清奇淡逸、灵秀幽深的品性，更有一种纯洁、安宁、柔静的温情。查看更多景区查看更多景区      名河名河 文明始自河流，这是亘古不变的。

39、在中华大地上，自北往南，由西向东，奔流着数不清的大江大河，几千年流淌文明始自河流，这是亘古不变的。在中华大地上，自北往南，由西向东，奔流着数不清的大江大河，几千年流淌奔涌，几万年生生不息，她们在人们的心理构成中，凝结为一种根深蒂固的情结，一种图腾和象征：她们是我们的母亲河，是中华民族的摇奔涌，几万年生生不息，她们在人们的心理构成中，凝结为一种根深蒂固的情结，一种图腾和象征：她们是我们的母亲河，是中华民族的摇篮。从尧舜始，江河孕育了世界上最优秀的文化，留下了深邃的思想和智慧；她们经历了频繁的战争，造就了名垂青史的英雄和史诗。篮。从尧舜始，江河孕育了世界上最优秀的文化，留下了深邃的思想和智慧；她们经历了频繁的战争，造就了名垂青史的英雄和史诗。查看更多景区查看更多景区 网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）34图10-6网页中部右侧主体区域浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）