宿迁旅游”网站的设计与实现
目 录
一、 引言 1
二、 开发工具及开发技术简介 1
（一）开发技术 1
1.DIV 1
2.CSS样式 1
3.JavaScrip脚本语言 1
4.jQuery技术 1
（二）工具简介 1
1.Dreamweaver网页制作软件 1
2.Photoshop图片处理软件 2
三、 网站需求分析 2
（一）网站栏目结构 2
（二）网站规划 2
（三）开发平台及其所需的运行环境 2
四、 网站总体设计 3
（一）首页设计 3
1.首页页面结构设计 3
2.首页效果展示 3
（二）子页设计 4
1.景区导游模块 4
3.两湖风光模块 6
4.民俗风情模块 7
5.访客留言模块 7
6.关于我们模块 8
（三）网页中的特效 8
1.首页中百度链接的浮动制作 8
2.相册特效 9
3.文字滚动特效 11
4.图片横向切换特效 11
5. 二级菜单特效 12
五、总结 14
致 谢 15
参考文献 16
引言
随着二十一世纪新兴科技的飞速发展，人类使用和获取信息的方式正在进行着不断的变革。就模具前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的需求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需求。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
了解是假的的眼界，缩进了人与人之间的距离，这就更容易的使我们走上了信息化的道路。
报告称2015年中国网民的数量将超过8亿人，这将是一个非常庞大的人数。许多人在需要查询信息时，第一个想到的便是上网。网站的迷人之处在于集合多方面的信息，通过不同的变现方式让人们获取信息。无可置疑，网站已经成为人们获取信息最有效的方式。随着网站的发展，出现大量各类网站，个人网站也成为一种时尚，越来越多的人希望拥有自己的网站，制作出带有自己风格的网站来展示自己的才华。
开发工具及开发技术简介
（一）开发技术
1.DIV
DIV是html语言的一个标记， 多用于替代
标记来进行页面布局，内可以嵌入任何html标记.DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
2.CSS样式
层叠样式表（英文：Cascading Style Sheets，缩写CSS），又称串样式列表，通常又称为“风格样式表（Style Sheet）”。CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
3.JavaScrip脚本语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。它使网页变得更加灵活，很好的补助与网页实现各种功能和穿插。JavaScript可以方便地操纵各种浏览器的对象，可以使用JavaScript来控制浏览器的外观，状态甚至运行方式，可以根据用户的需要“定制”浏览器，从而使网页更加友好。
4.jQuery技术
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
（二）工具简介
1.Dreamweaver网页制作软件
Dreamweaver是集网页制作和网站管理于一身的可视化编辑器。使用它可以很容易的创建不同平台，不同浏览器的界面。Dreamweaver的制作效率很高，它可以快速的将不同素材放到页面中，Dreamweaver是唯一含有视觉化编辑与原始码编辑同步的设计工具。Dreamweaver还集成了程序开发语言，对多种技术都是完全支持的。
2.Photoshop图片处理软件
Photoshop专注于图像处理而不是图形创作，它是当下最流行的图像处理编辑软件。在平面设计、广告摄影、影像创作、网页制作、后期修饰、界面设计、视觉创意等领域中都被广泛的应用。它把图片处理变得更加简洁、方便，并且可以把不同的图片组合在一起使之发生变化，为设计爱好者提供广阔发挥空间。
网站需求分析
此毕业设计课题是旅游网站，人们可以通过这个网站来了解宿迁的旅游景点、乡情民俗、可以快速找到自己的目的地。做这个网站主要是想把宿迁的旅游项目推广出去，通过走访和查询资料得到更多的旅游信息，来给浏览者给予最大的帮助。
网站的建设不仅要考虑到网站本身的美观、创新，更重要的是考虑到浏览者的需求与浏览的方便性，为了收录更多的旅游信息，这就需要有一个明确的导航条和网站设计，让用户找到自己需要的，在遇到问题时能得到帮助，知道怎么做。
（一）网站栏目结构
网站包括：首页、景区导游、景区概况、两湖风光、民俗风情、访客留言、关于我们等相关信息，如图3-1所示。
图3-1网站栏目结构图
（二）网站规划
制作静态网站，首先是对网页模板的设计，利用所学的知识把前台部分做到美观、简洁。并且利用各种技术，加入不同的特效，把网页的页面做的更有特色。
（三）开发平台及其所需的运行环境
硬件平台：
CPU：主频双核2.1g赫兹
内存：1g或以上
软件平台：
操作系统：win xp、win7/8
浏览器：谷歌、搜狗
分辨率：1024*768
网站总体设计
（一）首页设计
首页设计是整个网站中比较重要的一部分，是人们浏览的第一印象，首页设计的好与坏决定了人们对整个网站的评价。本网站的首页运用色彩的搭配，网站的主色调为蓝色，蓝色是大海的颜色，可以给人们带来带来接近自然的感觉。在导航的右下方是文章推荐，最右下面部分是两湖照片的一个链接，并且在页面中加入了一个百度logo链接，运用了JavaScript特效。
1.首页页面结构设计
首页的整体布局以简单大方为原则，采用上中下的格式布局，给浏览者以清新明了的感觉，网站的背景色为蓝色，给人清新感觉。页面中部是一个背景照片，正好承接导航的设计，让浏览者看起来网站更加自然。页面的右面部分是文字和图片相结合的方式，带你了解宿迁的与众不同，如图4-1所示。
图4-8 访客留言页面
6.关于我们模块
一、 引言 1
二、 开发工具及开发技术简介 1
（一）开发技术 1
1.DIV 1
2.CSS样式 1
3.JavaScrip脚本语言 1
4.jQuery技术 1
（二）工具简介 1
1.Dreamweaver网页制作软件 1
2.Photoshop图片处理软件 2
三、 网站需求分析 2
（一）网站栏目结构 2
（二）网站规划 2
（三）开发平台及其所需的运行环境 2
四、 网站总体设计 3
（一）首页设计 3
1.首页页面结构设计 3
2.首页效果展示 3
（二）子页设计 4
1.景区导游模块 4
3.两湖风光模块 6
4.民俗风情模块 7
5.访客留言模块 7
6.关于我们模块 8
（三）网页中的特效 8
1.首页中百度链接的浮动制作 8
2.相册特效 9
3.文字滚动特效 11
4.图片横向切换特效 11
5. 二级菜单特效 12
五、总结 14
致 谢 15
参考文献 16
引言
随着二十一世纪新兴科技的飞速发展，人类使用和获取信息的方式正在进行着不断的变革。就模具前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的需求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需求。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
了解是假的的眼界，缩进了人与人之间的距离，这就更容易的使我们走上了信息化的道路。
报告称2015年中国网民的数量将超过8亿人，这将是一个非常庞大的人数。许多人在需要查询信息时，第一个想到的便是上网。网站的迷人之处在于集合多方面的信息，通过不同的变现方式让人们获取信息。无可置疑，网站已经成为人们获取信息最有效的方式。随着网站的发展，出现大量各类网站，个人网站也成为一种时尚，越来越多的人希望拥有自己的网站，制作出带有自己风格的网站来展示自己的才华。
开发工具及开发技术简介
（一）开发技术
1.DIV
DIV是html语言的一个标记， 多用于替代
2.CSS样式
层叠样式表（英文：Cascading Style Sheets，缩写CSS），又称串样式列表，通常又称为“风格样式表（Style Sheet）”。CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
3.JavaScrip脚本语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。它使网页变得更加灵活，很好的补助与网页实现各种功能和穿插。JavaScript可以方便地操纵各种浏览器的对象，可以使用JavaScript来控制浏览器的外观，状态甚至运行方式，可以根据用户的需要“定制”浏览器，从而使网页更加友好。
4.jQuery技术
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
（二）工具简介
1.Dreamweaver网页制作软件
Dreamweaver是集网页制作和网站管理于一身的可视化编辑器。使用它可以很容易的创建不同平台，不同浏览器的界面。Dreamweaver的制作效率很高，它可以快速的将不同素材放到页面中，Dreamweaver是唯一含有视觉化编辑与原始码编辑同步的设计工具。Dreamweaver还集成了程序开发语言，对多种技术都是完全支持的。
2.Photoshop图片处理软件
Photoshop专注于图像处理而不是图形创作，它是当下最流行的图像处理编辑软件。在平面设计、广告摄影、影像创作、网页制作、后期修饰、界面设计、视觉创意等领域中都被广泛的应用。它把图片处理变得更加简洁、方便，并且可以把不同的图片组合在一起使之发生变化，为设计爱好者提供广阔发挥空间。
网站需求分析
此毕业设计课题是旅游网站，人们可以通过这个网站来了解宿迁的旅游景点、乡情民俗、可以快速找到自己的目的地。做这个网站主要是想把宿迁的旅游项目推广出去，通过走访和查询资料得到更多的旅游信息，来给浏览者给予最大的帮助。
网站的建设不仅要考虑到网站本身的美观、创新，更重要的是考虑到浏览者的需求与浏览的方便性，为了收录更多的旅游信息，这就需要有一个明确的导航条和网站设计，让用户找到自己需要的，在遇到问题时能得到帮助，知道怎么做。
（一）网站栏目结构
网站包括：首页、景区导游、景区概况、两湖风光、民俗风情、访客留言、关于我们等相关信息，如图3-1所示。
图3-1网站栏目结构图
（二）网站规划
制作静态网站，首先是对网页模板的设计，利用所学的知识把前台部分做到美观、简洁。并且利用各种技术，加入不同的特效，把网页的页面做的更有特色。
（三）开发平台及其所需的运行环境
硬件平台：
CPU：主频双核2.1g赫兹
内存：1g或以上
软件平台：
操作系统：win xp、win7/8
浏览器：谷歌、搜狗
分辨率：1024*768
网站总体设计
（一）首页设计
首页设计是整个网站中比较重要的一部分，是人们浏览的第一印象，首页设计的好与坏决定了人们对整个网站的评价。本网站的首页运用色彩的搭配，网站的主色调为蓝色，蓝色是大海的颜色，可以给人们带来带来接近自然的感觉。在导航的右下方是文章推荐，最右下面部分是两湖照片的一个链接，并且在页面中加入了一个百度logo链接，运用了JavaScript特效。
1.首页页面结构设计
首页的整体布局以简单大方为原则，采用上中下的格式布局，给浏览者以清新明了的感觉，网站的背景色为蓝色，给人清新感觉。页面中部是一个背景照片，正好承接导航的设计，让浏览者看起来网站更加自然。页面的右面部分是文字和图片相结合的方式，带你了解宿迁的与众不同，如图4-1所示。
图4-8 访客留言页面
6.关于我们模块
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1576.html
