魅力盐城毕业设计
目 录
一、 引言 1
二、 开发工具 1
三、 主体设计 2
（一） 网站开发流程 2
1. 功能结构图 2
2. 界面设计 3
3. DIV+CSS布局 4
4. 首页结构和层样式图： 5
（二） 网站的基本功能 10
1. 首页 10
2. 盐城介绍 11
3. 盐城旅游 11
4. 盐城经济 13
5 盐城资源 14
6. 盐城社会 14
7. 更多内容 16
（三） JavaScript效果 17
（四） Flash动画 20
四、 总结 20
谢词 21
参考文献 21
附录 21
引言
DIV+CSS结构更加清晰，可以使页面的编辑更加清晰明了，杜绝了表格编写的大块内容，使其更加方便操作。于此同时div+css更加符合web网站标准，对于后期的维护与改版起到很方便的作用。因此，本课题采用htmL+div+css的布局方式去实习魅力盐城的网站设计。
盐城的位置非常特殊，处于江苏苏北城市。其面积达1.7万平方公里，人口达721.03万。盐城也拥有非常广阔的海岸线和庞大的海域面积。因此，其优越的地理优势，以及其广大的人力资源，科技极大的推动盐城的发展，无论是现在还是将来，盐城都将拥有惊人的发展潜力。这无疑可以作为外来投资商的首选之地。就目前而言，盐城已经成为韩企集中地，大量的韩资企业选择盐城。盐城也建成了苏北最大的金融业集聚区，加上其便捷的交通。势必将会强有力的推动盐城的经济发展。
目前，盐城已有相当多的景 *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
点对外开发。中华麋鹿苑、盐城自然圈、水街、中华科技馆、盐城海盐历史文化景区等已经成为主要旅游景点。其充满了“湿地之气、仙鹤之韵”，充分展示了海盐文化，其盐城的滩涂面积还在逐年上升，无疑是其优越的自然环境的体现。且盐城目前的环境已经处于前列，这里势必成为一个旅游定居的好去处。
开发工具
魅力盐城设计中，实现盐城的主题介绍、旅游文化、历史文化、盐城经济、盐城资源、盐城社会以及更多了解等模块功能，让国内外人们，了解盐城。结合其他网站宣传，以及人们对浏览介绍宣传类网站的认识，特此设计静态网页，更加方便，直接的让人民了解盐城。
开发工具是建立网站非常重要的部分。在此网站中，采用了Dreamweaver、Flash、Photoshop等。用Dreamweaver进行网页的布局开发，结构规划，用Photoshop将采集到的图片进行加工处理，使图片和网站的布局融合。让整个网站更加美观，利用Flash对网站的部分内容进行动态加工，使其根据具备生动性。在最后的基础上，用JavaScript特性，实现必要的效果显示，以及采用部分CSS3特效，是网站跟家平滑美观。在选择的这些软件中，作用最大的便是Dreamweaver，将Flash做出的动画，Photoshop处理出来的图片等加之其代码编辑，有效的融合在一起，编辑出我们寻常所浏览的网页。
主体设计
网站开发流程
功能结构图
本网站共分为首页、盐城介绍、盐城旅游、盐城经济、盐城资源、盐城社会、更多内容这7大模块。每个模块都是为盐城这一方面做详细的介绍，配合图片，将会为大家呈现多样化的盐城。详细如结构图2-1所示：
图2-1结构图
首页是每个网站的入口，作为第一个给别人浏览的页面，它的编辑尤其讲究。本网站的首页将会给浏览者带来不一样的效果，可以让浏览者尽快的选择自己目前最想访问的内容。
界面设计
每张页面编辑前，都需要一个整体的框架，这就需要Photoshop来完成。这次设计首页的整体框架如图1-2：
登陆
注册
LOGO
图片
导航条
欢迎 天气
内容
内容
内容
内容
图片效果
版权
图3-1首页框架
首页的布局不仅需要内容充足，更加需要简洁。要明确内容确定自己做的是什么网站，还得尽快让浏览者进入你的页面，最快的得到自己最想获得的内容。非常忌讳的就是放入大量图片使网站加载变得非常缓慢，让浏览者失去耐心。
子页框架如图1-3所示：
登陆
注册
LOGO
图片
导航条
欢迎 天气
内容
版权
图4-1子页框架
子页采用的框架和主页差不多。主要是内容部分换成对这个模块的详细介绍，但也不是都一个模板。且会很多子页中加入不同特效会使页面内容更加具有活性，但是整体的布局影响并不大。
DIV+CSS布局
在前期的框架以及素材准备好之后，下面最重要的就是网站的编辑。利用CSS技术尤其是目前最新流行的CSS3技术，不仅可以对页面的布局、字体、颜色、背景的控制轻松实现，更为方便的便是以前需要JavaScript效果才能实现的效果，现在都能轻松实现。CSS的一个重大特点就是可以被多个页面一起调用，这样便可以使相同的效果利用同一个代码来实现，这样不仅有利于舒缓制作者的压力，还可以减轻页面加载的负担。
在HTML页面中，关键便是要建立DIV的内容层，将你所需要展示的内容放在你所建立的每一个DIV中便可以。而改变其布局及属性等我们需要在CSS中。通过CSS，我们将每个DIV放在自己想要的位置，以及改变它所拥有的属性等等。通过CSS的调用，我们就可以制作出美观简洁的网页。
首页结构和层样式图：
图5-1 首页结构
网站的基本功能
首页
首页是所有网站的关键。浏览器需要通过它浏览每个子页。除此之外，它还需要通过部分子页内容的展示使浏览者产生吸引。因此，首页不仅要模块分明，还需要网站制作的清晰美观，内容充实，使所有模块统一结合。
整个页面分为头部、LOGO、导航、主体内容、版权几个部分。大背景为浅灰色。LOGO的设计分三种，蓝色代表着科技未来展现先进的盐城，红色代表历史悠久的盐城，绿色代表旅游胜地盐城，三种样式可以相互切换。利用下拉菜单制作出的导航，将所有子页链接。内容部分有简单的盐城介绍，丰富的盐城社会最新动态，旅游路线咨询，经济介绍以及美食展示。其中美食是用JS做成向左滑动的效果，展示美食的丰富性。具体请看图1-6所示：
一、 引言 1
二、 开发工具 1
三、 主体设计 2
（一） 网站开发流程 2
1. 功能结构图 2
2. 界面设计 3
3. DIV+CSS布局 4
4. 首页结构和层样式图： 5
（二） 网站的基本功能 10
1. 首页 10
2. 盐城介绍 11
3. 盐城旅游 11
4. 盐城经济 13
5 盐城资源 14
6. 盐城社会 14
7. 更多内容 16
（三） JavaScript效果 17
（四） Flash动画 20
四、 总结 20
谢词 21
参考文献 21
附录 21
引言
DIV+CSS结构更加清晰，可以使页面的编辑更加清晰明了，杜绝了表格编写的大块内容，使其更加方便操作。于此同时div+css更加符合web网站标准，对于后期的维护与改版起到很方便的作用。因此，本课题采用htmL+div+css的布局方式去实习魅力盐城的网站设计。
盐城的位置非常特殊，处于江苏苏北城市。其面积达1.7万平方公里，人口达721.03万。盐城也拥有非常广阔的海岸线和庞大的海域面积。因此，其优越的地理优势，以及其广大的人力资源，科技极大的推动盐城的发展，无论是现在还是将来，盐城都将拥有惊人的发展潜力。这无疑可以作为外来投资商的首选之地。就目前而言，盐城已经成为韩企集中地，大量的韩资企业选择盐城。盐城也建成了苏北最大的金融业集聚区，加上其便捷的交通。势必将会强有力的推动盐城的经济发展。
目前，盐城已有相当多的景 *好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
点对外开发。中华麋鹿苑、盐城自然圈、水街、中华科技馆、盐城海盐历史文化景区等已经成为主要旅游景点。其充满了“湿地之气、仙鹤之韵”，充分展示了海盐文化，其盐城的滩涂面积还在逐年上升，无疑是其优越的自然环境的体现。且盐城目前的环境已经处于前列，这里势必成为一个旅游定居的好去处。
开发工具
魅力盐城设计中，实现盐城的主题介绍、旅游文化、历史文化、盐城经济、盐城资源、盐城社会以及更多了解等模块功能，让国内外人们，了解盐城。结合其他网站宣传，以及人们对浏览介绍宣传类网站的认识，特此设计静态网页，更加方便，直接的让人民了解盐城。
开发工具是建立网站非常重要的部分。在此网站中，采用了Dreamweaver、Flash、Photoshop等。用Dreamweaver进行网页的布局开发，结构规划，用Photoshop将采集到的图片进行加工处理，使图片和网站的布局融合。让整个网站更加美观，利用Flash对网站的部分内容进行动态加工，使其根据具备生动性。在最后的基础上，用JavaScript特性，实现必要的效果显示，以及采用部分CSS3特效，是网站跟家平滑美观。在选择的这些软件中，作用最大的便是Dreamweaver，将Flash做出的动画，Photoshop处理出来的图片等加之其代码编辑，有效的融合在一起，编辑出我们寻常所浏览的网页。
主体设计
网站开发流程
功能结构图
本网站共分为首页、盐城介绍、盐城旅游、盐城经济、盐城资源、盐城社会、更多内容这7大模块。每个模块都是为盐城这一方面做详细的介绍，配合图片，将会为大家呈现多样化的盐城。详细如结构图2-1所示：
图2-1结构图
首页是每个网站的入口，作为第一个给别人浏览的页面，它的编辑尤其讲究。本网站的首页将会给浏览者带来不一样的效果，可以让浏览者尽快的选择自己目前最想访问的内容。
界面设计
每张页面编辑前，都需要一个整体的框架，这就需要Photoshop来完成。这次设计首页的整体框架如图1-2：
登陆
注册
LOGO
图片
导航条
欢迎 天气
内容
内容
内容
内容
图片效果
版权
图3-1首页框架
首页的布局不仅需要内容充足，更加需要简洁。要明确内容确定自己做的是什么网站，还得尽快让浏览者进入你的页面，最快的得到自己最想获得的内容。非常忌讳的就是放入大量图片使网站加载变得非常缓慢，让浏览者失去耐心。
子页框架如图1-3所示：
登陆
注册
LOGO
图片
导航条
欢迎 天气
内容
版权
图4-1子页框架
子页采用的框架和主页差不多。主要是内容部分换成对这个模块的详细介绍，但也不是都一个模板。且会很多子页中加入不同特效会使页面内容更加具有活性，但是整体的布局影响并不大。
DIV+CSS布局
在前期的框架以及素材准备好之后，下面最重要的就是网站的编辑。利用CSS技术尤其是目前最新流行的CSS3技术，不仅可以对页面的布局、字体、颜色、背景的控制轻松实现，更为方便的便是以前需要JavaScript效果才能实现的效果，现在都能轻松实现。CSS的一个重大特点就是可以被多个页面一起调用，这样便可以使相同的效果利用同一个代码来实现，这样不仅有利于舒缓制作者的压力，还可以减轻页面加载的负担。
在HTML页面中，关键便是要建立DIV的内容层，将你所需要展示的内容放在你所建立的每一个DIV中便可以。而改变其布局及属性等我们需要在CSS中。通过CSS，我们将每个DIV放在自己想要的位置，以及改变它所拥有的属性等等。通过CSS的调用，我们就可以制作出美观简洁的网页。
首页结构和层样式图：
图5-1 首页结构
网站的基本功能
首页
首页是所有网站的关键。浏览器需要通过它浏览每个子页。除此之外，它还需要通过部分子页内容的展示使浏览者产生吸引。因此，首页不仅要模块分明，还需要网站制作的清晰美观，内容充实，使所有模块统一结合。
整个页面分为头部、LOGO、导航、主体内容、版权几个部分。大背景为浅灰色。LOGO的设计分三种，蓝色代表着科技未来展现先进的盐城，红色代表历史悠久的盐城，绿色代表旅游胜地盐城，三种样式可以相互切换。利用下拉菜单制作出的导航，将所有子页链接。内容部分有简单的盐城介绍，丰富的盐城社会最新动态，旅游路线咨询，经济介绍以及美食展示。其中美食是用JS做成向左滑动的效果，展示美食的丰富性。具体请看图1-6所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1877.html
