收藏

下载资源 加入VIP,免费下载

第1页 / 共12页

第2页 / 共12页

第3页 / 共12页

第4页 / 共12页

第5页 / 共12页

南岳风光

5.3制作二级页面

（1）景点介绍页面

主要使用div+css布局和制作的，以第一个二级菜单为例，进入景点介绍页面，里面详细的介绍了南岳各大风景名胜区，首先我们把LOGO和导航栏放置顶部，然后再使用apdiv,在里面插入文字，然后再使用表单将文字输入里面，再调整好布局，在祝融峰处加入链接，如图4-3所示。

图5-2景点介绍页面

主要代码：

functionMM_effectGrowShrink（targetElement,duration,from,to,toggle,referHeight,growFromCenter）

{

Spry.Effect.DoGrow（targetElement,{duration:

duration,from:

from,to:

to,toggle:

toggle,referHeight:

referHeight,growCenter:

growFromCenter}）;

}

functionMM_effectShake（targetElement）

{

Spry.Effect.DoShake（targetElement）;

}

functionMM_effectHighlight（targetElement,duration,startColor,endColor,restoreColor,toggle）

{

Spry.Effect.DoHighlight（targetElement,{duration:

duration,from:

startColor,to:

endColor,restoreColor:

restoreColor,toggle:

toggle}）;

}

（2）旅游路线页面

主要运用div+css布局，页面布局的左边有景区里面的最新动态，景点的地图以及景点的联系电话，页面的右边主要是景点的路线介绍，路线分为四个栏目，精品路线、宗教路线、自驾路线和驴友推荐路线，每个栏目下面都例举一条路线。

图5-3旅游路线图

5.4制作三级页面

（1）景点介绍的子菜单祝融峰详细介绍页面:

图5-4祝融峰景点的详细介绍的页面

进入景点介绍的二级菜单后，点击祝融峰进入祝融峰景点详细介绍的第三级子页，首先插入logo及导航栏后，我们在代码里插入一段实现焦点图转换的函数，接下来加入div标签，在里面输入祝融峰的详细介绍的文字，在后面同样适用div标签加入旅行画册的栏目，再用apdiv以及表单制作四个画册，他们分别链接了驴友们旅行时拍的美图及美文，如图4.4.2所示

主要代码

window.onload=function（）

{vartext=["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"];

varimg=document.getElementById（"image1"）;

varim=0,len=text.length,t=3000;

setInterval（function（）{

im>=len?

（im=0）:

0;

img.src=text[im++];},t）

}

functionMM_effectShake（targetElement）

{

Spry.Effect.DoShake（targetElement）;

}

（2）旅游社区注册页面：

图5-5登录注册页

在进入旅游社区后点击注册的链接就进入了注册页面，首先使用ps技术制作一个注册页面的logo，然后再创造一个9行3列的表格，然后再输入要注册的项目后在页面属性内选择向右对齐，再分别在第三列里面使用表单插入相应功能，在后面创建两个按钮实现注册和清除功能，按钮后有一个返回首页的链接，点击返回首页。

主要代码

functionMM_validateForm（）{//v4.0

if（document.getElementById）{

vari,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;

for（i=0;i<（args.length-2）;i+=3）{test=args[i+2];val=document.getElementById（args[i]）;

if（val）{nm=val.name;if（（val=val.value）!

=""）{

if（test.indexOf（'isEmail'）!

=-1）{p=val.indexOf（'@'）;

if（p<1||p==（val.length-1））errors+='-'+nm+'mustcontainane-mailaddress.\n';

}elseif（test!

='R'）{num=parseFloat（val）;

if（isNaN（val））errors+='-'+nm+'mustcontainanumber.\n';

if（test.indexOf（'inRange'）!

=-1）{p=test.indexOf（':

'）;

min=test.substring（8,p）;max=test.substring（p+1）;

if（num

}}}elseif（test.charAt（0）=='R'）errors+='-'+nm+'isrequired.\n';}

}if（errors）alert（'Thefollowingerror（s）occurred:

\n'+errors）;

document.MM_returnValue=（errors==''）;

}}

5.6特效

运用JavaScript脚本语言制作网页中的特效。

首页、二级子页中设计了一个当浏览器窗口上不在显示导航栏的时候，存在一个回到顶部的效果，方便浏览者浏览。

图5-6回到顶部

其js代码如下：

window.onload=function（）{

varback=document.getElementById（"back_top"）,

allh=document.documentElement.scrollHeight;

window.onscroll=function（）{

back.style.display="none";

varch=document.documentElement.clientHeight,

scrTop=document.body.scrollTop;

if（scrTop>=100）

back.style.display="block";

}

}

functionto_top（）{

top1=document.documentElement.scrollTop=0;}

6错误调试

在本次课设中遇到许多的问题，我用的是纯代码编写的，首先就是用div+css布局的时候，不怎么熟练，不知道用绝对定位还是相对定位或者是用浮动，只能慢慢的试，还有就是定位时网页的整体宽度和高度要设计好，这些都要先做好，然后才去编写代码，才能省很多的时间；再就是在网页制作前要把网页的内容组织好，以及把所有的要用到的图片准备好。

7总结

在这次课设中，老师给我们定下的要求我们基本都完成了，心里觉得非常满足，在整个过程中我遇到了很多难题，也会觉得不耐烦，但是我还是坚持下来了，当看到自己的成果时觉得很满足，觉得不可思议，在这短短的一周里面我学到了很多东西，同时也发现了很多不足，在今后的学习中我一定会好好巩固基础，多加实践。

只有实践的多了，才能让掌握的知识运用的更加的熟练，同时加深我们对知识的理解。

8心得体会

通过这次的课程设计，找到了自己在学习方面的不足，同时锻炼了自己的动手能力。

让我体会到了了以前课堂里面体会不到的成就感，课堂上是学习知识，而课设让我把学到的知识运用到实处，让我把学到的知识完成一个作品，并且能够对我们以后的工作有帮助。

课程设计虽然只是对一个学期学习的检验。

但是在这其中看到了自己的不足，同时也学会了在网页设计上的一些经验。

次课设的实战，让我借这次机会重新温习，我们参考了很多有关旅游的网站，学习了有关网站的布局，查看他的代码，试着借鉴参考，进一步进行了解，然后再查看相关视频，寻找素材，确定布局，慢慢捡起以前学过的知识，从操作陌生到慢慢感到熟练，从而对前端网页制作有更深一步的了解。

这次实训更加考验了团队的合作能力，通过和搭档的团结合作，互相弥补缺陷共享成果，达到事半功倍的效果，当这次成果在班级展示时，我感到非常自豪，虽然和其他人比起来显得有些普通，而且还有很多地方需要完善，但是我还是对我们的作品感到很满意，因为在这次实训中我学到只有敢于去尝试才能有所突破，有所创新。

9评分表

计算机与通信学院课程设计评分表

课程名称：

网页设计

项目

评价

设计方案的合理性与创造性

设计与调试结果

设计说明书的质量

答辩陈述与回答问题情况

课程设计周表现情况

综合成绩

教师签名：

日期：