嘻哈游”网站开发
目 录
一、引言 1
二、系统概述 1
（一）开发技术 1
1. HTML+CSS 1
2. JavaScript 2
3. jQuery 2
4. Photoshop 2
5. Flash 2
（二）开发环境 2
四、课题内容简介 4
(一)网站需求分析 4
(二)网站可行性分析 4
(三)网站大体结构 5
五、网站布局 5
(一)首页框架 5
(二) 子页一框架 12
六、效果实现代码 14
(一)导航条特效 14
(二) 图片切换效果 17
1.Table属性的使用 18
2.二级页面的展开与折叠效果 18
3.联系我们部分 19
4.Flash文件的插入 20
5.网页上的视频文件 20
七、网站测试 20
参考文献 24
一、引言
毕业设计是所有大学生毕业前必经的一个阶段，学生向老师进行作品展示，即是老师评定学生这几年来所学的成果的重要指标、重要的考核。也是对自己的一次挑战。也便于老师对学生毕业成绩的评定。
高速发展的网络高智能时代让人们对任何设计的要求也越来越高，如何使用自己的技术创造出别具一格的作品？
初始决定用“旅游”作为本网站的主旨时并没有太多的想法，开始设计时便发现没有过多可创新的内容，所以便加入了一些运动与健康的主题。看似没有什么联系，但其实完全可以关联在一起。本网站主要设计了首页，旅游资讯、缤纷世界、名胜风景、在线留言、极限活动、官网博 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
客、联系我们这些个主体页面。切换了多个框架结构。
而本文主要介绍了旅游网站的设计概念、网站包含的各种内容以及用到的各种专业工具。
为实现网站的初步布局，采用了HTML+CSS的网页制作基础语言。利用Macromedia Dreamweaver 8将所学的知识综合运用了起来。编写HTML代码，设置前台特面。用CSS样式表进行页面的美化，文字的修饰与图片的排版等。运用了大量的标记属性给网站中的主体内容进行标记。
为丰富网站内容，特使用了JavaScript以及基于JavaScript的jQuery函数实现网站中的图片特效，通过调用函数实现图片的切换，自动切换。实现导航条的二级菜单，以及文字的走马灯效果等。
本文将会详细介绍网站页面的布局、网站的内容。展示网站使用的技术以及工具。对网站进行详细的说明。
二、系统概述
（一）开发技术
本网站主要利用HTML+CSS对前台页面进行设计和布局，使用CSS样式表对网站内容的字体大小颜色，段落格式定位等进行设置。使得网站的信息更加丰富，网页更加美观。利用JavaScript以及jQuery脚本语言实现网页特效。利用Photoshop美图工具美化资料图片、利用Flash制作软件制作flash动画。
HTML+CSS
HTML专业人士称之为超文本标记语言，可以使用任何的文字编辑软件来撰写和编辑（如Dreamweaver、记事本等）是它最主要的特性，所以，它被应用到了几乎所有的网站中。而且HTML代码编写起来比较简单，一般像我们也可以通过w3school上的介绍案例进行自学。HTML4.0比起HTML5来说则是目前比较正规的一个版本，大部分的浏览器都能与4.0版本的HTML语言做到统一。而CSS则是层叠样式表，它可以通过在HTML文本编辑器中链接到特定的样式表来达到改变网页文字图片样式的目的，连接到需要的样式表后，可以直接在CSS样式表中定义类样式或ID样式。定义好之后的样式可以直接多次引用。丰富了网页中字体、背景颜色、整体排版等的效果。
JavaScript
JavaScript是一种直译式脚本语言。而JavaScript引擎则被称为它的解释器，存在于浏览器中，广泛应用于客户端，为网站设计者提供了建立交互式页面的先进技术。最早是在HTML网页上使用，用来给HTML网页增加动态功能。用户可以通过直接编写运用各种随机函数等生成特效。可以像CSS样式表一样直接在编辑器中直接引入编写好的js库。
jQuery
jQuery是基于JavaScript的一个优秀的JavaScript库。它的兼容性非常好，能够很好的兼容CSS3样式表以及各种浏览器。通过jQuery函数功能，用户能够实现众多的特效。为网站提供AJAX交互。实现jQuery功能就可以不用再在HTML里面插入一堆js功能函数来调用了，只需要定义id即可。
Photoshop
是一款由Adobe?Systems开发和发行的图像处理软件。是众多专业人士专业软件公司专业使用的软件，不同于美图秀秀而言，Photoshop的处理工具更细致更加专业。可以根据用户需要将图片处理成需要的效果。
Flash
Macromedia公司制作的一款专门用来制作flash动画的高性能软件。用户可以通过添加图片、声音、视频制作出自己想要的特殊动态效果——动画。在制作过程中，通过在不同的帧里面添加图片并且在下一帧改变图片的大小或形态。播放时就是利用在每帧不同的动作形成了一个连续性的动画。还可以在不同的帧中添加动作函数代码，以达到希望实现的效果。
（二）开发环境
操作系统：Windows 8
Dreamweaver版本：Macromedia Dreamweaver 8
Photoshop图像处理工具版本：Adobe Photoshop CS5
Flash动画版本：Macromedia Flash 8
测试环境：360安全浏览器、IE浏览器、谷歌浏览器
经过多次仔细的测试，本网站可以兼容多个浏览器。在浏览器中浏览暂没有发现问题。
三、网站内容分析
本网站采用了最简单直观的布局，浏览起来一目了然。页面头部都放入了导航条，每个大模块都列入了导航条里面，方便用户直接浏览。部分导航条做了二级子页面，用户可以直接的通过下拉菜单栏的二级子页面进行访问，也可以直接进行浏览。
基本每个页面都放入了一些小小的特效，丰富用户的浏览体验。同时也丰富了视觉效果，让页面显得没有那么单调。总体框架结构图如图3-1所示：
图3-1总体框架结构图
本网站主要设计了八个页面作为导航条的标题栏，分别做了风景资讯的介绍板块、各种旅游景地的最新资讯一手掌握。极限运动的模块根据大众口味设置了十大世界最知名的极限活动。官网博客模块可以让用户了解到我们公司的资历，让用户更加放心的与我们公司进行沟通交流，尽可能在第一时间能够参与我们公司的活动。在线留言与联系我们模块可以让用户对我们的讯息提出问题，我们会在第一时间来进行解答。各个用户之间也可以直接留言，互相交流。网站的页面布局颜色也主要采用了黑色白色，白色主要是作为背景，而文字描述则都是黑色。黑白的搭配使得网站的整体风格与主题比较靠近，显得比较神秘。符合网站主要介绍的世界奇异美景的主题。
一、引言 1
二、系统概述 1
（一）开发技术 1
1. HTML+CSS 1
2. JavaScript 2
3. jQuery 2
4. Photoshop 2
5. Flash 2
（二）开发环境 2
四、课题内容简介 4
(一)网站需求分析 4
(二)网站可行性分析 4
(三)网站大体结构 5
五、网站布局 5
(一)首页框架 5
(二) 子页一框架 12
六、效果实现代码 14
(一)导航条特效 14
(二) 图片切换效果 17
1.Table属性的使用 18
2.二级页面的展开与折叠效果 18
3.联系我们部分 19
4.Flash文件的插入 20
5.网页上的视频文件 20
七、网站测试 20
参考文献 24
一、引言
毕业设计是所有大学生毕业前必经的一个阶段，学生向老师进行作品展示，即是老师评定学生这几年来所学的成果的重要指标、重要的考核。也是对自己的一次挑战。也便于老师对学生毕业成绩的评定。
高速发展的网络高智能时代让人们对任何设计的要求也越来越高，如何使用自己的技术创造出别具一格的作品？
初始决定用“旅游”作为本网站的主旨时并没有太多的想法，开始设计时便发现没有过多可创新的内容，所以便加入了一些运动与健康的主题。看似没有什么联系，但其实完全可以关联在一起。本网站主要设计了首页，旅游资讯、缤纷世界、名胜风景、在线留言、极限活动、官网博 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
客、联系我们这些个主体页面。切换了多个框架结构。
而本文主要介绍了旅游网站的设计概念、网站包含的各种内容以及用到的各种专业工具。
为实现网站的初步布局，采用了HTML+CSS的网页制作基础语言。利用Macromedia Dreamweaver 8将所学的知识综合运用了起来。编写HTML代码，设置前台特面。用CSS样式表进行页面的美化，文字的修饰与图片的排版等。运用了大量的标记属性给网站中的主体内容进行标记。
为丰富网站内容，特使用了JavaScript以及基于JavaScript的jQuery函数实现网站中的图片特效，通过调用函数实现图片的切换，自动切换。实现导航条的二级菜单，以及文字的走马灯效果等。
本文将会详细介绍网站页面的布局、网站的内容。展示网站使用的技术以及工具。对网站进行详细的说明。
二、系统概述
（一）开发技术
本网站主要利用HTML+CSS对前台页面进行设计和布局，使用CSS样式表对网站内容的字体大小颜色，段落格式定位等进行设置。使得网站的信息更加丰富，网页更加美观。利用JavaScript以及jQuery脚本语言实现网页特效。利用Photoshop美图工具美化资料图片、利用Flash制作软件制作flash动画。
HTML+CSS
HTML专业人士称之为超文本标记语言，可以使用任何的文字编辑软件来撰写和编辑（如Dreamweaver、记事本等）是它最主要的特性，所以，它被应用到了几乎所有的网站中。而且HTML代码编写起来比较简单，一般像我们也可以通过w3school上的介绍案例进行自学。HTML4.0比起HTML5来说则是目前比较正规的一个版本，大部分的浏览器都能与4.0版本的HTML语言做到统一。而CSS则是层叠样式表，它可以通过在HTML文本编辑器中链接到特定的样式表来达到改变网页文字图片样式的目的，连接到需要的样式表后，可以直接在CSS样式表中定义类样式或ID样式。定义好之后的样式可以直接多次引用。丰富了网页中字体、背景颜色、整体排版等的效果。
JavaScript
JavaScript是一种直译式脚本语言。而JavaScript引擎则被称为它的解释器，存在于浏览器中，广泛应用于客户端，为网站设计者提供了建立交互式页面的先进技术。最早是在HTML网页上使用，用来给HTML网页增加动态功能。用户可以通过直接编写运用各种随机函数等生成特效。可以像CSS样式表一样直接在编辑器中直接引入编写好的js库。
jQuery
jQuery是基于JavaScript的一个优秀的JavaScript库。它的兼容性非常好，能够很好的兼容CSS3样式表以及各种浏览器。通过jQuery函数功能，用户能够实现众多的特效。为网站提供AJAX交互。实现jQuery功能就可以不用再在HTML里面插入一堆js功能函数来调用了，只需要定义id即可。
Photoshop
是一款由Adobe?Systems开发和发行的图像处理软件。是众多专业人士专业软件公司专业使用的软件，不同于美图秀秀而言，Photoshop的处理工具更细致更加专业。可以根据用户需要将图片处理成需要的效果。
Flash
Macromedia公司制作的一款专门用来制作flash动画的高性能软件。用户可以通过添加图片、声音、视频制作出自己想要的特殊动态效果——动画。在制作过程中，通过在不同的帧里面添加图片并且在下一帧改变图片的大小或形态。播放时就是利用在每帧不同的动作形成了一个连续性的动画。还可以在不同的帧中添加动作函数代码，以达到希望实现的效果。
（二）开发环境
操作系统：Windows 8
Dreamweaver版本：Macromedia Dreamweaver 8
Photoshop图像处理工具版本：Adobe Photoshop CS5
Flash动画版本：Macromedia Flash 8
测试环境：360安全浏览器、IE浏览器、谷歌浏览器
经过多次仔细的测试，本网站可以兼容多个浏览器。在浏览器中浏览暂没有发现问题。
三、网站内容分析
本网站采用了最简单直观的布局，浏览起来一目了然。页面头部都放入了导航条，每个大模块都列入了导航条里面，方便用户直接浏览。部分导航条做了二级子页面，用户可以直接的通过下拉菜单栏的二级子页面进行访问，也可以直接进行浏览。
基本每个页面都放入了一些小小的特效，丰富用户的浏览体验。同时也丰富了视觉效果，让页面显得没有那么单调。总体框架结构图如图3-1所示：
图3-1总体框架结构图
本网站主要设计了八个页面作为导航条的标题栏，分别做了风景资讯的介绍板块、各种旅游景地的最新资讯一手掌握。极限运动的模块根据大众口味设置了十大世界最知名的极限活动。官网博客模块可以让用户了解到我们公司的资历，让用户更加放心的与我们公司进行沟通交流，尽可能在第一时间能够参与我们公司的活动。在线留言与联系我们模块可以让用户对我们的讯息提出问题，我们会在第一时间来进行解答。各个用户之间也可以直接留言，互相交流。网站的页面布局颜色也主要采用了黑色白色，白色主要是作为背景，而文字描述则都是黑色。黑白的搭配使得网站的整体风格与主题比较靠近，显得比较神秘。符合网站主要介绍的世界奇异美景的主题。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1647.html
