社团网站设计
目 录
一、引言 1
二、开发工具 1
（一）网站开发工具——Dreamweaver 1
（二）图片处理工具——Adobe Photoshop 1
（三）JavaScript 2
三、网站选题分析 2
（一）选题背景 2
（二）选题意义 2
（三）选题内容 2
四、网站的设计与实现 3
（一）网站的总体设计 3
（二）网站结构 3
（三）排版构架 3
1.功能结构图 3
2.界面设计 3
五、首页的设计与完成 5
（一）Logo设计 6
（二）导航栏的设计 6
（三）文字部分的实现 7
（四）JavaScript特效的设计与完成 8
六、子页的设计 9
（一）社联简介 9
（二）组织机构 9
（三）社团风采 10
（四）联系我们 10
（五）子页笛子社团 11
七、结束语 11
致谢 13
参考文献 13
一、引言
互联网经过半个世界的迅猛发展，已经不断深入到我们的生活当中来。首先我们的学习手段不再是单一的传统学习，很多人选择在家中通过互联网学习。互联网已经深入我们的生活中，像现在在家就可以和亲戚朋友聊天、语音、视频，甚至在家就可以购物，足不出户就可以取到物件，非常方便。大家也都是通过网页浏览信息，可见网页是有很好的广告效应，可以通过网页传播社团网站的魅力。
一般的网页制作方式分为静态和动态两种，本网站采用的方法是静态网页设计方式 *好棒文|www.hbsrm.com +Q: *351916072*
。静态网页的设计比动态网站简单，主要是运用HTML和CSS技术，展示特定的图片和文字在网页中，它是所有网页设计的基础技术。本网站主要用到的软件Dreamweaver，它是比较可视化的软件，并且运用起来也不难。再加上Photoshop，JavaScript 为辅助工具，Photoshop主要负责修改图片，美化图片这一块，JavaScript是为了在原本比较生硬的网站中添加一点生机，丰富一点的动画效果，也是每个网页都会用到的特效。
随着现在教育的发展，国家不单重视学生知识的发展，也重视德智体美劳的全面发展，所以现在大学的社团活动也是非常丰富的，使同学们在学习知识的同时也能放松心态。各种各样的社团活动让人眼花缭乱，学生们争先恐后参加，加入社团的积极性高涨，这是一个好事，说明各种学校开始重视学生才艺的发展，因此各种各样的社团纷纷出现。
社团网就是针对各种各样社团的介绍，是所有社团的聚合，在本网站，可以全面的了解各个网站的活动。是对社团的一个有力的宣传，也是对同学们在三年时间的珍贵的画面。
二、开发工具
（一）网站开发工具——Dreamweaver
Dreamweaver是美国Adobe公司的著名网站开发工具，Dreamweaver 8是Macromedia2005年6月公司正是投入市场的，后来发展成熟，Dreamweaver分为Macromedia时代和Adoba时代。本人社团网站开发使用的Dreamweaver 8，dreamweaver中的HTML、CSS两种模式可以相互切换，它自身有许多出彩的设计理念；本身比较实用，能够轻松上手，简单易学，不需要手写代码，就能轻松创建各种动态效果；也有自定义及扩展功能，也支持跨浏器和层叠样式表，它采用多种先进技术，能够高效地创建有动感效果的网页。
（二）图片处理工具——Adobe Photoshop
Adobe?Photoshop，简称“PS”，它是强大的图像处理软件。也是Adobe?公司开发的最
好的软件之一。。它可以对图像进行修饰、对图形进行编辑以及对图像色彩处理，另外，它还有绘图和输出功能等等很多，对我们需要的图片可以进行魔术棒、钢笔、索套等功能的集合处理处我们需要的图片。比较简单易学，总之，它深受广大设计人民的喜欢和推广。
（三）JavaScript
JavaScript简称JS,它是一种直译式脚本语言，最早是在HTML网页上使用，主要是用来给HTML网页增加动态功能。它的优点是语法简单，基本上web程序员都会，而且性能出色，代码结构清晰。JS的特效是网站魅力的所在。JS是人们常用的滑动门，以及当鼠标移动到链接上出现的隐藏层，都多多少少用到了JS。现在出色的网页，为了提高用户体验，能够让使用者更加方便浏览网站，都使用了比较多的JS。
三、网站选题分析
（一）选题背景
在大学的这三年，多少人从一个什么都不懂的小孩子变成现在毕业的职场强人，大学给学生的成长添上了浓重的一笔。在大学里，不仅可以学到专业上的知识，也可以在大学的时间里参加丰富的社团生活，比如心理协会，篮球运动，可以和同学在一起享受社团的魅力，但是现在的学校普遍缺少一个全面的社团网站,一般学校网站是记录学校的一些重大公告，最新动态，关于社团活动的内容也非常少，所以本网站是针对社团的宣传网站。
（二）选题意义
在学校期间，本人也参加过很多社团活动，一般都是通过传统的海报宣传、展板宣传。这些宣传比较不灵活，而且宣传力度也不是很大。因此本人想能不能有一种比较快捷的浏览方式，想到现在互联网在生活中的应用这么广泛，所以本人想到通过网站的方式宣传，不仅可以加大宣传力度，也是一种记录生活美好画面的方法。
（三）选题内容
本选题对于的全部社团有一个大概的介绍。分为首页，社联简介，组织机构，社团风采，社团文学，文件下载，联系我们和社团论坛，其中社联简介是介绍的各个社团文化，也是本网站重点的设计方向，主要向大家展现年轻学子青春活力的一面。
四、网站的设计与实现
（一）网站的总体设计
首先，一个优秀成功的网站，最重要的是外观和内容。外观给人第一眼看上去有视觉冲击力，外观的设计不宜太过花哨，简单明了更能突出网站的亮点。其次是内容必须要丰富，符合网站的主题设计，这样才能形成一个优秀的网站。
（二）网站结构
根据网站的内容需求，本网站主要分为社团首页，社联简介，社团风采，社团风采，社团文学，文件下载，联系我们。
（三）排版构架
1.功能结构图
一个好的网站最重点是社团网站功能结构图，如图4-1：
图4-1 社团网站功能结构图
2.界面设计
首页的界面设计
一个关于学校社团的网站，首先最重要的是第一眼就能看出来是出自哪个学校的，所以本网站首页用最醒目简介的图片放在主图位置。排版的话也是采用比较简单明了的排版方式，LOGO,图片和文字，具体网站布局如图4-2：
LOGO
图片
滚动图片
公布栏
色彩搭配
主要色彩： 蓝色+白
蓝色给人一种稳重安静的感觉，喜欢蓝色的人都给人一种安全感，而且重视人与人之间的依赖的关系，它代表社团成员之间彼此互相关照，礼貌待人。而且蓝色是大海的颜色，有一种胸怀宽阔的意义和永不言败的精神。
一、引言 1
二、开发工具 1
（一）网站开发工具——Dreamweaver 1
（二）图片处理工具——Adobe Photoshop 1
（三）JavaScript 2
三、网站选题分析 2
（一）选题背景 2
（二）选题意义 2
（三）选题内容 2
四、网站的设计与实现 3
（一）网站的总体设计 3
（二）网站结构 3
（三）排版构架 3
1.功能结构图 3
2.界面设计 3
五、首页的设计与完成 5
（一）Logo设计 6
（二）导航栏的设计 6
（三）文字部分的实现 7
（四）JavaScript特效的设计与完成 8
六、子页的设计 9
（一）社联简介 9
（二）组织机构 9
（三）社团风采 10
（四）联系我们 10
（五）子页笛子社团 11
七、结束语 11
致谢 13
参考文献 13
一、引言
互联网经过半个世界的迅猛发展，已经不断深入到我们的生活当中来。首先我们的学习手段不再是单一的传统学习，很多人选择在家中通过互联网学习。互联网已经深入我们的生活中，像现在在家就可以和亲戚朋友聊天、语音、视频，甚至在家就可以购物，足不出户就可以取到物件，非常方便。大家也都是通过网页浏览信息，可见网页是有很好的广告效应，可以通过网页传播社团网站的魅力。
一般的网页制作方式分为静态和动态两种，本网站采用的方法是静态网页设计方式 *好棒文|www.hbsrm.com +Q: *351916072*
。静态网页的设计比动态网站简单，主要是运用HTML和CSS技术，展示特定的图片和文字在网页中，它是所有网页设计的基础技术。本网站主要用到的软件Dreamweaver，它是比较可视化的软件，并且运用起来也不难。再加上Photoshop，JavaScript 为辅助工具，Photoshop主要负责修改图片，美化图片这一块，JavaScript是为了在原本比较生硬的网站中添加一点生机，丰富一点的动画效果，也是每个网页都会用到的特效。
随着现在教育的发展，国家不单重视学生知识的发展，也重视德智体美劳的全面发展，所以现在大学的社团活动也是非常丰富的，使同学们在学习知识的同时也能放松心态。各种各样的社团活动让人眼花缭乱，学生们争先恐后参加，加入社团的积极性高涨，这是一个好事，说明各种学校开始重视学生才艺的发展，因此各种各样的社团纷纷出现。
社团网就是针对各种各样社团的介绍，是所有社团的聚合，在本网站，可以全面的了解各个网站的活动。是对社团的一个有力的宣传，也是对同学们在三年时间的珍贵的画面。
二、开发工具
（一）网站开发工具——Dreamweaver
Dreamweaver是美国Adobe公司的著名网站开发工具，Dreamweaver 8是Macromedia2005年6月公司正是投入市场的，后来发展成熟，Dreamweaver分为Macromedia时代和Adoba时代。本人社团网站开发使用的Dreamweaver 8，dreamweaver中的HTML、CSS两种模式可以相互切换，它自身有许多出彩的设计理念；本身比较实用，能够轻松上手，简单易学，不需要手写代码，就能轻松创建各种动态效果；也有自定义及扩展功能，也支持跨浏器和层叠样式表，它采用多种先进技术，能够高效地创建有动感效果的网页。
（二）图片处理工具——Adobe Photoshop
Adobe?Photoshop，简称“PS”，它是强大的图像处理软件。也是Adobe?公司开发的最
好的软件之一。。它可以对图像进行修饰、对图形进行编辑以及对图像色彩处理，另外，它还有绘图和输出功能等等很多，对我们需要的图片可以进行魔术棒、钢笔、索套等功能的集合处理处我们需要的图片。比较简单易学，总之，它深受广大设计人民的喜欢和推广。
（三）JavaScript
JavaScript简称JS,它是一种直译式脚本语言，最早是在HTML网页上使用，主要是用来给HTML网页增加动态功能。它的优点是语法简单，基本上web程序员都会，而且性能出色，代码结构清晰。JS的特效是网站魅力的所在。JS是人们常用的滑动门，以及当鼠标移动到链接上出现的隐藏层，都多多少少用到了JS。现在出色的网页，为了提高用户体验，能够让使用者更加方便浏览网站，都使用了比较多的JS。
三、网站选题分析
（一）选题背景
在大学的这三年，多少人从一个什么都不懂的小孩子变成现在毕业的职场强人，大学给学生的成长添上了浓重的一笔。在大学里，不仅可以学到专业上的知识，也可以在大学的时间里参加丰富的社团生活，比如心理协会，篮球运动，可以和同学在一起享受社团的魅力，但是现在的学校普遍缺少一个全面的社团网站,一般学校网站是记录学校的一些重大公告，最新动态，关于社团活动的内容也非常少，所以本网站是针对社团的宣传网站。
（二）选题意义
在学校期间，本人也参加过很多社团活动，一般都是通过传统的海报宣传、展板宣传。这些宣传比较不灵活，而且宣传力度也不是很大。因此本人想能不能有一种比较快捷的浏览方式，想到现在互联网在生活中的应用这么广泛，所以本人想到通过网站的方式宣传，不仅可以加大宣传力度，也是一种记录生活美好画面的方法。
（三）选题内容
本选题对于的全部社团有一个大概的介绍。分为首页，社联简介，组织机构，社团风采，社团文学，文件下载，联系我们和社团论坛，其中社联简介是介绍的各个社团文化，也是本网站重点的设计方向，主要向大家展现年轻学子青春活力的一面。
四、网站的设计与实现
（一）网站的总体设计
首先，一个优秀成功的网站，最重要的是外观和内容。外观给人第一眼看上去有视觉冲击力，外观的设计不宜太过花哨，简单明了更能突出网站的亮点。其次是内容必须要丰富，符合网站的主题设计，这样才能形成一个优秀的网站。
（二）网站结构
根据网站的内容需求，本网站主要分为社团首页，社联简介，社团风采，社团风采，社团文学，文件下载，联系我们。
（三）排版构架
1.功能结构图
一个好的网站最重点是社团网站功能结构图，如图4-1：
图4-1 社团网站功能结构图
2.界面设计
首页的界面设计
一个关于学校社团的网站，首先最重要的是第一眼就能看出来是出自哪个学校的，所以本网站首页用最醒目简介的图片放在主图位置。排版的话也是采用比较简单明了的排版方式，LOGO,图片和文字，具体网站布局如图4-2：
LOGO
图片
滚动图片
公布栏
色彩搭配
主要色彩： 蓝色+白
蓝色给人一种稳重安静的感觉，喜欢蓝色的人都给人一种安全感，而且重视人与人之间的依赖的关系，它代表社团成员之间彼此互相关照，礼貌待人。而且蓝色是大海的颜色，有一种胸怀宽阔的意义和永不言败的精神。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1731.html
