网页设计报告

期末大作业

课程名称 电子商务网站建设 作业名称 电子商务网站前台页面设计报告 专业班级 电子商务121 小组成员 3120113026 范思远 3120113024 孔维淦 3120113029 林锦涛 指导教师 肖 玮 学 院 经济与贸易学院 完成日期 2015年1月13日

宁波理工学院

目录

一、项目概述 (1)

（一）设计内容 (2)

(二) 设计目的 (2)

二、市场分析 (3)

（一）行业背景 (3)

（二）网站定位 (4)

（三）SWOT分析 (4)

三、需求分析 (6)

四、网站整体设计 (6)

（一）网站风格设计 (6)

（二）栏目设计 (7)

（三）目录结构设计 (7)

五、前台网页设计与制作 (12)

(一) 页面布局 (12)

(二) 首页制作 (12)

(三) 二级页面制作 (12)

（四）内容页面制作 (12)

六、总结与展望 (13)

一、项目概述

（一）设计内容

本设计是利用DreamWave软件建立一个校园体育运动爱好者交流网站，在这个网站上我们可以实现同校体育爱好者交流、挖掘我们身边的体育明星、展示校园体育事业魅力、欣赏运动精彩瞬间等功。

（二）设计目的

我们这个校园体育运动网站的目的就是集合整个校园所有的体育运动信息，包括体育赛事的预告、各类体育运动的精彩镜头、学校里各个体育项目的体育达人等各种信息，让校园里所有的运动爱好者更加深刻的了解自己学校的体育信息，宣传带动全校的运动热潮，也可以让并未关注运动的同学了解自己学校的运动信息，感受其魅力，加入到校园运动爱好者的大家庭里来。一切精彩运动信息尽在校园体育网。

二、市场分析

（一）行业背景

在当前网络飞速发展的时代，网站应用被运用到各个角落，在体育这一领域，各种大型的体育网站喷涌而出，如搜狐体育、新浪体育、虎扑网等各种国内国外网站，在中国几乎所有的体育赛事信息都已经被这些大型网站所垄断，根据相关数据表明中国大约有百分之六十的人通过上网来关注体育新闻。看图一、图二：

图一、关注体育信息途径的人数比例分析图

图二、中国爱好体育与不爱好体育、比关注体育人数比例图

从图一我们可以看出当前大部分的中国人都是利用网络来获取各类体育信息，而从图二我们可以看出在中国爱好体育的人数是非常多的，换而言之，有很多的人可能会利用网络来关注体育信息。从这两张分析图我们可以知道，中国有很多的人关注体育，有很多的人通过体育网站来关注体育，这就是体育网站这个行业的背景。

（二）网站定位

我们校园体育网主要的建立目的是为校园内所有体育爱好者、或关注体育的人服务，为他们提供校园内最专业的、最全面的、最新鲜的、最精彩的体育信息，在这个网站上，我们要实现校园体育信息的共享化、公开化、全面化，每个人都能得到自己想知道的体育赛事、体育人物的信息。让各类运动爱好者有一个网上交流的平台，尽情的讨论、交流、交友等活动。在此基础上，我们也会设立专门的广告招商栏目，寻找增自己的赞助商，一次来获取一定的收益。我们的网站定位就是以为校园运动爱好者提供体育信息为主，同时寻找赞助商获取利益为辅的公众信息平台。

（三）SWOT分析

1、优势分析

我们建立的是一个大学专属的校园体育网，相比那些大型体育网站我们有着属于自己的优势，第一，我们建立的是小型体育网站，要处理的数据，要设计的内容相比那些大型网站来说要简单的多，我们网站的建设、网站的维护、网站前期成本投入少，技术要求低，好做、容易做，风险性相对来说非常的低、这可以让我们大胆的去做。第二，我们校园体育网的覆盖范围小，每一个都是一个大学独立的网站，意味着它的基础宣传范围、应用范围等只是一个学校而已，并不是全国乃至全世界性的。它的宣传范围小，难度低，让一个大学里的人知道这个网站方式多要，但难度低，容易操作，宣传所需的时间短，回报快。

2、劣势分析

正如上文所述，当前许多体育爱好者都是通过这些大型体育网站来关注体。信息的，而我们校园体育网的宣传范围也只是在一个小小的学校而已。宣传出去容易，但被不被接受就是另外一回事，通过这些大型体育网来了解体育信息已经是他们的日常生活了。我们最大的劣势就是无法轻易让我们的网站在学生的脑海里占据一席之地。

3、我们的机遇

当前中国的体育事业正处于稳步发展的阶段，而作为整体的一小部分，大学生的体育事业也是如此，越来越多的大学生不仅仅满足于关注大型体育新闻，开始去关心身边的校体育新闻，但缺乏专业的公共信息平台。我们校园体育网就是专门为其打造的，这是我们的机遇。

4、我们面临的挑战

在我们这类型的网站出现之前，学生获取学校体育信息的途径大致有以下三种：第一，通过校园官网上的体育这一栏目。第二，通过校园公告栏来了解。第三，学生之间的口头传述。这三类途径就是我们的挑战，我们要把他们全部取缔，一家独大。

三、需求分析

校园体育网站的建立解决了许多人的需求，他为很多人在获取先关信息的时候提供给帮助。

（一）学生需求

有很多学生缺少获取体育信息的途径，从而导致他的热情无处挥发，减少对体育的热爱。他们可能因为无法知道自己热爱项目的比赛信息而着急，可能因为无法了解自己所仰慕的体育达人二苦恼，他们缺乏这样一个公众平台，需要这种平台来满足他们的需求。

（三）教师需求

学校在各个体育项目中都有自己的校队，有时学校可能会面临专业人才缺乏的情况，他们需要有潜力的人来参加这个队伍，这个是体育教师的任务，在现实中教师很难找到最合适人才，或者可能错过最好的人才，那

他们就需要这类平台来提供相关信息，帮助他们挑选出最好的人才。

四、网站整体建设

（一）网站风格设计

我们的校园体育网站是体育类网站，风格自然要与体育挂钩。体育运动是激情澎湃的，是充满魅力的，但是体育信息是繁琐的，为了能让用户迅速地找到自己想要的信息，我们校园体育网的网站风格采用了简单明了的风格，页面整体使用了以白色和灰色为主色调，让人看了不烦乱。

（二）栏目设计

我们校园体育网站风格是简洁明白，目的是为了让用户马上找到想要找的信息。而我们栏目设计也是往这个方面构思。整个网页的栏目共分为六个方面：主页、我们的故事、照片墙、我们的荣誉、新闻、联系我们。

主页：进入网站的第一个网页包含一些简略的网站信息，如学校体育事业简述、学校体育赛事预告、少量的体育校队的合照。主页是进入其他子页的渠道，因此他也包含了包括自己在内的其他五个子页的栏目。

关于我们：这个页面介绍了学校各个体育校队的大合照以及它们的相关介绍。

照片墙：里面包含了许多精彩的照片，有精彩体育赛事的照片集锦，有学校知名体育达人的个人照片，和体育有关的照片都在这里。

我们的荣誉：这里主要是记录了校队、各个院队运动员在各种赛事获得各个奖项荣誉。

新闻：记录学校每天发生在体育界有趣的、重要的体育信息。

联系我们；为每个用户提供帮助的联系的地方，用户可以在这里发邮件给我们，或是问问题，或是提供素材。

（三）目录结构设计

先设置一个大的文件夹，在这个文件夹下面设置JS、IMAGE、CSS这三个文件目录和主页等其他五个子页。Js文件夹存放JavaScript程序，image存放建设网站所需的各种照片，在里面还有一个文件也是存放照片的，这些是一些案件

的照片（目的是为了操作的时候方便一些），css存放对全局的一些页面定义。

五、前台网页制作与设计

（一）页面布局

校园体育网站的页面布局大致分为上、中、下三部分，比例为2:7：1，上部分是包含Logo和栏目这两部分，中部分包括学校体育简介，比赛预告，摄影素材征集，以及若干图片。下部分这包括了版权栏和相关链接网址。其中中间部分还被划分了一下。中间部分横方向以一比一的比例分割为两块，再将下面的部分纵方向以三比二比例分开，上面是学校事业简介，下面左边（五分之三部分）是摄影素材征集，右边（五分之二部分）是赛事预告。

（二）首页制作

1、头部的制作

头部部分是logo和栏目两个方面，可以使用潜逃在head层的两个DIV层，其结

构如下：

之后对这两部分进行大小、颜色排列和ciss的定义设置。

值得注意的是在头部的张图片中设立的立体旋转功能，这是利用了css定义。

2、主体部分制作

主体部分一白色为主要背景色，加上灰色来辅助，白色部分是学校体育事业简介，放一张代表学校的标志性建筑----图书馆，下面的部分是摄影素材征集和赛事预告，这两个是以灰色为背景色，也加入了一张照片来让布局更加美观合理。

照片部分用了最简单的插入，也是用div引导的：

背景设定中可以输入以下代码：

其他部分就是一些简单的文字输入：

3.尾部设计

最后的尾部设计很简单只有一个相关链接网站的就好了，最后就是整个网页的结尾，其代码和生成图为：

（三）二级页面制作

二级页面是主页的分支，是从属关系，网站的二级页面与主页是统一风格，我们校园网站它的二级页面和主页在投不方面是一样的，相同的logo和栏目，不同的是下面的主体，主页是各个栏目的小模块，而二级页面就是把这些模块的内容详细化,如下图：

主页头部：

子页头部：

他们头部内容是一样的。

但是主体不一样，子页的主体页面和其代码是：

我们校园体育网站的风格是统一的，首页为第一级别，子页为第二级别，两者是从属关系，就像上述说的一样，两者在一部分上都是相同的，因此，可以把这些相同的内容做成一个文件，比如导航和主体是一样的，就可以做成index.html文件，内容的底部每个页面也都有这个相同的部分，就可以做成botton.html文件。做好这些文件后，再做其他文件页面的时候，就不需要重新布局，而是在动态页面中用include包含就可以了。使用include包含文件的方法更加有利于网站的维护，大大节省了技术成本。

（四）内容页面制作

每一个栏目代表一个子页面，每一个子页面都有他的专属内容，他们的内容都不一样的，有的代码也有些不同。比如新闻页面的内容和代码是：

而照片墙的内容与代码是：

两者的代码中对图片的修饰，有的只是但单纯的设置大小，有的这直接用div 来定义，时的图片可以放大旋转。

六、总结与展望

通过制作校园体育网和做它的网页分析报告我们总结一下结论：

1.建立一个优秀的网站页面需要扎实的硬实力，高水准的网页制作水平，才能

把自己想的全面完美的用网页展示出来。

2.网站的建设需要闯时间的积累，从最初的市场分析到实践操作，再到网站的

调试检测，在搜集数据，进行调整，这都都需要花很多的时间，优秀的作品

并非一日可完成，要数月乃至一年为单位，时间是基础条件。

3.页面的制作需要制作者有一个全面的大局观，要分析内容和布局的比例，不

同的栏目有不同的比重。

4.网页制作以及网页分析报告不能依靠个人的力量，需要团队合作才能成功。

通过了这次校园体育网建设和网页分析报告，我们团队期望我们的作品能够被大众接受，并被正真的运用到日常生活里，能够为运动爱好者提供帮助。为此我们将不断提高个人网络制作技术，不断的学习，已成为一个页面制作高手而努力。