武汉交通职业学院
《网页设计（二）综合实训报告》
设计题目： “旅游网”制作
系 部： 电子信息工程息
专业 班级： 计算机应用技术（1）班
指导教师： **
学生姓名： **
学 号:
使用学期： 2015 年 6 月 ~ 2016 年 1 月
旅游网实训报告
一.实训意义：
网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.
二.实训目的:
1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。
(1)掌握规划网站的内容结构,目录结构,链接结构的方法。
(2)掌握表单网页制作方法。
(3)掌握网页特效制作方法。
(4)掌握js基本语法。
(5)掌握获取元素，元素值，子元素，父元素的方法。
(6)掌握表单的验证方法，计算等。
2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。
3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。
4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
三．实验步骤
1. 网站主题
我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页面都有介绍不同的游戏资料，、心得、图片等内容。同时，网站里的每一个网页都有统一的风格,每一个网页的主题彩都是浅蓝，给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。
2． 网站材料
网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料，网页特效等，用以得来更加具有说服力的页面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。
3． 网站规划
我的网站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。
四、网站介绍
一、首页：
//load 含义为打开
页面自动页面自动执行语句。
//利用getElementById方法获取
元素对象
// Math.random()函数获取随机数
/
/ bg.src="images/bg"+xh+".jpg"此语句用来跟换图片，实现图片切效果。
首页前端采用的幻灯片播放特效，实现特效代码如下<script type="text/javascript">
load=(setInterval(function(){
var ElementById("bg");
var xh=Math.floor(Math.random()*5+1);
bg.src="images/bg"+xh+".jpg";
},4000));
<script>
鼠标滑过图片图特效：
<script type="text/javascript">
load=function() //打开页面时自动执行函数
//用getElementById方法获取对象
/
/用“.”号获取a 对象下所有的img对象
//p.length 得到对象P 的长度
//onmouseover鼠标划过时执行函数
//将未滑过的鼠标的透明度改为1(不透明)
//鼠标滑过的图片透明度改为0.5（半透明）
{ var ElementById("xiamian");
var ElementsByTagName("img");
for(var i=0;i<p.length;i++)
{
p[i].index=i;//给事件对象添加属性值
p[i].onmouseover=function()
{
for(var i=0;i<p.length;i++)
{
p[i].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">
load=function() // load 打开页面时自动执行函数
{
var ElementById("xiamian"); //用 getElementById获取id号来获取对象
var ElementById("cha"); //用 getElementById获取id号来获取对象
var ElementsByTagName("input"); //用 getElementsByTagName获取标签获取对象
var ElementsByTagName("div"); //用 getElementsByTagName获取标签获取对象
var ElementsByTagName("input"); //用 getElementsByTagName获取标签获取对象
for(var i=0;i<p.length;i++){ p[i].index=i; //给事件对象添加属性值
p[i].onmouseover=function(){
for(var i=0;i<p.length;i++){
d[i].style.display="none"; //将鼠标未滑过时的对应的div 全部隐藏起来
p[i].className="";
}
this.className="bt2";
d[this.index].style.display="block" //将鼠标滑过时的对应的div 显示出来
};
}
for(var i=0;i<c.length;i++){ c[i].index=i; //给事件对象添加属性值
c[i].onmouseover=function(){
for(var i=0;i<p.length;i++){
c[i].style.backgroundColor="#FFFFFF" //改变鼠标未滑过时的对应元素的背景
}
this.style.backgroundColor="#27B7CF"; //改变鼠标滑过时的对应元素的背景
};
}
};
图片上一张 下一张 切换特效
$(function(){
$("#back").toggle(function() {html网页设计实验心得 //此函数是当鼠标单击#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);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论