课程设计报告课程名称《网页设计》课题名称南岳衡山旅游网页制作专业信息管理与信息系统班级信管1301学号************姓名肖宏亮指导教师余新宇、赵锦元、谢雅2015年6 月10 日湖南工程学院课程设计任务书课程名称《网页设计》课题南岳衡山旅游网页制作专业班级信管1301学生姓名肖宏亮学号************指导老师余新宇赵锦元谢雅审批任务书下达日期2015 年 6 月10 日任务完成日期2015 年6 月27 日目录1设计的思路 02网站总体风格 03网站的分析与设计 (1)4总体设计图 (1)5详细设计 (2)5.1各页面的内容 (2)5.2首页的布局 (2)5.3制作二级页面 (4)5.4制作三级页面 (6)5.6特效 (10)6错误调试 (11)7总结 (12)8心得体会 (13)9评分表 (14)第一部分:课设目的21世纪是一个信息时代，Internet已经进入人们生活与工作的各方面，而网页作为Internet信息传递的重要载体，其重要也日趋突出。
所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力，并且上传到网上去，让更多人认识我，更好的宣传自己。
个人网站的总体规划和步骤1设计的思路我的个人网站主要是以蓝色基调为主，使人一看就了然，很容易一看就形成系统的逻辑，而且与我们南岳衡山的旅游风景相衬显得十分融洽。
2网站总体风格我设计的这个网站使用蓝色基调主要是给人舒服，能够一目了然，而且能够吸引人的眼球，更重要的是这期主题是南岳衡山，大体基调使用蓝色与大山的图片颜色相当协调。
网站的总体风格主要是以蓝色为主，以淡色为辅，充满活力，生机。
具有个性色彩。
网站的布局其实并不复杂，主要是先规划还一个大致布局，可以参考很多旅游网站他的大体布局，但不能照搬全抄，要结合自身网站的特点做一些较之其他网页相对有特色的东西，这样才能更吸引人，在网页顶部，我们必须做一个能代表我们网站的LOGO，所以做好一个模版，模版做好框架了，那网站就初步先采用ps技术设计好自己网站的LOGO，然后创建导航栏，再根据导航栏制作其他的页面。
在整个网站的制作过程中我们必须得切记整体风格必须一致，这样才会给人形成一个整体舒服的感觉，否则会显得很唐突。
绿色网站的内容结构也很简单，分类清楚。
页面链接的层次也很明确，访问者可以很明确的感受到制作网站的人的心情和性格。
网站的主要色调是以蓝色为主。
明亮的蓝色是一种非常美丽、优雅的颜色，它非常醒目，给人眼前一亮的感觉，使人感觉非常具有活力。
3网站的分析与设计设计一个个人网站,主要需要考虑两个方面的因素:速度:反应出用户访问网站页面的速度。
主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。
布局：是个人网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。
4总体设计图网页的总体设计图，一个首页，四个二级子页，三个三级子页，其结构关系图如下。
图4-1 总体设计图5详细设计5.1各页面的内容（1）首页：总述。
（2）景点介绍：南岳十二个著名景点的简介与美图。
（3）旅游路线：里面详细显示出了南岳的各景点以及周边特色的地理路线（4）酒店宾馆：里面有很多南岳衡山周边宾馆。
标明了详细价格及优惠，可供您挑选。
（5）宗教文化：主要是介绍南岳的宗教信仰及具体介绍。
（6）旅游社区：登录界面，点击进入注册后可进入注册页面。
5.2首页的布局选择“布局模式”，将页面布局为如图4-3所示:图5-1 首页先使用ps自制一个LOGO，然后布局在首页顶端。
然后再使用div+css的方法布局，大致如图4-2所示.主要代码：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html;charset=UTF-8"><title>南岳衡山</title><link rel="stylesheet" type="text/css" href="index.css"><link rel="stylesheet" type="text/css" href="head_footer.css"> <script src="one.js"></script></head><body><div class="big"><div class="head"><ul><li><a href="index.html" >首 页</a></li><li><a href="ziye\jingdian.html">景点介绍</a></li><li><a href="luxian.html">旅游路线</a></li><li><a href="jiudian.html">酒店宾馆</a></li><li><a href="">宗教文化</a></li><li><a href="shequ.html">旅游社区</a></li></ul></div><div class="main"><div class="left"><div class="title"><h1>南岳衡山旅游资源网</h1></div><div class="jiaodian"><img src="img\index\jiaodian2.jpg"></div><div class="left1"><div class="p1"><p>南岳风光</p></div><div class="l_1"><div class="l_11"><a href="#"><img class="1" src="img\index\1.jpg" /></a></div><div class="l_12"><a href="#"><img class="1" src="img\index\2.jpg" /></a></div></div>5.3制作二级页面（1）景点介绍页面主要使用div+css布局和制作的，以第一个二级菜单为例，进入景点介绍页面，里面详细的介绍了南岳各大风景名胜区，首先我们把LOGO和导航栏放置顶部，然后再使用ap div,在里面插入文字，然后再使用表单将文字输入里面，再调整好布局，在祝融峰处加入链接，如图4-3所示。
图5-2景点介绍页面主要代码：</style><script src="SpryAssets/SpryEffects.js"type="text/javascript"></script><script type="text/javascript">function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter){Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, 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: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});}</script>（2）旅游路线页面主要运用div+css布局，页面布局的左边有景区里面的最新动态，景点的地图以及景点的联系电话，页面的右边主要是景点的路线介绍，路线分为四个栏目，精品路线、宗教路线、自驾路线和驴友推荐路线，每个栏目下面都例举一条路线。
图5-3 旅游路线图5.4制作三级页面（1）景点介绍的子菜单祝融峰详细介绍页面:图5-4 祝融峰景点的详细介绍的页面进入景点介绍的二级菜单后，点击祝融峰进入祝融峰景点详细介绍的第三级子页，首先插入logo及导航栏后，我们在代码里插入一段实现焦点图转换的函数，接下来加入div标签，在里面输入祝融峰的详细介绍的文字，在后面同样适用div标签加入旅行画册的栏目，再用ap div以及表单制作四个画册，他们分别链接了驴友们旅行时拍的美图及美文，如图4.4.2所示主要代码<script src="SpryAssets/SpryEffects.js"type="text/javascript"></script><script type="text/javascript">window.onload=function(){vartext=["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(function(){im>=len?(im=0):0;img.src=text[im++];},t)}function MM_effectShake(targetElement){Spry.Effect.DoShake(targetElement);}（2）旅游社区注册页面：图5-5 登录注册页在进入旅游社区后点击注册的链接就进入了注册页面，首先使用ps技术制作一个注册页面的logo，然后再创造一个9行3列的表格，然后再输入要注册的项目后在页面属性内选择向右对齐，再分别在第三列里面使用表单插入相应功能，在后面创建两个按钮实现注册和清除功能，按钮后有一个返回首页的链接，点击返回首页。