水韵”网站开发
目录
引言
苏州，是一座拥有着古老历史且坐落于江苏省南部的美丽城市。它历史悠久，且在国内有很高的声誉，“上有天堂，下有苏杭”这句话便有力地验证了这一点。
但是随着经济的进步，人类生活水平的提高，物质文化生活的追求迫使人们去追求更大的利润，也逐渐忽略了我们悠久古城的历史文化，我们生活在紧张而又繁忙的生活节奏中，逐渐忘记了去发现苏州这座古城的历史与它的魅力。另外由于经济进步了，社会也不断发展进步了，也带动了苏州的旅游业、小吃业等特色行业的大力发展。对于现在社会来言，人们不再局限于平时的日常生活了，而是更多地喜欢利用节假日时间出去旅游，于是对于推动苏州经济的发展，积极响应国家政府的号召而已，宣传苏州东吴文化、宣传苏州旅游业、小吃业等带来一定的好处。结合这样的一个社会大背景，我决定努力开发一款静态网站，主要希望借助于这个平台来宣传苏州东吴文化，宣传苏州的特色旅游业，宣传苏州的小吃、美食业信息，宣传东吴文化如戏剧、绘画、昆曲、弹唱等信息。希望借助于这个平台，可以吸引更多的人关注苏州悠久的历史文化，保护苏州的文化遗产，同时也可以带动苏州的旅游业、特色小吃产业等经济的发展。
一、课程开发工具
（一）课题的开发工具及技术
1、Dreamweaver介绍
Adobe Dreamweaver是一款网页编辑软件，支持所见即所得的开发模式，也就是说特别适合设计师使用,该编辑器有MacroMedia公司开发后卖给了Adobe公司并且交由Adobe公司继续担任开发工作。
DW有很强大的功能，除了网页排版开发等功能外，还带有网站的管理功能包括FTP等功能，同时它还能给移动设备如Android和IOS构建应用程序,所以说DW是一款非常强大的IDE。
DW在交由Adobe开发之后， *好棒文|www.hbsrm.com +Q: ￥351916072￥
展现出了异常强大的创新力，不光光在软件的基本功能上，同时还与时俱进的支持了市面上大多数的技术包括JQuery、PhoneGap、CSS3、Spry等Javascript框架，同时还与强大的Adobe系列软件有了更强的通信与交互，充分利用了Adobe的资源。
2、CSS3技术介绍?
CSS3是CSS技术的进化版，其实就是层叠样式表，是一款可以在制作网页的时候会用到的一款可以对网页布局、字体颜色等等进行更加精细的制作的样式技术。
3、JQuery技术
Query是一套JavaScript库，把HTML和JavaScript简化了，它还是一个可以兼容CSS3和各种浏览器的小型的js库。JQuery拥有着塔特有的便利的设计语法，是一款可以让设计师免费开发特效的技术。它还可以让设计师制作出特效厉害的动网和静网。
二、网站的规划
（一）网站主旨
本网站围绕江苏苏州这个中心，从地理、历史、位置、经济、文化、美食等方面着手，来为大家展示苏州。开发设计采用DIV+CSS进行网页页面布局；图片特效使用jQuery技术等设计网页动画效果。力求为用户设计一款页面美观、大方、操作使用、可以宣传苏州东吴文化的静态网站。
（二）网站内容
1、网站整体结构
根据用户需求，设计了以下功能点：苏州东吴文化介绍主要由苏州概括、经济、风俗、文化、特色几个模块组成，其中东吴主要介绍苏州名胜、苏州各景点信息，介绍主要为介绍苏州简介信息；概括方面主要从地理、历史、风景等方面全方位介绍苏州；经济方面主要通过经济、社会、交通三个方面详细分析苏州地貌；另外通过宗教、方言两方面介绍苏州风俗；而文化方面则通过戏剧、绘画、昆曲、评弹、苏绣、太湖、吴文化等展示苏州文化；并以特产、景点、美食、节日等介绍苏州特色，采用先进的前端页面开发技术，如html5、css3等技术，对页面图片利用JQuery技术实现动态效果。
整个网站的大体结构图如下：
图1网站框架图
2、网站的基本功能
水韵苏州宣传网，通过清新大气的界面设计，以及穿插的一些JQuery插件和html5特效，打造一个清晰、让用户感觉很舒服的介绍苏州的网站。为用户提供苏州的详细信息，使用户可以清晰地看到自己想要了解的关于苏州的内容，从而更详细更深入地了解苏州的文化。
三、网站的设计
（一）导航设计
导航可以说是一个网站的核心，它直观的看到整个网页的内容，包括了首页、概括、经济、水韵苏州、风俗、文化、特色等，这些便是组织成整个网站的要素。导航条设计为蓝色其寓意是蓝色的天空，更能凸显出是一个旅游网站，一个旅游网站与很多都存在这挂勾，比如说旅游需要经济的支撑，还有就是交通，没有如今的交通便利，不会这么大力发展旅游业，旅游业是消费者的天堂，所以设计蓝色的导航十分切合当前的网站核心，图片如下图2、 图3。
图2网站导航图
图3网站导航图
导航条设计代码如下：
导航条使用了二级菜单，如图2所示，鼠标移动到每个栏目上都能看到子栏目，并且设计了鼠标经过时导航文字变色的效果，如图3所示。
（二）首页的设计
首页的内容是其他多个子页内容的整合，采用了清新大气的宽屏板式，内容布局选择了经典的框字形结构，简单明了，这样更容易吸引用户的眼球，之所以首页会设计成这样，是想让用户可以一下子就对苏州这座城市有一个简单的了解。
首页结构参考图如下：
图4首页整体框架图
首页，就等于是一个网站的门面，首页上的内容肯定是要字视觉上给人一种很舒服的感觉，这样才能吸引用户继续浏览页面。本网站的首页的布局并没有很复杂繁琐，更多的是图片展示，首当其冲的便是一个幻灯片样式的滚动图片，个人认为这种样式的图片能给用户一种视觉上的冲击，当然，本人是很喜欢这种样式的滚动图片的，接下来是一个名胜一览的板块，放了几张苏州名胜的图，并且做了一个鼠标移上去就出现文字窗的特效，使得用户能够快速地了解这个名胜的一些信息，然后是一个选项卡的效果，可以让用户在三种介绍里切换浏览，给用户一种焕然一新的感觉，从而对本网站有一个大致的了解。导航条采用了二级菜单，用户将鼠标移动到一个栏目的时候，紧接着就出现了这个栏目的子栏目，这样更能使用户一下就看到网站的所有子栏目，根据自己的喜好来点击相应的栏目，从而节约用户的时间。
如下图5所示：
图5网站首页效果图
首页导航条下放置了一个大屏图片展示，首页也基本上都是图片填充的内容，个人觉得首页还是给人一种清爽的感觉比较好，从网上找了许多图片的特效，最后选定了这个，用户可以通过鼠标点击蓝色的左右翻页按钮来观看图片，运用了function函数来形成一个图片自动播放的效果，这是网上找的一个JQuery插件，如下图6所示。
图6 首页大屏图片效果图
相关特效代码如下：
$(window).load(function() {
$(.slider)._TMS({
font-size: 16.8px;
line-height: 22.8px;
引言
苏州，是一座拥有着古老历史且坐落于江苏省南部的美丽城市。它历史悠久，且在国内有很高的声誉，“上有天堂，下有苏杭”这句话便有力地验证了这一点。
但是随着经济的进步，人类生活水平的提高，物质文化生活的追求迫使人们去追求更大的利润，也逐渐忽略了我们悠久古城的历史文化，我们生活在紧张而又繁忙的生活节奏中，逐渐忘记了去发现苏州这座古城的历史与它的魅力。另外由于经济进步了，社会也不断发展进步了，也带动了苏州的旅游业、小吃业等特色行业的大力发展。对于现在社会来言，人们不再局限于平时的日常生活了，而是更多地喜欢利用节假日时间出去旅游，于是对于推动苏州经济的发展，积极响应国家政府的号召而已，宣传苏州东吴文化、宣传苏州旅游业、小吃业等带来一定的好处。结合这样的一个社会大背景，我决定努力开发一款静态网站，主要希望借助于这个平台来宣传苏州东吴文化，宣传苏州的特色旅游业，宣传苏州的小吃、美食业信息，宣传东吴文化如戏剧、绘画、昆曲、弹唱等信息。希望借助于这个平台，可以吸引更多的人关注苏州悠久的历史文化，保护苏州的文化遗产，同时也可以带动苏州的旅游业、特色小吃产业等经济的发展。
一、课程开发工具
（一）课题的开发工具及技术
1、Dreamweaver介绍
Adobe Dreamweaver是一款网页编辑软件，支持所见即所得的开发模式，也就是说特别适合设计师使用,该编辑器有MacroMedia公司开发后卖给了Adobe公司并且交由Adobe公司继续担任开发工作。
DW有很强大的功能，除了网页排版开发等功能外，还带有网站的管理功能包括FTP等功能，同时它还能给移动设备如Android和IOS构建应用程序,所以说DW是一款非常强大的IDE。
DW在交由Adobe开发之后， *好棒文|www.hbsrm.com +Q: ￥351916072￥
展现出了异常强大的创新力，不光光在软件的基本功能上，同时还与时俱进的支持了市面上大多数的技术包括JQuery、PhoneGap、CSS3、Spry等Javascript框架，同时还与强大的Adobe系列软件有了更强的通信与交互，充分利用了Adobe的资源。
2、CSS3技术介绍?
CSS3是CSS技术的进化版，其实就是层叠样式表，是一款可以在制作网页的时候会用到的一款可以对网页布局、字体颜色等等进行更加精细的制作的样式技术。
3、JQuery技术
Query是一套JavaScript库，把HTML和JavaScript简化了，它还是一个可以兼容CSS3和各种浏览器的小型的js库。JQuery拥有着塔特有的便利的设计语法，是一款可以让设计师免费开发特效的技术。它还可以让设计师制作出特效厉害的动网和静网。
二、网站的规划
（一）网站主旨
本网站围绕江苏苏州这个中心，从地理、历史、位置、经济、文化、美食等方面着手，来为大家展示苏州。开发设计采用DIV+CSS进行网页页面布局；图片特效使用jQuery技术等设计网页动画效果。力求为用户设计一款页面美观、大方、操作使用、可以宣传苏州东吴文化的静态网站。
（二）网站内容
1、网站整体结构
根据用户需求，设计了以下功能点：苏州东吴文化介绍主要由苏州概括、经济、风俗、文化、特色几个模块组成，其中东吴主要介绍苏州名胜、苏州各景点信息，介绍主要为介绍苏州简介信息；概括方面主要从地理、历史、风景等方面全方位介绍苏州；经济方面主要通过经济、社会、交通三个方面详细分析苏州地貌；另外通过宗教、方言两方面介绍苏州风俗；而文化方面则通过戏剧、绘画、昆曲、评弹、苏绣、太湖、吴文化等展示苏州文化；并以特产、景点、美食、节日等介绍苏州特色，采用先进的前端页面开发技术，如html5、css3等技术，对页面图片利用JQuery技术实现动态效果。
整个网站的大体结构图如下：
图1网站框架图
2、网站的基本功能
水韵苏州宣传网，通过清新大气的界面设计，以及穿插的一些JQuery插件和html5特效，打造一个清晰、让用户感觉很舒服的介绍苏州的网站。为用户提供苏州的详细信息，使用户可以清晰地看到自己想要了解的关于苏州的内容，从而更详细更深入地了解苏州的文化。
三、网站的设计
（一）导航设计
导航可以说是一个网站的核心，它直观的看到整个网页的内容，包括了首页、概括、经济、水韵苏州、风俗、文化、特色等，这些便是组织成整个网站的要素。导航条设计为蓝色其寓意是蓝色的天空，更能凸显出是一个旅游网站，一个旅游网站与很多都存在这挂勾，比如说旅游需要经济的支撑，还有就是交通，没有如今的交通便利，不会这么大力发展旅游业，旅游业是消费者的天堂，所以设计蓝色的导航十分切合当前的网站核心，图片如下图2、 图3。
图2网站导航图
图3网站导航图
导航条设计代码如下：
导航条使用了二级菜单，如图2所示，鼠标移动到每个栏目上都能看到子栏目，并且设计了鼠标经过时导航文字变色的效果，如图3所示。
（二）首页的设计
首页的内容是其他多个子页内容的整合，采用了清新大气的宽屏板式，内容布局选择了经典的框字形结构，简单明了，这样更容易吸引用户的眼球，之所以首页会设计成这样，是想让用户可以一下子就对苏州这座城市有一个简单的了解。
首页结构参考图如下：
图4首页整体框架图
首页，就等于是一个网站的门面，首页上的内容肯定是要字视觉上给人一种很舒服的感觉，这样才能吸引用户继续浏览页面。本网站的首页的布局并没有很复杂繁琐，更多的是图片展示，首当其冲的便是一个幻灯片样式的滚动图片，个人认为这种样式的图片能给用户一种视觉上的冲击，当然，本人是很喜欢这种样式的滚动图片的，接下来是一个名胜一览的板块，放了几张苏州名胜的图，并且做了一个鼠标移上去就出现文字窗的特效，使得用户能够快速地了解这个名胜的一些信息，然后是一个选项卡的效果，可以让用户在三种介绍里切换浏览，给用户一种焕然一新的感觉，从而对本网站有一个大致的了解。导航条采用了二级菜单，用户将鼠标移动到一个栏目的时候，紧接着就出现了这个栏目的子栏目，这样更能使用户一下就看到网站的所有子栏目，根据自己的喜好来点击相应的栏目，从而节约用户的时间。
如下图5所示：
图5网站首页效果图
首页导航条下放置了一个大屏图片展示，首页也基本上都是图片填充的内容，个人觉得首页还是给人一种清爽的感觉比较好，从网上找了许多图片的特效，最后选定了这个，用户可以通过鼠标点击蓝色的左右翻页按钮来观看图片，运用了function函数来形成一个图片自动播放的效果，这是网上找的一个JQuery插件，如下图6所示。
图6 首页大屏图片效果图
相关特效代码如下：
$(window).load(function() {
$(.slider)._TMS({
font-size: 16.8px;
line-height: 22.8px;
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1773.html
