【旅游网】网页设计实训报告

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

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

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

4、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。一、首页：別IE3.41劈1曲缶t欧之：旅居斥財新选择滥且山水住自隶运业耳击iffS首页前端采用的幻灯片播放特效，实现特效代码如下/window.onload含义为打开window.onload=(setlnterval(function()页面自动页面自动执行语句。利用getElementByld方法获取元素对象Math.random()函数获取随机varbg=document.getElementById(bg);数/varxh=Mathfloor(Mathrandom()*5+1);bg.src=image

5、s/bg+xh+jpg;bg.src=images/bg+xh+.jpg此语句用来跟换图片，实现图片切效果。,4000);j&iriw-ri：I-.：i：b涝超赫I白家.-r:i.：mBiS-fii.：?-;：-.7：it我们的各大融闻鼠标滑过图片图特效：window.onload=function（）/打开页面时自动执行函数/用getElementByld方法获取对象vara二document.getElementById(xiamian)用“”号获取a对象下所有的img对象/p.length得到对象P的长度varp=a.getElementsByTagName(img);/onmouseo

6、ver鼠标划过时执行函数将未滑过的鼠标的透明度改为1（不透明）for(vari=0;ip.length;i+)pi.index二i;给事件对象添加属性值pi.onmouseover=function()鼠标滑过的图片透明度改为0.5（半透明）for(vari=O;ipength;i+)pi.style.opacity二Tthis.style.opacity二0.5;；导航条特效：调用了外部js文件，方面获取对象和元素$(function()鼠标滑过那一项显示那个项的$(.nav).children(li:has(ul).hover(function()下一级菜单300是用来控制显示下级菜单的速

7、度时间$(this).children(ul).slideDown(300);,function()$(this).children(ul).hide();););浏览页面1：现在荻约与无側第n=1：J7;sH皆花江，si们江、函审亡江曲am”初工兒孚与冰香輕孝地凹交當.誤施尢1和斧球空典里的白酒合体”选项卡特效：window.onload=function()/window.onload打开页面时自动执行函数vara二document.getElementById(xiamian);用getElementByld获取id号来获取对象varb二document.getElementById(c

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

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

10、kgroundColor=#27B7CF;/改变鼠标滑过时的对应元素的背景;L：1片上一张下一张切换特效$(function()$(#back).toggle(function()此函数是当鼠标单击#tp对象时依次切换图片实$(#tp).attr(src,images/j7.jpg);现上一张的效果/$(#tp).attr(title,this.src);,function()$(#tp).attr(src,images/j6.jpg);S(善p=).atH=s-_e=、rhis.src)、functiono亠s(=#rp=).atH=srr=二mages/jwjpgjS(善p=).atH=s

11、-_e=、rhis.src)、functiono亠s(=#rp=).atH=srr=二mages/j4.jpg=)s(=img=).at=r(=ti-+_e_rhis.src)functiono亠s(=#rp=).atH=srr=二mages/jwjpgjS(善p=).atH=s-_e=、rhis.src)functiono亠s(=#rp=).atH=srr=二mages/j2.jpg=)S(善p=).atH=s-_e=、rhis.src)functiono亠s(=#rp=).atH=srr=二mages/jl.jpgjS(善p=).atH=s-_e=、rhis.src)s(=#ff=).-t

12、ogg-e(function()(、兵因磐砌味w4Bm=fctp誇鮒罠对为甘彌画耳將皆S(爭p=).am(=sq=images/j7.jpgj-H崇吉毋廻、s(=#rp=).atH=srr=二mages/jl.jpgjS(善p=).atH=s-_e=、rhis.src)、functiono亠$(#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(sr

13、c,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);)；浏览页面2:内地东菲潮鋼当鼠标滑过对应的地区时，下方会显示对应地区的景点优惠，报价，图

14、片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。特效代码：window.onload=function()vard=documentgetElementById(w);/用getElementByid方法获取对象varb=dgetElementsByClassName(id1);/用.getElementsByClassName方法获取d对象varp=documentgetElementsByTagName(input);下的元素/for(vari=0;iplength;i+)piindex=i;/给事件对象添加属性值pionmouseover=function()/鼠标滑过时执行以

15、下函数for(vari=0;iplength;i+)bi.style.display=none;/将鼠标未滑过时的对应的盒子全部隐藏起来bthis.index.style.display=block;/将鼠标滑过时的对应的盒子显示出来;详细页面：金廉七日游葵氤卑注性令金包800/北京挪2前，中国东北的著容山棣，瞎东北三省东北-西南走向圣中朝显山.”白头nr之名起瀏于中国，屜勒李朝实录肃宗十八年(1餌刀条云：“长白山,眾人或称白头山r以长白疲也.-所渭胡人质指即是京真人、可见白头di*同长Bib样,皆星曲中国人命名的，白头之奁,也是汉语鬧恚谑万式，意即远至此山.所见之山顶为白色伽0鱼旳头故:已当

16、鼠标滑过左侧照片是右侧显示对应景点的相关信息，包过图片景点描述window.onload=function()vara=document.getElementById(zw).getElementsByTagName(img);/先用.getElementByld方法获取id号zw的对象在用getElementsByTgName方法获取zw对象下img标签对象varb=document.getElementById(hezi).getElementsByTagName(div)/先用.getElementByld方法获取id号hezi的对象在用getElementsByTgName方法获取zw

17、对象下div标签对象for(vari=O;ia.length;i+)ai.index二i;给事件对象添加属性值ai.onmouseover=function()for(vari=0;ia.length;i+)bi.style.display=none;/将鼠标未滑过时的对应的div全部隐藏起来bthis.index.style.display二block将鼠标滑过时的对应的div显示出来;购物车页面：吕両品畠Wis地区期聽D【兀刃吞鬥据】上海用訓京匕盪毎nQQ.莎一手聊送酚庁目白疔科99“1彌0【而刃毒三侵毘】上汤杭削/甬刊=1炭毛至viaafl.中敦闻珈天活行I1SB&-上耳:二*购物车只要

18、包括全选特效，增加、减少特效，结算，计算总价特效增加数量特效functionjia()vara=documentgetElementById(sl)value;通过getElementById(sl)对象的值varb=parseInt(a)+1;/每当点击按钮书对象的值加1documentgetElementById(sl)value=b+;/将计算出了的值再付给原if(b=20)来的对象显示出来documentgetElementById(sl)value=20;通过if语句来判断值，从而来控制最大值减少数量特效functionjian1()vara=documentgetElementBy

19、Id(sl1)value;/通过getElementById(sl).对象的值varb=parseInt(a)-1;/每当点击按钮书对象的值减1documentgetElementById(sl1)value=b+;/将计算出了的值再付给原来的对if(bifo=!JBa)jo箸4XmuwN&sumui引护6R/：(zx.)3uieNAgs)u3ui3|3)36*U3uin3op=zxbjba箸赵(jsjpi心1U8LU引Bfflf/K.xb.)piAg;udui3|3；d6*;ueuin3op=TxbjbaJOuenxuenbuoipun鲫晦觀R瓏；(uins+.ifuins+.=en|eA(

20、.36eir.)piAg;ueuie|3；e6*;ueuin9opitti削融垛.-+9q+sq+w+Eq+zq+Tq=uins：O=Tqesp刖硏巻四埒紳44卩61巾J9“9q=papmip引乙xb“！U0=Sq9sp刖硏巻四!注紳446oz*se=sq(mn斗=papmip切乙xb“!elseqx2i.checked=false;删除记录行功能varsc=document.getElementsByClassName(sc);/通过getElementsByName对象vartr=document.getElementsByTagName(table)0.getElementsByTagName(tbody)0.getElementsByTagName(tr);for(z=0;zIKr&瀚m4220B宀5a2uua3)宀5a4ngthHHll)一一畐宀5a2NJSTSS一-+3-+ins:-+&+-SHM:+a2xwindowopen(dengchtm5、帐Bmst倉餡叭sDa、asmWNN:(D登陆界面：本章页面主要是对用户名和密码的格式字符进行判断，看书否符合用户名或密码要求新世界雄活远住用户名忘i己無？立即注册密码functiondenglu()vara1=document.ge