期末大作业 网页设计与网站开发

TermExaminationReport网页制作和网站开发绪论1.1背景学校社团形式类似于“特长兴趣爱好小组”的形式，学生社团是非营利性的，针对具有某方面特长，爱好，兴趣，关注某一焦点问题的一类学生自发成立的团体。社团从中起到了召集人的作用，为广大会员提供活动资源，参与活动机会，获取相关方面的知识与信息；同时，社团也代表广大会员的利益。鉴于现在整个学校没有任何一个能够将社团整合在一起的平台，我们项目组决定参与“社团联盟”网站的开发与管理，通过电脑与移动终端相结合的方法，使同学能够随时随地了解云南大学社团的前沿动态，在服务同学的同时，切实提高自己的专业实践能力。在云大我们项目组是首家提出“云大社团联盟”这一理念，具有很大的意义。为云大学子带来很多的好处。可以让大家更了解各个社团即时动态；可以在一定程度上减少工作量；还可以更科学有效的进行管理，能更好地与同学交流互动，扩大社团的影响力与号召力等等。1.2拟研究问题国内外现状分析云大社团联盟在国内虽然不是首开先河，但在云大还是首家，具有很大的创作意义，前景可观。可以让大家更了解各个社团；可以在一定程度上减少工作量；还可以更科学有效的进行管理等等。这个网站的诞生不仅方便社联的同学进行社团的管理，同时也让未加入社团的同学与社团有了直接的联系，同学们的交流更广泛，则云南大学社联的发展前景也将更加广阔。并且在网站成功运作之后，我们会将网站覆盖范围扩大到整个昆明甚至整个云南的所有大学，这样将通过社团之间的联系能够很大程度加深各大高校之间的友好协作关系。1.3研究方案与技术路线WebstorageAPI我们使用HTML5的WebstorageAPI来代替cookies，目前我们经常使用的保存网站密码，使用的就是cookies，将密码信息缓存到本地，当需要时再发送至服务器端。然而，cookies有其本身的缺点—4KB的大小和反复在服务器和本地之间传输，并且无法被加密。对于cookies的反复传输，不仅浪费了使用者的带宽、供应商的服务器的性能，更增加了被泄露的危险。webstorageAPI将至少支持4M的空间作为缓存，不再无休止的传输相同的数据给服务器，而只在服务器请求和做出更改时传输变更的必须文件，这样就大大节省了带宽，也减轻了服务器的压力。HTML5<video>标签相比于传统浏览器通过插件（如Flash）来显示视频的方式，我们使用了HTML5中新的<video>标签来做视频展示，以此达到宣传社团的目的。HTML5的<video>标签不需要浏览器安装相应插件而直接进行预加载，这样将使网站变得更加便捷。<embed>标签用来定义嵌入的插件。<audio>标签用来定义声音，比如音乐或其他音频流。CSS3级联样式表对于网站样式结构方面，我们使用了CSS3技术。CSS3带来了许多新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。我们用CSS3的媒体查询为不同的显示设备定义相匹配的样式，灵活实现了智能的流体布局，CSS3还为我们带来了强大的选择器以及变形动画。在CSS3的帮助下，我们将网站内容变得丰富多彩，并且可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。PHP在网页开发中，PHP能够有比CGI或者Perl更快速地执行动态网页，用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；又一方面是PHP可以执行编译后的代码，变异可以达到加密盒优化代码运行，使代码运行更快。近年来，PHP的发展很快。对于大多数的网页开发，都优先选择PHP语言，因为PHP的语法简单，易掌握。所以我们这次也选择PHP来开发我们的后台服务器。MYSQLMYSQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有的数据库放在一个大仓库内，这样就增加了速度并提高了灵活性。由于MYSQL体积小，速度快，总体拥有成本低，一般中小型网站开发都选择MYSQL作为网站数据库。如今大多数的网站开发都选择PHP+MYSQL，这两者搭配可以组成良好的开发环境。Apache作为世界排名第一的Web服务器软件。它几乎可以运行在所有广泛使用的计算机平台上。在跨平台上和安全性方面也是做到了很好。由于PHP跨平台性强，而Apache也具有跨平台性，所以在开发网页服务器的时候，我们选择了PHP+Apache+MysqL来开发网站，以便增强网页总体的可移植性。1.4可行性分析创造云南大学社团的品牌影响力，使其在全国大学生社团联合会中具有更高的影响力与号召力；丰富云南大学师生的课余生活，使同学们在紧张的学习生活中能够通过自己的兴趣爱好来缓解学习的压力，掌握更多的技能；锻炼和提高同学们解决问题的能力；能够扩大我们的交际圈。所谓多个朋友，多条路走。充分利用社团的条件，多去结交一些其他班级或学院的朋友，不但可以提高自己的交际能力，而且能够为自己赚得更多的人气。若大家能为同一个目标而努力，那势必会增进友谊，收获很多快乐。能够为以后步入社会打下基石。任何同学的社团经历是简历中不可或缺的一部分，也是你找工作时可以好好利用的砝码。另外，在以后的工作中，从社团活动中学到的为人处世之道一定可以派上用场。网站主题2.1研究目标本项目的最初构想是帮助云南大学社联建立一个可以相互交流、相互帮助的平台。这个网站的诞生不仅方便社联的同学进行社团的管理，同时也让未加入社团的同学与社团有了直接的联系，同学们的交流更广泛，则云南大学社联的发展前景也将更加广阔。并且在网站成功运作之后，我们会将网站覆盖范围扩大到整个昆明甚至整个云南的所有大学，这样将通过社团之间的联系能够很大程度加深各大高校之间的友好协作关系。2.2研究内容本项目在apache和mysql的环境下使用PHP程序语言进行网站开发，页面设计使用Dreamweaver进行设计。而在一些特殊的页面设计与网络应用服务上将在CSS和JavaScript的基础上使用最新的html5技术。网站主要实现功能如下：1.会员登录以及本校同学身份认证。2.社团管理。各个社团板块将存储社团成员的信息以及提供删除增加等操作，并且将有展示信息展现社团风貌。3.社团交流。每个社团板块将有一个独立的聊天室以供社团人员之间的交流以及非社团人员的查询。4.加入社团申请。同学们可以通过申请加入社团来获得初步认可，然后该社团社长将通知该同学进行进一步认证。5.公告新闻。网站首页将提供社团新闻发布功能。6.打造服务于学生的高普及度网站。着眼于社团之间的交流与合作，使网站服务学生，服务社联，服务学校。7.社团首页展示。在网站首页将分块展示每一个社团的logo，点击每个logo可进入每个社团的独立页面。8.有独立的用户个人主页。一位用户都拥有自己的个人主页，可以查看同社团好友已关注的社团和所加社团。9.社团个性化管理功能。社团管理层用户具有较高权限，可以个性化编辑自己的社团页面，并且管理自己的社员用户。10.运用了当下最为先进的网站架构技术与开发环境。网站分析3.1网站建设需求分析使所有云大学子能够掌握云大社团的前沿信息，并且通过移动终端可以是每一位同学能够通过自己的移动设备随时登录“社团联盟”，了解自己感兴趣的社团的即时动态。同时对于社团负责人而言，通过“社团联盟”的平台能够更好的宣传自己社团的优点与特长，更好地与同学进行互动，宣传社团的品牌活动从而扩大社团的影响力与号召力。这个网站的诞生不仅方便社联的同学进行社团的管理，同时也让未加入社团的同学与社团有了直接的联系，同学们的交流更广泛，则云南大学社联的发展前景也将更加广阔。并且在网站成功运作之后，我们会将网站覆盖范围扩大到整个昆明甚至整个云南的所有大学，这样将通过社团之间的联系能够很大程度加深各大高校之间的友好协作关系。3.2网站价值体现我们的网站拥有“云大百团”资源，可谓资源丰富，前景可观。网站运作成功后成百上千的访问量会创造无限价值。继而从商业的角度来看，价值也是十分可观。若果有需要我们还会开发同款在其他移动终端方面的应用，真正实现“掌”握一切，没有遗漏。针对该项目发表相关的论文，推动网站发展的同时提升其价值。云大社团联盟在国内虽然不是首开先河，但在云大还是首家，具有很大的创作意义，前景可观。可以让大家更了解各个社团；可以在一定程度上减少工作量；还可以更科学有效的进行管理等等。这个网站的诞生不仅方便社联的同学进行社团的管理，同时也让未加入社团的同学与社团有了直接的联系，同学们的交流更广泛，则云南大学社联的发展前景也将更加广阔。并且在网站成功运作之后，我们会将网站覆盖范围扩大到整个昆明甚至整个云南的所有大学，这样将通过社团之间的联系能够很大程度加深各大高校之间的友好协作关系。3.3用户功能分析设计好网站的样式以及模块，制作出一个布局合理，大方美观、服务于同学们的网站。实现web注册功能（利用web数据库）。实现社团内部管理员创建社团的功能（必须为云南大学真实存在社团）。运用Webscoket实现相应的社团聊天室功能。实现社团内部管理人员对申请加入该社团的学生的考核验证功能。新闻公告功能，使同学们能够及时了解各个社团的动态。共同兴趣交流平台，在此平台上你可以寻找和你志同道合的朋友。类似于微博的信息交流平台。在网站运作成功之后，我们将把该网站做成移动应用在手机移动平台上（利用AndroidSDK开发环境），使同学们能够使用手机随时随地管理和修改自己的信息。网站设计4.1登陆注册设计图4.1登陆注册流程图如图4.1所示，是网站的登陆注册流程图，通过流程图我们可以清楚的看到整个网站前台权限设置，网站的前台共有三种权限，分别是游客，普通会员和社团成员，不同的角色所拥有的权限是不一样的，其中只有社团成员才能使用网站的所有功能。如下图4.2和4.3所示的是社团长和站长的权限，其中社团长是普通会员通过申请后由站长审核通过后赋予其权限的，而站长是网站的开发和维护人员，具有最高权限。图4.2社团管理权限图4.3网站管理权限设计4.2数据库设计论坛数据库设计：图4.4论坛8个板块数据库表单图4.5论坛回复数据库表单图4.6论坛版主发布信息的数据库图4.7用户信息数据库表单图4.8社团基本信息数据库表单图4.9社团及主要负责人信息数据库表单图4.10大纲级别设定图4.11新闻公告数据库图4.12论坛数据库图4.13管理员登陆后台日记记录图4.14新闻数据库网站实现5.1后台功能展示我们的后台实现了社团，新闻，公告，论坛，用户的管理等，提升了用户使用的便捷度，还创建了用户友好界面，使得网站美观又实用。图5.1后台登陆页面管理社团：管理员可以在这里管理社团，包括添加新的社团，上传社团logo，修改和删除社团。具体如下图所示。图5.2社团管理页面图5.3添加社团页面图5.4修改社团页面图5.5新闻管理页面图5.6添加新闻界面图5.7公告增加页面图5.8用户管理界面5.2前台界面展示如下图5.9,5.10所展示的是网站的主页面，网站的主页使用了HTML5的动画效果使网站的主页看起来十分绚丽图5.9首页图5.10首页登陆界面：图5.11用户登录界面图5.12个人信息查看图5.13普通用户登录后主页面图5.14管理员登陆后的主页图5.15申请加入社团图5.16社团管理员登陆界面图5.17管理员审核加入社团申请社团展示：图5.18社团界面论坛展示：图5.19论坛界面图5.20版主热帖界面图5.21关于我们界面聊天室功能展示：图5.221对1聊天展示图5.23社团内聊天展示图5.24对个人和对所有人聊天展记录示学期总结本次大作业我们小组的题目是“基于HTML5的云大社团联盟”网站。在大作业中，我们了解了HTML5语言，PHP语言的应用、Apache服务器的使用，MySQL数据库的搭建等与网站建设相关的技术。通过本次专业实训，我们了解到了现在网站开发的相关前沿技术在今后一段时间内的重要性，所以我们在今后的学习过程中还将继续运用我们所学到的知识来开拓自己的视野，提高自己的实践水平。此次任务，我们运用HTML5等相关技术完成了云南大学社团联盟网站的建设，该网站的建立使云南大学丰富的社团资源得到了充分的整合并且加强了社团之间的交流以及云大社联的对外宣传。云大同学通过登录云南社团联盟网站可以了解到社团的最新动向与活动宣传，进入社团主页后可以与该社团相关人员直接交流，同时，还方便了社团负责人对社团进行管理。但是通过大作业我们也发现了该网站的一些不足之处，例如没有将HTML5技术充分应用到网站的各个层面以及由于设备原因数据库的容量没有达到预期的要求。这些也是我们在今后的学习过程中需要改进的地方。在本次大作业中，我们组的成员互帮互助，在我们的共同努力之下不但取得了一定的成绩，还是我们彼此之间建立了深厚的友情。组员之间互相交流及