《网站前台设计综合实训》项目四 体育健身类网站的设计与制作

项目四

体育健身类网站的设计与制作网站前台设计项目实战体育健身类网站综合描述

良好的经济秩序、厚重的历史文化背景、庞大的人口资源为健身产业蕴育了肥沃土壤。面对大好的商机，健身俱乐部、健身会馆鳞此栉比，但是现在很多健身俱乐部、健身会馆将服务只定位在健身项目上，大大缩小了服务的外延空间。体育健身类网站的引导应该是很多方面的，应该利用网络这个平台开展多种形式的活动，这个平台经营的项目，包括市场推广、会员服务、俱乐部政策的制订等等，这会比单独的提供健身项目的效果要好的多。体育健身类网站与体育类网站还是有很大区别的，要考虑商业回报。对于一个具有商业性质的健身俱乐部、健身会馆等，建立自己的网站，其目的就是要将它们的新闻、公告、健身项目和服务理念等栏目信息显示在主页上，能够让访问者进入网站就能对健身俱乐部的基本情况、健身项目和服务质量等一目了然。因此说网络营销应该成为大多数体育健身类网站建设的方向。体育健身类网站还可以适时地发布会员优惠等信息，为健身爱好者提供最佳服务；也可以利用网络的交互功能与客户交流；利用在线报名系统接受健身爱好者的网上报名；利用在线调查引擎调查客户的需求和喜好；利用留言板接纳客户的意见等。项目制作流程前期准备中期网站制作网站修改完善任务一“体育健身网”效果图制作任务二横幅广告制作任务三网站搭建过程前期准备

一、客户需求分析

客户需求，是指客户创建本网站的目的和对网站建设提出的特定要求。了解客户需求，是建好舒美特健身俱乐部网站的前提。一般来讲，体育健身类网站借助互联网，可以开展信息交流、会员服务等，这不仅增加了人们对体育健身知识的了解，同时也大大提高全民体育健身意识。客户对其拟建的舒美特健身俱乐部网站提出的主要要求有：1．宣传体育健身常识、体育健身项目等，增强全民健身意识，促进健身市场的规范化、专业化，立足打造最为专业、时尚、项目最全的健身中心。2．适时地发布最新健身课程、会员优惠等信息，为健身爱好者提供最佳服务。3．开设专家访谈栏目，为体育健身爱好者提供一个专业性很强的信息交流的平台。4．网站上要设有论坛栏目，用户可以对健身课程、健身环境等进行评论，也可以说说自己健身后的感受，这对网站的改进和更新很有帮助。

前期准备

二、网站风格定位

网站风格是指网站的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、内容价值等等诸多元素，只有这些元素搭配得体，才能达到完美的网站风格设计。下面就以体育健身类网站---舒美特健身俱乐部网站为例，从三个主要方面来谈一谈该网站的风格定位。1．色彩在网页设计中，色彩永远是最重要的一个环节。网站的色彩是浏览者整体的视觉观感，若一个网站色彩能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色彩更能衬托出网站的主题，若色彩能与主题合理搭配，将会增加浏览者的易读性。舒美特健身俱乐部网站选定主色调为天蓝色，因为天蓝色是最具凉爽，清新，专业的色彩，很适合于体育健身类网站。页面的整体色彩是通过调整主色调的饱和度和透明度，产生不同视觉效果的蓝色，这样的页面看起来色彩统一，有层次感。网站中除了采用天蓝色系外，还和对比色橙色搭配，使该网站在专业的基础上又多了几分时尚。再恰当地配上点黄色，使该网站又增添几分宁静、详和。前期准备

二、网站风格定位2．排版网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的页面排版。舒美特健身网站采用的是“国”字型（也可以称为“同”字型）排版形式，即最上面是网站的站标以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种版式的优点是页面结构清晰，主次分明，信息量大，但弱点是规矩呆板，针对这个弱点，该网站在细节上做了一些处理，例如在页面中每个栏目的造型设计都各有千秋，颜色搭配也别具一格，使整个网页显得非常时尚，没有一点呆板的痕迹。3．特效网页特效就是让网页看起来生动活泼的各种应用，如：Flash、Javascript、Javaapplets、VBScript等等。在本网站中有两种动画效果：一是采用ImageReady软件制作了网站横幅广告条；二是利用行为制作的图像交换效果。前期准备

三、网站建设方案

体育健身类网站的建设中，前期准备工作是至关重要的，要有明确的做网站的根本目的。舒美特健身俱乐部网站通过对健身常识、体育健身项目等信息的宣传，不但增强全民健身意识，而且也促进健身市场的规范化、专业化；由于健身俱乐部也作为一个商业机构，涉及到报名、课程训练、餐饮服务等等，因而网站做得好，不但可以大大提高服务的水平和俱乐部的营业额，同时也对体育健身事业的发展起到积极的促进作用。为了充分发挥体育健身网站的作用，就需要对网站的内容进行系统地规划。

1．页面风格创意设计：该网站页面颜色初步拟定采用天蓝色为主色调，在此色调的基础上对天蓝色系中的不同颜色进行有机搭配，同时还适当地辅以橙色。通过这些颜色的运用不但能很好地突出本网站要传达的凉爽、清新、专业等元素，而且也给该网站增添了几分时尚。

为了使页面排版不落俗套，该网站虽然采用了大众化的“国”字型排版形式，但在版面的造型设计上采用了别具一格的栏目造型设计，该创意设计使网页看上去更具时尚感。

2．网站栏目划分：根据我们对用户的了解，特建立以下栏目。●俱乐部概况●会员服务●健身图片●健身环境●综合信息●报名热线●专家访谈●健身常识●健身项目●健身论坛前期准备三、网站建设方案

3．网站建设拓扑图俱乐部简介经营理念会员登录服务宗旨网站首页健身图片俱乐部概况报名热线健身项目健身环境会员服务健身论坛健身常识专家访谈综合信息课程介绍设施环境会员登录教练介绍前期准备四、网站设计方案报价明细：静态页面设计报价明细：工作项目项目要求页数单价(元)合计(元)首页1XXXXXX子页部分采用动态网页不限XXXXXXBanner设计类型为*.swf的flash动画格式NXXXXXXLogo设计类型为*.jpg的图片格式NXXXXXX总计XXX服务器空间、域名价格明细：项目名称功能要求个数单价(元)合计(元)国际域名英文国际域名（*.com）1XXXXXX企业邮局300M独立邮局空间，最多可分50个用户。--XXXXXX合计XXX以上报价总计为：XXX前期准备五、网站效果图中期网站制作——任务一“体育健身网”网站效果图步骤一网站首页效果图的制作一、网站Logo和导航的制作

依据网站风格定位及栏目设置要求，首页效果图图像文件规格设置为，宽度830像素，高度1100像素，分辨率300像素/英寸。中期网站制作——任务一“体育健身网”网站效果图二、会员登陆栏目、健身环境栏目、报名热线和专家访谈栏目的制作

中期网站制作——任务一“体育健身网”网站效果图三、俱乐部新闻栏目、运动技巧栏目和健身项目栏目的制作

中期网站制作——任务一“体育健身网”网站效果图四、健身常识栏目、健身测试栏目的制作

中期网站制作——任务一“体育健身网”网站效果图五、网站首页底部版权部分的制作

中期网站制作——任务一“体育健身网”网站效果图步骤二网站子页“健身环境”效果图的制作

依据网站风格定位及栏目设置要求，子页“健身环境”效果图图像文件规格设置为，宽度830像素，高度1100像素，分辨率300像素/英寸。

网站子页的制作方法与首页类似，学习者自己去体验制作，你一定会发现其实很容易的！中期网站制作——任务一“体育健身网”网站效果图步骤三网站子页“俱乐部概况”效果图的制作 依据网站风格定位及栏目设置要求，子页“俱乐部概况”效果图图像文件规格设置为，宽度830像素，高度1100像素，分辨率300像素/英寸。 网站子页的制作方法与首页类似，学习者自己去体验制作，你一定会发现其实很容易的！中期网站制作——任务二横幅广告制作

AdobeImageReady作为一个独立的动画编辑软件，具备Photoshop中常用的图像编辑功能，同时ImageReady更提供包含了大量网页和动画的设计制作工具，功能强大也非常实用。本网站的banner就是由Photoshop和ImageReady共同表现完成的。中期网站制作——任务三

网站搭建过程 通过和客户的多次沟通后，确定下来了本网站的设计效果图。利用Photoshop切片工具，将效果图进行切片输出。切出的图片作为网站的图片素材。步骤一网站首页制作

一、logo和导航栏的制作中期网站制作——任务三

网站搭建过程 二、主体部分制作中期网站制作——任务三

网站搭建过程

三、制作网站版权信息 通常在网页的最下方设置网站的版权信息和联系方式等内容中期网站制作——任务三

网站搭建过程 步骤二网站子页的制作 本站的子页在形