乐声悦耳网站实训项目报告.doc

*学院学院 网站建设与管理网站建设与管理 项目验收报告项目验收报告 项目名称：项目名称： 项目经理：项目经理： 本人姓名：本人姓名： 其他小组成员：其他小组成员： 学学 号：号： 专业班级：专业班级： 指导教师：指导教师： 计算机网络技术专业教研室计算机网络技术专业教研室 制制 二二一一年九月一一年九月 目 录 1 1 网站介绍网站介绍 3 1.1 客户需求分析3 1.2 网站面向的用户群体3 1.3 网站界面设计3 1.4 网站开发环境需求.3. 2.2. 技术分析技术分析 .3 2.1 DREAMWEAVER 8.0 中文版的使用.4 2.2FLASH技术4 2.3 PHOTOSHOP技术 4 3.3.网站前台总体设计网站前台总体设计 .4 3.1 设计目标4 3.2 网站颜色的搭配5 4 4网站前台的具体实现网站前台的具体实现 .5 41 首页5 4.2 子页面6 5.5.网站测试网站测试 .9 5.1 测试的目的9 5.2 测试用例9 5.3 测试总结9 总结总结 .9 1 1 网站介绍网站介绍 本网站定位于计算机网络基础课程网，暂时考虑单机环境下的 实现；操作系统选择目前常用的 Windows xp 和 Windows server2003。系统性质管理信息系统。 本网站前台功能包含首页、歌曲分类、歌手分类、流行歌曲、 校园民谣、时尚新声、中文金曲。整个网站网页设计简单，网站界 面简洁、清晰，在标准化的基础上考虑界面的美观和新颖。 1.1.客户需求分析客户需求分析 近年来随着国内外事业的蓬勃发展，随着人民生活水平的提高 和工作压力的缓解，艺术成为每家每户关注的问题，音乐家冼星海 曾经说过这样一段话：“音乐，是人生最大的快乐；音乐，是生活中 的一股清泉；音乐，是陶冶性情的熔炉”。确实如此，千百年来，音 乐以其深刻的蕴含及妙不可言的旋律，汇成了一条永远流淌不息， 闪闪发光的音乐长河，使众人为之倾倒和沉醉。那么如来满足他们 对音乐的需求呢，如何实在这里面获取商机呢。通过调查，就国内 而言网络音乐用户从 2004 年 7000 万人至 2010 年突破 3.6 亿人， 中国网络音乐用户数增长率将与中国网民数增长率持平，随着网络 音乐用户大幅度的增加，网络音乐的需求量也不断增加。更多音乐 网站成为专业音乐人才的孵化器，音乐网站将逐步向网络音乐市场， 网络音乐与唱片公司联合推广， “乐声悦耳”音乐网站特为客户的量 身定做的一款音乐网站。 1.2.网站面向的用户群体网站面向的用户群体 网站面向那些喜欢音乐，喜欢艺术文化，以及需要利用音乐来 缓解压力、调节心情的网民。 1.3.网站界面设计网站界面设计 因为本网站是音乐网站，所以这个网站中采用了大量的跟音乐 有关的元素和人物素材，如在制作 Logo 时选用的素材有耳机，这些 素材的运用突出了网站的主题。从整体上来看，这个网站各个页面 的分工明确，页面美观、大方、简洁、易懂。标准、具有一定的兼 容性。 1.4.网站开发环境需求网站开发环境需求 软件环境：兼容当前主流操作系统 Windows XP/server2003 等。 3 网站前台总体设计网站前台总体设计 本网站主要是关于音乐信息，作为一个网站，应该有一些相关 及其相对独立的模块耦合而成。本网站系统主要包括以下几个主要 页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下 又细分为几个的功能模块。 3.1 设计目标设计目标 制作前台页面模块，包括主页及各个子页面，建立各个页面与 数个子业面之间的链接，实现前台通过调用数据库把后台数据在前 台显示和更新。整体网站遵循精品课程网站设计思路，拥有完善的 功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以 及正确连接到各个子页面。功能要求使用简单全面，容易操作。由 上面的分析，网站前台的结构设计成，如图 1.1 所示 图 1.1 网站前台结构设计 首 页 歌 曲 分 类 中 文 金 曲 时 尚 新 声 流 行 歌 曲 校 园 民 谣 歌 手 分 类 3.2 网站颜色的搭配网站颜色的搭配 网站个给人的第一印象是来自视觉的冲击，确定网站的色彩搭 配是相当重要的一部，本网站以淡蓝色、灰色等有清晰淡雅的色彩 搭配使用的，在网页中也使用了一些色彩图片使得整个网站看上去 不会显的很呆板，又不会失去网站的风格，让人的视觉达到最舒适 的效果。 4 网站前台的具体实现网站前台的具体实现 网站主要包括：歌曲分类、歌手分类、流行歌曲、校园民谣、 时尚新声、中文金曲七个子页面。制作过程如下： 4.1 首页首页 网站制作过程：首先利用 Dreamweaver 8.0 制作了网站的首页， 宽 950px,其中网站的整个内容包括网站的 LOGO,导航栏，正文，网 站的版权，用 flash 制作工具制作 flash 动画，这样使得整个业面生 动形象，动静结合。在制作网页的过程中首先是在 dreameaver 中用 布局画出整个网站的大体布局格式，主要是分了三栏，各个栏目有 可以分多个小栏目，并且通过 css 样式来调导航栏，文字的位子。 主页包括的内容主要有：网站网站的域名，导航条， Flash，LOGO，版权。导航条又包含歌曲分类、歌手分类、流行歌 曲、校园民谣、时尚新声、中文金曲。模块内容，如图 2.1 所示： 图 2.1 首页效果图 4.2 歌曲分类歌曲分类 制作过程以及使用的技术：首先是把这网页的框架用布局画出 来，页面的框架构成跟主页的大体上是一样地，这里就不详细的介 绍了，页面的长度不做限定，宽度为 950 像素。在正文部分插入一 个有关音乐的 Flash 动画。效果图如图 2.2 所示： 图 2.2 歌曲分类效果图 4.3 歌手分类歌手分类 制作过程以及使用的技术：首先把这个页面的框架画出来，在 业面顶部运用字母索引、音乐排行榜、歌手排行榜、歌手分类查看 等分栏，来引导用户查找所需歌曲，效果图如图 2.3 所示： 图 2.3 歌手分类效果图 4.4 校园民谣校园民谣 制作过程以及使用的技术：这个页面的框架，长度不限，宽度 950 像素，该页面主要是推荐 100 首校园民谣给网民，用户通过全 选、反选，随机，连播，加入列队按钮来找自己想听的歌曲。效果 图如图 2.4 所 图 2.4 校园民谣效果图 4.5 流行歌曲流行歌曲 制作过程以及使用的技术：这个网页的制作方法和调用的模块 内容跟歌手分类制作方法差不多，这个网页主要是以介绍网络红歌 为主，该网页的内容有热门网络歌曲，KTV 热点音乐，80.90 歌曲，流行单 曲，效果图如图 2.5 所示： 图 2.5 流行歌曲效果图 4.6 时尚新声时尚新声 制作过程以及使用的技术：这个网页的制作方法和调用的模块 内容跟校园民谣制作方法差不多，这个网页主要是由新声音根据不 同的曲风分类，效果图如图 2.6 所示： 图 2.6 时尚新声效果图 4.7 中文金曲中文金曲 制作过程以及使用的技术：这个网页的制作方法和调用的模块 内容跟时尚新声的制作方法差不多，这个网页主要是以表格布局为 主，有歌手专辑和推荐中文金曲 100 首，还在歌手对应的专辑处加 有歌手照片，图文并貌，以增加业面色彩效果，效果图如图 2.7 图 所示： 图 2.7 中文金曲效果图 5 网站测试网站测试 网站做好后，接下来的工作就是进行测试与发布，这是很关键 的一个步骤。下面就介绍了如何测试网站做了简单介绍。 5.1 测试的目的测试的目的 测试的主要目的是保证各个页面之见的连接没有错误，网页中 没有乱码，图片，flash 能够正常显示. 5.2 测试用例测试用例 对 index.html，gequ.html,geshou.html，jinqu.html，myao.html，liuxing.h tml，shishang.html，zhongwen.html 这些页面进行测试。 5.3 测试总结测试总结 通过网站的系统测试，网站各个页面之间连接都没有发生错误， 每个页面能相互链接，每个子页面能返回主页页面，说明该网站其 基本功能以实现。 6 总结总结 通过制作这个网站又给了我们一次实际掌握知识的机会，这个 网站的制作时对我们专业知识的考察，在制作网站的过程中不仅仅 复习了以前所学，还学会了一些新的东西。从开始构思要做什么网 站，要做什么风格的网站，在到网站效果图的制作，材料的查找， 分工合作一直到网站基本完成，在整个过程中总是反复的修改，整 个制作过程花费了很多的时间和精力。 这个网站是六个人合作完成的，有项目经理分工，所以完成这 个网站也强调了整体合作的重要性，要做一个大家都满意的网站是 有一定的