missyou同学录网站的设计与实现
以往纸质的同学录已经不能满足大家的需求，而电子版的同学录才能够符合当今飞速发展的时代。Miss You同学录网站是针对大学毕业生而设计的一套电子版毕业纪念册，旨在让每一位毕业生能够记住自己独特的青春。网站通过Dreamweaver网页开发工具，Photoshop图像处理软件和Flash动画制作软件以及JavaScript脚本语言来设计并实现网站的内容。网站的主要内容有：母校的光荣岁月，师长的谆谆教诲，同窗的惺惺相惜以及班级通讯簿等。本论文从素材收集、页面设计、网站实现、网站测试等方面进行了详细的阐述，并通过特效使整个网站在保证功能的前提下给使用者带来良好的视觉享受和精神愉悦感。
目 录
一、引言 1
二、网站分析 1
（一）需求分析 1
（二）结构分析 1
三、网站开发工具 2
（一）Dreamweaver 2
（二）Photoshop 2
四、网站内容结构 2
（一）网站内容结构图 2
（二）栏目具体说明 2
1.首页内容 2
2.子页内容 3
五、网站设计与实现 3
（一）Logo设计 3
（二）首页 4
1.设计思想 4
2.效果展示 4
3.主导航代码 4
4.Jquery脚本 5
（三）我的校园 5
1.设计思想 6
2.效果展示 6
3.大屏滚动播放特效代码 6
4.Jquery脚本 7
（四）我的师长 8
1.设计思想 8
2.效果展示 8
3.鼠标移入效果代码 9
4.Jquery脚本 10
（五）我的班级 10
1.设计思想 10
2.效果展示 11
3.鼠标移入效果代码 13
4.Jquery脚本 13
（六）我的同学 13
1.设计思想 14
2.效果展示 14
3.界面核心片段 15
4.Jqu
*好棒文|www.hbsrm.com +Q: ^351916072*
ery脚本 16
六、网站测试与维护 17
七、总结 18
致谢 19
参考文献 20
一、引言
三年的大学美好时光即将结束，挥泪告别的同学们即将离开各自的母校，开始踏上各自的人生历程，而数年的同学友谊将会是匆匆岁月留下的最珍贵的礼物和最宝贵的精神财富。以往纸质的同学录已经不能满足大家的需求，而电子版的同学录才能够符合当今飞速发展网络的时代。
本网站是针对大学毕业生而设计的一套电子版的毕业纪念册，旨在让每一位毕业生能够记住自己独特的青春，拥有一个属于自己的青春回忆录。本网站通过使用Dreamweaver，Photoshop和sublime text 3编辑器，运用html+css、javascript以及jquery等技术来设计并实现网站的建设。Miss You同学录网站的主要内容有：母校的光荣岁月，师长的谆谆教诲，同窗的惺惺相惜以及班级通讯簿等。
本论文从素材收集、页面设计、网站实现、网站测试等方面进行了详细的阐述，在本网站中可以使每一位用户能够体验到一个不一样的同学录，并通过特效使整个网站在保证功能的前提下给使用者带来良好的视觉享受和精神愉悦感。
二、网站分析
（一）需求分析
在这个飞速发展的时代，新鲜的事物层出不穷，许多旧事物已经被这个新时代渐渐淘汰。以往纸质的同学录已经不能够去满足毕业生的需求，而各种各样电子版的同学录网站已经追随着时代潮流应运而生。尽管各种商业运作的同学录网站欣然而起，但我还是设计了一个简单化的电子版的同学录。本网站的设计主要从以下几点考虑的：
现如今的互联网上各种商业化同学录层出不穷，并具备很多良好的功能，包含许多精美的同学交流社区，但这些同学录网站都是基于多校综合版的同学录网站。而在与许多同学接触之后的感觉是，用户仅仅对于自己班级的照片，留言等感兴趣，对于其他院系甚至其他班级的资料并不感兴趣，这是由于多年的同窗友谊的积淀，这种难能可贵的友情在随着时间的推移会愈发变得醇厚。
本网站的设计主要是为了让每一位毕业生能够记住当年短暂而美好的大学时光，记住师长的谆谆教诲，同学的互助友爱以及曾经一起努力战斗的青春岁月，所以在板块设计上有学院资料、我的老师、我的同学以及大学生活等几个大的板块。
（二）结构分析
Miss you同学录网站的设计结构采用了一种由上而下，简单明了的模块方式，并通过诸多的生活照片来呈现出青春岁月。首页采用的是，通过直接的语言方式对即将结束的短暂而美好的大学生活时光的回忆以及对每一位各奔东西的同学美好的祝福和勉励。接着，子页包含分别为我的校园、我的师长、我的班级、我的同学以及更多这几个模块。我的校园里包含的是学校的简介还有校园环境的美照；我的师长里包括任课教师的简介以及老师对同学们的美好寄语；我的班级一项是对本班级的介绍，并以图文并茂的方式来描述三年美好大学时光的点点滴滴；我的同学这一模块就是描述本班级的同学，包括同学的生活多种描述以及同学的生活照等。
三、网站开发工具
（一）Dreamweaver
Adobe Dreamweaver，简称“DW”，是由美国MACROMEDIA公司开发的一种能够使网页和数据库关联起来，且支持HTML编辑语言和CSS技术的可视化网站开发工具。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
（二）Photoshop
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的一种主要处理以像素所构成的数字图像处理软件。在图像、图形、视频、文字、出版等各方面都有涉及到ps。在本网站的建设中，通过ps软件绘制了需求的图片，且高效的处理了图片，或是批量处理图片。
四、网站内容结构
（一）网站内容结构图
图41 网站结构图
（二）栏目具体说明
1.首页内容
对照于以往纸质的同学录，基本上都是封面附有关于校园生活或者是毕业场景相关的照片。Miss you同学录网站也是以同样的方式呈现出来，首页的头部是网站的Logo和导航条。色彩鲜明的Logo和简单化的导航条给人一种又鲜活又稳重的感受，这也是该网站的一个特点。网站首页的中间部分占有网页的三分之二，它是一张附有关于毕业远行字样的黑板图片，从图片中黑板上的简短而有力的美文可以体会到，昨日仍旧同窗学习，一起上下课，一起吃饭，一起吵闹的同学，转眼间就要在这个酷暑的夏季，为了自己的生活和人生各奔东西，一切的回忆都被这个夏天所笼罩而首页的底部是一个无特殊样式的小导航条，因为考虑到子页中有页面内容较多，纵向比要长些，所以在浏览到页面的底部时就可以单击而进入下一个想要进入的页面，可以说比较人性化。
2.子页内容
每一个子页的头部都是保持和首页一样的布局，变化的是子页页面的中间部分。
其中我的校园模块，中间部分可以分为两个模块。它的上部是一个校园环境的照片循环播放的样子，也可以单击图片的左右端进入下一个图片的播放；下部是一段以第一人称的方式来阐述校园的自身背景以及校园的文化历史，在这里可以进一步的对校园深入了解而加深对这个曾经学习和生活的地方感恩和怀念。
目 录
一、引言 1
二、网站分析 1
（一）需求分析 1
（二）结构分析 1
三、网站开发工具 2
（一）Dreamweaver 2
（二）Photoshop 2
四、网站内容结构 2
（一）网站内容结构图 2
（二）栏目具体说明 2
1.首页内容 2
2.子页内容 3
五、网站设计与实现 3
（一）Logo设计 3
（二）首页 4
1.设计思想 4
2.效果展示 4
3.主导航代码 4
4.Jquery脚本 5
（三）我的校园 5
1.设计思想 6
2.效果展示 6
3.大屏滚动播放特效代码 6
4.Jquery脚本 7
（四）我的师长 8
1.设计思想 8
2.效果展示 8
3.鼠标移入效果代码 9
4.Jquery脚本 10
（五）我的班级 10
1.设计思想 10
2.效果展示 11
3.鼠标移入效果代码 13
4.Jquery脚本 13
（六）我的同学 13
1.设计思想 14
2.效果展示 14
3.界面核心片段 15
4.Jqu
*好棒文|www.hbsrm.com +Q: ^351916072*
ery脚本 16
六、网站测试与维护 17
七、总结 18
致谢 19
参考文献 20
一、引言
三年的大学美好时光即将结束，挥泪告别的同学们即将离开各自的母校，开始踏上各自的人生历程，而数年的同学友谊将会是匆匆岁月留下的最珍贵的礼物和最宝贵的精神财富。以往纸质的同学录已经不能满足大家的需求，而电子版的同学录才能够符合当今飞速发展网络的时代。
本网站是针对大学毕业生而设计的一套电子版的毕业纪念册，旨在让每一位毕业生能够记住自己独特的青春，拥有一个属于自己的青春回忆录。本网站通过使用Dreamweaver，Photoshop和sublime text 3编辑器，运用html+css、javascript以及jquery等技术来设计并实现网站的建设。Miss You同学录网站的主要内容有：母校的光荣岁月，师长的谆谆教诲，同窗的惺惺相惜以及班级通讯簿等。
本论文从素材收集、页面设计、网站实现、网站测试等方面进行了详细的阐述，在本网站中可以使每一位用户能够体验到一个不一样的同学录，并通过特效使整个网站在保证功能的前提下给使用者带来良好的视觉享受和精神愉悦感。
二、网站分析
（一）需求分析
在这个飞速发展的时代，新鲜的事物层出不穷，许多旧事物已经被这个新时代渐渐淘汰。以往纸质的同学录已经不能够去满足毕业生的需求，而各种各样电子版的同学录网站已经追随着时代潮流应运而生。尽管各种商业运作的同学录网站欣然而起，但我还是设计了一个简单化的电子版的同学录。本网站的设计主要从以下几点考虑的：
现如今的互联网上各种商业化同学录层出不穷，并具备很多良好的功能，包含许多精美的同学交流社区，但这些同学录网站都是基于多校综合版的同学录网站。而在与许多同学接触之后的感觉是，用户仅仅对于自己班级的照片，留言等感兴趣，对于其他院系甚至其他班级的资料并不感兴趣，这是由于多年的同窗友谊的积淀，这种难能可贵的友情在随着时间的推移会愈发变得醇厚。
本网站的设计主要是为了让每一位毕业生能够记住当年短暂而美好的大学时光，记住师长的谆谆教诲，同学的互助友爱以及曾经一起努力战斗的青春岁月，所以在板块设计上有学院资料、我的老师、我的同学以及大学生活等几个大的板块。
（二）结构分析
Miss you同学录网站的设计结构采用了一种由上而下，简单明了的模块方式，并通过诸多的生活照片来呈现出青春岁月。首页采用的是，通过直接的语言方式对即将结束的短暂而美好的大学生活时光的回忆以及对每一位各奔东西的同学美好的祝福和勉励。接着，子页包含分别为我的校园、我的师长、我的班级、我的同学以及更多这几个模块。我的校园里包含的是学校的简介还有校园环境的美照；我的师长里包括任课教师的简介以及老师对同学们的美好寄语；我的班级一项是对本班级的介绍，并以图文并茂的方式来描述三年美好大学时光的点点滴滴；我的同学这一模块就是描述本班级的同学，包括同学的生活多种描述以及同学的生活照等。
三、网站开发工具
（一）Dreamweaver
Adobe Dreamweaver，简称“DW”，是由美国MACROMEDIA公司开发的一种能够使网页和数据库关联起来，且支持HTML编辑语言和CSS技术的可视化网站开发工具。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
（二）Photoshop
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的一种主要处理以像素所构成的数字图像处理软件。在图像、图形、视频、文字、出版等各方面都有涉及到ps。在本网站的建设中，通过ps软件绘制了需求的图片，且高效的处理了图片，或是批量处理图片。
四、网站内容结构
（一）网站内容结构图
图41 网站结构图
（二）栏目具体说明
1.首页内容
对照于以往纸质的同学录，基本上都是封面附有关于校园生活或者是毕业场景相关的照片。Miss you同学录网站也是以同样的方式呈现出来，首页的头部是网站的Logo和导航条。色彩鲜明的Logo和简单化的导航条给人一种又鲜活又稳重的感受，这也是该网站的一个特点。网站首页的中间部分占有网页的三分之二，它是一张附有关于毕业远行字样的黑板图片，从图片中黑板上的简短而有力的美文可以体会到，昨日仍旧同窗学习，一起上下课，一起吃饭，一起吵闹的同学，转眼间就要在这个酷暑的夏季，为了自己的生活和人生各奔东西，一切的回忆都被这个夏天所笼罩而首页的底部是一个无特殊样式的小导航条，因为考虑到子页中有页面内容较多，纵向比要长些，所以在浏览到页面的底部时就可以单击而进入下一个想要进入的页面，可以说比较人性化。
2.子页内容
每一个子页的头部都是保持和首页一样的布局，变化的是子页页面的中间部分。
其中我的校园模块，中间部分可以分为两个模块。它的上部是一个校园环境的照片循环播放的样子，也可以单击图片的左右端进入下一个图片的播放；下部是一段以第一人称的方式来阐述校园的自身背景以及校园的文化历史，在这里可以进一步的对校园深入了解而加深对这个曾经学习和生活的地方感恩和怀念。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/816.html
