目录
一、引言 1
二、需求分析 1
三、开发工具介绍 1
四、主体设计 1
（一）网站开发流程 1
1、功能结构图 1
2、界面设计 2
3、 div+CSS+table布局 4
4、 首页div结构和层样式 4
（二）网站的基本功能 5
1、首页 5
2、淮安简介 6
3、历史发展 7
5、 人文事迹 8
6、 美食特产 9
7、 旅游景点 9
8、 近代足迹 10
（三）JavaScript特效实现 10
（四）Flash动画 12
五、总结 13
致谢 14
参考文献 14
一、引言
随着时代的发展与进步，计算机技术和网络技术正在快速发展，越来越多的人在用计算机，我们的社会我们的生活已经离不开计算机，计算机的发展已经融入了我们的社会。现在的社会离不开计算机网络，如今的人们获取信息的一大半都是从电脑上出现的网站网页内容来得到信息。由于我大学的专业是计算机信息管理，因此这次的毕业设计主题我选择做网站设计。我爱我的家乡，不管它好与坏，经济发不发达，都是养我育我的家乡。因此想到的设计主题便是做自己的家乡，更好地向人们介绍我们家乡的美好，设计并做好了我的家乡淮安网站。
二、需求分析
选择做淮安网站，是为了更好的推广淮安，让更多的人知道淮安，认识淮安，让淮安走出淮安走向全世界。在网上搜到的都是一些零散的信息，为了大家更好的了解信息，这个网站提供了很多信息资源。如今的人们都喜欢旅游，休息期间可以出去放松放松，这个网站正 *景先生毕设|www.jxszl.com +Q: ￥351916072￥ 
好满足人们的需要，淮安有很多旅游景点和名人古迹，美食特产小吃更是数不胜数。绝佳旅游胜地。正是抓住这一重点，开发家乡网站，将淮安推出去，必定引起人们的眼球，有利于淮安的发展。
三、开发工具介绍
淮安网站包括了淮安简介、历史发展、人文事迹、美食特产、旅游景点、近代足迹等模块与功能。自身专业水平与知识有限，因此网站的设计以静态网为主。
做任何一个东西，都需要一定的工具，网站更不例外。我的淮安家乡网站用到了Dreamweaver、PS、Flash、记事本等工具。先利用PS设计好整个网站的构造，然后再切图。利用Dreamweaver来开发网站。利用Flash和JavaScript做网站首页的动态效果。
四、主体设计
（一）网站开发流程
1、功能结构图
网站主要分为首页、淮安简介、历史发展、人文事迹、美食特产、旅游景点、近代足迹等模块。每个模块各有小的模块介绍相应的内容。有图片有文字，让浏览者清晰的知道每个网页的内容。
下图4-1为详细结构图：
4-1网站导航结构图
都说现在是看脸的社会，一个人走出去，大家第一眼看到的肯定是人的脸，网站正如人一样，首页就如人的脸，是给人们第一印象的。因此首页是整个网站最重要的部位。好的首页人们自然而然的就会对这个网站感兴趣，从而点击进去看看网站里面的内容。我的网站首页，简单而又大方，不失单调。淮安简介这一模块主要介绍地理位置、气候条件、人口，让人们对淮安有一个大概的了解。历史发展是通过朝代变迁加上各个朝代地名的变更，更能体现出淮安的历史悠久，这些历史知识对人们都是有好处的。人文事迹介绍的是历史名人和名人事迹，这些历史悠久更可以体现出我们淮安的历史文化的悠久，通过名人的知名度提高淮安的知名度。旅游景点主要是介绍 淮安的特色旅游景点，数名人景点居多。这三个模块相辅相成，大大的提高淮安的名气，吸引人们的眼球，勾起他们想要了解的欲望。美食特产是介绍淮安的特色小吃和经典名菜，看得你口水直流，收都收不回来，如果有机会吃到，保证你们连连竖起大拇指赞不绝口。
2、界面设计
整个网站是用div+CSS+table来完成的。内容是用HTML代码来实现。首页的设计是用PS设计。
首页结构图4-2如下：
导航

标头图片

背景
Flash图片
淮安简要介绍
相关知识链接
背景


滚动图片



版权


4-2首页结构图
首页以简单大方为主。给浏览者清晰的感觉。以往在学校做的网站导航都是靠右或者居中，这次的导航我选择放在左上角，没有选择logo是因为一个大的城市，logo是最重要的，设计的不好有损淮安的形象，所以为了好看加了一个标头图片。网页的两边我也添加了背景，使整个网站简单又不失单调。相关知识链接这块我链接的是淮安简介而不是对应的网页内容，因为这样会造成重复，而且一个网站最吸引浏览者来浏览的是网站的首页和网站的内容。滚动图片是淮安有名的照片，我模仿其他网站的特色，我觉得好看，所以就学着做了，可以供浏览者观赏。
以下是子页结构图4-3：
导航

标头图片

图片
主要内容

版权

4-3子页结构图
子页设计的简单但不单调。包括导航和标头图片。图片是相关子页的照片，旁边的内容是对图片的介绍。可以让浏览者清晰的明白网页的内容是什么。
正常的导航一般都是放在中间或者右边，打破以往风格，别具一番滋味，导航背景色选择的是墨绿色，清颖脱俗，符合家乡网站这个风格，字体颜色选择的是白色，更清晰的感觉。
div+CSS+table布局
Div+CSS是网页设计标准，是一种网页的布局方法。传统的方式。Table是表格属性，是把网页里面内容弄成表格形式，适合小的内容。在Dreamweaver中需要用div来对整个网页进行布局。CSS样式表是对div的进一步美化，可以设置字体大小，颜色，背景等等。CSS主要是应用于重复的代码，这样省力并达到效果。CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。便于维护，有利网页打开速度更快，符合web标准。
首页div结构和层样式
具体div结构如图4-4所示：


4-4首页div结构图
下面是子页结构图4-5：


4-5子页结构图
近代足迹
描述淮安近代在经济、文化和军事上的发展。这模块也是采用纯文本的方式介绍近代相关事情。
如下图4-16：
4-16近代足迹效果图
（三）JavaScript特效实现
实现3张图片滚动，图片滚动的方向是从左往右。这种特效使网页呈现动态效果，使浏览者可以欣赏到美丽的淮安景色。

原文链接：http://www.jxszl.com/jsj/rjgc/30995.html