《旅游网》网页设计-实训报告

武汉交通职业学院《网页设计（二）综合实训报告》设计题目：“旅游网”制作系部：电子信息工程息专业班级：计算机应用技术（1）班指导教师：**学生姓名：**学号:使用学期：2015年6月~2016年1月旅游网实训报告一.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.二.实训目的:1.通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。(1)掌握规划网站的内容结构,目录结构,链接结构的方法。(2)掌握表单网页制作方法。(3)掌握网页特效制作方法。(4)掌握js基本语法。(5)掌握获取元素，元素值，子元素，父元素的方法。(6)掌握表单的验证方法，计算等。2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。4.培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。三．实验步骤1.网站主题我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页面都有介绍不同的游戏资料，、心得、图片等内容。同时，网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色，给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。2．网站材料网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料，网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3．网站规划我的网站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。四、网站介绍一、首页：首页前端采用的幻灯片播放特效，实现特效代码如下scripttype=text/javascriptwindow.onload=(setInterval(function(){varbg=document.getElementById(bg);varxh=Math.floor(Math.random()*5+1);bg.src=images/bg+xh+.jpg;},4000));script//window.onload含义为打开页面自动页面自动执行语句。//利用getElementById方法获取元素对象//Math.random()函数获取随机数//bg.src=images/bg+xh+.jpg此语句用来跟换图片，实现图片切效果。鼠标滑过图片图特效：scripttype=text/javascriptwindow.onload=function()//打开页面时自动执行函数{vara=document.getElementById(xiamian);varp=a.getElementsByTagName(img);for(vari=0;ip.length;i++){p[i].index=i;//给事件对象添加属性值p[i].onmouseover=function(){for(vari=0;ip.length;i++){p[i].style.opacity=1}this.style.opacity=0.5;};}/script导航条特效：scripttype=text/javascriptsrc=js/jquery.js/script//调用了外部JS文件，方面获取对象和元素$(function(){$('.nav').children(li:has(ul)).hover(function(){$(this).children(ul).slideDown(300);//用getElementById方法获取对象//用“.”号获取a对象下所有的img对象//p.length得到对象P的长度//onmouseover鼠标划过时执行函数//将未滑过的鼠标的透明度改为1(不透明)//鼠标滑过的图片透明度改为0.5（半透明）//鼠标滑过那一项显示那个项的下一级菜单300是用来控制显示下级菜单的速度时间},function(){$(this).children(ul).hide();});});浏览页面1：选项卡特效：scripttype=text/javascriptwindow.onload=function()//window.onload打开页面时自动执行函数{vara=document.getElementById(xiamian);//用getElementById获取id号来获取对象varb=document.getElementById(cha);//用getElementById获取id号来获取对象varp=a.getElementsByTagName(input);//用getElementsByTagName获取标签获取对象vard=a.getElementsByTagName(div);//用getElementsByTagName获取标签获取对象varc=b.getElementsByTagName(input);//用getElementsByTagName获取标签获取对象for(vari=0;ip.length;i++){p[i].index=i;//给事件对象添加属性值p[i].onmouseover=function(){for(vari=0;ip.length;i++){d[i].style.display=none;//将鼠标未滑过时的对应的div全部隐藏起来p[i].className=;}this.className=bt2;d[this.index].style.display=block//将鼠标滑过时的对应的div显示出来};}for(vari=0;ic.length;i++){c[i].index=i;//给事件对象添加属性值c[i].onmouseover=function(){for(vari=0;ip.length;i++){c[i].style.backgroundColor=#FFFFFF//改变鼠标未滑过时的对应元素的背景色}this.style.backgroundColor=#27B7CF;//改变鼠标滑过时的对应元素的背景色};}};图片上一张下一张切换特效$(function(){$(#back).toggle(function(){//此函数是当鼠标单击#tp对象时依次切换图片实$(#tp).attr(src,images/j7.jpg);现上一张的效果//$(#tp).attr(title,this.src);},function(){$(#tp).attr(src,images/j6.jpg);$(#tp).attr(title,this.src);},function(){$(#tp).attr(src,images/j5.jpg);$(#tp).attr(title,this.src);},function(){$(#tp).attr(src,images/j4.jpg);$(img).attr(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/j1.jpg);$(#tp).attr(title,this.src);})$(#ff).toggle(function(){//此函数是当鼠标单击#tp对象时依次切换图片实现$(#tp).attr(src,images/j7.jpg);下一张的效果//$(#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/j3.jpg);$(#tp).attr(title,this.src);},function(){$(#tp).attr(src,images/j4.jpg);$(#tp).attr(title,this.src);},function(){$(#tp).attr(src,images/j5.jpg);$(#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).attr(title,this.src);})});/script浏览页面2：当鼠标滑过对应的地区时，下方会显示对应地区的景点优惠，报价，图片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。特效代码：scripttype=text/javascriptwindow.onload=function(){vard=document.getElementById(w);//用getElementById方法获取对象varb=d.getElementsByClassName(id1);//用.getElementsByClassName方法获取d对象varp=document.getElementsByTagName(input);下的元素//for(vari=0;ip.length;i++){p[i].index=i;//给事件对象添加属性值p[i].onmouseover=function(){//鼠标滑过时执行以下函数for(vari=0;ip.length;i++){b[i].style.display=none;//将鼠标未滑过时的对应的盒子全部隐藏起来}b[this.index].style.display=block;//将鼠标滑过时的对应的盒子显示出来};}}/script详细页面：当鼠标滑过左侧照片是右侧显示对应景点的相关信息，包过图片景点描述window.onload=function(){vara=document.getElementById(zw).getElementsByTagName(img);//先用.getElementById方法获取id号zw的对象在用getElementsByTagName方法获取zw对象下img标签对象//varb=document.getElementById(hezi).getElementsByTagName(div)//先用.getElementById方法获取id号hezi的对象在用getElementsByTagName方法获取zw对象下div标签对象//for(vari=0;ia.length;i++){a[i].index=i;//给事件对象添加属性值a[i].onmouseover=function(){for(var