街舞文化网站的设计与实现

1、 摘要-I-系系 所：所：专专 业：业：学生姓名：学生姓名：学生学号：学生学号：指导教师：指导教师：导师职称：导师职称：论文题目论文题目：街舞文化网站的设计与实现街舞文化网站的设计与实现Design and Implementation of the Hip-Hop Culture Website 摘要-II-完成日期：完成日期： 街舞文化网站的设计与实现摘 要街舞也称 HIP-HOP，它起源于美国街头舞者的即兴舞蹈动作，因其轻松随意、自由个性和反叛精神而理所当然地受到年轻人的喜欢, 有人称之为“是惟一让人带着笑容进行训练的运动” 。街舞非洲裔美国人的运动到街头文化的一种发泄情绪的解释是由爆炸

2、，舞蹈，体育行为与其他舞蹈夸张。最有吸引力的部门，是基于活力的整个身体带来一个热情澎湃的感觉。对于网站设计来说，这种交流不仅要明白它是什么您想要运行的应用程序，你需要如何将现有系统的单位，要知道这个网站，希望达到什么目的，必须清楚网站的目标市场。这将是整个网站的设计思想的基础上。网页无论什么形式，什么样的外观，内容的网站为出发点考虑的终极目标。而随着信息时代的到来和互联网的快速发展，越来越多的人们习惯与从网站上获取信息与资讯，因此为了便于街舞的发展与传播，街舞网站的设计与实现在当今社会显得尤为重要。我们创建的网站是为了给广大热爱街舞的朋友们提供一个平台，让他们自由学习和交流（技术改进中） 。我

3、们小组对网站的期望就是让那些热爱街舞的朋友们有一个街舞的天堂。至于要达成这个目标，我们小组觉得是我们还有些距离的，但我们相信这个距离是能通过我们的团队合作和努力来完成的。我们小组对于完成这个目标是怀有满腔的热血和蓬勃向上的信心的。建这个网站，我们不仅希望能让街舞爱好者找到他 摘要-III-们的伊甸园，我们还希望建站过程能使我们自身得以锻炼，让我们自己的网站建设的技术水平不断提升。关键词关键词：街舞文化，网站，学习交流 Abstract-IV-Design and Implementation of Hip-hop Culture WebsiteAbstractHip-hop also know

4、n as HIP-hop, which originated in the impromptu dance movements of the dancers in the streets of the United States, because of its casual, free personality and spirit of rebellion and of course by the young people like it, it was called the only people with a smiletraining movement. The interpretati

5、on of the movement of the hip-hop African American to vent their emotions to a kind of street culture is exaggerated by the explosion, dance, sports behavior and other dance. The most attractive sector, is an enthusiastic feeling based on the vitality of the whole body.For website design, this kind

6、of exchange is not only to understand what it is you want to run the application, you need to how to units of the existing system, to know this site, hope to achieve, you must clear the site of the target market. This will be the basis of the entire site design ideas. Page no matter what form, what

7、kind of look and content of the site for the ultimate goal of a starting point to consider. With the arrival of the information age and the rapid development of the Internet, more and more people get used to and from the site access to information and information, in order to facilitate the developm

8、ent and dissemination of hip-hop, hip-hop Web site design and is particularly important in todays society .We created the site to provide a platform for the majority of hip-hop-loving friends, so that they are free to learn and exchange (technical improvements). Website expectations of our group is

9、to make friends of those who love hip-hop hip-hop paradise. To reach this goal, we group think is some distance, but we believe that this distance is through the cooperation and efforts of our team to complete. Our team to accomplish this goal is to harbor filled with blood and vigorous confidence.

10、To build this site, we not only want to make hip-hop lovers find their Garden of Eden, we also hope that the establishment of the process itself to enable us to exercise our own website building technology level than ever.Key words: hip-hop culture, websites, learning exchanges 目录-V-目 录摘 要.IABSTRACT

11、.II第 1 章绪 论.11.1 国内现状.11.2 章节安排.1第 2 章关键技术介绍.32.1 开发工具的选用及介绍.32.2 DREAMWEAVER软件.32.3 JAVASCRIPT技术.42.4 PHOTOSHOP介绍.5第 3 章系统分析.63.1 需求分析.63.1.1 系统业务流程的分析.63.1.2 系统管理上的需求分析.63.1.3 网站色彩搭配分析.73.2 功能架构分析.73.3 系统可行性分析.73.3.1 技术可行性.73.3.2 社会可行性分析.83.4 系统开发环境 .8第 4 章系统设计.94.1 设计指导思想和原则.94.1.1 指导思想.94.1.2 软件

12、设计原则.9 目录-VI-4.2 网站风格设计.94.3 网站页面设计.104.3.1 网站首页设计.104.3.2 二级页面设计.104.3.3 三级页面设计.11第 5 章系统实现.135.1 网站首页的实现 .135.1.1 首页布局的实现.135.1.2 首页导航的实现.145.1.3 JS 效果的实现.145.2 二级页面的实现.155.3 三级页面视频功能的实现.16第 6 章系统测试.186.1 测试方法.186.1 网页的测试.186.2 网站测评.18第 7 章结论.20参考文献.21致 谢.22 -1-第 1 章绪 论1.1 国内现状国内现状随着科学技术的迅猛发展，网站制作

13、以及网页的开发所需要的各种条件已经成熟。因此，制作网站通过软件：DreamWeaver，CSS，Flash 及 Photoshop 等技术，设计与实现了街舞主题的网站。随着社会压力的增长，与快节奏的现代生活，本网站能够为不同风格，不同喜好的街舞爱好者提供各种不同类型的资讯（街舞达人资料、街舞比赛动态、街舞俱乐部课时及优惠等），视频（比赛、表演、快闪、教学、达人视频专辑），让爱街舞的 dancer 了解 hiphop 文化的历史、流派、当今动态。本网站还对舞种相关进行了归类，不论是 lockin、poppin、jazz 还是 breaking，网民都可以快速找到自己感兴趣的资源。广大爱好街舞的网

14、民还可以在网站内进行评论与交流，只要认为兴趣相投就可以尽吐心声，得到心灵上的放松和解脱。受香港、台湾的影响，广州的街舞及其嘻哈文化出现较早，并且迅速在全省普及。街舞一词就是最早在广东地区传播开的。其实在美国并没有一个词语来统称嘻哈文化中的舞蹈，街舞（Street Dance）只是美国西海岸的叫法，在纽约人们只称呼具体舞种的名字：Hip-Hop、Breaking、Popping 等。街舞（英文名称嘻哈）起源于纽约，是爵士乐的发展，上世纪 90 年代的产物，它从一个不同的走，跑，跳，充满变化。并通过头部，颈部，肩部，上下肢，躯干屈伸，旋转，旋转，摆振，呈波浪形扭动连贯的组合，每一个动作都有其特定的

15、健身效果，既注意到下肢，上肢和协调的腹部，背部，头部和躯干的运动，但也要注意对独立 movement.hip-hop 各部分各方面的组合物，不仅是一般的有氧运动，增强心肺功能，减少脂肪，增加肌肉的弹性，增强韧带弹性的功效，而且对人体的肌肉组织的和谐，创造一个美丽的身体，提高身体的协调能力，培养审美功能。街舞非洲裔美国人的运动到街头文化的一种发泄情绪的解释是由爆炸，舞蹈，体育行为与其他舞蹈夸张。最有吸引力的部门，是基于活力的整个身体带来一个热情澎湃的感觉。注意力集中，兴趣与优美的动作，感觉自由。同时，街舞有减肥的皮肤，因为街舞中的低强度的有氧运动是一种介质，在这个运动的一一小时，它的作用是消费的

16、总脂肪是一个相当强的。此外，街舞是一种小肌肉运动，经常锻炼可以提高身体的协调，使你的身体比例标准。 -2-1.2 章节安排章节安排本论文分为七章，分别详细的阐述了运用 HTML 技术对街舞文化网站的设计与实现整个过程。第一章介绍了本论文的论文研究背景和研究意义，阐述为什么要开发街舞文化网站系统，以及该类系统的国内外现状和市场行情。第二章是对本网站所用到的所有技术的详细介绍，主要介绍了 HTML。第三章是对本网站开发的构架概述、需求分析和可行性分析，初步确定网站功能模块。第四章是系统设计过程，包括功能模块设计、界面设计等实现的大体描述。第五章是系统的实现，怎么实现 JS 效果，和DIV+CSS

17、来实现网站布局的具体实现。第六章是系统测试部分，针对网站可能存在的问题进行逐个测试并给予解决。第七章是本论文的结论部分，街舞文化网站的设计的完成情况和运营情况。最后对曾帮我们的人表示中心的感谢。 -3-第 2 章关键技术介绍2.1 开发工具的选用及介绍开发工具的选用及介绍现在非常流行的 Macromedia 公司出品的 Dreamweaver studio 8 提供了更多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持，是开发人员和设计师能够快捷的创建代码规范的应用程序，集成程度非常高，开发环境精简而高效，开发人员能够运用 Dreamweaver 与他们的服务器技术构建功能强大的网络应用

18、程序连接到用户的数据、网络服务体系。网页图形设计软件包括擅长平面图形设计的 photoshop 与擅长网络图形设计的firework 软件。相比较而言，photoshop 可以做出比较复杂的平面效果，但不适合团队开发的，它是受欢迎的，不是很全。烟花是最通用的 Web 图片编辑，位图和矢量图形编辑功能，你可以将位图和矢量编辑容易影响的优点，制作一些特殊效果简单，易生成网页效果模板，通过切片可导出生成网页。此次设计中采用 photoshop 编辑图片。网页动画设计软件 flash。Flash 网页动画设计软件可以制作网页互动动画，也可以将一个较大的互动动画制作为一个完整的网页，这是一个非常灵活的设

19、计软件。由于利用 Flash 可以设计强大的动画效果，所以 Flash 动画已发展成为一种独特的艺术形式。至此 Flash 动画被广泛应用在网页设计中，从 logo 到网页横幅、按钮，甚至整个网页或网站，都可以用 Flash 动画来实现。为利用 Flash 动画制作网页导航条的效果尤佳。我主要在网页设计中用了一个 Flash 来体现校园情况。2.2 Dreamweaver 软件软件Adobe Dreamweaver(前称 Macromedia Dreamweaver)是 Adobe 公司的著名网站开发工具。它使用所见即所得的接口，亦有 HTML 编辑的功能。它现在有 Mac 和 Windows

20、系统的版本。原本由 Macromedia 公司所开发。Dreamweaver 由 MX 版本开始使用 Opera 软件公司的排版引擎“Presto”作为网页预览。由 CS4 版本开始，则转用 WebKit 排版引擎（亦即 Google Chrome 和 Apple Safari 浏览器所用的排版引擎）作为网页预览。Dreamweaver 是收购 Macromedia 公司所得的产品。Dreamweaver 8 是 Macromedia 被收购前的最后版本。收购后由 Adobe 继续发展 Dreamweaver，由版本 9 起改以 CS3 （Creative Suiute）命名，并并入当时的CS

21、3 套装。以 CS3 开始命名而非 CS1，相信是为了与其他 Adobe CS 产品版本看齐，避免混淆。Dreamweaver 现多捆绑其他 Adobe 产品以套装发售，但仍可个别购买。 -4-Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 HomeSite 和 BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见

22、即所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给 Third-party 厂商，包含 ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango 与自行发展的应用软体。 2.3 JavaScript 技术技术JavaScript，也称 ECMAScript4，是一种广泛用于客户端网页开发的脚本语言，最早是在 HTML 上使用的，用来给 HTML 网页添加动态功能，然而现在 JavaScript 也可被用于网络服务器，如 Node.js。发展初期，JavaScript 的标准并未确定，同期有网景的 JavaScr

23、ipt，微软的 JScript和 CEnvi 的 ScriptEase 三足鼎立。1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，由 Netscape、Sun、微软、Borland 组成的工作组确定统一标准：ECMA-262。一般来说，完整的 JavaScript 包括以下几个部分：（1） ECMAScript，描述了该语言的语法和基本对象。（2） 文档对象模型（DOM） ，描述处理网页内容的方法和接口。（3） 浏览器对象模型（BOM） ，描述与浏览器进行交互的方法和接口。它的基本特点如下：（1） 是一种解释性脚本语言（代码不进行预编译） 。（2） 主要用来向 HTML 页面添加交

24、互行为。（3） 可以直接嵌入 HTML 页面，但写成单独的 JS 文件有利于结构和行为的分离。JavaScript 常用来完成以下任务：（1） 嵌入动态文本于 HTML 页面。（2） 对浏览器事件作出响应。（3） 读写 HTML 元素。（4） 在数据被提交到服务器之前验证数据。（5） 检测访客的浏览器信息。（6） 控制 cookies，包括创建和修改等。 -5-2.4 Photoshop 介绍介绍Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一。多数人对PHOTOSHOP 的了解仅限于“一个很好的图像编辑软件” ，并不知道它的诸多应用方面，实际上，PHOTOSHOP 的应

25、用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。从功能上看，PS 图象处理软件可以分为图像编辑，图像合成，学校的调色板和特效制作的部分。图像合成是通过应用层运行的几个图像的图像，合成工具完成，传达一个明确的意义，这是必须通过艺术和设计的唯一途径。PS 图象处理软件的外部形象，创造良好的集成绘图提供了工具，使其成为一个天衣无缝的图像合成。学校的调色板是一个 PS 图象处理软件，功能强大，可以很容易地对图像颜色的明暗，色彩系列的调整和校正，也可以为不同颜色间的开关满足图像在不同领域如网页设计，印刷，多媒体应用。影响 PS 图象处理软件主要完成的过滤器，渠道和工具的综合应用。生产包括图像

26、创意效果和具体的词，如绘画，绘画，绘画，石膏浮雕等常用的传统艺术技巧可以完成 PS 图象处理软件的影响。 -6-第 3 章系统分析3.1 需求分析需求分析3.1.1 系统业务流程的分析系统业务流程的分析在网站中建立一个导航，每个导航都可以指定自己要去查看的页面。本网页一共分为三级页面。用户可以查看分类的街舞文化还可以查看第一个详细类型的街舞文化信息。也可以查找一些自己喜欢的街舞视频进行难看。根据需求调研结果确定本系统主要包括以下功能模块，如图 3.1 所示。进入主页面街舞文化单击街舞信息链接进入二级栏目页面街舞信息单击一级栏目链接输入主页地址图 3.1 系统活动程图3.1.2 系统管理上的需求

27、分析系统管理上的需求分析确定网站建设的目的，这是非常重要但又易于被人们忽略或轻视的一项工作。与网站单位人员沟通就尤其重要了。对于网站设计来说，这种交流不仅要明白它是什么您想要运行的应用程序，你需要如何将现有系统的单位，要知道这个网站，希望达到什么目的，必须清楚网站的目标市场。这将是整个网站的设计思想的基础上。网页无论什么形式，什么样的外观，内容的网站为出发点考虑的终极目标。另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。本网站的建设主要是为了全面宣传，展示街舞文化风采、优点与特色，发布街舞文化的活动安排与招生政策等信息内

28、容，使学生及家长增加对街舞文化的了解，增强 -7-学生、家长与街舞文化之间的联系，提高街舞文化的教学质量，让街舞文化信息及时散布。3.1.3 网站色彩搭配网站色彩搭配分析分析网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突出主要内容设计网站色彩。从视觉冲击力的网站的第一印象，不同的颜色有不同的影响，并可能影

29、响访问者的情绪。标准颜色能反映网站的图像的颜色和延伸内涵要用于网站的标志，标题，主菜单和主块的颜色。给出了一个整体的感觉。至于其他的颜色可以使用，但它应该只是作为装饰和衬托，不能分心。在一般情况下，不超过三个网站的标准色彩，太耀眼的。适用于 Web 标准颜色：蓝色，黄色，橙色，黑色/灰色/白色三系列的颜色。3.2 功能架构分析功能架构分析网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现街舞文化的勃勃生气，静态主页方式介绍街舞文化概况、街舞视频、街舞电影、街舞资讯、排行榜和最近更新的功能，具体的功能架构分析如图 3.2 所示。网站首页街舞视频街舞文化网站街舞电影街舞资讯排行榜最近更

30、新图 3.2 系统功能架构图3.3 系统可行性分析系统可行性分析3.3.1 技术可行性技术可行性 DREAMWRAVER 软件由美国著名的网站应用开发工具生产厂商 ADOBE -8-MACROMEDIA 于 2005 年 6 月推出并正式投入市场以来已经发展得相当成熟。关于DREAMWRAVER 的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习对 DREAMWRAVER 有了比较深刻的认识并比较轻松的掌握了DREAMWRAVER 的操作。因此软件技术可以完成任务的要求。3.3.2 社会可行性分析社会可行性分析社会因素和可行性主要从以下两点：法律的可行性，利用的可行性分析

31、。法律方面的可行性的许多问题，如合同责任，侵犯专利权和著作权侵权软件陷阱，人们通常不熟悉，可能落入，一定要注重研究。我们开发这个系统，我们一定的协议签署。该协议是法律；此外，虽然我们在开发系统有一定的参考系统，但我们的系统没有假冒任何系统，我们绝对是独立发展。在该系统的发展，我们把我们的系统用户规模，使我们在发展，我们充分考虑到潜在用户，使系统开发完成后的销售尽快“走出去” 。3.4 系统开发环境系统开发环境由于条件限制，本系统使用的是个人电脑开发。软硬件的参数如下表 3.1 所示。表 3.1 软硬件参数表配置配置参数参数CPU奔腾 5主频4GHZ内存2GB硬盘360GB操作系统Win XP、

32、windows7开发环境Adobe Dreamweaver CS3 -9-第 4 章系统设计4.1 设计指导思想和原则设计指导思想和原则4.1.1 指导思想指导思想基于一般网页制作的基本情况，要设计与实现这样的网站，优势在于小成本运营，不需要耗费大量的人力物力，只需要最基本的设施就是一台个人电脑。而后期只需要定期的对网站进行更新与维护即可。由于网民的数量是庞大的，而且增长潜力也是无穷大的，而不同的街舞爱好者又有着对不同的种类街舞的爱好与要求，所以只需要做出自己的个人特色，或者随着街舞爱好者的要求制定不同的特色，那么，一个具有特点的街舞资讯网页是极其具有可观性的。4.1.2 软件设计原则软件设计

33、原则网页设计与其他出版设计最大的不同点在以下 3 个方面。（1）传播的媒介不同。许多用户是用 MODEM 上网的，图形一般不宜太大；通常每个图应小于 30KB，每个页面图形总量应小于 50KB。（2）最终发布媒体不同。多数用户是通过 Windows 上网的，而且当前通用的分辨率是低于 800600，因此，美工人员的发挥天地的 1415 英寸显示器所能展示的区域。（3）所能采用的文件格式的限制。对通用浏览器来说，能识别的图像格式仅为JPG 和 GIF，两者又各有不同的特点和适用环境。我选择了两种格式的图片。4.2 网站风格设计网站风格设计本网站的设计指导思想是风格的独特，网站到其他网站的地方。或

34、颜色，或技术，或交互，允许明确区分是你网站的独特的观众。风格是有人性的。内容，文本，通信可以总结出网站的外观，一个站点的个性，情绪。宫廷的持久的热情，活泼多变，放任不羁。喜欢诗歌“无词”和“优美的阵营，你可以人的个性作为网站的一个隐喻。 在网站色彩方案上，主色调可参考黑，银，灰色。由于主页信息量相对不足，如果再静止不动，那么网页将会有些单调乏味。设计师可参照很多网站的做法，在首页导航条下方放置了一块很大面积的 FLASH 动画去活跃和丰富页面。FLASH 约占据了页面有效部分的 3/5 大小，这是美学中的黄金分割比例,可以使得页面有一种大小、主次的对比。有风格的网站与普通网站的区别在于：普通网

35、站你看到的只是堆砌在一起的信息， -10-你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。一旦你设计好一个漂亮的封面时，你希望接着的内页也有着与封面相似的漂亮面孔。但里面的内页却有着不同的空间和不同的目的，那你如何还能保持一致的视觉效果？“简单”是其中最重要的原则。4.3 网站页面设计网站页面设计4.3.1 网站首页设计网站首页设计关于首页的一些超链接，在 dreamweaver 里做好一个页面后，在导航的文字做上超链接，就需要链接下一个页面，下一个页面里的内容就是二级页面，同时我选中第二个页面

36、里的文字后，看最下面的属性里,有个链接这个栏，我在里面输入我要链接的页面的名字，当然这个名字就是我刚才建的第二个页面的名字，同时也要写全这个二级页面所在的文件夹的正确路径。举个例子，比如我主页面，起名:index.html，再建第二个页面起名：News.html，并且这两个页面不是在同一个文件夹 web 下，那么这个时侯做超链接的时候写路径时就直接写 web/News.html 就行了。网站首页的布局样式清晰自然，使浏览者一目了然，大体布局样式如图 4.1 所示：页页头头页页尾尾导导航航图图片片J JS S展展示示街街舞舞视视频频好好评评视视频频图 4.1 网站首页效果图4.3.2 二级页面设

37、计二级页面设计二级页面就是在一级页面上的链接，当然一级页面指网站主页的链接的页面。动 -11-态 2 级页面就是指的在动态网页中，网页里面会再出现很多的链接，点击每个链接打开出来的页面就是二级页面，故动态二级页面就是指的这个意思。本网站的二级页面的页头与首页的页头有所差异，整体的样式设计也有所差异网站的 LOGO 放在一左一角，右边对应的是整个网站的导航部分，下面就是街舞的展示信息，用街舞展示 1、街舞展示 2、街舞展示 3 三个图片来表示，再往 下则是整个网站的核心部分：专家分析，专家分析主要是针对街舞这方面的一些专家进行分析的一些新闻和文章，些部分可以显示文字，也可以显示图片。网站的右下角

38、是新街舞的信息窗口，这个部分是动态的显示，可以显示四个或者四个以上的图片。整体样式设计框架样式如下图 4.2 所示。推推荐荐热热播播排排行行榜榜街街舞舞视视频频导导航航街街舞舞视视频频街街舞舞视视频频页页尾尾图 4.2 二级页面设计4.3.3 三级页面设计三级页面设计三级页面的设计项目列表页简单的布局与之前的栏目也有所差异，但整体的够色还是以灰色为主的。页面设计简洁，背景颜色以白色为主，蓝色为辅，搭配合理。整个页面被划分为四个部分：导航、街舞视频、相关视频、街舞电影和页尾放在了中间部分，使用户第一眼即可看到自己想看的，视频信息要放在中间，这样叫用户在视觉上就能感觉到视频的整个效果，具体图片设计

39、效果如图 4.3 所示。 -12-街街舞舞视视频频导导航航街街舞舞电电影影街街舞舞视视频频页页尾尾图 4.3 三级页面设计 -13-第 5 章系统实现5.1 网站首页的实现网站首页的实现5.1.1 首页布局的实现首页布局的实现主页由标准模式构建，其主色调为上面为黑色下面为的色，通过导航条的引导可以一步一步了解网站的全部内容。用户能通过导航获取自己感兴趣的信息以及图文说明。具体如图 5.1 所示。图 5.1 网站首页实现首页布局的部分核心代码如下所示。 Cufon.now(); -14- 5.1.2 首页导航的实现首页导航的实现网站导航主要有六个部分，分别是首页、街舞视频、街舞电影、街舞资讯、排

40、行榜和最近更新这六块。具体如图 5.2 所示。图 5.2 导航功能实现导航主要是用了、四对标签进行实现的。具体实现的代码如下所示。 首页 街舞视频 街舞电影 街舞资讯 排行榜 最近更新 5.1.3 JS 效果的实现效果的实现首页 JS 效果主要是面张房屋时延的切换功能。具体实现的 JS 代码如下所示。具体实现效果如图 5.3 所示。图 5.3 JS 图片切换图片实现的部分核心代码如下所示。var ua = function() var w3cdom = typeof doc.getElementById != UNDEF & typeof doc.getElementsByTagNam

41、e != UNDEF & typeof doc.createElement != UNDEF, -15-playerVersion = 0,0,0,d = null;if (typeof nav.plugins != UNDEF & typeof nav.pluginsSHOCKWAVE_FLASH = OBJECT) d = nav.pluginsSHOCKWAVE_FLASH.description;if (d & !(typeof nav.mimeTypes != UNDEF & nav.mimeTypesFLASH_MIME_TYPE & !na

42、v.mimeTypesFLASH_MIME_TYPE.enabledPlugin) / navigator.mimeTypesapplication/x-shockwave-flash.enabledPlugin indicates whether plug-ins are enabled or disabled in Safari 3+else if (typeof win.ActiveXObject != UNDEF) var a = null, fp6Crash = false;try a = new ActiveXObject(SHOCKWAVE_FLASH_AX + .7);catc

43、h(e) try a = new ActiveXObject(SHOCKWAVE_FLASH_AX + .6);playerVersion = 6,0,21;a.AllowScriptAccess = always; / Introduced in fp6.0.47catch(e) if (playerVersion0 = 6) fp6Crash = true;5.2 二级页面的实现二级页面的实现二级页面实现如图 5.4 所示。 -16-图 5.4 二级页面二级页面实现的部分核心代码如下所示。 甜心辣舞 1/蜂蜜 街舞电影 评分：0.0 类型：poppin 地区： 上映年代：0 导演：街舞网

44、主演：街舞机械舞教学 Mike Song 机械舞教学视频系列，更多街舞教学系列请关注街舞网 在线观看 全集 5.3 三级页面视频功能的实现三级页面视频功能的实现三级页面可以实现视频的播放功能，具体实现如图 5.5 所示。图 5.5 三级页面的实现实现三级页面的部分核心代码如下所示。 -17- -18-第 6 章系统测试6.1 测试方法测试方法对已经做好的网上书城的各个功能进行逐一测试，检查网上书城是否和预期的功能相吻合，所以对建好的网上书城进行以下测试：页面布局检查：对网上书城的各个页面布局样式进行检查。在网上书城网后台的模板管理中的将建好的模板保存，点击“更新首页”和“更新栏目页” ，然后到

45、前台查看页面样式布局是否和在 Dreamweaver 下的布局样式一致，如不一致，再次进行修改。文章页面链接检查：每个文章链接是否都有相对应的页面，并且查看页面之间切换是否正确。网上书城信息检查：点击友情链接中相链接的图标，看网页是否跳转。联系我们检查：查看是否转到相应页面。6.1 网页的测试网页的测试本系统主页编制成功后，要以一个读者的身份，利用浏览器测试文档资料的正确性和可用性。 (1) 浏览器兼容性测试。目前主要浏览器 Internet Explorer ，只要能在这种浏览器上浏览就可以了。一般我们做的网页测试不存在兼容性的问题，在通用的这种浏览器上一般情况下都能正常的浏览。(2) 链接

46、正确性的测试。我们做的网页一般都用 Dreamweaver 检查，我们做的静态网页链接的只是浏览页面，图片等，所以在 Dreamweaver 里指向链接属性仔细检查就可以了。在浏览器测试中页面都能正常浏览，就是注册信息、学生频道、联系我们等栏目的功能不能充分实现，只能是简单的页面浏览。6.2 网站测评网站测评测试就是找到错误并修改它，整个测试过程需要反复对代码和界面进行调试和修改，整个系统总共经过了 3 次比较大的修改，测试发现的错误也有很多。经过反复的测试和调试，系统已经达到预期的设计标准，可以正常运行。用户使用过程不会出现崩溃，画面可以正常的现实，控制不会出现于用户操作相违背的情况。网站建

47、成之后，为了避免出现不必要的错误，需要对其进行测评。测评的内容主要有以下几个方面。 -19-(1) 链接有效性。静态网页只要确认每一个页面能正常浏览，保证信息不缺失就可以了。(2) 网页语言正确性。检查网页中英文拼写与网页 HTML 语法书写是否正确。在静态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。(3) 网站便用性。检查网站整体结构是否清晰以及网站页面导航是否清晰。 -20-第 7 章结论街舞文化网站使用了 HTML 技术。DIV+CSS 框架进行网站的布局，使街舞文化网站的结构更加清晰，更容易控制和修改，页面载入速度更快，很容易被搜索引擎收录，街舞文化网站在配色上

48、严格遵循配色规律，采用蓝色为整个网站的主色调，其色彩温馨舒适，过渡自然，主题突出，使整个页面风格统一，内容清晰明确。网站在制作前期进行了网上调查，对用户需求做了细致的分析对比，内容功能上能够满足用户的需要。街舞文化网站设计了自己的 logo。街舞文化网站的界面与板块都较简洁，它的主要特点是信息全面，脉络清晰，层次分明。尤其，各个页面都包括主导航，用户可轻松回到主页界面或者其他频道页面。用户或者浏览者可以轻松找到自己所关心的相关信息。街舞文化网站在前台页面设计时内容使用标签调用，既可以节省很多的时间去写代码，又可以把系统自带的标签复制到相应的位置就可以实现所需要的功能。当然但还有诸多方面的不足之

49、处，比如：街舞文化网站虽然实现了很多功能的展示，但可能跟实际的需求与要求还有很大的差距，不能够真真正正的投入到实际当中去，我会在今后的学习和工作过程中，逐渐的把街舞文化网站完善起来，以便适合实体店得实体需求。当我终于完成了对图片的收集与后期的处理任务后整个人都很累，但同时看着电脑荧屏上的毕业设计稿件我的心里是甜的，我觉得这一切都值了。这次毕业论文的制作过程是我的一次再学习，再提高的过程。在论文中我充分地运用了大学期间所学到的知识。我不会忘记这难忘的几个月的时间。毕业论文的制作给了我难忘的回忆。在我徜徉书海查找资料的日子里，面对无数书本的罗列，最难忘的是每次找到资料时的激动和兴奋；亲手收集和处理

50、图片的时间里，希望以后的学习过程中可以把程序修改得更完美。 -21-参考文献1 Jon Duckett. Web 编程入门经典M,清华大学出版社,2010.1.2 吴鹏飞. 网页制作与网站建设从入门到精通M, 人民邮电出版社, 2011.6.3 (美)Eric A.MeyerCSS 权威指南M，东南大学出版社，2007.6. 4 胡崧，于慧. Flash CS5 从入门到精通M, 北京：中国青年出版社, 2011.1 5 胡崧，于慧. Dreamweaver CS4 中文版从入门到精通M, 中国青年出版社, 2009.8.6 杨桦，孙利娟. 网页设计与制作实用教程M,清华大学出版社,2011.

51、1.7 吴永泉. Photoshop CS5 中文版从入门到精通M, 人民邮电出版社, 2010.6.8 常可，胡金埔、赵静. HTML5 揭秘M，电子工业出版社，2010.12.9 李宏. 网页设计与制作M, 电子工业出版社,2010.1.10 刘志忠. CSS 基础教程M，人民邮电出版社，2007.7. -22-致 谢在整个毕业设计过程中，指导教师给了我极大的帮助，并给予我悉心的关怀与指导，在此表示衷心地感谢。老师认真负责的工作态度、严谨的治学风格，使我深受启发。开发的同时，和同组同学们之间的相互探讨也使我获益匪浅，在开发工具的选择上，他给了我不少的指导，在此也表示衷心地感谢。在此同时也给

52、了我不少的指导工作，在此也表示衷心地感谢三年的读书生活在这个季节即将划上一个句号，而于我的人生却只是一个逗号，我将面对又一次征程的开始。四年的求学生涯在师长、亲友的大力支持下，走得辛苦却也收获满囊，在论文即将付梓之际，思绪万千，心情久久不能平静。伟人、名人为我所崇拜，可是我更急切地要把我的敬意和赞美献给一位平凡的人，我的导师。我不是您最出色的学生，而您却是我最尊敬的老师。您治学严谨，学识渊博，思想深邃，视野雄阔，为我营造了一种良好的精神氛围。授人以鱼不如授人以渔，置身其间，耳濡目染，潜移默化，使我不仅接受了全新的思想观念，树立了宏伟的学术目标，领会了基本的思考方式，从论文题目的选定到论文写作的

53、指导,经由您悉心的点拨,再经思考后的领悟,常常让我有“山重水复疑无路,柳暗花明又一村”的领悟。感谢我的爸爸妈妈，焉得谖草，言树之背，养育之恩，无以回报，你们永远健康快乐是我最大的心愿。在论文即将完成之际，我的心情无法平静，从开始进入课题到论文的顺利完成，有多少可敬的师长、同学、朋友给了我无言的帮助，请接受我诚挚的谢意，这里！在人生的道路上有许多跌宕起伏，没有一条通往光明之路，痛苦，悲伤，无助，面对一切不可容忍的，这就是生活。但是生活中有许多美好的东西，有时你看不到的颜色，如果你不觉得这种方式，然后，可以感受到一种不同的方式，也许就是你所需要的那种生活方式。不要放弃生活，你放弃了它，生活会给你的

54、生活感受，会感受才会有幸福，在生活中如果你感受的多了，那你才会感受到生活中的美好，你才会知道你在前世所选择的是今生的最正确的人生路。毕业设计（论文）手册-1-毕业设计（论文）任务书毕业设计（论文）题目：毕业设计（论文）题目：街舞文化网站的设计与实现设计（论文）的基本内容：设计（论文）的基本内容：对于网站设计来说，这种交流不仅要明白它是什么您想要运行的应用程序，你需要如何将现有系统的单位，要知道这个网站，希望达到什么目的，必须清楚网站的目标市场。这将是整个网站的设计思想的基础上。网页无论什么形式，什么样的外观，内容的网站为出发点考虑的终极目标。而随着信息时代的到来和互联网的快速发展，越来越多的人

55、们习惯与从网站上获取信息与资讯，因此为了便于街舞的发展与传播，街舞网站的设计与实现在当今社会显得尤为重要。我们创建的网站是为了给广大热爱街舞的朋友们提供一个平台，让他们自由学习和交流（技术改进中） 。我们小组对网站的期望就是让那些热爱街舞的朋友们有一个街舞的天堂。至于要达成这个目标，我们小组觉得是我们还有些距离的，但我们相信这个距离是能通过我们的团队合作和努力来完成的。我们小组对于完成这个目标是怀有满腔的热血和蓬勃向上的信心的。建这个网站，我们不仅希望能让街舞爱好者找到他们的伊甸园，我们还希望建站过程能使我们自身得以锻炼，让我们自己的网站建设的技术水平不断提升。毕业设计（论文）手册毕业设计（论

56、文）开题报告题题目目街舞文化网站的设计与实现选选题题的的背背景景、目目的的和和意意义义街舞也称 HIP-HOP，它起源于美国街头舞者的即兴舞蹈动作，因其轻松随意、自由个性和反叛精神而理所当然地受到年轻人的喜欢, 有人称之为“是惟一让人带着笑容进行训练的运动” 。在中国，街舞文化虽然起步比较晚，但是现如今它已经拥有了相当大的市场规模和专属群体，各类街舞比赛层出不穷，比赛内容需要平台来传播，各类街舞教学机构如雨后春笋般涌现，难免产生竞争，各自的优势也需要一个平台来宣传。而随着信息时代的到来和互联网的快速发展，越来越多的人们习惯与从网站上获取信息与资讯，因此为了便于街舞的发展与传播，街舞网站的设计与

57、实现在当今社会显得尤为重要。应应用用原原理理或或项项目目说说明明Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。但网页设计者使用 Flash 可以创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面

58、设计人员和电脑美术爱好者的喜爱。CSS 目前最新版本为 CSS3，能够真正做到网页表现与内容分离的一种样式设计语言，相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。毕业设计（论文）手册毕业设计（论文）开题报告项项目目论论证证与与实实施施方方案案1.经济可行性分析基于一般网页制作的基本情况，要设计与实现这样的网站，优势在于小成本运营，不需要耗费大量的人力物力，只需要最基本的设施就是一台个人电脑。而后期只需要定期的对网站进行更新与维护

59、即可。2营运可行性分析由于网民的数量是庞大的，而且增长潜力也是无穷大的，而不同的街舞爱好者又有着对不同的种类街舞的爱好与要求，所以只需要做出自己的个人特色，或者随着街舞爱好者的要求制定不同的特色，那么，一个具有特点的街舞资讯网页是极其具有可观性的。选选题题特特色色和和预预期期成成果果随着科学技术的迅猛发展，网站制作以及网页的开发所需要的各种条件已经成熟。因此，制作网站通过软件：DreamWeaver，CSS，Flash 及 Photoshop 等技术，设计与实现了街舞主题的网站。随着社会压力的增长，与快节奏的现代生活，本网站能够为不同风格，不同喜好的街舞爱好者提供各种不同类型的资讯（街舞达人资

60、料、街舞比赛动态、街舞俱乐部课时及优惠等） ，视频（比赛、表演、快闪、教学、达人视频专辑） ，让爱街舞的 dancer 了解 hiphop 文化的历史、流派、当今动态。本网站还对舞种相关进行了归类，不论是 lockin、poppin、jazz 还是 breaking，网民都可以快速找到自己感兴趣的资源。广大爱好街舞的网民还可以在网站内进行评论与交流，只要认为兴趣相投就可以尽吐心声，得到心灵上的放松和解脱。毕业设计（论文）手册毕业设计（论文）开题报告工工作作进进度度计计划划1-2 周熟悉 HTML 的基本知识。3-4 周熟悉 DreamWeaver，CSS，Flash 及 Photoshop 等技术。5-6 周继续深入学习用到的知识并查阅