魅力南京网站的设计与实现
目录
一、 引言 1
二、 需求分析 1
三、 开发工具的选择 1
四、 主体设计 1
（一）网站开发过程 1
1.网站结构功能图 1
2.界面设计 2
3.DIV与CSS的布局 3
4.首页DIV的网站布局 4
5.子页DIV的网站布局和CSS样式表 5
（二）网站基本功能 6
1.首页 6
2.南京城介绍 7
3.南京旅游 8
4.发展南京 8
5.投资南京 9
6.南京快讯 10
（三）JavaScript的效果实现 10
1.图片滚动 10
2.图片切换 11
五、总结 12
致谢 13
参考文献 13
附录一: 14
附录二: 17
一、 引言
现在城市飞速发展的时代，其他传统传媒落后，用户不能时时了解城市发展动向，在信息时效性短的形势下，城市网站把网络技术和信息传递之间，进行完美结合。城市文化网站突破时间限制，解决信息保存时间短的缺点，方便用户时时查看南京资讯，了解城市发展动态，提早为自己后面生活做出计划。节约了用户查询信息的时间，方便用户对新旧信息的了解，以及方便用户对出行，旅游等方面选择。因此城市网站可以介入用户的生活，这是种不用花费金钱或者时间就能免费得到的信息，便捷出行，方便生活。
二、 需求分析
传统传媒宣传方式，人们只能通过报纸、或者他人口述了解发生的新闻，但是这种方式传递信息不准确，信息时效性低下。然后互联网将信息电子化，数据化传送，这样一方面可以减 *好棒文|www.hbsrm.com +Q: *351916072*
少大量的财力，人力，物理，降低成本。另一方便打破了时空的限制，使得信息的交换随时随地可以进行，所以信息的时效性被大大提高。南京城市网站能使外市的人都能够清楚的了解到城市状态，这样使得南京美好的城市形象向外扩散，吸引劳动力、游客进入，同时也能增强本市人的归属感和荣誉感，从而一定程度上促进了城市的发展。南京城市网站中，实现了南京历史、南京旅游、南京发展、南京咨询等模块的功能，能让用户详细了解南京城的发展动态，同时也方便了市民周末游玩，游客来宁旅游。经过详细的城市资料调查后，结合当今的南京城市网站来设计《魅力南京网站》的静态网站。
三、 开发工具的选择
开发用具对于网站设计也是很重要的一部分，魅力南京网站用到了Dreamwearer8、Photoshop CS6等软件。利用Photoshop美化图片、制作logo的功能对网页的美观有极大的提升，同时加上简单的JavaScript的特效。其中最重要的就是Dreamweaver,它是在城市网页设计使用最多，使用DIV+CSS精简源代码，使网页打开速度更快。同时也使用JavaScript的if语句对图片切换进行设置。Dreamweaver把城市网页设计、开发和站点管理等于一体， 可以更好的对城市网站的设计与维护。
四、 主体设计
（一）网站开发过程
1.网站结构功能图
魅力南京网站结构功能图如图4-1所示。
图4-1网站详细结构图
首先网站的首页是是用户第一个观察的网页，因此南京城市网站首页信息明确，直接显示出用户希望的信息选项，从而选择自己喜欢的，想要了解的专栏。城市介绍模块中包括城市历史、城市人口、行政划分、市树市花；南京旅游模块中有旅游景点、美食小吃、旅游路线等；发展南京模块是让浏览者知道经济年南京发展状态；投资南京模块中让浏览者知道南京投资的优势；南京资讯是让浏览者时时知道南京发生的大事小事。
2.界面设计
利用DIV+CSS布局，添加html的代码设计出整个框架并且设置CSS的border属性让边框显示出来在进行布局。界面分为顶部，中部顶部三个部分；顶部主要包含登录、导航和logo，中部主要为主要内容，底部版权。主要具体分析如4-2图所示
图4-2 网站首页框架图
首页布局必须要简洁明了，要让浏览者一看就能明白首页传达的信息，进而进行深一步的了解。首页放上时时天气能提醒浏览者是否要带伞，给人一种贴心的感觉。同时首页加入宣传南京的水墨Flash能给人耳目一醒的感觉，立马吸引浏览者的眼球。同时下方图片不停滚动播放南京美丽景色的图片供游客观赏。
图4-3子页框架图
子页布局采取普通的层样，顶部的登录、天气、logo、导航条沿用的首页。二级导航采用斜放式，与首页不同，给人眼前一亮的感觉。利用简单的布局会让别人轻松接受网站信息，能被大众所喜欢。具体框架图如图4-3所示
3.DIV与CSS的布局
做好前期基础框架的工作后，后面便开始了网站的制作环节，首先利用DIV在html中采取层套层样式进行布局并且命名ID，利用DIV+CSS把网页的内容与格式分离，在DIV中主要添加内容，在CSS对内容进行格式上的美化与设计，这样减少代码的量，减少出错。
4.首页DIV的网站布局
南京城市网站首页DIV布局如图4-4所示：
图4-4
首页div结构如下，具体div代码见附录二：
首页CSS样式具体代码见附录一：
5.子页DIV的网站布局和CSS样式表
南京城市网站子页DIV布局如图4-5所示
图4-5子页DIV布局
子页的重要CSS样式表如下，具体代码见附录二：
（二）网站基本功能
魅力南京主要分为:
首页：用Flash、文字和图片显示网页。
城市介绍：用图片加文字来介绍城市历史和文化。
旅游景点：用图片加文字来介绍城市旅游景点和路线。
发展南京：用文字和数据来介绍南京发展历程。
投资南京：用文字和图表介绍南京投资方式。
城市快讯：用文字来分享南京城市资讯。
1.首页
浏览者对首页的第一印象很重要，决定着大众对网页的好坏的判断。所以说要对首页的设计特别重视。首页被当一个载体，通过城市网的首页能链接其他网站的页面实现它的功能，在首页中，多数前台城市网页的功能模块都能实现出来，如：城市风景，南京咨询和政府新闻等。首页相当于网站的敲门砖，为吸引游客，那就在设计上有自己独特的见解,要把南京城市的形象和网站的形象相结合起来，这样才能让游客和市民更加详细的了解南京城。
图4-11 投资南子页
投资南京主要包括投资政策、投资程序、专业园区三个模块，主要是介绍南京在投资方面的详细内容。投资政策主要是让投资者了解投资政策，并且随后调整投资方式。投资程序主要是让新的投资方了解南京投资程序，为投资提供便利介绍错误。专业园区主要让投资者了解南京工业分布情况，根据自己情况选择投资位置。投资南京子页用了IDV+CSS层套层的样式结构，简洁清晰的把投资南京内容显示出来。具体如图4-11所示：
一、 引言 1
二、 需求分析 1
三、 开发工具的选择 1
四、 主体设计 1
（一）网站开发过程 1
1.网站结构功能图 1
2.界面设计 2
3.DIV与CSS的布局 3
4.首页DIV的网站布局 4
5.子页DIV的网站布局和CSS样式表 5
（二）网站基本功能 6
1.首页 6
2.南京城介绍 7
3.南京旅游 8
4.发展南京 8
5.投资南京 9
6.南京快讯 10
（三）JavaScript的效果实现 10
1.图片滚动 10
2.图片切换 11
五、总结 12
致谢 13
参考文献 13
附录一: 14
附录二: 17
一、 引言
现在城市飞速发展的时代，其他传统传媒落后，用户不能时时了解城市发展动向，在信息时效性短的形势下，城市网站把网络技术和信息传递之间，进行完美结合。城市文化网站突破时间限制，解决信息保存时间短的缺点，方便用户时时查看南京资讯，了解城市发展动态，提早为自己后面生活做出计划。节约了用户查询信息的时间，方便用户对新旧信息的了解，以及方便用户对出行，旅游等方面选择。因此城市网站可以介入用户的生活，这是种不用花费金钱或者时间就能免费得到的信息，便捷出行，方便生活。
二、 需求分析
传统传媒宣传方式，人们只能通过报纸、或者他人口述了解发生的新闻，但是这种方式传递信息不准确，信息时效性低下。然后互联网将信息电子化，数据化传送，这样一方面可以减 *好棒文|www.hbsrm.com +Q: *351916072*
少大量的财力，人力，物理，降低成本。另一方便打破了时空的限制，使得信息的交换随时随地可以进行，所以信息的时效性被大大提高。南京城市网站能使外市的人都能够清楚的了解到城市状态，这样使得南京美好的城市形象向外扩散，吸引劳动力、游客进入，同时也能增强本市人的归属感和荣誉感，从而一定程度上促进了城市的发展。南京城市网站中，实现了南京历史、南京旅游、南京发展、南京咨询等模块的功能，能让用户详细了解南京城的发展动态，同时也方便了市民周末游玩，游客来宁旅游。经过详细的城市资料调查后，结合当今的南京城市网站来设计《魅力南京网站》的静态网站。
三、 开发工具的选择
开发用具对于网站设计也是很重要的一部分，魅力南京网站用到了Dreamwearer8、Photoshop CS6等软件。利用Photoshop美化图片、制作logo的功能对网页的美观有极大的提升，同时加上简单的JavaScript的特效。其中最重要的就是Dreamweaver,它是在城市网页设计使用最多，使用DIV+CSS精简源代码，使网页打开速度更快。同时也使用JavaScript的if语句对图片切换进行设置。Dreamweaver把城市网页设计、开发和站点管理等于一体， 可以更好的对城市网站的设计与维护。
四、 主体设计
（一）网站开发过程
1.网站结构功能图
魅力南京网站结构功能图如图4-1所示。
图4-1网站详细结构图
首先网站的首页是是用户第一个观察的网页，因此南京城市网站首页信息明确，直接显示出用户希望的信息选项，从而选择自己喜欢的，想要了解的专栏。城市介绍模块中包括城市历史、城市人口、行政划分、市树市花；南京旅游模块中有旅游景点、美食小吃、旅游路线等；发展南京模块是让浏览者知道经济年南京发展状态；投资南京模块中让浏览者知道南京投资的优势；南京资讯是让浏览者时时知道南京发生的大事小事。
2.界面设计
利用DIV+CSS布局，添加html的代码设计出整个框架并且设置CSS的border属性让边框显示出来在进行布局。界面分为顶部，中部顶部三个部分；顶部主要包含登录、导航和logo，中部主要为主要内容，底部版权。主要具体分析如4-2图所示
图4-2 网站首页框架图
首页布局必须要简洁明了，要让浏览者一看就能明白首页传达的信息，进而进行深一步的了解。首页放上时时天气能提醒浏览者是否要带伞，给人一种贴心的感觉。同时首页加入宣传南京的水墨Flash能给人耳目一醒的感觉，立马吸引浏览者的眼球。同时下方图片不停滚动播放南京美丽景色的图片供游客观赏。
图4-3子页框架图
子页布局采取普通的层样，顶部的登录、天气、logo、导航条沿用的首页。二级导航采用斜放式，与首页不同，给人眼前一亮的感觉。利用简单的布局会让别人轻松接受网站信息，能被大众所喜欢。具体框架图如图4-3所示
3.DIV与CSS的布局
做好前期基础框架的工作后，后面便开始了网站的制作环节，首先利用DIV在html中采取层套层样式进行布局并且命名ID，利用DIV+CSS把网页的内容与格式分离，在DIV中主要添加内容，在CSS对内容进行格式上的美化与设计，这样减少代码的量，减少出错。
4.首页DIV的网站布局
南京城市网站首页DIV布局如图4-4所示：
图4-4
首页div结构如下，具体div代码见附录二：
首页CSS样式具体代码见附录一：
5.子页DIV的网站布局和CSS样式表
南京城市网站子页DIV布局如图4-5所示
图4-5子页DIV布局
子页的重要CSS样式表如下，具体代码见附录二：
（二）网站基本功能
魅力南京主要分为:
首页：用Flash、文字和图片显示网页。
城市介绍：用图片加文字来介绍城市历史和文化。
旅游景点：用图片加文字来介绍城市旅游景点和路线。
发展南京：用文字和数据来介绍南京发展历程。
投资南京：用文字和图表介绍南京投资方式。
城市快讯：用文字来分享南京城市资讯。
1.首页
浏览者对首页的第一印象很重要，决定着大众对网页的好坏的判断。所以说要对首页的设计特别重视。首页被当一个载体，通过城市网的首页能链接其他网站的页面实现它的功能，在首页中，多数前台城市网页的功能模块都能实现出来，如：城市风景，南京咨询和政府新闻等。首页相当于网站的敲门砖，为吸引游客，那就在设计上有自己独特的见解,要把南京城市的形象和网站的形象相结合起来，这样才能让游客和市民更加详细的了解南京城。
图4-11 投资南子页
投资南京主要包括投资政策、投资程序、专业园区三个模块，主要是介绍南京在投资方面的详细内容。投资政策主要是让投资者了解投资政策，并且随后调整投资方式。投资程序主要是让新的投资方了解南京投资程序，为投资提供便利介绍错误。专业园区主要让投资者了解南京工业分布情况，根据自己情况选择投资位置。投资南京子页用了IDV+CSS层套层的样式结构，简洁清晰的把投资南京内容显示出来。具体如图4-11所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1879.html
