(完整)《旅游网》网页设计 实训报告

1、（完整）旅游网网页设计实训报告武汉交通职业学院网页设计（二）综合实训报告设计题目：“旅游网”制作系部：电子信息工程息专业班级：计算机应用技术（1）班指导教师：*沃学生姓名：*学号：使用学期：2015年6月2016年1月旅游网实训报告一.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求。在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程。因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标，提高学生的综合素质有着重要的作用。二.实训目的:通过综合实训进一步巩固，深化

2、和加强学生的理论知识于专业技能.（1）掌握规划网站的内容结构，目录结构，链接结构的方法.（2）掌握表单网页制作方法。（3）掌握网页特效制作方法。（4）掌握js基本语法。（5）掌握获取元素，元素值,子元素,父元素的方法。（6）掌握表单的验证方法,计算等。2。训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。3。培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。三实验步骤

3、1。网站主题我的网站的主题在于从各个方面全面的介绍网络游戏专题，包括每个页面都有介绍不同的游戏资料，、心得、图片等内容.同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅蓝色,给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。2网站材料网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的资料。同时，查询相关的书籍百度和素材光盘等方式收集所需的文字资料，图像资料,网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站,就要尽量搜集材料,搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3网站规划我的网

4、站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感.四、网站介绍(完整)旅游网网页设计实训报告(完整)旅游网网页设计实训报告旅店現新选揮膽遍11;水住自未盂业sfiWfibgosrc二”images/bg”+xh+”jpg”；,4000)；滥遍山:LzTFm.nm.芒二茫互、：,ms:心：.我心的齐人罐区融炽SFJ&iSr:R1帀股window。onload=funetion()/打开页面时自动执行函数首页前端采用的幻灯片播放特效，实现特效代码如下scripttype二”text/java

5、script”/window.onload含义为打开window.onload二(setinterval(function。页面自动页面自动执行语句。varbg=document.getElementByid(bg”);利用getElementByid方法获取varxh二Math.floor(Math。random()*5+1);元素对象/Mathorandom()函数获取随机数/bg.src二images/bg”+xh+”.jpg此语句用来跟换图片，实现图片切效果。vara=documentgetEtmentByldCxiamia/用;getElementByld方法获取对象/用“。号获取a

6、对象下所有的img对象（完整）旅游网网页设计实训报告（完整）旅游网网页设计实训报告varp二a.getElementsByTagName(img”);for(vari=0;ip.length;i+)pi.index=i;/给事件对象添加属性值pi。onmouseover二function()for(vari=0;ip。length;i+)pi.style.opacity二”1”this.style.opacity二0.5;；/script导航条特效:/调用了外部JS文件，方面获取对象和元素$(function()$(。nav).children(”li:has(ul).hove/(鼠标滑o过那

7、一项显示那个项的下一级$(this).children(”ul).slideDown(300);菜单300是用来控制显示下级菜单的,funetion()$(this).children(ul)。h速度(时间)；)；浏览页面仁查持蹭线现在ja为选项卡特效：scripttype=”text/javascript”window.onload二function()/window.onload打开页面时自动执行函数vara=document。getElementByld(xiamian);/用getElementByld获取id号来获取对象varb=document.getElementByld(cha

8、);/用getElementByld获取id号来获取对象varp=aogetElementsByTagName(”input”)；/用getElementsByTagName获取标签获取对象vard=aogetElementsByTagName(div);/用getElementsByTagName获取标签获取对象varc=b.getElementsByTagName(input”)；/用getElementsByTagName获取标签获取对象for(vari=0；ip。length;i+)pi.index=i；/给事件对象添加属性值pi.onmouseover=function(;for(v

9、ari=0；ip.length；i+)diostyleodisplay二”none;/将鼠标未滑过时的对应的div全部隐藏起来pi.className=”；this.className=”bt2”；dthis。indexstyle.display二”block”/将鼠标滑过时的对应的div显示出来；for(vari=0；ic。length；i+)ci.index二i;/给事件对象添加属性值ci。onmouseover二function()for(vari=0;ip.length；i+)ci.styleobackgroundColor二”#FFFFFF/改变鼠标未滑过时的对应元素的背景色this

10、。style.backgroundColor二#27B7CF;/改变鼠标滑过时的对应元素的背景色;；图片上一张下一张切换特效$(function()$(#back).toggle(funetion()/此函数是当鼠标单击#tp对象时依次切换图片实$(#tp).attr(src,images/j7。jpg);现上一张的效果/$(”#tp)。attr(title,this.src)；TOC o 1-5 h z,function。$(”#tp).attr(”src,”images/j6。jpg);$(”#tp).attr(title”，this。src);,function()$(#tp”).att

11、r(src,”images/j5.jpg”);$(#tp).attr(title”，this.src);,function()$(#tp”).attr(src,”images/j4.jpg)；$(img)oattr(”title,this。src);,function()$(#tp)。attr(src,images/j3.jpg);$(#tp”).attr(title,this.src);,function。$(#tp”)。attr(src,”images/j2。jpg);$(#tp).attr(title,this.src);,function。$(#tp).attr(src,images/

12、j1ojpg);$(#tp)。attr(title,this.src);)$(#ff)otoggle(funetion()/此函数是当鼠标单击#tp对象时依次切换图片实现$(#tp).attr(src,images/j7jpg)；下一张的效果/$(#tp)。attr(src,images/j1。jpg);$(#tp)。attr(title,this。src);,function。$(#tp).attr(src,images/j2.jpg);$(#tp)。attr(title,this.src);,function。$(#tp).attr(src,images/j3jpg);$(#tp).att

13、r(title,this。src);,function()$(#tp).attr(src,images/j4.jpg);$(#tp)。attr(title,this。src);,function()$(#tp)attr(src,images/j5jpg);$(#tp).attr(title,this.src);,function。$(#tp).attr(src,images/j6。jpg);$(#tp)。attr(title,this.src);,function。$(#tp)attr(src,images/j7。jpg);$(#tp)oattr(title,this.src););浏览页面2

14、:飯伞劇凄尚（完整）旅游网网页设计实训报告(完整)旅游网网页设计实训报告当鼠标滑过对应的地区时，下方会显示对应地区的景点优惠，报价，图片等信息,并且鼠标滑到哪张图片该图片会自动增添一个边框。特效代码：scripttype=”text/javascriptwindow.onload=function()vard=document。getElementByld(w);/用getElementByld方法获取对象varb=dgetElementsByClassName(id1);/用。getElementsByClassName方法获取d对象varp=document。getElementsByTa

15、gName(input”);下的元素/for(vari=0;ip。length；i+)pi。index二i;/给事件对象添加属性值pi.onmouseover=function()/鼠标滑过时执行以下函数for(vari=0;ip.length;i+)bistyle.display二none;/将鼠标未滑过时的对应的盒子全部隐藏起来bthis。index.styledisplay二block”；/将鼠标滑过时的对应的盒子显示出来;/script详细页面：北京御马前.中国东北轄名山朦,瞳东北三省东址-西童走向是中朝暮山旧头山之名起源于申国，据李朝实录卜肃宗十八年（1通2）条云：长白山”険人或称白

16、头山r以辰白如也.J，所渭胡人”播指即是衣真人、；駆人。可见白头M同”长白山”一样,皆星由中国人命名的.旧头送意,也是汉普肘黍谑万式，意即远里此山,所见之山顶为白鱼恰如H鱼的头故名。全療七日游冀食、蹄、住stm800/当鼠标滑过左侧照片是右侧显示对应景点的相关信息，包过图片景点描述windowoonload二function。vara=document.getElementByld(zw”)。getElementsByTagName(img);/先用.getElementByld方法获取id号zw的对象在用getElementsByTagName方法获取zw对象下img标签对象/varb=do

17、cument.getElementByld(”hezi)ogetElementsByTagName(”div)/先用。getElementByld方法获取id号hezi的对象在用getElementsByTagName方法获取zw对象下div标签对象/index=i；/给事件对象添加属性值for(vari=0;ia。length;i+)ai。ai。onmouseover二function()for(vari=0;ia。length;i+)bi.styleodisplay二”none”；/将鼠标未滑过时的对应的div全部隐藏起来bthis.index。styledisplay二”block”/将

18、鼠标滑过时的对应的div显示出来；/script购物车页面:【元BE爾】上紳删耐出苣毛里欢斯注逅色7天Effif?QLj_【元旦E画】上辭杭州耐出苣毛里农斯注逅E/7天电曲疔1E胡T:-上禹自修_【元且/圧|擬上副討京也总毛里彌破研悲曰厅畑0八购物车只要包括全选特效，增加、减少特效，结算，计算总价特效增加数量特效functionjia()vara=documentgetElementByld(”sl”).value;/通过getElementByld(sl).对象的值varb二parselnt(a)+1;/每当点击按钮书对象的值加1document。getElementByld(”sl”)。v

19、alue二b+;/将计算出了的值再付给原来的对if(b=20)象显示出来documentogetElementById(sl).value=20;/通过if语句来判断值，从而来控制最大值减少数量特效functionjian1()vara=documentgetElementByld(”sl1).value;/通过getElementByld(sl).对象的值varb=parselnt(a)1;/每当点击按钮书对象的值减1document.getElementByld(”sl1”)。value二b+;/将计算出了的值再付给原来的对if(b=0)象显示出来documentgetElementByl

20、d(”sl1).value=0;/通过if语句来判断值，从而来控制最小值计算总价特效：functionjs()varjiage二documentgetElementByld(jiage”).value;获取id对象的值varqx2二document。getElementsByName(xz”)；用getElementsByName方法获取对象vara1二parselnt(document.getElementByld(sl”).value);获取id对象的值vara2=parselntvara3=parselntvara4=parselntvara5=parselntvara6=parseln

21、t(documentgetElementByld(sl1).value);获取id对象的值(documentogetElementByld(sl2)。value);获取id对象的值(document。getElementByld(sl3).value);获取id对象的值(documentogetElementByld(sl4)。value);/获取id对象的值(document.getElementByld(sl5).value);/获取id对象的值varb1=0；varb2=0;varb3=0；varb4=0;varb5=0；varb6=0;varsum=0；if(qx20.checked=

22、true)b1=a1*899;/计算第一行记录的值elseb1=0;if(qx21。checked=true)b2=a2*1888;/计算第二行记录的值elseb2=0；if(qx22.checked=true)b3=a3*300;/计算第三行记录的值elseb3=0;if(qx23.checked=true)b4=a4*600；/计算第四行记录的值elseb4=0；if(qx24.checked=true)b5=a5*2094;/计算第五行记录的值elseb5=0；if(qx25。checked二二true)b6=a6*1049；/计算第六行记录的值elseb1=0;sum=b1+b2+b3

23、+b4+b5+b6+;/将所有记录行的值相加求和documentogetElementByld(jiage)。value=+sum;再将计算出来的值付给相应的alert(结算成功！+sum);弹出提示对话框对象全选特效:functionquanxuan()varqx1=document.getElementByld(qx);/通过getElementByld(si).对象varqx2=document.getElementsByName(xz);/通过getElementsByName对象for(vari=0；i=4&a1.length=20)if(a2.length=4&a2.length=

24、16)控制用户名必须在420位if(a2=a3)判断第二次输入的密码与第一输入的密码是否一致if(a4length=11)/控制电话号码必须在11位数汗(a5!=)/判断验证码是否为空alert(用户注册成功！”+”n”+”您的用户名：+a1+”n”+”您的密码为：+a2);window。open(denglu.html);/当用户注册成功之后自动跳到登陆界面elsealert(”电话号码格式错误!”)；/输出提示信息elsealert(-密码输入不一致，请重新输入“)；a3=;/输出提示信息elsealert(”密码最少4个字符，最多16字符);/输出提示信息elsealert(”用户名最少4个字符，最多16字符);/输出提示信息；登陆界面:本章页面主要是对用户名和密码的格式字符进行判