苏城印象水城网站的制作
目录
一、引言 1
（一）课题背景 1
（二）选题意义 1
二、需求分析 1
（一）可行性分析 1
1.需求可行性分析 1
2.技术可行性 1
（二）网站模块分析 2
三、开发工具的选择 2
四、主体设计 3
（一）功能结构图 3
（二）网站LOGO设计 3
（三）网页布局设计 4
1. 一级页面 4
2. 二级页面 4
3. 三级页面 5
五、网站实现 5
（一）一级页面 5
（二）二级页面 6
1. 苏州印象 6
2. 小桥流水 7
3. 湿地风光 9
4. 苏绣天地 10
（三）三级页面 11
1. 登录 11
2. 联系我们 12
（四）Javascript特效的运用 12
1. 图片的滚动 12
2. 首页flash特效 14
总结 16
谢辞 17
参考文献 18
苏城印象——水城苏州网站的制作
一、引言
（一）课题背景
常言道：“上有天堂，下有苏杭。”由此可见苏州自古以来在人们心中的地位可以与天堂相媲美。苏州，水一样的城市，柔美，古典，婉约，有着悠久的历史文化。于是便有了做一个网站来介绍她的想法。近年来，互联网的发展也比较迅速，通过网站来介绍苏州，进而将苏州的美景一步步的展示，吸引更多的游客来苏州观光旅游。
（二）选题意义
从现在互联 *好棒文|www.hbsrm.com +Q: ^351916072*
网的发展来看，越来越多的网站开始倾向于旅游业的运营，比如携程网就是一个非常好的例子，携程网这种旅游网站的成功，也标志着互联网带动旅游业的发展是很迅速的。当然，像携程网这样的例子还有很多很多。通过携程网这个例子得到启发便将自己的家乡苏州也做成网站进行毕业课题的展示，从而让更多人了解苏州，看到苏州的发展和当地特色文化。本课题采用了HTML+CSS布局网站的方法实现了苏州印象——水城苏州网站的建设。
二、需求分析
（一）可行性分析
1.需求可行性分析
随着互联网的不断发展，电脑则成为越来越多的人了解世界所必不可少的工具，而早前兴起的旅游业，它的发展也需要借助于互联网的快速发展。旅游业是一个综合型的业务，它包括“吃”、“住”、“行”、“游”、“购”、“娱”这几个主要方面，选取其中的“吃”、“游”、“娱”三个方面进行对苏州的介绍，即是介绍，也是一种宣传。现在通过互联网的宣传，将苏州的一些景点介绍给更多的网友。苏州是一个非常值得做宣传的城市。虽然网上宣传介绍苏州的网站博客很多，但也想从自身对苏州的感悟出发，一个自己眼里的苏州，展现出来。如果网站中有介绍不清楚或纰漏之处，非常欢迎老师和同学给出批评或建议，这样，才能使得网站办得越来越好。
2.技术可行性
虽然网站没有盈利目的，但是单从欣赏角度来说，网站总体上简洁明了，淡雅自然，所以在网站颜色上偏于淡色系。当然对于苏州城市的相关资料，要在网站建设的前期就要进行相关的策划以及准备，将资料准备好后进行介绍。在网站的制作方面，开发工具主要以HTML+CSS语言为主，Javascript特效为辅，将所学技术运用到网站中去。
（二）网站模块分析
这个部分主要是讲整个网站部分按照模块划分，然后来分析每个模块的需求，具体的分析如图2-1所示。
2-1 模块分析图
三、开发工具的选择
本网站的开发工具主要为EditPlus、 Dreamweaver，以及Photoshop、Javascript。在Dreamweaver和EditPlus中运用HTML、DIV层、CSS样式、来布局整个网站。对于网站中的图片处理，课题主要以Photoshop工具为主，并尽量参考一些像素较高，大小合适的图片，这样在网站中能更加美观清晰。虽然，HTML网站不同于ASP、JSP之类的网站有数据库的支持，但每个网页都是一个独立的页面，简洁明了，便于操作。在Javascript方面，JQery工具包很好发挥了它的作用，用引用JQery的方式将一些动态效果（比如图片的滚动，点击变色等等）独立区分开来，更加利于网站今后的修改和运用，这也是静态网站和动态网站的区别。
四、主体设计
（一）功能结构图
网站主要包括首页、苏州印象、小桥流水、湿地风光、科技苏州、苏绣天地、苏州美食与联系我们几个部分，主要部分都有相应的子页面，运用了大量的图文介绍以及特效，有一定的视觉冲击，具体的功能结构图的设计图4-1所示。
图4-1网站结构图
（二）网站LOGO设计
网站的标志LOGO的设计也是整个网站中比较重要的一个部分，更是点睛之笔。本网站中的LOGO的设计工具主要运用了Photoshop，LOGO主要凸现出课题的含义——苏州。首先用丝带型的设计展现出苏州的古典韵味，其次在字体的设计方面采用毛笔行书和楷书的设计，更加贴合网站的整体色彩风格，加上网站首页的flash效果和各个子页的图片相搭配。LOGO具体图片如图4-2所示。
图4-2 LOGO设计图
（三）网页布局设计
利用DIV+CSS布局网站的整体界面，同时使用JQery代码参与网站设计，引用一些特效，将整个网站所要表现的主题合理地展现在浏览者面前。
1. 一级页面
图4-3为网站的一级页面布局图，即首页布局图。
菜单导航
LOGO
Flash特效
主体内容
Javascript特效
版权信息
图4-3 首页布局图
2. 二级页面
图4-4为网站的二级页面布局图，主要包括苏州印象、小桥流水、联系我们等部分子页面。
菜单导航
LOGO
图片
图4-4 二级页面布局图
3. 三级页面
图4-5为网站三级页面，即湿地风光、苏绣天地等页面布局图。
菜单导航
（二）二级页面
二级页面即图5-2中红色方框所示部分的菜单栏的下拉菜单的页面，本部分又包括了苏州印象、小桥流水、湿地风光、科技苏州、苏绣天地、苏州美食与联系我们几个部分，其中主要介绍四个部分。
图5-3 “小桥流水”效果图
图5-4“同里古镇”效果图
3. 湿地风光
一、引言 1
（一）课题背景 1
（二）选题意义 1
二、需求分析 1
（一）可行性分析 1
1.需求可行性分析 1
2.技术可行性 1
（二）网站模块分析 2
三、开发工具的选择 2
四、主体设计 3
（一）功能结构图 3
（二）网站LOGO设计 3
（三）网页布局设计 4
1. 一级页面 4
2. 二级页面 4
3. 三级页面 5
五、网站实现 5
（一）一级页面 5
（二）二级页面 6
1. 苏州印象 6
2. 小桥流水 7
3. 湿地风光 9
4. 苏绣天地 10
（三）三级页面 11
1. 登录 11
2. 联系我们 12
（四）Javascript特效的运用 12
1. 图片的滚动 12
2. 首页flash特效 14
总结 16
谢辞 17
参考文献 18
苏城印象——水城苏州网站的制作
一、引言
（一）课题背景
常言道：“上有天堂，下有苏杭。”由此可见苏州自古以来在人们心中的地位可以与天堂相媲美。苏州，水一样的城市，柔美，古典，婉约，有着悠久的历史文化。于是便有了做一个网站来介绍她的想法。近年来，互联网的发展也比较迅速，通过网站来介绍苏州，进而将苏州的美景一步步的展示，吸引更多的游客来苏州观光旅游。
（二）选题意义
从现在互联 *好棒文|www.hbsrm.com +Q: ^351916072*
网的发展来看，越来越多的网站开始倾向于旅游业的运营，比如携程网就是一个非常好的例子，携程网这种旅游网站的成功，也标志着互联网带动旅游业的发展是很迅速的。当然，像携程网这样的例子还有很多很多。通过携程网这个例子得到启发便将自己的家乡苏州也做成网站进行毕业课题的展示，从而让更多人了解苏州，看到苏州的发展和当地特色文化。本课题采用了HTML+CSS布局网站的方法实现了苏州印象——水城苏州网站的建设。
二、需求分析
（一）可行性分析
1.需求可行性分析
随着互联网的不断发展，电脑则成为越来越多的人了解世界所必不可少的工具，而早前兴起的旅游业，它的发展也需要借助于互联网的快速发展。旅游业是一个综合型的业务，它包括“吃”、“住”、“行”、“游”、“购”、“娱”这几个主要方面，选取其中的“吃”、“游”、“娱”三个方面进行对苏州的介绍，即是介绍，也是一种宣传。现在通过互联网的宣传，将苏州的一些景点介绍给更多的网友。苏州是一个非常值得做宣传的城市。虽然网上宣传介绍苏州的网站博客很多，但也想从自身对苏州的感悟出发，一个自己眼里的苏州，展现出来。如果网站中有介绍不清楚或纰漏之处，非常欢迎老师和同学给出批评或建议，这样，才能使得网站办得越来越好。
2.技术可行性
虽然网站没有盈利目的，但是单从欣赏角度来说，网站总体上简洁明了，淡雅自然，所以在网站颜色上偏于淡色系。当然对于苏州城市的相关资料，要在网站建设的前期就要进行相关的策划以及准备，将资料准备好后进行介绍。在网站的制作方面，开发工具主要以HTML+CSS语言为主，Javascript特效为辅，将所学技术运用到网站中去。
（二）网站模块分析
这个部分主要是讲整个网站部分按照模块划分，然后来分析每个模块的需求，具体的分析如图2-1所示。
2-1 模块分析图
三、开发工具的选择
本网站的开发工具主要为EditPlus、 Dreamweaver，以及Photoshop、Javascript。在Dreamweaver和EditPlus中运用HTML、DIV层、CSS样式、来布局整个网站。对于网站中的图片处理，课题主要以Photoshop工具为主，并尽量参考一些像素较高，大小合适的图片，这样在网站中能更加美观清晰。虽然，HTML网站不同于ASP、JSP之类的网站有数据库的支持，但每个网页都是一个独立的页面，简洁明了，便于操作。在Javascript方面，JQery工具包很好发挥了它的作用，用引用JQery的方式将一些动态效果（比如图片的滚动，点击变色等等）独立区分开来，更加利于网站今后的修改和运用，这也是静态网站和动态网站的区别。
四、主体设计
（一）功能结构图
网站主要包括首页、苏州印象、小桥流水、湿地风光、科技苏州、苏绣天地、苏州美食与联系我们几个部分，主要部分都有相应的子页面，运用了大量的图文介绍以及特效，有一定的视觉冲击，具体的功能结构图的设计图4-1所示。
图4-1网站结构图
（二）网站LOGO设计
网站的标志LOGO的设计也是整个网站中比较重要的一个部分，更是点睛之笔。本网站中的LOGO的设计工具主要运用了Photoshop，LOGO主要凸现出课题的含义——苏州。首先用丝带型的设计展现出苏州的古典韵味，其次在字体的设计方面采用毛笔行书和楷书的设计，更加贴合网站的整体色彩风格，加上网站首页的flash效果和各个子页的图片相搭配。LOGO具体图片如图4-2所示。
图4-2 LOGO设计图
（三）网页布局设计
利用DIV+CSS布局网站的整体界面，同时使用JQery代码参与网站设计，引用一些特效，将整个网站所要表现的主题合理地展现在浏览者面前。
1. 一级页面
图4-3为网站的一级页面布局图，即首页布局图。
菜单导航
LOGO
Flash特效
主体内容
Javascript特效
版权信息
图4-3 首页布局图
2. 二级页面
图4-4为网站的二级页面布局图，主要包括苏州印象、小桥流水、联系我们等部分子页面。
菜单导航
LOGO
图片
图4-4 二级页面布局图
3. 三级页面
图4-5为网站三级页面，即湿地风光、苏绣天地等页面布局图。
菜单导航
（二）二级页面
二级页面即图5-2中红色方框所示部分的菜单栏的下拉菜单的页面，本部分又包括了苏州印象、小桥流水、湿地风光、科技苏州、苏绣天地、苏州美食与联系我们几个部分，其中主要介绍四个部分。
图5-3 “小桥流水”效果图
图5-4“同里古镇”效果图
3. 湿地风光
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1655.html
