社团网的设计与实现
目 录
引言 1
一、网站设计简述 2
二、开发工具的选择及相关技术 2
（一）开发工具的选择 2
1、Photoshop 2
2、Dreamweaver 3
3、Footstone Capture 3
（二）相关技术 3
1、JavaScript技术 3
2、DIV+CSS布局 4
三、网站界面设计 4
（一）风格定位 4
（二）网站布局 5
四、网站开发流程 7
（一）网站需求分析 7
1、开发背景 7
2、开发目的 7
3、功能简述 7
（二）材料搜集和加工 7
1、素材选择和制作 7
2、网站信息搜集与整理 7
3、LOGO的制作 8
（三）网站代码编写 8
（四）网站的运行 8
（五）网站的维护 9
五、网站功能模块的实现 9
（一）功能模块 9
1、收藏功能 9
2、简介模块 9
3、专题模块 9
4、帮助模块 10
5、JS导航模块 10
（二）功能展望 11
六、网站开发后续工作 11
（一）兼容性测试 11
（二）W3C验证 11
总结 12
致谢 13
参考文献 14
附录 15
引言
随着计算机网络技术的飞速发展，我们的视野逐渐开阔起来，各种各样的网络新鲜事物呈现在我们 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
眼前。无论是政府、企业、学校等等，都有它自己的网站。不难发现，当今大学社团网站比较少，当我们上网进入到我们学校的网站时，浏览到各种信息，很难及时找到关于社团的信息。当代大学生活中，社团已经成为了大学的一个符号，与大学生的生活密不可分。社团网站可以为大学生们提供一个良好的信息交流和管理的平台，介绍社团信息，宣传社团文化，学生可以及时了解社团动态，关注社团，有利于社团的良好发展。为了迎合网络时代的飞速发展，弥补大学社团网站的空缺，大学社团应当有一个属于自己的网络平台。
由于第二代互联网的发展，即web2.0的发展。网络平台向用户开放，更加注重互动交流，可以使用户更好的参与其中。社团网站平台正是一个包含互动交流的平台。现在各大网站都在web标准上，采用DIV+CSS技术进行布局，当然Dreamweaver工具的应用很好地体现了这样一种布局，并且使用起来简单方便。由于要考虑到兼容各种浏览器，在网站编程过程中对代码的规范性必然要严格要求。
一、网站设计简述
网站是一个向有需求的浏览者展示信息的载体。网站设计是网站开发者设计网站的过程，它结合了文字、图像、视频等信息为一体，然后设计者通过网站开发工具将其进行美化、加工，呈现给浏览者丰富的信息资源。因为网站设计可以结合声音、视频等多媒体文件，可以从听觉、视觉方面给予浏览者更好的体验。
网站设计有两种类别，即分静态网站和动态网站。静态网站一般以观赏性、形象性为主，展示给浏览者的往往是带有广告或宣传类的信息。动态网站相对于静态网站来说，设计相对难，动态网站更好地展示出网站的交互性，就比如留言板，用户们可以在网站上相互交流。它需要将网站后台和数据库相连接，使得网站上的信息可以通过后台管理进行增加、删除，更改操作。可说是，网站设计是一个美术与技术的结合。
一个成功网站的开发，离不开具有独特灵感的设计者。有灵感的设计者会考虑到各种关键因素，尽可能得迎合浏览者的兴趣，给予浏览者丰富的浏览体验。当然，设计者也要具备一定的审美能力。当今信息时代，许多东西正逐步走向个性化，网站设计也是如此。
二、开发工具的选择及相关技术
（一）开发工具的选择
选择合适的开发工具网站设计的必要前提。对于本次毕业设计，静态网站的设计，采用的常用的网站开发工具Dreamweaver，素材制作和加工的编辑工具Photoshop,同时还采用了老师推荐的，我个人也非常喜欢的Footstone Capture，虽然被称为是抓屏工具，但它所具备的功能非常多，而且十分强大。
1、Photoshop
一个成功的网站离不开这样一个软件，Adobe Systems开发的一款图像处理软件，它就是Photoshop。Photoshop可以在很多种环境下运行，比如我们常用的Windows系统。除此之外，Android系统和苹果系列电脑上的Mac OS系统等等也支持它的运行。在网站设计过程中,Photoshop深受广大设计者的喜爱，拥有强大的图像处理功能，用它可以直接制作我们所需要的素材，同样我们所搜集的素材，经过这样一款软件的细心加工之后，我们将会很佩服我们自己能做出那样一种图案，前提要有这方面的基础，了解一些Photoshop的基本操作。只要你有丰富的想象力，脑海中浮现的图案，在Photoshop的帮助下一般都能实现。
2、Dreamweaver
Dreamweaver,简称“DW”，原名Macromedia Dreamweaver,随着Macromedia被Adobe公司收购之后，名字变为Adobe Dreamweaver。它是一款常见且常用的网页编辑器，支持style sheet，也可以用来管理网站，并且支持跨操作系统平台，编写的页面跨浏览器。当开始接触网站编辑的学习时，一般初学者接触DW的时候会比较多，因为在做网站编程工作的时候，在编写代码页面，当我们按空格键时，鼠标光标处会自动跳出将要使用的一些可供选择的代码，那些代码会随着你输入的按键慢慢精确到你想要的代码。对于熟练的网站编程人员来说，方便快捷，对于初学者来说，如果碰到不熟悉的代码，只要记住前几个字母就可以轻松找到想要的代码。但是，建议初学者能自己输入完整的代码，尽量输入完整，这样不但强化了自己的编程的熟练度，而且还能加深对代码的记忆。
3、Footstone Capture
Footstone Capture，一款小巧型抓屏工具，小而强大。超级方便的截图功能，使用者可以轻松把握截图的大小准确度；屏幕取色器，再也不用担心喜欢的颜色怎么拿来用了；图像个性化和转换功能，可以修饰图像和将其转化为PDF文件；拥有屏幕标尺，当我们将网页的设计工作做完后，将要进行编程工作时，可以利用这个屏幕标尺功能对网站页面的像素进行测量，便于之后的代码编写；具备视频录制功能，自己可以针对性地选好一个区域进行录制，视频录制完后为WMV格式；等等。这款工具的方便性和实用性，选它帮助我们做网站设计必然是一个不错的选择。
（二）相关技术
做好网站最基本的是对HTML语言的有很好的掌握，很好的利用DIV+CSS样式进行布局。在此基础上，也可以借助一些语言，比如JavaScript语言，对我们所做的网页添加特效，是页面显示动态效果，增加浏览者视觉体验。
1、JavaScript技术
1、开发背景
当代网络技术发展飞速，网站早已普及。但是在许多大学里，社团网站的建立并不是很多。除了学习之外，社团是大学生比较关注的圈子，许多美好的记忆都在这里产生。现在许多大学社团管理方面比较繁琐，缺乏效率。在大学里面，特别是新生，不能对一些社团深入了解，而没能进入自己喜欢的社团。
引言 1
一、网站设计简述 2
二、开发工具的选择及相关技术 2
（一）开发工具的选择 2
1、Photoshop 2
2、Dreamweaver 3
3、Footstone Capture 3
（二）相关技术 3
1、JavaScript技术 3
2、DIV+CSS布局 4
三、网站界面设计 4
（一）风格定位 4
（二）网站布局 5
四、网站开发流程 7
（一）网站需求分析 7
1、开发背景 7
2、开发目的 7
3、功能简述 7
（二）材料搜集和加工 7
1、素材选择和制作 7
2、网站信息搜集与整理 7
3、LOGO的制作 8
（三）网站代码编写 8
（四）网站的运行 8
（五）网站的维护 9
五、网站功能模块的实现 9
（一）功能模块 9
1、收藏功能 9
2、简介模块 9
3、专题模块 9
4、帮助模块 10
5、JS导航模块 10
（二）功能展望 11
六、网站开发后续工作 11
（一）兼容性测试 11
（二）W3C验证 11
总结 12
致谢 13
参考文献 14
附录 15
引言
随着计算机网络技术的飞速发展，我们的视野逐渐开阔起来，各种各样的网络新鲜事物呈现在我们 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
眼前。无论是政府、企业、学校等等，都有它自己的网站。不难发现，当今大学社团网站比较少，当我们上网进入到我们学校的网站时，浏览到各种信息，很难及时找到关于社团的信息。当代大学生活中，社团已经成为了大学的一个符号，与大学生的生活密不可分。社团网站可以为大学生们提供一个良好的信息交流和管理的平台，介绍社团信息，宣传社团文化，学生可以及时了解社团动态，关注社团，有利于社团的良好发展。为了迎合网络时代的飞速发展，弥补大学社团网站的空缺，大学社团应当有一个属于自己的网络平台。
由于第二代互联网的发展，即web2.0的发展。网络平台向用户开放，更加注重互动交流，可以使用户更好的参与其中。社团网站平台正是一个包含互动交流的平台。现在各大网站都在web标准上，采用DIV+CSS技术进行布局，当然Dreamweaver工具的应用很好地体现了这样一种布局，并且使用起来简单方便。由于要考虑到兼容各种浏览器，在网站编程过程中对代码的规范性必然要严格要求。
一、网站设计简述
网站是一个向有需求的浏览者展示信息的载体。网站设计是网站开发者设计网站的过程，它结合了文字、图像、视频等信息为一体，然后设计者通过网站开发工具将其进行美化、加工，呈现给浏览者丰富的信息资源。因为网站设计可以结合声音、视频等多媒体文件，可以从听觉、视觉方面给予浏览者更好的体验。
网站设计有两种类别，即分静态网站和动态网站。静态网站一般以观赏性、形象性为主，展示给浏览者的往往是带有广告或宣传类的信息。动态网站相对于静态网站来说，设计相对难，动态网站更好地展示出网站的交互性，就比如留言板，用户们可以在网站上相互交流。它需要将网站后台和数据库相连接，使得网站上的信息可以通过后台管理进行增加、删除，更改操作。可说是，网站设计是一个美术与技术的结合。
一个成功网站的开发，离不开具有独特灵感的设计者。有灵感的设计者会考虑到各种关键因素，尽可能得迎合浏览者的兴趣，给予浏览者丰富的浏览体验。当然，设计者也要具备一定的审美能力。当今信息时代，许多东西正逐步走向个性化，网站设计也是如此。
二、开发工具的选择及相关技术
（一）开发工具的选择
选择合适的开发工具网站设计的必要前提。对于本次毕业设计，静态网站的设计，采用的常用的网站开发工具Dreamweaver，素材制作和加工的编辑工具Photoshop,同时还采用了老师推荐的，我个人也非常喜欢的Footstone Capture，虽然被称为是抓屏工具，但它所具备的功能非常多，而且十分强大。
1、Photoshop
一个成功的网站离不开这样一个软件，Adobe Systems开发的一款图像处理软件，它就是Photoshop。Photoshop可以在很多种环境下运行，比如我们常用的Windows系统。除此之外，Android系统和苹果系列电脑上的Mac OS系统等等也支持它的运行。在网站设计过程中,Photoshop深受广大设计者的喜爱，拥有强大的图像处理功能，用它可以直接制作我们所需要的素材，同样我们所搜集的素材，经过这样一款软件的细心加工之后，我们将会很佩服我们自己能做出那样一种图案，前提要有这方面的基础，了解一些Photoshop的基本操作。只要你有丰富的想象力，脑海中浮现的图案，在Photoshop的帮助下一般都能实现。
2、Dreamweaver
Dreamweaver,简称“DW”，原名Macromedia Dreamweaver,随着Macromedia被Adobe公司收购之后，名字变为Adobe Dreamweaver。它是一款常见且常用的网页编辑器，支持style sheet，也可以用来管理网站，并且支持跨操作系统平台，编写的页面跨浏览器。当开始接触网站编辑的学习时，一般初学者接触DW的时候会比较多，因为在做网站编程工作的时候，在编写代码页面，当我们按空格键时，鼠标光标处会自动跳出将要使用的一些可供选择的代码，那些代码会随着你输入的按键慢慢精确到你想要的代码。对于熟练的网站编程人员来说，方便快捷，对于初学者来说，如果碰到不熟悉的代码，只要记住前几个字母就可以轻松找到想要的代码。但是，建议初学者能自己输入完整的代码，尽量输入完整，这样不但强化了自己的编程的熟练度，而且还能加深对代码的记忆。
3、Footstone Capture
Footstone Capture，一款小巧型抓屏工具，小而强大。超级方便的截图功能，使用者可以轻松把握截图的大小准确度；屏幕取色器，再也不用担心喜欢的颜色怎么拿来用了；图像个性化和转换功能，可以修饰图像和将其转化为PDF文件；拥有屏幕标尺，当我们将网页的设计工作做完后，将要进行编程工作时，可以利用这个屏幕标尺功能对网站页面的像素进行测量，便于之后的代码编写；具备视频录制功能，自己可以针对性地选好一个区域进行录制，视频录制完后为WMV格式；等等。这款工具的方便性和实用性，选它帮助我们做网站设计必然是一个不错的选择。
（二）相关技术
做好网站最基本的是对HTML语言的有很好的掌握，很好的利用DIV+CSS样式进行布局。在此基础上，也可以借助一些语言，比如JavaScript语言，对我们所做的网页添加特效，是页面显示动态效果，增加浏览者视觉体验。
1、JavaScript技术
1、开发背景
当代网络技术发展飞速，网站早已普及。但是在许多大学里，社团网站的建立并不是很多。除了学习之外，社团是大学生比较关注的圈子，许多美好的记忆都在这里产生。现在许多大学社团管理方面比较繁琐，缺乏效率。在大学里面，特别是新生，不能对一些社团深入了解，而没能进入自己喜欢的社团。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1732.html
