兴化千岛景区的网站的设计与实现(附件)
兴化千岛景区网站是针对想要来了解景区和有意愿前来游玩的人群。本网站的设计和开发是在“互联网”“自然复古”的风潮下，给城市中的人群带来自然的乡村体验。本网站是运用CSS和HTML5为开发工具，运用了Photoshop和JavaScript为辅助工具，为本网站添加了许多精美图片和精彩的特效，使整个网站更加生动。本网站致力于帮助景区带来效益以及给游客带来视觉上面的体验。网站内容主要包括首页、景区介绍、游客入口，购票入口4个板块，是参观者能够清楚地了解到景区的各个特色和能够线上预订门票和住宿。不同于传统的游玩，这边会推出衣食住行周边游玩一体化的服务，给游玩者能够的自然体验和方便，从而达到经济效益。
目 录
一、引言 1
二、开发背景 1
（一）总体情况 1
（二）需求分析 1
（三）工具介绍 1
三、网站设计 2
（一）网站总体设计 2
1．功能结构 2
2．色彩搭配 2
（二）网站详细设计 2
1．Logo设计 2
2．网页布局设计 3
3．网页DIV布局和CSS样式 4
四、网站实现 7
（一）网站基本功能实现 7
1．首页 7
2．“景区介绍”页面 8
3．“游客入口”页面 9
4．“购票入口”页面 10
5．三级子页 11
（二）JavaScript特效 12
1.鼠标点击效果 12
2.图片移动效果 13
六、总结 14
致谢 16
参考文献 17
一、引言
旅游网站将采用图文结合的方式向消费者展现。因此参观者可以通过图片和文字等视觉上的感受了解到兴化千岛景区的大致情况。本网站提供在线预订和在线咨询的功能，可以提前为消费者按照好假期件的衣食住行，给游客带来快捷方便的游玩体验。作为一个地区景区网站，本网站主要致力为自然景观和文化风俗的体验。游客在欣赏美景的同时可以了解一些历史文化、当地风俗以及特色美食。在城市人工作繁忙之余，可以来到这里体验下缓慢而又充实的乡村生活。 *好棒文|www.hbsrm.com +Q: ￥351916072$
因此，本网站将采用绿色为主背景，渐变的灰白和些许黄色为点缀。关于在线购票方面，本网站会将实时和安全为主，更好地为游客推荐各种衣食住行线路。
二、开发背景
（一）总体情况
兴化是著名的鱼米之乡，历史久远。兴化千岛景区是由历史的冲刷自然形成的景观，总面积包含万亩。在千岛景区，乘船赏花，感受历史留下的神奇。兴化千岛景区位于兴化缸顾乡，近年被政府开发大力发展成旅游业为兴化人们带来了不少经济效益。由于兴化是一个小的城市不能够很好地宣传地方特色，为景区吸引跟多的参观者，因此，本网站的设计和开发希望可以更好地展现景区的优点，吸引各地游客。
（二）需求分析
通过对景区的环境的调查与分析，本网站主要涉及：景区介绍、游客入口、购票入口等模块。作为一个介绍型的网站，它是属于简单明了的，可以让浏览者更省时省力地得到自己想要的信息。其目的是通过简单的网站介绍吸引更多的人关注本景区，为有意愿前来参观的人群带来便利。本网站根据四季和地方节日会重点介绍，让浏览者可以随时获取信息。根据网站功能浏览者可以迅速定位找到适合自己游玩季节和游玩路线。
在这个信息高速发展的今天，网络的传播的速度是相当快的，假设利用网络传播的方式其效果是传统方式所不能比的。设计本网站就是利用这一优势，想要来游玩的人群可以通过本网站了解一些基本情况和加深他们前来的意愿。本景区符合人们对自然复古和休闲放松的需求，同时赋有浓郁的文化特色和人情风俗，是郊游踏青的好去处。适当的去乡下放松放松，有助于身体健康，吃吃一些无污染的农家小炒，感受下不同于城市的安逸。
在工作繁忙的今天，城市中的人更希望可以去乡下放身心，缓解下城市快生活带来的疲惫。以往的传统的宣传方式已经不能够很好地将景区宣传出去，现在借助于互联网的方式希望更多的人可以知道本景区。
（三）工具介绍
本网站的设计和开发主要是致力于景区宣传，经济效益为辅。所以设计的是比较简单的静态网站。本网站的设计与开发主要运用到的软件：Adobe Photoshop、Adobe Dreamweaver CS6。为了美观Adobe Photoshop设计本网站的Logo以及各种图片美化。Dreamweaver CS6为本网站进行编写实现。
本网站主要是运用Dreamweaver软件进行编写。在校期间因为学习了这个软件的运用，也做过了一些相对的练习，本软件是相对初学者来说比较好操作的，在设计和开发本网站过程中带来了很多便利。在图片方面采用的是Photoshop来对图片进行优化和设计。此外，还采用了记事本和Word对部分代码进行记录整理。
作为一个宣传类的静态网站，在设计过程中加了JavaScript技术给整个网站增加了灵动的动态感觉，是整个网站不会枯燥单调。
三、网站设计
（一）网站总体设计
1．功能结构
在设计网站的时候，将本网站主要分成首页，景区介绍，游客入口，购票入口等主要模块，分别每个模块都有它分别的板块。具体详细功能结构图如图31所示：
图31功能结构图
为了方便游客和浏览者方便获取信息，因此首页的设计是比较简单明了的。首页的功能是大致介绍下景区的位置和历史风俗和特色美食以及连接各个子页。景区介绍是对景区的详细介绍，包括对地理历史风俗和游玩攻略等详细介绍。游客入口是主要给游客一些游玩介意和游玩须知。购票入口主要是对游客提前订票的快捷入口，包括不同类型的游客购票入口。
2．色彩搭配
本网站作为自然风景区的宣传网站，其背景主要采用以绿色为主，白色，淡黄色和灰色为辅。绿色主要运用在主体部分面积比较大比较符合本景区自然的特点。白色比较简单，淡黄色比较和谐，三者相结合给人一种比较舒适的感觉。本景区以春天千岛菜花著名，绿色，白色，黄色，更加能贴近景区的实际情况，符合本景区的特点。
（二）网站详细设计
1．Logo设计
本网站的Logo不是有图片编辑器设计的，而是运用DIV层样式而设计的。本网站的Logo主要是运用黄色透明图小太阳和黄橙色文字组成的，比较简洁却让人比较舒适。详细Logo效果如图31所示：
目 录
一、引言 1
二、开发背景 1
（一）总体情况 1
（二）需求分析 1
（三）工具介绍 1
三、网站设计 2
（一）网站总体设计 2
1．功能结构 2
2．色彩搭配 2
（二）网站详细设计 2
1．Logo设计 2
2．网页布局设计 3
3．网页DIV布局和CSS样式 4
四、网站实现 7
（一）网站基本功能实现 7
1．首页 7
2．“景区介绍”页面 8
3．“游客入口”页面 9
4．“购票入口”页面 10
5．三级子页 11
（二）JavaScript特效 12
1.鼠标点击效果 12
2.图片移动效果 13
六、总结 14
致谢 16
参考文献 17
一、引言
旅游网站将采用图文结合的方式向消费者展现。因此参观者可以通过图片和文字等视觉上的感受了解到兴化千岛景区的大致情况。本网站提供在线预订和在线咨询的功能，可以提前为消费者按照好假期件的衣食住行，给游客带来快捷方便的游玩体验。作为一个地区景区网站，本网站主要致力为自然景观和文化风俗的体验。游客在欣赏美景的同时可以了解一些历史文化、当地风俗以及特色美食。在城市人工作繁忙之余，可以来到这里体验下缓慢而又充实的乡村生活。 *好棒文|www.hbsrm.com +Q: ￥351916072$
因此，本网站将采用绿色为主背景，渐变的灰白和些许黄色为点缀。关于在线购票方面，本网站会将实时和安全为主，更好地为游客推荐各种衣食住行线路。
二、开发背景
（一）总体情况
兴化是著名的鱼米之乡，历史久远。兴化千岛景区是由历史的冲刷自然形成的景观，总面积包含万亩。在千岛景区，乘船赏花，感受历史留下的神奇。兴化千岛景区位于兴化缸顾乡，近年被政府开发大力发展成旅游业为兴化人们带来了不少经济效益。由于兴化是一个小的城市不能够很好地宣传地方特色，为景区吸引跟多的参观者，因此，本网站的设计和开发希望可以更好地展现景区的优点，吸引各地游客。
（二）需求分析
通过对景区的环境的调查与分析，本网站主要涉及：景区介绍、游客入口、购票入口等模块。作为一个介绍型的网站，它是属于简单明了的，可以让浏览者更省时省力地得到自己想要的信息。其目的是通过简单的网站介绍吸引更多的人关注本景区，为有意愿前来参观的人群带来便利。本网站根据四季和地方节日会重点介绍，让浏览者可以随时获取信息。根据网站功能浏览者可以迅速定位找到适合自己游玩季节和游玩路线。
在这个信息高速发展的今天，网络的传播的速度是相当快的，假设利用网络传播的方式其效果是传统方式所不能比的。设计本网站就是利用这一优势，想要来游玩的人群可以通过本网站了解一些基本情况和加深他们前来的意愿。本景区符合人们对自然复古和休闲放松的需求，同时赋有浓郁的文化特色和人情风俗，是郊游踏青的好去处。适当的去乡下放松放松，有助于身体健康，吃吃一些无污染的农家小炒，感受下不同于城市的安逸。
在工作繁忙的今天，城市中的人更希望可以去乡下放身心，缓解下城市快生活带来的疲惫。以往的传统的宣传方式已经不能够很好地将景区宣传出去，现在借助于互联网的方式希望更多的人可以知道本景区。
（三）工具介绍
本网站的设计和开发主要是致力于景区宣传，经济效益为辅。所以设计的是比较简单的静态网站。本网站的设计与开发主要运用到的软件：Adobe Photoshop、Adobe Dreamweaver CS6。为了美观Adobe Photoshop设计本网站的Logo以及各种图片美化。Dreamweaver CS6为本网站进行编写实现。
本网站主要是运用Dreamweaver软件进行编写。在校期间因为学习了这个软件的运用，也做过了一些相对的练习，本软件是相对初学者来说比较好操作的，在设计和开发本网站过程中带来了很多便利。在图片方面采用的是Photoshop来对图片进行优化和设计。此外，还采用了记事本和Word对部分代码进行记录整理。
作为一个宣传类的静态网站，在设计过程中加了JavaScript技术给整个网站增加了灵动的动态感觉，是整个网站不会枯燥单调。
三、网站设计
（一）网站总体设计
1．功能结构
在设计网站的时候，将本网站主要分成首页，景区介绍，游客入口，购票入口等主要模块，分别每个模块都有它分别的板块。具体详细功能结构图如图31所示：
图31功能结构图
为了方便游客和浏览者方便获取信息，因此首页的设计是比较简单明了的。首页的功能是大致介绍下景区的位置和历史风俗和特色美食以及连接各个子页。景区介绍是对景区的详细介绍，包括对地理历史风俗和游玩攻略等详细介绍。游客入口是主要给游客一些游玩介意和游玩须知。购票入口主要是对游客提前订票的快捷入口，包括不同类型的游客购票入口。
2．色彩搭配
本网站作为自然风景区的宣传网站，其背景主要采用以绿色为主，白色，淡黄色和灰色为辅。绿色主要运用在主体部分面积比较大比较符合本景区自然的特点。白色比较简单，淡黄色比较和谐，三者相结合给人一种比较舒适的感觉。本景区以春天千岛菜花著名，绿色，白色，黄色，更加能贴近景区的实际情况，符合本景区的特点。
（二）网站详细设计
1．Logo设计
本网站的Logo不是有图片编辑器设计的，而是运用DIV层样式而设计的。本网站的Logo主要是运用黄色透明图小太阳和黄橙色文字组成的，比较简洁却让人比较舒适。详细Logo效果如图31所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/1219.html
