我俚无锡”家乡网站的设计与实现毕业设计说明书
目录
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
二、开发工具及技术介绍 1
（一）Adobe Photoshop 1
（二）Macromedia Dreamweaver 8 1
（三）HTML+CSS 2
（四） JavaScript 2
三、网站设计 3
(一)网站主题 3
(二) 网站界面设计 3
1.网站的色彩搭配方案 3
2. 文字设计 3
四、网站实现 6
（一）首页界面效果图及部分代码 6
（二）二级子页界面效果图及部分代码 8
1. 搜索框文字效果 11
2. 图片放大镜效果 11
3. 图片轮播效果 11
4. 文字滚动效果 12
5. 视频播放效果 12
五、总结 13
致谢 14
参考文献 15
附录：部分代码 16
一、引言
（一）选题背景
随着互联网在中国不断发展的十年之余，中国互联网已经成为全球第一大网。互联网这个世界平台，不仅让许多的中国人走出去，同样也吸引了很多的外国友人想要了解中国，而无锡就是其中之一。无锡被誉为“太湖明珠”，自古便是鱼米之乡。每年，都有不计其数的外国友人来到这里，感受无锡的历史文化，品尝具有无锡特色的美食，欣赏无锡特有的自然美景，关注无锡的经济发展，或是定居在这座美丽的城市。他们都是怎样了解到无锡的呢？无疑，通过互联网是最便捷的途径。因此，“我俚无锡”家乡网站就是给这些外国友人提供便利，也为 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
在外的游子们减少了乡愁。
（二）选题意义
“我俚无锡”家乡网站能为想要了解中国—无锡，感受无锡变化的人们，提供最全、最新的资讯，从历史文化、到经济发展，以及特色美食、休闲娱乐等多个令人感兴趣的方面。不仅可以作为掌握信息的平台，也可以成为不错的旅游攻略。在信息化时代的今天，人们更愿意浏览网页获取他们需要的信息。
（三）课题内容
本课题建设了一个家乡网站，网站设有首页、新闻中心，家乡走廊、今日财经、汽车风尚、美食天地、休闲娱乐、健康养生、联系我们等九大模块。由于家乡网站信息量较大，文字较多，网站内使用了不同的图片特效，使网页更加美观。
二、开发工具及技术介绍
（一）Adobe Photoshop
Photoshop CS4，是Adobe Systems公司在2009年推出的一款功能强大的图形图像处理软件。它功能涉及的方面非常广泛，例如图形、图像、文字等。Photoshop可谓是处理以像素所构成的图像的“能手”。同样，在修饰图像、调整色彩以及色调上，Photoshop也都有很不错的表现。在此次设计过程中，网站的背景，图片特殊效果的处理，logo的设计都是通过Photoshop CS4完成的，在加上它特有的切片工具，使得网页设计与制作，与Photoshop紧密联系在了一起。
（二）Macromedia Dreamweaver 8
Dreamweaver在很多专业人士的心中，一直是进行Web站点建立的专业工具。该工具使得代码编辑、网页布局更加方便、直观，可视性非常强。由于Dreamweaver的内部还放置了一些JavaScript程序，不仅让它的功能进一步加强，而且应用也变得广泛了。Dreamweaver有着舒适美观的界面，操作起来十分方便，代码与设计的同步，还有其特有的拆分界面，都让使用者爱不释手。此次设计中，主要运用了它强大的WEB站点管理功能，再加上它有灵活的编写方式，从而对网页进行布局、设计非常方便。同样，它可视化的编辑界面和动态式的跨浏览器验证能带给使用者事半功倍的效果。
（三）HTML+CSS
??HTML，或是称为超文本置标语言，它是WWW万维网中3个基本组成内容之一，是一种精简而高效的标记语言，被用于Internet上编写网页。使用HTML编写的网页文件，不需要编译，可以直接由浏览器解释执行，效率非常高。它除了能描述文本以外，还可以对网页中各种元素进行描述，例如图像、声音等。其实HTML就是普通的文本文档，所以撰写和编辑的时候，可以使用任何文字来编辑软件。
CSS，即层叠样式表，是W3C为给HTML制定样式单机制而生成的产物，常常被用来控制网页样式。它的出现，真正意义上实现了网页内容与样式信息的分离，让网站的模块更独立化。毫不夸张的说，CSS的引入使得网站建立者可以以前所未有的能力控制页面布局，很好的改善了HTML语言对页面总体上控制有限的缺点，达到互补的作用。由于CSS配备了丰富的格式化功能，所以，在此次设计中，本人通过编写CSS代码对页面整体的外观进行设计，包括图片、字体、颜色的设置以及整体的定位、排版等，从而到达预期的效果。
编写HTML与CSS网页时，可采用手工直接编写代码的方式，也可以使用可视化软件制作页面的方式完成，事实上，两种方式结合才是制作网页的最佳方式。
JavaScript
谈到JavaScript，它的开发和诞生也可谓是经历了重重困难险阻，严格来说，JavaScript是由Netscape Communications公司开发的，是具有重要意义的一种编程语言。它的解释性很强，这就意味着它编程语言的简单，当然，不要因为它简单，而小看了它的功能，现在网页上你所看到的动态特效，几乎都是用JavaScript脚本编写的。而且JavaScript是业内公认的安全性非常高的语言。它不像Java一样，需要先进行编译，而是可以直接在程序执行的过程中，逐行地解释出来。正因为它有这么多的优点，所以在加入网站特效时，我毫不犹豫地将JavaScript运用到了网站表单验证以及图片特效等方面。
三、网站设计
(一)网站主题
本网站的中心思想是通过浏览、欣赏网页，利用文字介绍、视频播放、图片展示等效果和技术，以图文并茂的形式来全面反映无锡地区的整体面貌，渲染“浓郁的家乡风土人情”。对于主题的宣传，涉及到设计网站的宣传标语，也可以说是网站的核心精神，网站的最终目标，就像我们实际生活中那些经典的广告词，总能让人印象深刻。本网站的宣传主题是：“我的家乡—无锡”，用无锡方言说：就是“我俚（li）无锡”。
(二) 网站界面设计
1.网站的色彩搭配方案
图3-2首页框架结构图
（2）二级子页框架效果图
图3-3二级子页框架结构图
图3-4二级子页框架结构图
（3）三级子页框架效果图
图3-5三级子页框架结构图
四、网站实现
（一）首页界面效果图及部分代码
图4-6首页界面效果图
图4-13三级子页界面部分代码
（四）其它设计
搜索框文字效果
网站首页添加了jQuery效果，实现点击搜索框时，清空原有内容；移开时，还原默认内容。如图4-14所示。
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
二、开发工具及技术介绍 1
（一）Adobe Photoshop 1
（二）Macromedia Dreamweaver 8 1
（三）HTML+CSS 2
（四） JavaScript 2
三、网站设计 3
(一)网站主题 3
(二) 网站界面设计 3
1.网站的色彩搭配方案 3
2. 文字设计 3
四、网站实现 6
（一）首页界面效果图及部分代码 6
（二）二级子页界面效果图及部分代码 8
1. 搜索框文字效果 11
2. 图片放大镜效果 11
3. 图片轮播效果 11
4. 文字滚动效果 12
5. 视频播放效果 12
五、总结 13
致谢 14
参考文献 15
附录：部分代码 16
一、引言
（一）选题背景
随着互联网在中国不断发展的十年之余，中国互联网已经成为全球第一大网。互联网这个世界平台，不仅让许多的中国人走出去，同样也吸引了很多的外国友人想要了解中国，而无锡就是其中之一。无锡被誉为“太湖明珠”，自古便是鱼米之乡。每年，都有不计其数的外国友人来到这里，感受无锡的历史文化，品尝具有无锡特色的美食，欣赏无锡特有的自然美景，关注无锡的经济发展，或是定居在这座美丽的城市。他们都是怎样了解到无锡的呢？无疑，通过互联网是最便捷的途径。因此，“我俚无锡”家乡网站就是给这些外国友人提供便利，也为 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
在外的游子们减少了乡愁。
（二）选题意义
“我俚无锡”家乡网站能为想要了解中国—无锡，感受无锡变化的人们，提供最全、最新的资讯，从历史文化、到经济发展，以及特色美食、休闲娱乐等多个令人感兴趣的方面。不仅可以作为掌握信息的平台，也可以成为不错的旅游攻略。在信息化时代的今天，人们更愿意浏览网页获取他们需要的信息。
（三）课题内容
本课题建设了一个家乡网站，网站设有首页、新闻中心，家乡走廊、今日财经、汽车风尚、美食天地、休闲娱乐、健康养生、联系我们等九大模块。由于家乡网站信息量较大，文字较多，网站内使用了不同的图片特效，使网页更加美观。
二、开发工具及技术介绍
（一）Adobe Photoshop
Photoshop CS4，是Adobe Systems公司在2009年推出的一款功能强大的图形图像处理软件。它功能涉及的方面非常广泛，例如图形、图像、文字等。Photoshop可谓是处理以像素所构成的图像的“能手”。同样，在修饰图像、调整色彩以及色调上，Photoshop也都有很不错的表现。在此次设计过程中，网站的背景，图片特殊效果的处理，logo的设计都是通过Photoshop CS4完成的，在加上它特有的切片工具，使得网页设计与制作，与Photoshop紧密联系在了一起。
（二）Macromedia Dreamweaver 8
Dreamweaver在很多专业人士的心中，一直是进行Web站点建立的专业工具。该工具使得代码编辑、网页布局更加方便、直观，可视性非常强。由于Dreamweaver的内部还放置了一些JavaScript程序，不仅让它的功能进一步加强，而且应用也变得广泛了。Dreamweaver有着舒适美观的界面，操作起来十分方便，代码与设计的同步，还有其特有的拆分界面，都让使用者爱不释手。此次设计中，主要运用了它强大的WEB站点管理功能，再加上它有灵活的编写方式，从而对网页进行布局、设计非常方便。同样，它可视化的编辑界面和动态式的跨浏览器验证能带给使用者事半功倍的效果。
（三）HTML+CSS
??HTML，或是称为超文本置标语言，它是WWW万维网中3个基本组成内容之一，是一种精简而高效的标记语言，被用于Internet上编写网页。使用HTML编写的网页文件，不需要编译，可以直接由浏览器解释执行，效率非常高。它除了能描述文本以外，还可以对网页中各种元素进行描述，例如图像、声音等。其实HTML就是普通的文本文档，所以撰写和编辑的时候，可以使用任何文字来编辑软件。
CSS，即层叠样式表，是W3C为给HTML制定样式单机制而生成的产物，常常被用来控制网页样式。它的出现，真正意义上实现了网页内容与样式信息的分离，让网站的模块更独立化。毫不夸张的说，CSS的引入使得网站建立者可以以前所未有的能力控制页面布局，很好的改善了HTML语言对页面总体上控制有限的缺点，达到互补的作用。由于CSS配备了丰富的格式化功能，所以，在此次设计中，本人通过编写CSS代码对页面整体的外观进行设计，包括图片、字体、颜色的设置以及整体的定位、排版等，从而到达预期的效果。
编写HTML与CSS网页时，可采用手工直接编写代码的方式，也可以使用可视化软件制作页面的方式完成，事实上，两种方式结合才是制作网页的最佳方式。
JavaScript
谈到JavaScript，它的开发和诞生也可谓是经历了重重困难险阻，严格来说，JavaScript是由Netscape Communications公司开发的，是具有重要意义的一种编程语言。它的解释性很强，这就意味着它编程语言的简单，当然，不要因为它简单，而小看了它的功能，现在网页上你所看到的动态特效，几乎都是用JavaScript脚本编写的。而且JavaScript是业内公认的安全性非常高的语言。它不像Java一样，需要先进行编译，而是可以直接在程序执行的过程中，逐行地解释出来。正因为它有这么多的优点，所以在加入网站特效时，我毫不犹豫地将JavaScript运用到了网站表单验证以及图片特效等方面。
三、网站设计
(一)网站主题
本网站的中心思想是通过浏览、欣赏网页，利用文字介绍、视频播放、图片展示等效果和技术，以图文并茂的形式来全面反映无锡地区的整体面貌，渲染“浓郁的家乡风土人情”。对于主题的宣传，涉及到设计网站的宣传标语，也可以说是网站的核心精神，网站的最终目标，就像我们实际生活中那些经典的广告词，总能让人印象深刻。本网站的宣传主题是：“我的家乡—无锡”，用无锡方言说：就是“我俚（li）无锡”。
(二) 网站界面设计
1.网站的色彩搭配方案
图3-2首页框架结构图
（2）二级子页框架效果图
图3-3二级子页框架结构图
图3-4二级子页框架结构图
（3）三级子页框架效果图
图3-5三级子页框架结构图
四、网站实现
（一）首页界面效果图及部分代码
图4-6首页界面效果图
图4-13三级子页界面部分代码
（四）其它设计
搜索框文字效果
网站首页添加了jQuery效果，实现点击搜索框时，清空原有内容；移开时，还原默认内容。如图4-14所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1857.html
