悠游灌云”旅游网站
目 录
一．引言 1
（一）开发的背景 1
（二）开发的目的 1
（三）开发的工具 1
二．主体设计 1
（一）网站主题确定 1
（二）网站主体布局 1
（三）网站的色调 2
（四）logo的设计思路 2
（五）界面设计 2
三 . 网站的实现 3
（一）DIV和CSS的布局 3
1．首页的div布局和层样式 4
2．子页的div布局和层样式 7
（二）网站的基本功能实现 9
1．首页 9
2．景点 10
3．交通 11
4．资源 12
5．美食 13
6．人文 13
7．关于 14
四. JavaScrip特效的实现 15
五.总结 16
致谢 17
参考文献 17
一．引言
（一）开发的背景
生活在21世纪的当下，互联网已成为人们生活必不可分的一部分，它的诞生让人们的生活多姿多彩。从早期的上街购物到如今的淘宝商城，从早期的电视新闻到如今的网络新闻，亦或是从早期的医院就医到如今的网络就医，都无时无刻的不再发生变化；它的诞生正在慢慢的让人们的生活发生颠覆性的改变。
互联网的快速发展，也在不同的年龄阶级却在悄悄的发生着相同的改变，它的发展正在潜移默化的影响着各行各业。而在互联网行业中，网络旅游行业发展最为快速，由于它查阅方便，操作简单，也符合大众的需求，所以它的快速发展也在意料之中。正是由于其巨大的市场，所以各地的网络旅游平台也在迅速的建立。
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
（二）开发的目的
连云港灌云县，它是个待开发的三线城市，灌云处于江苏的东北部，濒临黄海，气候宜人，是苏北唯一一个有山有水的县城；灌云县内有7做低矮孤山，为古海州属地，历史悠久，环境宜人。随着网络旅游业的发展，各地都在开发地方旅游资源，地方旅游业的发展正在慢慢影响一个城市的发展。也正是趋于这种背景和地方特色之下，渐渐地心里就蒙生了做一个家乡旅游网的愿望，希望可以简单的通过网络旅游这么一个途径，让更多的人来到灌云，到那里做客，感受一下老海州人的风土人情。
（三）开发的工具
制作一个网站，它需要用到的开发工具有两种， 分别是Dreamweaver和Photoshop；Dreamweaver的作用主要是实现站点的建立及页面的添加编辑。一个静态网站的结构大体是图片及文字的结合，在Dreamweaver中让其实现结构调整和图文添加的是css和html。两者只有紧密结合，才能完善一个网站的建设；而另一个软件Photoshop则是一个图片处理器。Photoshop的作用是处理图片和特殊文字，logo的设计就是完全依附于ps的功能。它具有图片美化、裁剪、和拼接等的功效。只有具备两个软件的功能应用，建设一个网站就变得不是那么难。
二．主体设计
（一）网站主题确定
随着信息时代的不断发展，人们的工作、生活也正在悄悄的发生潜移默化的改变，从吃穿用到行，都无时无刻不受其网络带来的影响。正是由于网络的快捷、普遍性，所以在毕业设计建设的过程中，将其主题定性为旅游网站类，不仅是网站传播的速度广，影响力大，也还有一部分是因为本身的专业性。因为家乡是连云港灌云县，所以网站的主题命名为“灌云旅游网”。
（二）网站主体布局
本网站分别有首页、景点、交通、资源、美食、人文、和关于7大板块组成。在每个板块中还有一些子页，都做了仔细的结构排版，对每个板块的内容都做了一些图片和文字的介绍。结构如图2-1所示：
图2-1网站结构图
（三）网站的色调
本网站的名称是旅游网站，即它的颜色搭配肯定以鲜艳青春为主，所以网站的主色调为绿色，洋溢着青春的颜色，辅色调以深绿和棕色为主。因为绿色是生命的颜色，代表着生机勃勃，而棕色也是一种成熟的颜色，让人看起来活泼又不失庄重，青春有多些典雅，配上旅游这个主题也是再合适不过了。
（四）logo的设计思路
网站的logo设置是由2种颜色搭配形成，分别是绿色和红色相结合，因为灌云是一个古城，所以运用红色是想传承起历史的刚性，而中间是“灌云旅游”四个大字，这四个字是采用绿色的色调，以轻松为主，整个logo意在表示灌云是一个外刚内柔，包容万象的标志。效果如图2-2如示：
图2-2 Logo
（五）界面设计
运用Dreamweaver中Div和Css进行结构布局，在编辑html的代码对页面进行布局，使之整体的框架呈现出来。但首先得运用ps设计出网站的大概结构，首页结构的设置以简单为主，给人看起来轻松易懂。最上端是单独的一个logo，醒目显眼，突出主题，而紧挨着logo的是导航，中间的左边的是灌云风光的滚动展示和右边的家乡地理位置的描述。而家乡风俗特色也是用图片形式进行的简单介绍，底部一个就是版权。
网站首页的大体结构如图2-3所示：、
Logo
导航
图片集的展示
简介
图片介绍家乡特色
版权
图2-3 首页布局图
子页是采取比较简单的重复式结构，top是logo，紧挨着下面是导航，中间部分是导航的一个板块的拓展，看起来比较简单明了，最下面还是版权。
如图2-4所示：
Logo
导航
主题介绍
主题介绍
主题介绍
主题介绍
版权
图2-4子页布局图
三 . 网站的实现
做好了基础的准备，下面就是进入主题，制作网站。首先是进入Dreamweaver中，建立一个站点Dreamweaver和css，将两者进行连接，让css上的数据能使div的结构发生变化。在做好了这些之后，就要运用div层来对结构布局，结构布好以后，下面就是用css来对网站的结构进行更细致的美化。CSS的作用的可以改变结构的位置、背景颜色、字体的颜色和粗细等一些效果。
一．引言 1
（一）开发的背景 1
（二）开发的目的 1
（三）开发的工具 1
二．主体设计 1
（一）网站主题确定 1
（二）网站主体布局 1
（三）网站的色调 2
（四）logo的设计思路 2
（五）界面设计 2
三 . 网站的实现 3
（一）DIV和CSS的布局 3
1．首页的div布局和层样式 4
2．子页的div布局和层样式 7
（二）网站的基本功能实现 9
1．首页 9
2．景点 10
3．交通 11
4．资源 12
5．美食 13
6．人文 13
7．关于 14
四. JavaScrip特效的实现 15
五.总结 16
致谢 17
参考文献 17
一．引言
（一）开发的背景
生活在21世纪的当下，互联网已成为人们生活必不可分的一部分，它的诞生让人们的生活多姿多彩。从早期的上街购物到如今的淘宝商城，从早期的电视新闻到如今的网络新闻，亦或是从早期的医院就医到如今的网络就医，都无时无刻的不再发生变化；它的诞生正在慢慢的让人们的生活发生颠覆性的改变。
互联网的快速发展，也在不同的年龄阶级却在悄悄的发生着相同的改变，它的发展正在潜移默化的影响着各行各业。而在互联网行业中，网络旅游行业发展最为快速，由于它查阅方便，操作简单，也符合大众的需求，所以它的快速发展也在意料之中。正是由于其巨大的市场，所以各地的网络旅游平台也在迅速的建立。
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
（二）开发的目的
连云港灌云县，它是个待开发的三线城市，灌云处于江苏的东北部，濒临黄海，气候宜人，是苏北唯一一个有山有水的县城；灌云县内有7做低矮孤山，为古海州属地，历史悠久，环境宜人。随着网络旅游业的发展，各地都在开发地方旅游资源，地方旅游业的发展正在慢慢影响一个城市的发展。也正是趋于这种背景和地方特色之下，渐渐地心里就蒙生了做一个家乡旅游网的愿望，希望可以简单的通过网络旅游这么一个途径，让更多的人来到灌云，到那里做客，感受一下老海州人的风土人情。
（三）开发的工具
制作一个网站，它需要用到的开发工具有两种， 分别是Dreamweaver和Photoshop；Dreamweaver的作用主要是实现站点的建立及页面的添加编辑。一个静态网站的结构大体是图片及文字的结合，在Dreamweaver中让其实现结构调整和图文添加的是css和html。两者只有紧密结合，才能完善一个网站的建设；而另一个软件Photoshop则是一个图片处理器。Photoshop的作用是处理图片和特殊文字，logo的设计就是完全依附于ps的功能。它具有图片美化、裁剪、和拼接等的功效。只有具备两个软件的功能应用，建设一个网站就变得不是那么难。
二．主体设计
（一）网站主题确定
随着信息时代的不断发展，人们的工作、生活也正在悄悄的发生潜移默化的改变，从吃穿用到行，都无时无刻不受其网络带来的影响。正是由于网络的快捷、普遍性，所以在毕业设计建设的过程中，将其主题定性为旅游网站类，不仅是网站传播的速度广，影响力大，也还有一部分是因为本身的专业性。因为家乡是连云港灌云县，所以网站的主题命名为“灌云旅游网”。
（二）网站主体布局
本网站分别有首页、景点、交通、资源、美食、人文、和关于7大板块组成。在每个板块中还有一些子页，都做了仔细的结构排版，对每个板块的内容都做了一些图片和文字的介绍。结构如图2-1所示：
图2-1网站结构图
（三）网站的色调
本网站的名称是旅游网站，即它的颜色搭配肯定以鲜艳青春为主，所以网站的主色调为绿色，洋溢着青春的颜色，辅色调以深绿和棕色为主。因为绿色是生命的颜色，代表着生机勃勃，而棕色也是一种成熟的颜色，让人看起来活泼又不失庄重，青春有多些典雅，配上旅游这个主题也是再合适不过了。
（四）logo的设计思路
网站的logo设置是由2种颜色搭配形成，分别是绿色和红色相结合，因为灌云是一个古城，所以运用红色是想传承起历史的刚性，而中间是“灌云旅游”四个大字，这四个字是采用绿色的色调，以轻松为主，整个logo意在表示灌云是一个外刚内柔，包容万象的标志。效果如图2-2如示：
图2-2 Logo
（五）界面设计
运用Dreamweaver中Div和Css进行结构布局，在编辑html的代码对页面进行布局，使之整体的框架呈现出来。但首先得运用ps设计出网站的大概结构，首页结构的设置以简单为主，给人看起来轻松易懂。最上端是单独的一个logo，醒目显眼，突出主题，而紧挨着logo的是导航，中间的左边的是灌云风光的滚动展示和右边的家乡地理位置的描述。而家乡风俗特色也是用图片形式进行的简单介绍，底部一个就是版权。
网站首页的大体结构如图2-3所示：、
Logo
导航
图片集的展示
简介
图片介绍家乡特色
版权
图2-3 首页布局图
子页是采取比较简单的重复式结构，top是logo，紧挨着下面是导航，中间部分是导航的一个板块的拓展，看起来比较简单明了，最下面还是版权。
如图2-4所示：
Logo
导航
主题介绍
主题介绍
主题介绍
主题介绍
版权
图2-4子页布局图
三 . 网站的实现
做好了基础的准备，下面就是进入主题，制作网站。首先是进入Dreamweaver中，建立一个站点Dreamweaver和css，将两者进行连接，让css上的数据能使div的结构发生变化。在做好了这些之后，就要运用div层来对结构布局，结构布好以后，下面就是用css来对网站的结构进行更细致的美化。CSS的作用的可以改变结构的位置、背景颜色、字体的颜色和粗细等一些效果。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1865.html
