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

武汉交通职业学院

《网页设计（二）综合实训报告》

设计题目： “旅游网”制作 系 部: 电子信息工程息 专业 班级： 计算机应用技术（1）班 指导教师： *＊ 学生姓名： ** 学 号：

使用学期: 2015 年 6 月 ~ 2016 年 1 月

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

旅游网实训报告

一.实训意义：

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

二.实训目的:

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

（1）掌握规划网站的内容结构，目录结构，链接结构的方法. （2)掌握表单网页制作方法。 (3)掌握网页特效制作方法。 （4）掌握js基本语法。

（5)掌握获取元素，元素值,子元素,父元素的方法。 （6)掌握表单的验证方法,计算等。

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

3。 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。 4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。

三．实验步骤

1。 网站主题

我的网站的主题在于从各个方面全面的介绍网络游戏专题，包括每个页面都有介绍不同的游戏资料，、心得、图片等内容.同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅蓝色,给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。

2． 网站材料

网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的资料。同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料,网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站,就要尽量搜集材料,搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

3． 网站规划

我的网站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感.

四、网站介绍

一、首页:

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

首页前端采用的幻灯片播放特效，实现特效代码如下 〈script type=”text/javascript”〉 //window.onload 含义为打开 window.onload=(setInterval（function(）｛ 页面自动页面自动执行语句。 var bg=document.getElementById（\"bg”)；// 利用getElementById方法获取 var xh=Math.floor（Math。random()*5+1）；元素对象 bg。src=”images/bg”+xh+”。jpg”; // Math。random（)函数获取随机数 ｝，4000）); // bg.src=\"images/bg”+xh+”.jpg\"

浏览页面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++）｛ p［i］。index=i； //给事件对象添加属性值 p[i].onmouseover=function（）{ //鼠标滑过时执行以下函数

for(var i=0；i〈p.length；i++）｛

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

}

b［this。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;ifor（var i=0；ib[i］.style。display=”none”; //将鼠标未滑过时的对应的div 全部隐藏起来 }

b［this.index］。style。display=”block” //将鼠标滑过时的对应的div 显示出来 }； ｝ ｝

购物车页面：

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

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

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(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）; //弹出提示对话框 对象 ｝

全选特效:

function quanxuan(）｛

var qx1=document.getElementById(\"qx”)； //通过getElementById（\"sl\"）.对象 var qx2=document.getElementsByName(\"xz”); //通过getElementsByName对象

for(var i=0；iqx2[i］.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++) {

sc[z］。index=z;

sc[z］.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) //控制用户名必须在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字符\"）;} //输出提示信息 };

登陆界面：

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

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) // 判断用户名字符是否在4~20之间 ｛alert(\"欢迎进入新世界”+\"\\n”+\"登录成功！\"）； //输出提示信息

window。open（\"index。html”)；} //登陆成功之后自动跳到网站首页 else｛

alert（”用户名或密码错误！\"); //输出提示信息 } } else｛

alert(”用户名格式有误！”）； //输出提示信息 } }

所有页面都介绍完了 上传测试网站

网页制作完毕以后,要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正.

五. 设计特色

我觉得我的网页设计最大特点就是色彩谈雅，布局协调,结构清晰.给人以清丽,纯朴的感觉.另外,设计过程插入大量搜集资料和图片等。

六、 心得体会

我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，增加知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。最后,我感受最深的是：想要最好一个网站，素材和技能都十分重要。好的素材需要多放面查找资料的，可以从图书、网站和新闻上查找的。好的技能需要不断的实践,经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出最精湛的网页。