1001【任务10-1】制作“E游天下”网站的主页.pdf-道客多多

资源描述

1、网页设计与制作任务驱动教程（第 3 版） 1 单元 10 设计网站主页与整合网站【引导训练】【任务 10-1】制作“ E游天下”网站的主页网页 index1001.html 的浏览效果如图 10-1 所示。图 10-1 网页 index1001.html 的浏览效果【任务 10-1-1】网站主页主体布局结构设计【任务描述】设计网站主页 index1001.html 的主体布局结构，应用“ div 标答 +CSS 样式”对网站主页的主体结构进行布局。【任务实施】 1定义网页主体布局结构的 CSS 样式网站主页 index1001.html 的主体布局

2、示意图如图 10-2 所示。网页设计与制作任务驱动教程（第 3 版） 2 图 10-2 网站主页 index1001.html 的主体布局示意图在文件夹 style 中创建一个 CSS 样式文件“ style10.css”，在该样式文件中定义网页布局结构所需的 CSS 样式。（ 1）定义 innerWrapper 样式 innerWrapper 样式的属性设置如表 10-1 所示。表 10-1 innerWrapper 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 div#innerWrapper width: 980px; margin: 0px auto

3、0px; （ 2）定义 daohang 样式 daohang 样式的属性设置如表 10-2 所示。表 10-2 daohang 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 #daohang height: 40px; width: 980px; margin-right: auto; margin-left: auto; line-height: 24px; background-image: -webkit-linear-gradient(top, #FFF, #EEE); background-image: -ms-linear-gra

4、dient(top, #FFF, #EEE); background-image: linear-gradient(top, #FFF, #EEE); 网页设计与制作任务驱动教程（第 3 版） 3 10 （ 3）定义 sidebar 样式 sidebar 样式的属性设置如表 10-3 所示。表 10-3 sidebar 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 div#sidebar float: left; width: 175px; clear: left; （ 4）定义 content 样式 content 样式的属性设置如表 10-4 所示。表 10-4

5、 content 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 div#content float: right; width: 800px; font: 12px Tahoma; （ 5）定义 proPanel 样式 proPanel 样式的属性设置如表 10-5 所示。表 10-5 proPanel 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 div#proPanel width: 800px; font: 12px Tahoma; （ 6）定义 left 样式 left 样式的属性设置如表 10-6 所示。表 10-6 left

6、样式的属性设置行号 CSS 样式代码 01 div#content div.left 网页设计与制作任务驱动教程（第 3 版） 4 02 03 04 05 float: left; width: 266px; （ 7）定义 right 样式 right 样式的属性设置如表 10-7 所示。表 10-7 right 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 div#content div.right float: right; width: 266px; （ 8）定义 proPanelCon2 样式 proPanelCon2 样式的属性设置如表 10-8 所示。

7、表 10-8 proPanelCon2 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 div#proPanel div.proPanelCon2 background: #FAFFA9 url(/images/bg02.gif) repeat-x left top; color: #546602; margin: 0px 267px 0px; （ 9）定义 ly-footer 样式 ly-footer 样式的属性设置如表 10-9 所示。表 10-9 ly-footer 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 07 08 0

8、9 div#ly-footer width: 980px; height: 40px; line-height: 180%; padding: 10px 0px 10px; color: #6C6C6C; background-color: #E7E7E7; text-align: center; 网页设计与制作任务驱动教程（第 3 版） 5 10 11 12 font-size: 12px; font-weight: bold; 2链接外部样式文件 style10.css 在网页 index1001.html 中链接外部样式文件 style10.css，在网页的“ ”内新增一行代码： 3应用

9、 div+CSS 布局网页在网站主页中插入 div 标签布局该网页，网站主页的主体布局结构代码如表 10-10 所示。表 10-10 网站主页的主体布局结构代码行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 【任务 10-1-2】网站主页局部布局结构设计【任务描述】（ 1）在样式文件“ style10.css”中定义网站主页 index1001.html 的局部布局结构所需的CSS 样式。（ 2）设计网站主页 index1001.html 的局部布局结构，应用“ div 标签 +CSS 样式”对网站主页的局

10、部结构进行布局。网页设计与制作任务驱动教程（第 3 版） 6 【任务实施】 1定义中部左侧区块布局结构的 CSS 样式（ 1）定义 panel 样式 panel 样式的属性设置如表 10-11 所示。表 10-11 panel 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 div#sidebar div.panel margin-bottom: 5px; font: 12px Tahoma; width: 175px; clear: left; （ 2）定义 panel-login 样式 panel-login 样式的属性设置如表 10-12 所示。表

11、 10-12 panel-login 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 div#panel-login background: url(/images/bg04.gif) #FFF repeat-x left top; width: 180px!important; color: #467FB6; height: 200px; （ 3）定义 banner 样式 banner 样式的属性设置如表 10-13 所示。表 10-13 banner 样式的属性设置行号 CSS 样式代码 01 02 03 div.banner width: 175px; （

12、 4）定义 panel-title 样式 panel-title 样式的属性设置如表 10-14 所示。表 10-14 panel-title 样式的属性设置网页设计与制作任务驱动教程（第 3 版） 7 行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 div.panel-title font-weight: bold; color: #005CCF; position: relative; height: 25px; padding-left: 22px; font-size: 14px; padding-top: 5px; background: ur

13、l(/images/bg05.gif) no-repeat center bottom; 2应用 div+CSS 布局中部左侧区块中部左侧区块的布局结构代码如表 10-15 所示。表 10-15 中部左侧区块的布局结构代码行号 HTML 代码 01 02 03 04 3定义中部右侧主体区块布局结构的 CSS 样式（ 1）定义 proPanelCon1 样式 proPanelCon1 样式的属性设置如表 10-16 所示。表 10-16 proPanelCon1 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 div#proPanel div.proPan

14、elCon1 width: 266px; background: #9EDEFF url(/images/bg01.gif) repeat-x left top; color: #013087; （ 2）定义 proPanelCon3 样式 proPanelCon3 样式的属性设置如表 10-17 所示。表 10-17 proPanelCon3 样式的属性设置网页设计与制作任务驱动教程（第 3 版） 8 行号 CSS 样式代码 01 02 03 04 05 06 div#proPanel div.proPanelCon3 width: 265px; background: #959595

15、url(/images/bg03.gif) repeat-x left top; color: #FFF; （ 3）定义 pro-title 样式 pro-title 样式的属性设置如表 10-18 所示。表 10-18 pro-title 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 div#proPanel div.pro-title height: 30px; margin-top: auto; margin-bottom: auto; padding-top: 10px; font-size: 16px; font-weight:

16、 bold; border-bottom: 1px dashed #FFF; （ 4）定义 pro-img 样式 pro-img 样式的属性设置如表 10-19 所示。表 10-19 pro-img 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 06 07 div#proPanel div.pro-img border: 5px solid #FFF; height: 150px; width: 230px; margin: 10px auto 10px 13px; （ 5）定义 pro-intro 样式 pro-intro 样式的属性设置如表 10-20 所示。表

17、 10-20 pro-intro 样式的属性设置行号 CSS 样式代码网页设计与制作任务驱动教程（第 3 版） 9 01 02 03 04 05 06 07 div#proPanel div.pro-intro height: 180px; line-height: 150%; padding: 0px 10px 5px 10px; text-indent: 2em; （ 6）定义 pro-more 样式 pro-more 样式的属性设置如表 10-21 所示。表 10-21 pro-more 样式的属性设置行号 CSS 样式代码 01 02 03 04 05 div#proPane

18、l div.pro-more text-align: right; padding: 5px; 4应用 div+CSS 布局右侧的主体区块右侧主体区块的布局结构代码如表 10-22 所示。表 10-22 右侧主体区块的布局结构代码行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 11 12 5应用 div+CSS 布局右侧主体区块的左部右侧主体区块左部的布局结构代码如表 10-23 所示。网页设计与制作任务驱动教程（第 3 版） 10 表 10-23 右侧主体区块左部的布局结构代码行号 HTML 代码 01 02 03 04 05 06 07 08

19、 6应用 div+CSS 布局右侧主体区块的右部右侧主体区块右部的布局结构代码如表 10-24 所示。表 10-24 右侧主体区块右部的布局结构代码行号 HTML 代码 01 02 03 04 05 06 07 08 7应用 div+CSS 布局右侧主体区块的中部右侧主体区块中部的布局结构代码如表 10-25 所示。表 10-25 右侧主体区块中部的布局结构代码行号 HTML 代码 01 02 03 04 05 06 【任务 10-1-3】设计与制作网页的顶部导航栏网页设计与制作任务驱动教程（第 3 版） 11 【任务描述】设计与制作网页 index1001.html

20、的顶部导航栏。【任务实施】 1定义网页顶部导航栏的 CSS 样式在文件夹 style 中创建一个 CSS 样式文件“ topnav.css”，在该样式文件中定义顶部导航栏所需的 CSS 样式，该样式文件的 CSS 代码定义如表 10-26 所示。表 10-26 样式文件 topnav.css 的 CSS 代码定义序号 CSS 代码序号 CSS 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 #nav width: 980px; margin-left:40px; #nav a

21、display: block; width: 100px; text-align: center; line-height: 40px; font-weight: bold; #nav a:link color:#2b98db; text-decoration:none; #nav a:visited color:#2b98db; text-decoration:none; #nav a:hover color: #2b98db; text-decoration: none; font-weight: bold; 46 47 48 49 50 51 52 53 54 55 56 57 58 5

22、9 60 61 62 63 64 65 66 67 68 69 70 71 72 #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; bord

23、er-bottom-color: #FFF; display: block; z-index: 0; #nav li ul a display: block; margin:0px; #nav li ul a:link 网页设计与制作任务驱动教程（第 3 版） 12 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 #nav ul list-style-type: none; #nav li float: left; width: 100px; margin:0px; padding:0px; list-style-type: none

24、; #nav li a:hover background:#999; font-weight: bold; 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 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-we

25、ight: bold; #nav li:hover ul left: auto; 2在网页中插入 HTML 代码实现顶部导航功能在网页 index1001.html 中顶部位置插入实现导航栏的 HTML 代码，如表 10-27 所示。表 10-27 网页 index1001.html 顶部导航栏中的 HTML 代码行号 JavaScript 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 首页生态游九寨沟西双版纳香格里拉云南大理云南丽江桂林山水公园游张家界天子山网页设计与制作任务驱动教程（第 3 版） 13 18 19 20

26、 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 索溪峪五岳寨神农架长白山山岳游黄山泰山华山恒山嵩山庐山江湖游千岛湖西湖洞庭湖鄱阳湖太湖长江三峡漓江名城游北京上海天津西安西安长沙古镇游湖南凤凰安徽西递网页设计与制作任务驱动教程（第 3 版） 14 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

27、浙江乌镇江苏周庄山西平遥江西婺源瀑泉游黄果树瀑布壶口瀑布长白瀑布趵突泉谷帘泉虎跑泉 E 游调查【任务 10-1-4】创建实现底部导航栏和版权信息的脚本文件【任务描述】创建脚本文件 footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。【任务实施】在文件夹“ js”中新建一个脚本文件“ footer.js”，在该文件中输入表 10-28 所示的代码。表 10-28 脚本文件 footer.js 的代码行号 JavaScript 代码 01 02 03 04 05 06 07 08 var footerContent = ; footer

29、oterContent); 【任务 10-1-5】设计与制作网站主页的中部区域【任务描述】设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。【任务实施】 1设计与制作网页的用户登录表单（ 1）定义用户登录表单的 CSS 样式在样式文件“ style10.css”中定义网页中部区域所需的 CSS 样式。重新定义标签 form 的属性，代码如表 10-29 所示。表 10-29 标签 form 的属性设置行号 HTML 代码 01 02 03 04 form padding: 0px; margin: 0px 定义样式 di

30、v#panel-login 内所包含元素的样式，代码如表 10-30 所示。表 10-30 样式 div#panel-login 内所包含元素的样式代码行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 11 div#panel-login div.panel-title padding:5px 0px 0px 65px ; color: #F30; border-bottom: #FFF 1px solid; height: 20px; div#panel-login div.panel-content border-top: 1px solid #C5E

31、4F7; border-bottom: 1px solid #FFF; padding: 8px 0px 2px 10px; 网页设计与制作任务驱动教程（第 3 版） 16 12 13 14 15 16 17 18 19 20 21 div#panel-login div.panel-btn padding-top: 5px; text-align: center; padding-bottom: 5px; border-top: 1px solid #C5E4F7; border-bottom: 1px solid #C5E4F7; margin-bottom: 5px; 定义标签 inpu

32、t 的属性及其所包含元素的样式，代码如表 10-31 所示表 10-31 标签 input 的属性设置及其所包含元素的样式行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 input font: 12px Tahoma ; input.login-text background: url(/images/text_login_bg.gif) #FFF no-repeat center center; width: 110px; color: #46

33、7FB6; 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.btn-rb width: 70px; color: #000; height: 21px; margin: 0px; 网页设计

34、与制作任务驱动教程（第 3 版） 17 29 30 31 32 padding: 0px; background: url(/images/menu/btn_bg_rb.gif) no-repeat center; border-style: none; （ 2）编写验证用户输入信息的 JavaScript 代码验证表单控件中输入信息的 JavaScript 代码如表 10-32 所示。表 10-32 验证表单控件中输入信息的 JavaScript 代码行号 JavaScript 代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

35、 18 19 20 21 22 23 24 25 26 27 28 29 30 31 function getNewStr() if (check() try return true; catch(e) return false; return false; return false; function resetform() document.all.loginUserform.reset(); return false; function trim(string) if (string = null) return “; return string.replace(/(s*)|(s*$)/

36、g,“); function check() if (trim(document.all.userName.value)=“) 网页设计与制作任务驱动教程（第 3 版） 18 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 errDeal(“用户名不能为空！ “,document.all.userName); return false; if (trim(document.all.password.value)=“) errDeal(“密码不能为空！ “,document.all.passwo

37、rd); return false; if (trim(document.all.captchafield.value)=“) errDeal(“验证码不能为空！ “,document.all.captchafield); return false; return true; function errDeal(tip,obj) try obj.focus(); catch(e) alert(tip); （ 3）在用户登录表单插入 form 与 div 标签在网页 index1001.html 的用户登录表单中插入表单与 div 标签，且设置其属性， HTML代码如表 10-33 所示。表

38、10-33 用户登录表单插入的 form 与 div 标签的代码行号 HTML 代码 01 02 03 04 05 06 07 （ 4）在表单中插入表单控件网页设计与制作任务驱动教程（第 3 版） 19 在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮，插入完成的HTML 代码如表 10-34 所示。表 10-34 用户登录表单对应的 HTML 代码行号 HTML 代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 用户登录用户名密码验证码用户登录表单的浏览效果如图 10-3 所示。图 10-3 用户登录表单的

39、浏览效果 2设计与制作展示图片和播放视频的区块（ 1）定义展示图片和播放视频区块的 CSS 样式在样式文件“ style10.css”中定义展示图片和播放视频区块所需的 CSS 样式。重新定义标签“ td”的样式，代码如表 10-35 所示。表 10-35 标签“ td”的样式代码行号 CSS 样式代码 01 td 网页设计与制作任务驱动教程（第 3 版） 20 02 03 04 05 06 07 font-family:“宋体 “; font-size: 9pt; line-height: 150%; font-weight: normal; 重新定义标签“ a”的样式，代码如表

40、 10-36 所示。表 10-36 标签” a”的样式代码行号 CSS 样式代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 a:link,a:visited,a:active cursor: pointer; color: #1F6BAF; text-decoration: none; a:hover color: #33ffcc!important; div#sidebar a color: #1F6BAF; font-family: “宋体 “; font-size: 12px; （ 2）编写自定义函数 showContent( )

41、实现动态改变背景的功能自定义函数 showContent( )用于动态改变背景，其代码如表 10-37 所示。表 10-37 自定义函数 showContent( )的代码行号 HTML 代码 01 02 03 04 05 06 07 08 09 10 （ 3）插入一个 1 行 1 列表格 table1 在 div 标签与之间插入一个 1 行 1 列的表格，设置其宽度为“ 175 像素”，高度为“ 158 像素”，填充、间距和边框都为“ 0”，其 ID 标识为“ table1”，HTML 代码如表 10-38 所示。表 10-38 1 行 1 列表格 table1 的 HTML 代

42、码行号 HTML 代码 01 02 03 04 05 06 07 （ 4）在表格 table1 中插入两个表格在表格 table1 中先插入一个 1 行 4 列的表格，设置其宽度为“ 175 像素”，高度为“ 30像素”，填充、间距和边框都为“ 0”，其 ID 标识为“ table11”。在该表格的第 2 个和第 3 个单元格中输入文字，设置单元格的背景图像，输入必要的代码，代码如表 10-39 所示。表 10-39 4 行 1 列表格 table11 的 HTML 代码行号 HTML 代码 01 02 03 04 05 06 07 08 视频欣赏图片欣赏网页设计与制作任务驱动教

43、程（第 3 版） 22 09 10 在表格 table11 的下方插入一个 1 行 1 列的表格，设置其的宽度为“ 175 像素”，填充、间距和边框都为“ 0”，其 ID 标识为“ table12”，代码如表 10-40 所示。表 10-40 1 行 1 列表格 table12 的 HTML 代码行号 HTML 代码 01 02 03 04 05 （ 5）在表格 table12 中插入两个表格在表格 table12 中先插入一个 1 行 1 列的表格，设置其的宽度为“ 175 像素”，填充、间距和边框都为“ 0”，其 ID 标识为“ content_1”，显示方式为“ block”，代码

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

45、表格 content_1 的单元格中完成 flv 格式视频的插入。在表格 content_1 中选取所插入的 Flv 视频，在【属性】面板中对其属性进行设置，如图 10-5 所示。图 10-5 Flv 视频的【属性】面板切换到【代码】视图，在表格 content_1 的下方输入 HTML 代码，插入另一个 2 行 1 列的表格，其 ID 标识为“ content_2”，显示方式为“ none”，且在表格 content_2 中的单元格中插入一幅图像 01.jpg，代码如表 10-42 所示。表 10-42 表格 content_2 的 HTML 代码行号 HTML

46、代码 01 02 03 04 05 06 07 网页设计与制作任务驱动教程（第 3 版） 24 08 09 10 11 4设计与制作主页 index1001.html 中部右侧的主体区域在网站主页 index1001.html 中部右侧的主体区域中输入文字，插入图像， HTML 代码如表 10-43 所示，其浏览效果如图 10-6 所示。表 10-43 网站主页 index1001.html 中部右侧的主体区域的代码行号 HTML 代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2

47、6 27 28 29 名山中国的名山众多，数不胜数，雄、奇、灵、秀，各具特色。中国的名山首推五岳，泰山之雄伟、华山之险峻、衡山之烟云、恒山之奇崛、嵩山之萃秀，百态千姿，各怀绝景。而黄山更以奇松、怪石、云海、温泉闻名中外。中国的名山历来就是佛家、道家崇敬之地，因而也成就了以佛、道名扬天下的多座名山，佛教的 “金五台、银普陀、铜峨眉、铁九华 “；道教的武当山、青城山、龙虎山、齐云山等。 /div 查看更多名湖湖泊是大地的眼睛，站在高处俯瞰，它们真仿佛是和人的眼睛一样充满智慧、生机和灵气的大地之眼。湖泊是美的，她所具有的形、影、声、色，以及她与日月相辉映、与山石相配合所形成的和谐之美，给大

48、自然增添了无限风采。与山脉的伟岸崔嵬、沉雄苍郁相比，湖泊具有清奇淡逸、灵秀幽深的品性，更有一种纯洁、安宁、柔静的温情。网页设计与制作任务驱动教程（第 3 版） 25 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 查看更多景区名河文明始自河流，这是亘古不变的。在中华大地上，自北往南，由西向东，奔流着数不清的大江大河，几千年流淌奔涌，几万年生生不息，她们在人们的心理构成中，凝结为一种根深蒂固的情结，一种图腾和象征：她们是我们的母亲河，是中华民族的摇篮。从尧舜始，江河孕育了世界上最优秀的文化，留下了深邃的思想和智慧；她们经历了频繁的战争，造就了名垂青史的英雄和史诗。查看更多景区图 10-6 网页中部右侧主体区域浏览效果【任务 10-1-6】在主页中插入 AP Div对象和 SWF动画【任务描述】先在网页中插入两个 AP Div 对象，然后在 AP Div 对象中各插入一个 SWF 动画。网页设计与制作任务驱动教程（第 3 版） 26 【任务实施】 1插入 A

展开阅读全文