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

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

《《旅游网》网页设计 实训报告.docx》由会员分享，可在线阅读，更多相关《《旅游网》网页设计 实训报告.docx（20页珍藏版）》请在冰豆网上搜索。

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

武汉交通职业学院

《网页设计

（二）综合实训报告》

设计题目：

“旅游网”制作

系部：

电子信息工程息

专业班级：

计算机应用技术

（1）班

指导教师：

**

学生姓名：

**

学号:

使用学期：

2015年6月~2016年1月

旅游网实训报告

一.实训意义：

网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.

二.实训目的:

1.通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。

（1）掌握规划网站的内容结构,目录结构,链接结构的方法。

（2）掌握表单网页制作方法。

（3）掌握网页特效制作方法。

（4）掌握js基本语法。

（5）掌握获取元素，元素值，子元素，父元素的方法。

（6）掌握表单的验证方法，计算等。

2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。

4.培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。

三．实验步骤

1.网站主题

我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页面都有介绍不同的游戏资料，、心得、图片等内容。

同时，网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色，给人带来一种温和舒适的感觉。

最重要给浏览者好的欣赏感受。

2．网站材料

网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。

同时,查询相关的书籍、XX和素材光盘等方式收集所需的文字资料，图像资料，网页特效等，用以得来更加具有说服力的页面。

想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。

精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

3．网站规划

我的网站共有7个主页面：

首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。

每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。

四、网站介绍

一、首页：

//window.onload含义为打开

页面自动页面自动执行语句。

//利用getElementById方法获取

元素对象

//Math.random（）函数获取随机数

//bg.src="images/bg"+xh+".jpg"此语句用来跟换图片，实现图片切效果。

首页前端采用的幻灯片播放特效，实现特效代码如下

window.onload=（setInterval（function（）{

varbg=document.getElementById（"bg"）;

varxh=Math.floor（Math.random（）*5+1）;

bg.src="images/bg"+xh+".jpg";

},4000））;

导航条特效：

//调用了外部JS文件，方面获取对象和元素

//鼠标滑过那一项显示那个项的下一级菜单300是用来控制显示下级菜单的速度时间

$（function（）{

$（'.nav'）.children（"li:

has（ul）"）.hover（function（）{

$（this）.children（"ul"）.slideDown（300）;

},function（）{$（this）.children（"ul"）.hide（）;}

）;

}）;

浏览页面1：

选项卡特效：

window.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;i

p[i].onmouseover=function（）{

for（vari=0;i

d[i].style.display="none";//将鼠标未滑过时的对应的div全部隐藏起来

p[i].className="";

}

this.className="bt2";

d[this.index].style.display="block"//将鼠标滑过时的对应的div显示出来

};

}

for（vari=0;i

c[i].onmouseover=function（）{

for（vari=0;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）;

}）

}）;

浏览页面2：

当鼠标滑过对应的地区时，下方会显示对应地区的景点优惠，报价，图片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。

特效代码：

window.onload=function（）

{

vard=document.getElementById（"w"）;//用getElementById方法获取对象

varb=d.getElementsByClassName（"id1"）;//用.getElementsByClassName方法获取d对象

varp=document.getElementsByTagName（"input"）;下的元素//

for（vari=0;i

p[i].onmouseover=function（）{//鼠标滑过时执行以下函数

for（vari=0;i

b[i].style.display="none";//将鼠标未滑过时的对应的盒子全部隐藏起来

}

b[this.index].style.display="block";//将鼠标滑过时的对应的盒子显示出来

};

}

}

详细页面：

当鼠标滑过左侧照片是右侧显示对应景点的相关信息，包过图片景点描述

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;i

a[i].onmouseover=function（）{

for（vari=0;i

b[i].style.display="none";//将鼠标未滑过时的对应的div全部隐藏起来

}

b[this.index].style.display="block"//将鼠标滑过时的对应的div显示出来

};

}

}

购物车页面：

购物车只要包括全选特效，增加、减少特效，结算，计算总价特效

增加数量特效

functionjia（）{

vara=document.getElementById（"sl"）.value;//通过getElementById（"sl"）.对象的值

varb=parseInt（a）+1;//每当点击按钮书对象的值加1

document.getElementById（"sl"）.value=b+"";//将计算出了的值再付给原来的对

if（b>=20）象显示出来

document.getElementById（"sl"）.value=20;//通过if语句来判断值，从而来控制最大值

}

减少数量特效

functionjian1（）{

vara=document.getElementById（"sl1"）.value;//通过getElementById（"sl"）.对象的值

varb=parseInt（a）-1;//每当点击按钮书对象的值减1

document.getElementById（"sl1"）.value=b+"";//将计算出了的值再付给原来的对

if（b<=0）象显示出来

document.getElementById（"sl1"）.value=0;//通过if语句来判断值，从而来控制最小值

}

计算总价特效：

functionjs（）{

varjiage=document.getElementById（"jiage"）.value;//获取id对象的值

varqx2=document.getElementsByName（"xz"）;//用getElementsByName方法获取对象

vara1=parseInt（document.getElementById（"sl"）.value）;//获取id对象的值

vara2=parseInt（document.getElementById（"sl1"）.value）;//获取id对象的值

vara3=parseInt（document.getElementById（"sl2"）.value）;//获取id对象的值

vara4=parseInt（document.getElementById（"sl3"）.value）;//获取id对象的值

vara5=parseInt（document.getElementById（"sl4"）.value）;//获取id对象的值

vara6=parseInt（document.getElementById（"sl5"）.value）;//获取id对象的值

varb1=0;varb2=0;varb3=0;varb4=0;varb5=0;varb6=0;varsum=0;

if（qx2[0].checked==true）

{b1=a1*899;}//计算第一行记录的值

else{b1=0;}

if（qx2[1].checked==true）

{b2=a2*1888;}//计算第二行记录的值

else{b2=0;}

if（qx2[2].checked==true）

{b3=a3*300;}//计算第三行记录的值

else{b3=0;}

if（qx2[3].checked==true）

{b4=a4*600;}//计算第四行记录的值

else{b4=0;}

if（qx2[4].checked==true）

{b5=a5*2094;}//计算第五行记录的值

else{b5=0;}

if（qx2[5].checked==true）

{b6=a6*1049;}//计算第六行记录的值

else{b1=0;}

sum=b1+b2+b3+b4+b5+b6+"";//将所有记录行的值相加求和

document.getElementById（"jiage"）.value="¥"+sum;//再将计算出来的值付给相应的

alert（"结算成功！

"+sum）;//弹出提示对话框对象

}

全选特效：

functionquanxuan（）{

varqx1=document.getElementById（"qx"）;//通过getElementById（"sl"）.对象

varqx2=document.getElementsByName（"xz"）;//通过getElementsByName对象

for（vari=0;i

if（qx1.checked==true）{选中该对象，一次执行从而实现全选效果//

qx2[i].checked=true;}

else{

qx2[i].checked=false;}

}

}

删除记录行功能

varsc=document.getElementsByClassName（"sc"）;//通过getElementsByName对象

vartr=document.getElementsByTagName（'table'）[0].getElementsByTagName（'tbody'）[0].getElementsByTagName（'tr'）;

for（z=0;z

{

sc[z].index=z;

sc[z].onclick=function（）

{

this.parentNode.parentNode.parentNode.removeChild（this.parentNode）};

}//通过寻找父标签的方法找到需要删除的记录行，将其删除

注册页面：

本张网页这样是对表单的数据判断，计算，控制，将不符合规则的值拦截在外

functionzhuce（）{

vara1=document.getElementById（"yong"）.value;//获取id对象的值

vara2=document.getElementById（"mima"）.value;//获取id对象的值

vara3=document.getElementById（"mima1"）.value;//获取id对象的值

vara4=document.getElementById（"mima2"）.value;//获取id对象的值

vara5=document.getElementById（"mima3"）.value;//获取id对象的值

vara6=document.getElementById（"xy"）.value;//获取id对象的值

if（a1.length>=4&&a1.length<=20）

{if（a2.length>=4&&a2.length<=16）//控制用户名必须在4~20位

{if（a2==a3）//判断第二次输入的密码与第一输入的密码是否一致

{if（a4.length==11）//控制电话号码必须在11位数

{if（a5!

=""）//判断验证码是否为空

{

alert（"用户注册成功！

"+"\n"+"您的用户名：

"+a1+"\n"+"您的密码为：

"+a2）;window.open（"denglu.html"）;//当用户注册成功之后自动跳到登陆界面

}

}

else{alert（"电话号码格式错误！

"）;}//输出提示信息

}

else{alert（"密码输入不一致，请重新输入"）;a3=="";}//输出提示信息

}

else{alert（"密码最少4个字符，最多16字符"）;}//输出提示信息

}

else{alert（"用户名最少4个字符，最多16字符"）;}//输出提示信息

};

登陆界面：

本章页面主要是对用户名和密码的格式字符进行判断，看书否符合用户名或密码要求

functiondenglu（）{

vara1=document.getElementById（"yong"）.value;//获取id对象的值

vara2=document.getElementById（"mima"）.value;//获取id对象的值

if（a1.length>=4&&a1.length<=20）

{

if（a2.length>=4&&a2.length<=20）//判断用户名字符是否在4~20之间

{alert（"欢迎进入新世界"+"\n"+"登录成功！

"）;//输出提示信息

window.open（"index.