网页制作课程设计.docx

1、网页制作课程设计课 程 设 计 报 告课程名称 网页设计 课题名称 南岳衡山旅游网页制作 专 业 信息管理与信息系统 班 级 信管1301 学 号 * 姓 名 肖宏亮 指导教师 余新宇 、赵锦元、谢雅 2015年 6 月 10 日湖南工程学院课 程 设 计 任 务 书课程名称 网页设计 课 题 南岳衡山旅游网页制作 专业班级 信管1301 学生姓名 肖宏亮 学 号 * 指导老师 余新宇 赵锦元 谢雅 审 批 任务书下达日期 2015 年 6 月 10 日任务完成日期 2015 年 6 月 27 日第一部分:课设目的21世纪是一个信息时代，Internet已经进入人们生活与工作的各方面，而网页作

2、为Internet信息传递的重要载体，其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力，并且上传到网上去，让更多人认识我，更好的宣传自己。个人网站的总体规划和步骤1设计的思路我的个人网站主要是以蓝色基调为主，使人一看就了然，很容易一看就形成系统的逻辑，而且与我们南岳衡山的旅游风景相衬显得十分融洽。2网站总体风格 我设计的这个网站使用蓝色基调主要是给人舒服，能够一目了然，而且能够吸引人的眼球，更重要的是这期主题是南岳衡山，大体基调使用蓝色与大山的图片颜色相当协调。网站的总体风格主要是以蓝色为主，以淡色为辅，充满活力，生机。具有个性色彩。网站的布局其实并

3、不复杂，主要是先规划还一个大致布局，可以参考很多旅游网站他的大体布局，但不能照搬全抄，要结合自身网站的特点做一些较之其他网页相对有特色的东西，这样才能更吸引人，在网页顶部，我们必须做一个能代表我们网站的LOGO，所以做好一个模版，模版做好框架了，那网站就初步先采用ps技术设计好自己网站的LOGO，然后创建导航栏，再根据导航栏制作其他的页面。在整个网站的制作过程中我们必须得切记整体风格必须一致，这样才会给人形成一个整体舒服的感觉，否则会显得很唐突。绿色网站的内容结构也很简单，分类清楚。页面链接的层次也很明确，访问者可以很明确的感受到制作网站的人的心情和性格。网站的主要色调是以蓝色为主。明亮的蓝色

4、是一种非常美丽、优雅的颜色，它非常醒目，给人眼前一亮的感觉，使人感觉非常具有活力。3网站的分析与设计设计一个个人网站,主要需要考虑两个方面的因素:速度:反应出用户访问网站页面的速度。主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。布局：是个人网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。4总体设计图网页的总体设计图，一个首页，四个二级子页，三个三级子页，其结构关系图如下。图4-1 总体设计图5详细设计5.1各页面的内容（1）首页：总述。（2）景点介绍：南岳十二个著名景点的简介与美图。（3）旅游路线：里面详细显示出了南岳

5、的各景点以及周边特色的地理路线（4）酒店宾馆：里面有很多南岳衡山周边宾馆。标明了详细价格及优惠，可供您挑选。（5）宗教文化：主要是介绍南岳的宗教信仰及具体介绍。（6）旅游社区：登录界面，点击进入注册后可进入注册页面。5.2首页的布局选择“布局模式”，将页面布局为如图4-3所示: 图5-1 首页先使用ps自制一个LOGO，然后布局在首页顶端。然后再使用div+css的方法布局，大致如图4-2所示.主要代码： 南岳衡山 首  页 景点介绍 旅游路线 酒店宾馆 宗教文化 旅游社区 南岳衡山旅游资源网 南岳风光 5.3制作二级页面（1）景点介绍页面 主要使用div+css布局和制作

6、的，以第一个二级菜单为例，进入景点介绍页面，里面详细的介绍了南岳各大风景名胜区，首先我们把LOGO和导航栏放置顶部，然后再使用ap div,在里面插入文字，然后再使用表单将文字输入里面，再调整好布局，在祝融峰处加入链接，如图4-3所示。 图 5-2景点介绍页面主要代码：function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter) Spry.Effect.DoGrow(targetElement, duration: duration, from: from

7、, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter);function MM_effectShake(targetElement) Spry.Effect.DoShake(targetElement);function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle) Spry.Effect.DoHighlight(targetElement, duration:

8、duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle);（2）旅游路线页面主要运用div+css布局，页面布局的左边有景区里面的最新动态，景点的地图以及景点的联系电话，页面的右边主要是景点的路线介绍，路线分为四个栏目，精品路线、宗教路线、自驾路线和驴友推荐路线，每个栏目下面都例举一条路线。图5-3 旅游路线图5.4制作三级页面（1）景点介绍的子菜单祝融峰详细介绍页面:图5-4 祝融峰景点的详细介绍的页面进入景点介绍的二级菜单后，点击祝融峰进入祝融峰景点详细介绍的第三级子页，首先插

9、入logo及导航栏后，我们在代码里插入一段实现焦点图转换的函数，接下来加入div标签，在里面输入祝融峰的详细介绍的文字，在后面同样适用div标签加入旅行画册的栏目，再用ap div以及表单制作四个画册，他们分别链接了驴友们旅行时拍的美图及美文，如图4.4.2所示主要代码window.onload=function()var text=image/1.jpg,image/2.jpg,image/3.jpg,image/4.jpg;var img=document.getElementById(image1);var im=0,len=text.length,t=3000;setInterval(

10、function() im=len?(im=0):0; img.src=textim+;,t)function MM_effectShake(targetElement) Spry.Effect.DoShake(targetElement);（2）旅游社区注册页面：图 5-5 登录注册页在进入旅游社区后点击注册的链接就进入了注册页面，首先使用ps技术制作一个注册页面的logo，然后再创造一个9行3列的表格，然后再输入要注册的项目后在页面属性内选择向右对齐，再分别在第三列里面使用表单插入相应功能，在后面创建两个按钮实现注册和清除功能，按钮后有一个返回首页的链接，点击返回首页。主要代码functi

11、on MM_validateForm() /v4.0 if (document.getElementById) var i,p,q,nm,test,num,min,max,errors=,args=MM_validateForm.arguments; for (i=0; i(args.length-2); i+=3) test=argsi+2; val=document.getElementById(argsi); if (val) nm=val.name; if (val=val.value)!=) if (test.indexOf(isEmail)!=-1) p=val.indexOf()

12、; if (p1 | p=(val.length-1) errors+=- +nm+ must contain an e-mail address.n; else if (test!=R) num = parseFloat(val); if (isNaN(val) errors+=- +nm+ must contain a number.n; if (test.indexOf(inRange) != -1) p=test.indexOf(:); min=test.substring(8,p); max=test.substring(p+1); if (nummin | maxnum) erro

13、rs+=- +nm+ must contain a number between +min+ and +max+.n; else if (test.charAt(0) = R) errors += - +nm+ is required.n; if (errors) alert(The following error(s) occurred:n+errors); document.MM_returnValue = (errors = ); 5.6特效运用JavaScript脚本语言制作网页中的特效。首页、二级子页中设计了一个当浏览器窗口上不在显示导航栏的时候，存在一个回到顶部的效果，方便浏览者浏

14、览。图5-6 回到顶部其js代码如下：window.onload=function() var back=document.getElementById(back_top), allh=document.documentElement.scrollHeight; window.onscroll=function() back.style.display=none; var ch=document.documentElement.clientHeight, scrTop=document.body.scrollTop; if(scrTop=100) back.style.display=bloc

15、k; function to_top() top1=document.documentElement.scrollTop=0; 6错误调试 在本次课设中遇到许多的问题，我用的是纯代码编写的，首先就是用div+css布局的时候，不怎么熟练，不知道用绝对定位还是相对定位或者是用浮动，只能慢慢的试，还有就是定位时网页的整体宽度和高度要设计好，这些都要先做好，然后才去编写代码，才能省很多的时间；再就是在网页制作前要把网页的内容组织好，以及把所有的要用到的图片准备好。7总结在这次课设中，老师给我们定下的要求我们基本都完成了，心里觉得非常满足，在整个过程中我遇到了很多难题，也会觉得不耐烦，但是我还是坚持下

16、来了，当看到自己的成果时觉得很满足，觉得不可思议，在这短短的一周里面我学到了很多东西，同时也发现了很多不足，在今后的学习中我一定会好好巩固基础，多加实践。只有实践的多了，才能让掌握的知识运用的更加的熟练，同时加深我们对知识的理解。8心得体会通过这次的课程设计，找到了自己在学习方面的不足，同时锻炼了自己的动手能力。让我体会到了了以前课堂里面体会不到的成就感，课堂上是学习知识，而课设让我把学到的知识运用到实处，让我把学到的知识完成一个作品，并且能够对我们以后的工作有帮助。课程设计虽然只是对一个学期学习的检验。但是在这其中看到了自己的不足，同时也学会了在网页设计上的一些经验。次课设的实战，让我借这次

17、机会重新温习，我们参考了很多有关旅游的网站，学习了有关网站的布局，查看他的代码，试着借鉴参考，进一步进行了解，然后再查看相关视频，寻找素材，确定布局，慢慢捡起以前学过的知识，从操作陌生到慢慢感到熟练，从而对前端网页制作有更深一步的了解。这次实训更加考验了团队的合作能力，通过和搭档的团结合作，互相弥补缺陷共享成果，达到事半功倍的效果，当这次成果在班级展示时，我感到非常自豪，虽然和其他人比起来显得有些普通，而且还有很多地方需要完善，但是我还是对我们的作品感到很满意，因为在这次实训中我学到只有敢于去尝试才能有所突破，有所创新。9评分表计算机与通信学院课程设计评分表课程名称： 网页设计 项 目评 价设计方案的合理性与创造性设计与调试结果设计说明书的质量答辩陈述与回答问题情况课程设计周表现情况综合成绩 教师签名： 日 期：