魅力靖江网站的设计与实现
目录
一、 引言 1
（一） 选题背景 1
（二） 选题意义 1
（三） 选题内容 1
二、 开发工具简介 1
（一）Dreamweaver 8 1
（二）Photoshop CS6 1
（三）JavaScript 1
三、 网站设计 2
（一）网站功能结构 2
（二）网页界面设计 2
（三）Logo设计 3
四、 网站实现 3
（一）DIV+CSS布局 3
（二）网站基本功能 5
1. 靖江首页 5
2. 购物天堂 6
3. 名胜景点 7
4. 先进教育 8
5. 经济开发 9
6. 美味特产 10
7. 联系我们 11
（三） JS特效实现 12
五、 总结 16
致谢 16
参考文献 16
引言
选题背景
从360导航综合搜索中搜索“靖江”会发现，并没有一个独立的靖江官方网站，而只是一些简单的靖江百度地图，靖江贴吧之类的。一方面，若没有一个全面的靖江网站，怎么会让非靖江人士了解到靖江的概况呢？另一方面，近年来，靖江的经济发展持续上升，没有一个全面的靖江网站，怎么会吸引外来人口的劳动力和外来企业的投资呢？而作为一个靖江人，必须为家乡做点什么，所以想到为家乡搞一个网站。
选题意义
魅力靖江网站的选题有着非凡的意义，首先靖江的教育也可谓是屈指一数的，其次经济的发展也是日趋上升，另外人文特产也是淳朴可口，将这些优势推广，将会吸引更多的外来人口和外来 *好棒文|www.hbsrm.com +Q: *351916072*
企业的青睐，推动靖江经济的进一步发展，未来的靖江会更加的美好。
选题内容
本选题是将靖江表现成一个集经济发展、教育背景、购物天地、旅游文化、美味特产于一体的游客浏览网站，能够详细浏览靖江的概况。
开发工具简介
（一）Dreamweaver 8
Dreamweaver是Adobe公司的网站开发工具，Dreamweaver 8是Macromedia公司所开发,Dreamweaver8最新版本，采用多种先进技术，能够高效地创建极具表现力和动感效果的网页。魅力靖江网站就是使用Dreamweaver 8作为主要的开发工具，所有的代码都是在Dreamweaver 8里进行编写的，作为开发环境Dreamweaver 8简单实用，适合大多数人使用。
（二）Photoshop CS6
Adobe?Photoshop，简称“PS”，是一种图像处理软件。魅力靖江网站中使用的图片都是经过PS进行的修饰，例如：魔术棒，橡皮擦，截图是图片中使用最多的工具，PS修饰出来的图片整体清晰，没有马赛克的迹象，正确的使用PS，会使得网站的观赏价值得到提高。
（三）JavaScript
JavaScript一种直译式的脚本语言，是布兰登艾奇（Brendan Eich，1964年～）开发出，组成一个完整的 JavaScript 实现，是由以下 3 个不同部分组成的：核心、文档对象模型、浏览器对象模型。魅力靖江网站开发应用了简单的if语句。使得网站整体上更加紧凑，网站中的图片翻页和滚动就是使用了JS代码。
网站设计
（一）网站功能结构
网站的优劣主要体现在功能上，如果一个网站有着非常花哨的外观，却没有实用价值，怎么能称得上是个优质的网站。魅力靖江网站巧妙的躲避了这个缺点，外观和实用性方面还算是比较可靠的。现在的人们生活节奏快，对于浏览网页上，不会浪费太多的时间去看无价值的东西，魅力靖江网站摒弃了很多无聊的东西。从人们最关注的衣食住行和教育等方面展开了介绍。如图3-1所示：
图3-1 网站功能结构图
（二）网页界面设计
对于新事物的第一感觉非常的重要，而网页展现给人的第一印象就是整个网页的界面设计，界面设计的恰到好处也会给网页印象加分，杂乱无章的界面设计严重影响到网页的质量，导致浏览者心情不美观，从而不想进一步的了解，网站的实用价值就不复存在而来。魅力靖江网站网页的界面设计整体简单大方。采用了全体居中的格式，简单又不显单调。首页和子页的界面设计只是在正文的部分有点的小小的不同。如图3-2所示：
LOGO
导航
正文
FOOTER
图3-2 首页界面设计图
（三）Logo设计
LOGO这个部分是整个网站的一个标志性的代表，简单的采用了靖江的拼音的首字母，在JJ的外围用了半个圈框起来，体现了靖江是一个大家庭，而半个圈的含义就是，对外开放的用意。如图3-3所示：
图3-3 LOGO设计图
网站实现
（一）DIV+CSS布局
DIV+CSS是层叠样式表，是网页设计方面必须掌握的技术，DIV+CSS布局主要是对网页的一种规划，简而言之，就是将网页通过DIV+CSS方式将一整个网页一个一个模块的分割开的。首页和子页整体上的布局是差不多的，毕竟一个完整的网页只有统一设计才更有欣赏价值。如图4-1所示：
图4-1 首页DIV+CSS布局图
首页DIV代码：
首页CSS代码：
#A{
width:100%;
margin:0 auto;
/*border:1px dashed red;*/
background:url(image/backphoto.png);
}
#Header{
width:100%;
height:100px;
/*border:1px dashed red;*/
margin:0 auto;
一、 引言 1
（一） 选题背景 1
（二） 选题意义 1
（三） 选题内容 1
二、 开发工具简介 1
（一）Dreamweaver 8 1
（二）Photoshop CS6 1
（三）JavaScript 1
三、 网站设计 2
（一）网站功能结构 2
（二）网页界面设计 2
（三）Logo设计 3
四、 网站实现 3
（一）DIV+CSS布局 3
（二）网站基本功能 5
1. 靖江首页 5
2. 购物天堂 6
3. 名胜景点 7
4. 先进教育 8
5. 经济开发 9
6. 美味特产 10
7. 联系我们 11
（三） JS特效实现 12
五、 总结 16
致谢 16
参考文献 16
引言
选题背景
从360导航综合搜索中搜索“靖江”会发现，并没有一个独立的靖江官方网站，而只是一些简单的靖江百度地图，靖江贴吧之类的。一方面，若没有一个全面的靖江网站，怎么会让非靖江人士了解到靖江的概况呢？另一方面，近年来，靖江的经济发展持续上升，没有一个全面的靖江网站，怎么会吸引外来人口的劳动力和外来企业的投资呢？而作为一个靖江人，必须为家乡做点什么，所以想到为家乡搞一个网站。
选题意义
魅力靖江网站的选题有着非凡的意义，首先靖江的教育也可谓是屈指一数的，其次经济的发展也是日趋上升，另外人文特产也是淳朴可口，将这些优势推广，将会吸引更多的外来人口和外来 *好棒文|www.hbsrm.com +Q: *351916072*
企业的青睐，推动靖江经济的进一步发展，未来的靖江会更加的美好。
选题内容
本选题是将靖江表现成一个集经济发展、教育背景、购物天地、旅游文化、美味特产于一体的游客浏览网站，能够详细浏览靖江的概况。
开发工具简介
（一）Dreamweaver 8
Dreamweaver是Adobe公司的网站开发工具，Dreamweaver 8是Macromedia公司所开发,Dreamweaver8最新版本，采用多种先进技术，能够高效地创建极具表现力和动感效果的网页。魅力靖江网站就是使用Dreamweaver 8作为主要的开发工具，所有的代码都是在Dreamweaver 8里进行编写的，作为开发环境Dreamweaver 8简单实用，适合大多数人使用。
（二）Photoshop CS6
Adobe?Photoshop，简称“PS”，是一种图像处理软件。魅力靖江网站中使用的图片都是经过PS进行的修饰，例如：魔术棒，橡皮擦，截图是图片中使用最多的工具，PS修饰出来的图片整体清晰，没有马赛克的迹象，正确的使用PS，会使得网站的观赏价值得到提高。
（三）JavaScript
JavaScript一种直译式的脚本语言，是布兰登艾奇（Brendan Eich，1964年～）开发出，组成一个完整的 JavaScript 实现，是由以下 3 个不同部分组成的：核心、文档对象模型、浏览器对象模型。魅力靖江网站开发应用了简单的if语句。使得网站整体上更加紧凑，网站中的图片翻页和滚动就是使用了JS代码。
网站设计
（一）网站功能结构
网站的优劣主要体现在功能上，如果一个网站有着非常花哨的外观，却没有实用价值，怎么能称得上是个优质的网站。魅力靖江网站巧妙的躲避了这个缺点，外观和实用性方面还算是比较可靠的。现在的人们生活节奏快，对于浏览网页上，不会浪费太多的时间去看无价值的东西，魅力靖江网站摒弃了很多无聊的东西。从人们最关注的衣食住行和教育等方面展开了介绍。如图3-1所示：
图3-1 网站功能结构图
（二）网页界面设计
对于新事物的第一感觉非常的重要，而网页展现给人的第一印象就是整个网页的界面设计，界面设计的恰到好处也会给网页印象加分，杂乱无章的界面设计严重影响到网页的质量，导致浏览者心情不美观，从而不想进一步的了解，网站的实用价值就不复存在而来。魅力靖江网站网页的界面设计整体简单大方。采用了全体居中的格式，简单又不显单调。首页和子页的界面设计只是在正文的部分有点的小小的不同。如图3-2所示：
LOGO
导航
正文
FOOTER
图3-2 首页界面设计图
（三）Logo设计
LOGO这个部分是整个网站的一个标志性的代表，简单的采用了靖江的拼音的首字母，在JJ的外围用了半个圈框起来，体现了靖江是一个大家庭，而半个圈的含义就是，对外开放的用意。如图3-3所示：
图3-3 LOGO设计图
网站实现
（一）DIV+CSS布局
DIV+CSS是层叠样式表，是网页设计方面必须掌握的技术，DIV+CSS布局主要是对网页的一种规划，简而言之，就是将网页通过DIV+CSS方式将一整个网页一个一个模块的分割开的。首页和子页整体上的布局是差不多的，毕竟一个完整的网页只有统一设计才更有欣赏价值。如图4-1所示：
图4-1 首页DIV+CSS布局图
首页DIV代码：
首页CSS代码：
#A{
width:100%;
margin:0 auto;
/*border:1px dashed red;*/
background:url(image/backphoto.png);
}
#Header{
width:100%;
height:100px;
/*border:1px dashed red;*/
margin:0 auto;
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1864.html
