极限健身俱乐部网站设计与实现课程设计.doc

《网站设计与实现》课程设计
吉林工程技术师范学院

《网站设计与建设》
课程设计报告

设计题目： 极限健身俱乐部网站设计

2011年12月
信息工程学院

31

摘 要

随着生活的日益发展，人们的生活水平也不断提高，健身房也是很多年轻人青睐的地方，不但可以强身健体，还能丰富业余生活。健身俱乐部作为专业的健身办事行业，已经越来越受到人们的青睐。随着自身的范围不绝扩大，客户数量也不断增多。
由于本人爱好运动，所以选折为俱乐部设计网站，运用网页设计这门课程所学的基础知，实现了将静态网页与各种特效效果相结合。例如：网页中插入flash动画，增加网页生动性，还运用图层、字幕滚动等特效使网页色彩搭配协调，看起来很舒服。
在理论和技术的基础上，能够掌握网络环境中网站设计和建设的应用技术。通过课程设计的过程，加深了对理论知识的理解和技术的运用，加强了个人的分析问题、解决问题、设计实施 方案的能力，并掌握多门知识的运用，加强了个人专业技能的提高。该网页风格设计简明清晰。内容丰富、操纵轻便、界面雅观。基本满足俱乐部实际的需要。

关键字：俱乐部 网站设计 内容丰富 flash

目 录

第一章 绪论………………………………………………………4
1.题目的背景………………………………………………………4
1.题目的意义………………………………………………………5
1.结构设计…………………………………………………………5
第二章 技术设计功能分析…………………………………………6
2.1 功能分析……………………………………………………6
2.2 技术设计分析………………………………………………6
第三章 总体设计与详细设计………………………………………7
3.1 总体设计………………………………………………………9
3.2 结构分析……………………………………………………10
3.3 详细设计……………………………………………………14
第四章 编码实现…………………………………………………15
第五章 系统调试…………………………………………………20
5.1 调试遇到的问题……………………………………………21
第六章 总结与心得………………………………………………22
附录：
参考资料…………………………………………………………22

第一章 绪论

1.1题目的背景
经过近几年的观察，健身房成为许多中年人和年轻朋友们比较喜欢的娱乐场所，既能娱乐又能保持身体健康。致使越来越多的人去健身房，如学生、上班一族、中年人、老年人。这是一个非常好的现象，因为越来越多的人懂得多锻炼，少对点电脑，可以利用这些时间多做运动，放松心情，还能减轻压力，达到减肥的目的。大多数女同志们去健身房的直接目的是为了减肥，随着健身设施的增加，减肥的方式也变的多样，并不像以前只是跑步来减肥，现在很多女孩子最喜欢的减肥方法就是瑜伽，既能减去赘肉，还能美化身体线条。是女生首选的运动项目。
而男生们大多数是为了增强体质，增加自己的肌肉感，使身材看起来更有型一些，当然，除了健身方面的原因，还有一个原因是现在很多年轻人把去健身房当作一个很好的交际场所，他们可以借此机会结交一些朋友，扩展自己的交际圈，平时也可以和大家组织一些群体活动。而老人去健身房的主旨是为了锻炼身体，很多老人不再只是散散步，打打拳之类的，他们也追随年轻人的运动方式，偶尔去去健身房。
介于健身房如此火热，我这次的选题就是为健身房设计的网站。极限健身俱乐部是我所知比较有代表性的俱乐部，其市内环境优雅，服务到位，健身设施齐全，适合男女老少各个年龄的人们到来，为了大家更好的了解极限健身俱乐部，我已以网站的形式向大家展示。相信大家一定会更了解极限健身俱乐部。更多朋友也会被它吸引。

1.2 题目的意义
通过本网站，希望更多的人了解健身的意义，不仅仅是娱乐，也并不仅仅只是达到减肥的目的，更多的是从中我们会获得快乐，还能增强自身的体质，更能和更多的人成为朋友，希望大家能把上网玩游戏，看电影的时间多一点用来健健身。何尝不是一个更好的选折呢。

1.3 结构设计
论文的结构分为六部分，从背景介绍到功能分析，从总体设计到编码实现部分，最后是系统调试与总结，论文主要是围绕我制作的网站分步介绍，而网站的结构是由一个主页到九个子页构成的，每一页的内容都是独立又与其他页保持联系的，主页是一个网站最主要的部分，要想做好一个网站必须首先做好一个主页，给人新颖的感觉才能吸引人们的眼球，我的主页选折的是清新淡雅的颜色，因为运动本身就是给人感觉悠闲、自由的，所以颜色清淡更能让人内心感觉放松，愉悦。主页我选用极限健身俱乐部的招牌健身运动，瑜伽作为主页的图片。也相应给出其他健身项目的图片，不要给人单调的感觉。
第一个子页分别介绍了俱乐部都有哪些健身项目，给人一目了然的视觉效果，第二个子页是对极限健身俱乐部的介绍，该页插入flash动画效果，让人在阅读资料的过程中不会感到枯燥，动态的效果更能吸引人的眼球。第三页是对各个健身项目的简介，让前来参观极限健身俱乐部网站的顾客更多的了解俱乐部内的各种运动设施，和他们各自的功能，相信一定会有一项运动适合您的。
网站的第四个子页体现的是极限健身俱乐部的新闻页，上面显示了俱乐部的最新动态，近期做过哪些活动，并且有什么优惠方便大家。第五个子页是客户服务页，方便大家有什么问题可以及时与我们联系。第六页专门介绍了俱乐部的顶级教练员，详细介绍教练信息，让大家更多的了解，方便提前预约教练。第七页给出了俱乐部的详细地址和联系方式，方便大家很容易找到俱乐部。第八页展示了俱乐部的招牌运动项目，让顾客了解我俱乐部目前的趋势动态，方便给您更好的建议。最后一页是在线留言页，顾客可以二十四小时联系我们在线的顾问，随时咨询您不懂的问题，也希望大家多多提出宝贵意见。

第二章 技术设计功能分析

2.1功能分析
本网站是浏览健身俱乐部网站，以图片和Flash动画欣赏为主，包含了少量的文字。以图片为主，图片更能很好的体现俱乐部的特征。
网站主要由首页，图片和Flash动画组成，首页包括图片和Flash按钮。还运用文字滚动字幕实现了动态的效果。访问起来简单方便。网页风格统一，色彩基本一致，看似舒服自然。将自己的风格、爱好从整个网页中表现出来。该网页主要静态网页为主，但个别子页也加入flash动画增加动态效果。加强网页的活力性，静而不死板。个别子页使用框架集制作，还集合了模版页的功能。子页中还运用图层，表单等。

2.2 技术设计分析

本网页的制作可利用的操作系统如Windows XP，Linus系统，Unix系统等等。 制作本网页的主要工具是利用Dreamweaver和fash等设计软件及html编写。 本网页图片的及色彩的搭配都是用Photoshop、fierwork等制图软件美化出来的，不同的子页，不同的背景，Photoshop都把它们渲染的淋漓尽致。
另外flash基于矢量，所以还有以下特点：第一，普及性强，flash软件操作界面简单易懂可以充分发挥自己的创造力。

第二，互动性强，多媒体和交互性强大。第三，通用性好，在各类浏览器中样式统一，在没有安装插件的系统里，可以使用JAVA或动态GIF89a来运行。基于以上的优点，网页制作过程充分使用了flash及Photoshop等软件。

第三章 总体设计与详细设计

3.1总体设计
设计图如：
链接各子页
导 航 条

首 页
咨 询 方 式
俱乐部新闻
图 片 区
健身项目展示
最 新 动 态
详 细 地 址

图3—1 主页总体结构图

3.2 结构设计

首

页

健身项目

俱乐部简介

项目简介

俱乐部新闻

联系我们

售后服务

教练员简介

其

他

在线留言
极限健身俱乐部
网站导航

图3—2 子页结构设计

网页设计思路是进入主页后会看到上方相应的导航条，子页共设为九个部分，可因个人喜好习惯进入自己想要参观的网页，参观者可任意选折进入。

3.3 详细设计

主页以及相关子页截图如下：

主页如图所示

主页设计风格主页以热门健身项目为主，例如：瑜伽等主打运动项目，让顾客了解我俱乐部目前的趋势，页面色彩搭配协调，以淡色为主，红色部分较为显眼，目的是吸引参观者的眼球，上面有注明俱乐部特色，会员风采，减肥训练
立即加入等字样。导航前加入flash按钮使网页多样化，导航上面设有滚动字样，使网页整体效果富有活力性。白色滚动字样更能吸引顾客的注意力，红色区域上是俱乐部近期做过的各种活动，和即将要组织的活动，以及最新的动态，希望顾客及时参与。

子页1如图

该页体现的的主体是主要项目的具体介绍，如俱乐部主打的几项运动，有瑜伽、大众健身操、动感单车、街舞、羽毛球、健美操等。这几项运动是目前本俱乐部开展的最受欢迎的几项运动，能很好的体现俱乐部与时俱进、抓住现在年轻人的心理，开展各项大众喜爱的健身项目，吸引顾客前来亲身体验。旁边列举了俱乐部的一些其他健身项目，如拉丁舞，搏击健美操等。种类多样，适合青年，中年，老年的各种健身器材，页面色调简单，没有加入太多的色彩，因为我个人感觉运动的颜色就是白色甚至是透明，是无色的，喜欢运动的人会从中找到快乐，懂得运动的人在运动之后不会感觉疲惫，而是大汗淋漓后的轻松，会感到身心愉悦，轻松自在，我个人感觉运动是神奇的，有时会从中找到自信，也会锻炼人的意志力。我建议大家都根据自身情况做适合自己的运动项目。生命在于运动是很有道理的。

子页2如图所示

本页是健身项目，设计的思想是页面设计不要太复杂，既然只是让顾客知道极限健身俱乐部都有哪些运动项目，就要直入主题，避免一些无用的东西，以免顾看看起来不舒服，觉得啰嗦还没有达到自己的目的，本页我加入flash动画配合本页，看起来非常搭配，颜色也很符合，而且加上是动态的效果，还是一个球体在上下运动，可谓是恰到好处。就像健身球一样，有着动感的元素，中间是各项运动项目列表，有健身球、网球、动感单车、瑜伽、羽毛球、跑步机、健美操。当然还有很多项目不能一一列举，内置导航，可供顾客自行进入更多了解。

子页3如图所示

本页是客户服务页，专为客户设置，为方便客户更好的联系我们，如遇到任何问题可以及时与我们沟通保持联系，我们会尽最大能力帮助解决困难。页面简单清晰，导航还设置其他服务项目，例如高级教练、专业顾问、相关咨询等服务项目。

子页4如图所示

本页主要内容是本俱乐部高级健身教练简介，为方便客户能第一时间预约到适合自己的教练，该页体现的是俱乐部具代表性的高级教练，他主要以健美操为主，曾经获国家健美操比赛第二名，是众多顾客最喜欢的教练之一，所以现想要找他作为自己的私人教练必须提前预约，为客户更了解该教练，在此特设计此页，该页运用鼠标滑过图像等小特效，当鼠标滑过一张图片会显示另一张图片，虽然简单，但看起来效果还不错，是网页不可缺的特效之一。

子页5如图所示

本页是这次网站设计的最后一页，也是用户留言页，设计风格与前几页相似，都是以淡色为主，本页运用表单中的按钮和文本域等功能，设计以简洁为主，作用是方便用户及时留言，提出宝贵的意见。

第四章 编码实现

主要编码实现：
<tr bgcolor="#3366CC">
<td height="64" align="center" valign="top" id="tagline"><table width="680" height="62" border="0">
<tr>
<td width="95"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="86" height="39">
<param name="BGCOLOR" value="#DBE4FF" />
<param name="movie" value="button3.swf" />
<param name="quality" value="high" />
<embed src="button3.swf" width="86" height="39" quality="high" pluginspage=" type="application/x-shockwave-flash" bgcolor="#DBE4FF" ></embed>
</object></td>
<td width="75"><div align="center" class="STYLE17"><span class="STYLE34"><a href="主页.html">首页</a></span></div></td>
<td width="16"><div align="center"><span class="STYLE16"><span class="STYLE17"><span class="STYLE18"><span class="STYLE19"><span class="STYLE18"><span class="STYLE17"></span></span></span></span></span></span></div></td>
<td width="84"><div align="center" class="STYLE17"><span class="STYLE8"><a href="健身项目.html">健身项目</a></span></div></td>
<td width="11"><div align="center"><span class="STYLE16"><span class="STYLE17"><span class="STYLE18"><span class="STYLE19"><span class="STYLE18"><span class="STYLE17"></span></span></span></span></span></span></div></td>
<td width="106"><div align="center" class="STYLE17"><span class="STYLE8"><a href="俱乐部简介1.html">俱乐部简介</a></span></div></td>
<td width="10"><div align="center"><span class="STYLE16"><span class="STYLE17"><span class="STYLE18"><span class="STYLE19"><span class="STYLE18"><span class="STYLE17"></span></span></span></span></span></span></div></td>
<td width="98"><div align="center" class="STYLE17"><span class="STYLE8"><a href="项目简介1.html">项目简介</a></span></div></td>
<td width="18"><div align="center"><span class="STYLE16"><span class="STYLE17"><span class="STYLE18"><span class="STYLE19"><span class="STYLE18"><span class="STYLE17"></span></span></span></span></span></span></div></td>
<td width="125"><div align="center" class="STYLE17"><span class="STYLE8"><a href="俱乐部新闻.html">俱乐部新闻</a></span></div></td>
</tr>

Flash动画 实现代码如下：
<body>
<table width="981" height="77" border="0">
<tr>
<td><img src="image/67.png" width="979" height="101" /></td>
</tr>
</table>
<table width="985" height="406" border="0" bgcolor="#CCCCCC">
<tr>
<td width="169" rowspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="168" height="379">
<param name="movie" value="bb.swf" />
<param name="quality" value="high" />
<embed src="bb.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="168" height="379"></embed>
</object></td>

Flash 按钮代码如下：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="86" height="39">
<param name="BGCOLOR" value="#DBE4FF" />
<param name="movie" value="button3.swf" />
<param name="quality" value="high" />
<embed src="button3.swf" width="86" height="39" quality="high" pluginspage=" type="application/x-shockwave-flash" bgcolor="#DBE4FF" ></embed>
</object>

层代码如下：

<body>
<div id="Layer1"><img src="image/瑜伽2.jpg" width="175" height="194" /></div>
<div id="Layer2"><img src="image/俱乐部2.jpg" width="181" height="193" /></div>
<div id="Layer3"><img src="image/球拍.jpg" width="197" height="194" /></div>
<div id="Layer4"><img src="image/俱乐部4.jpg" width="192" height="185" /></div>
<div id="Layer5"><img src="image/跑步机.jpg" width="207" height="190" /></div>
<table width="977" height="73" border="0">
<tr>

字幕滚动代码如下：
<marquee>
<span class="STYLE28">欢迎光临极限健身俱乐部！欢迎您踊跃报名，多一点运动，多一份健康！</span>
</marquee>

表单代码如下：
<label>
<input type="submit" name="Submit3" value="回复" />
</label>
<label>
<input type="submit" name="Submit4" value="删除" />
</label>

：
<label>
<input type="text" name="textfield" />
</label>
</p>
<p align="left"> 　 留言内容：
<input type="submit" name="Submit" value="确定" />　
<label>
<input type="submit" name="Submit2" value="提交请求" />
</label>

第五章 系统调试

5.1 调试过程中遇到的问题
1．设计困难
制作网站之前必须先要构思清楚，自己想要做什么风格和主题的网站，而这个看似简单的问题其实很复杂，也是最关键的部分，主要设计思路清晰，就可以按照计划进行，但恰恰万事开头难，主页的设计让我花费很长时间，当设计好主页，掌握方向后，便顺利了很多。
2. 首页失败
制作过程中不知道什么原因，，一开始只是插图的时候出现问题，但却无法进行下去，导致前半部分白做了，又从头开始做的。
3.图层运用不当
图层使用起来还是有很多问题的，例如，图片位置不对，挡住了部分文字，只能回到设计页面重新调整，一开始很难一次成功的，必须要进行多次修改才能达到自己理想的效果。
4.布局掌握不准确
设计中并没有使用大量布局设计，原因是使用不是很理想，总是搞不清自己要用多大的空间，总是不恰当，导致只在一个子页中使用布局功能。可能是一开始学习表格习惯了，不习惯用布局做的原因。后面的都是以表格为主设计。
5.链接路径出错
做链接的过程中曾出现连接出错，找不到要链接的内容，后来仔细检查改正过来，网页链接正常运行。

第六章 总结与心得

经过本学期的学习，我学会了网页制作这门课程，网页在日常生活中运用非常的广泛，学好这门课，对我们是有很大帮助的，这学期经过王少华老师详细的讲解这门课程，我真的从中学到了很多关于网页制作的知识。感谢王老师的认真教导。们堂课老师讲解的都很详细，很透彻，还拓展一些书本没有的知识。同时也少不了课设指导老师的帮助，为我们收集相关资料，方便我们更好的完成课设。
课程设计是培养学生综合运用所学知识发现提出分析和解决实际问题，锻炼实践能力的重要环节，是对学生实际工作能力的具体训练和考察过程，.随着科学技术发展的日新月异，当今计算机应用在生活中可以说得是无处不在。因此作为二十一世纪的大学来说掌握计算机开发技术是十分重要的。
回顾起此次课程设计，至今我们仍感慨颇多，从理论到实践，在整整半个学期的日子里，可以学到很多很多的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。通过这次课程设计使我们懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为社会服务，从而提高自己的实际动手能力和独立思考的能力。
在设计的过程中遇到问题，可以说得是困难重重，但难免会遇到过各种各样的问题，同时在设计的过程中发现了自己的不足之处，对一些前面学过的知识理解得不够深刻，掌握得不够牢固，通过这次课程设计之后，我们把前面所学过的知识又重新温故了一遍。相信下次我一定会做出更出色的网站。

附录：

[1]《网页设计与制作实用教程》 清华大学出版社 2006
[2]《DreamwearerMx2004》标准教程 北京:中国青年出版社,2004
[3]《网站设计入门指导》 高等教育出版社 2000
[4]《网页设计与制作上机实践指导教程》北京:机械出版社,2004
[5]《网站建设与网页设计》 人民邮电出版社 2005
[6]《王诚君等.网页设计三合一实用教程》北京清华大学出版社2007
[7]《 杨选辉.网页设计与制作教程》北京:清华大学出版社2008
目 录
目 录

第一章 总 论 1
一、项目概述 1
二、可行性研究报告编制依据和范围 2
三、项目主要经济技术指标 3
四、******国家森林公园概况 3
第二章 项目背景及必要性 8
一、项目背景 8
二、项目建设的必要性与可行性 10
第三章 项目选址分析 13
一、项目选址 13
二、项目城市概况 13
三、经济发展概况 14
四、公共设施依托条件及施工条件 17
第四章 需求分析与建设规模 18
一、****国家森林公园现状与存在问题分析 18
二、****国家森林公园日容量预测 19
三、****国家森林公园景区厕所需求面积分析 20
四、****国家森林公园景区厕所建设规模的确定 20
第五章 项目建设方案 21
一、景区厕所工程建设方案 21
二、景区引水上山工程建设方案 27
三、基础设施工程建设方案 32
第六章 环境保护与劳动卫生安全 34
一、环境保护 34
二、劳动卫生与安全 35
第七章 节约能源 36
一、节能的相关法律及设计规范 36
二、节约资源措施 37
第八章 项目实施进度与管理 39
一、项目实施进度 39
二、项目管理 40
第九章 工程招标 44
一、招标依据及原则 44
二、项目招标范围及内容 45
第十章　投资估算及资金筹措 48
一、固定资产投资估算依据 48
二、投资估算资金筹措方案 48
第十一章 项目研究结论与建议 53
一、项目建成后可达到的预期目标 53
二、结论 53
三、建议 53