《旅游网》网页设计-实训报告(共14页).docx
精选优质文档-倾情为你奉上武汉交通职业学院网页设计（二）综合实训报告设计题目： “旅游网”制作 系 部： 电子信息工程息 专业 班级： 计算机应用技术（1）班指导教师： * 学生姓名： * 学 号: 使用学期： 2015 年 6 月 2016 年 1 月旅游网实训报告一.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.二.实训目的:1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。(1)掌握规划网站的内容结构,目录结构,链接结构的方法。(2)掌握表单网页制作方法。(3)掌握网页特效制作方法。(4)掌握js基本语法。(5)掌握获取元素，元素值，子元素，父元素的方法。(6)掌握表单的验证方法，计算等。2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。三实验步骤1. 网站主题我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页面都有介绍不同的游戏资料，、心得、图片等内容。同时，网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色，给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。2 网站材料网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料，网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3 网站规划 我的网站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。四、网站介绍一、首页：/window.onload 含义为打开页面自动页面自动执行语句。/利用getElementById方法获取元素对象/ Math.random()函数获取随机数/ bg.src="images/bg"+xh+".jpg"此语句用来跟换图片，实现图片切效果。首页前端采用的幻灯片播放特效，实现特效代码如下<script type="text/javascript">window.onload=(setInterval(function() var bg=document.getElementById("bg");var xh=Math.floor(Math.random()*5+1);bg.src="images/bg"+xh+".jpg",4000);<script>鼠标滑过图片图特效：<script type="text/javascript">window.onload=function() /打开页面时自动执行函数/用getElementById方法获取对象/用“.”号获取a 对象下所有的img对象/p.length 得到对象P 的长度/onmouseover鼠标划过时执行函数/将未滑过的鼠标的透明度改为1(不透明)/鼠标滑过的图片透明度改为0.5（半透明）var a=document.getElementById("xiamian"); var p=a.getElementsByTagName("img");for(var i=0;i<p.length;i+) pi.index=i;/给事件对象添加属性值 pi.onmouseover=function() for(var i=0;i<p.length;i+) pi.style.opacity="1" this.style.opacity="0.5" ;</script>导航条特效：<script type="text/javascript" src="js/jquery.js"></script> /调用了外部JS文件，方面获取对象和元素/鼠标滑过那一项显示那个项的下一级菜单 300 是用来控制显示下级菜单的速度 时间$(function()$('.nav').children("li:has(ul)").hover(function() $(this).children("ul").slideDown(300); ,function()$(this).children("ul").hide(); ););浏览页面1：选项卡特效：<script type="text/javascript">window.onload=function() / window.onload 打开页面时自动执行函数var a=document.getElementById("xiamian"); /用 getElementById获取id号来获取对象var b=document.getElementById("cha"); /用 getElementById获取id号来获取对象var p=a.getElementsByTagName("input"); /用 getElementsByTagName获取标签获取对象var d=a.getElementsByTagName("div"); /用 getElementsByTagName获取标签获取对象var c=b.getElementsByTagName("input"); /用 getElementsByTagName获取标签获取对象 for(var i=0;i<p.length;i+) pi.index=i; /给事件对象添加属性值 pi.onmouseover=function() for(var i=0;i<p.length;i+) di.style.display="none" /将鼠标未滑过时的对应的div 全部隐藏起来 pi.className="" this.className="bt2" dthis.index.style.display="block" /将鼠标滑过时的对应的div 显示出来; for(var i=0;i<c.length;i+) ci.index=i; /给事件对象添加属性值 ci.onmouseover=function() for(var i=0;i<p.length;i+) ci.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：当鼠标滑过对应的地区时，下方会显示对应地区的景点 优惠，报价，图片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。特效代码：<script type="text/javascript">window.onload=function()var d=document.getElementById("w"); /用getElementById方法获取对象var b=d.getElementsByClassName("id1"); /用.getElementsByClassName方法获取d对象var p=document.getElementsByTagName("input"); 下的元素 /for(var i=0;i<p.length;i+) pi.index=i; /给事件对象添加属性值 pi.onmouseover=function() /鼠标滑过时执行以下函数 for(var i=0;i<p.length;i+) bi.style.display="none" /将鼠标未滑过时的对应的盒子全部隐藏起来 bthis.index.style.display="block" /将鼠标滑过时的对应的盒子显示出来; </script>详细页面：当鼠标滑过左侧照片是 右侧显示对应景点的相关信息，包过图片 景点描述window.onload=function()var a=document.getElementById("zw").getElementsByTagName("img");/先用.getElementById方法获取id 号 zw的对象 在用getElementsByTagName方法获取zw对象下img 标签对象/var b=document.getElementById("hezi").getElementsByTagName("div")/先用.getElementById方法获取id 号hezi的对象 在用getElementsByTagName方法获取zw对象下div标签对象/for(var i=0;i<a.length;i+) ai.index=i;/给事件对象添加属性值 ai.onmouseover=function() for(var i=0;i<a.length;i+) bi.style.display="none" /将鼠标未滑过时的对应的div 全部隐藏起来 bthis.index.style.display="block" /将鼠标滑过时的对应的div 显示出来; </script>购物车页面：购物车只要包括 全选特效 ，增加、减少特效 ，结算， 计算总价特效增加数量特效function jia()var a=document.getElementById("sl").value; /通过getElementById("sl").对象的值var b=parseInt(a)+1; /每当点击按钮书对象的值加1 document.getElementById("sl").value=b+"" /将计算出了的值再付给原来的对 if(b>=20) 象显示出来document.getElementById("sl").value=20; /通过if 语句来判断值，从而来控制最大值减少数量特效function jian1()var a=document.getElementById("sl1").value; /通过getElementById("sl").对象的值var b=parseInt(a)-1;/每当点击按钮书对象的值减1 document.getElementById("sl1").value=b+"" /将计算出了的值再付给原来的对if(b<=0) 象显示出来 document.getElementById("sl1").value=0; /通过if 语句来判断值，从而来控制最小值计算总价特效：function js()var jiage=document.getElementById("jiage").value; /获取id对象的值var qx2=document.getElementsByName("xz"); /用getElementsByName方法获取对象var a1=parseInt(document.getElementById("sl").value);/获取id对象的值 var a2=parseInt(document.getElementById("sl1").value); /获取id对象的值var a3=parseInt(document.getElementById("sl2").value); /获取id对象的值var a4=parseInt(document.getElementById("sl3").value); /获取id对象的值var a5=parseInt(document.getElementById("sl4").value); /获取id对象的值var a6=parseInt(document.getElementById("sl5").value); /获取id对象的值var b1=0;var b2=0;var b3=0;var b4=0;var b5=0;var b6=0; var sum=0;if(qx20.checked=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+b4+b5+b6+"" /将所有记录行的值相加求和document.getElementById("jiage").value="¥"+sum; /再将计算出来的值付给相应的alert("结算成功！"+sum); /弹出提示对话框 对象全选特效：function quanxuan()var qx1=document.getElementById("qx"); /通过getElementById("sl").对象 var qx2=document.getElementsByName("xz"); /通过getElementsByName对象 for(var i=0;i<qx2.length;i+) /利用循环语句判断是否被选中，如未被选中，就 if(qx1.checked=true) 选中该对象，一次执行从而实现全选效果/ qx2i.checked=true; elseqx2i.checked=false; 删除记录行功能var sc=document.getElementsByClassName("sc"); /通过getElementsByName对象 var tr=document.getElementsByTagName('table')0.getElementsByTagName('tbody')0.getElementsByTagName('tr'); for(z=0;z<sc.length;z+)scz.index=z;scz.onclick=function()this.parentNode.parentNode.parentNode.removeChild(this.parentNode); /通过寻找父标签的方法找到需要删除的记录行，将其删除注册页面：本张网页这样是对表单的数据判断，计算，控制，将不符合规则的值拦截在外function zhuce()var a1=document.getElementById("yong").value;/获取id对象的值 var a2=document.getElementById("mima").value; /获取id对象的值 var a3=document.getElementById("mima1").value; /获取id对象的值 var a4=document.getElementById("mima2").value; /获取id对象的值 var a5=document.getElementById("mima3").value; /获取id对象的值 var a6=document.getElementById("xy").value; /获取id对象的值 if(a1.length>=4&&a1.length<=20) if(a2.length>=4&&a2.length<=16) /控制用户名必须在420位 if( a2=a3) /判断第二次输入的密码与第一输入的密码是否一致 if(a4.length=11) /控制电话号码必须在11位数 if(a5!="") /判断验证码是否为空 alert("用户注册成功！"+"n"+"您的用户名："+a1+"n"+"您的密码为："+a2); window.open("denglu.html"); /当用户注册成功之后自动跳到登陆界面 else alert("电话号码格式错误！");/输出提示信息 elsealert("密码输入不一致，请重新输入"); a3="" /输出提示信息 else alert("密码最少4个字符，最多16字符"); /输出提示信息 else alert("用户名最少4个字符，最多16字符"); /输出提示信息;登陆界面：本章页面主要是对用户名 和密码的格式 字符进行判断，看书否符合用户名或密码要求function denglu()var a1=document.getElementById("yong").value; /获取id对象的值var a2=document.getElementById("mima").value; /获取id对象的值if(a1.length>=4&&a1.length<=20) if(a2.length>=4&&a2.length<=20) / 判断用户名字符是否在420之间 alert("欢迎进入新世界"+"n"+"登录成功！"); /输出提示信息 window.open("index.html"); /登陆成功之后自动跳到网站首页 else alert("用户名或密码错误！"); /输出提示信息 else alert("用户名格式有误！"); /输出提示信息所有页面都介绍完了上传测试网站 网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。五. 设计特色我觉得我的网页设计最大特点就是色彩谈雅，布局协调，结构清晰。给人以清丽，纯朴的感觉。另外，设计过程插入大量搜集资料和图片等。六、 心得体会 我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，增加知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。好的素材需要多放面查找资料的，可以从图书、网站和新闻上查找的。好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出最精湛的网页。专心-专注-专业
