毕业设计云南省高校同乡交流互助平台.doc

毕 业 设 计 网页设计云南省高校同乡交流互助平台云南省高校同乡交流互助平台 学院： 姓名： 学号： 云南高校大学生交流互助 - 2 - 目目 录录 摘摘 要要.- 3 - 关关 键键 词词.- 3 - 云南高校大学生互助云南高校大学生互助.- 4 - 一一 引言引言.- 4 - （一）研究设计的意义- 4 - （二）云南高校同乡交流互助平台设计的目的- 4 - 二二 现状及设计目标现状及设计目标.- 5 - （一）现在存在的网站的特点及优缺点分析- 5 - （二）现在存在的网站存在的问题及解决办法- 5 - （三）设计要达到的目标- 7 - 三三 要解决的几个关键而问题要解决的几个关键而问题.- 8 - (一)设计中要解决的问题- 8 - （二）设计中采用的关键技术急复杂性分析- 8 - 四四 网页的大致创作步骤及部分模块概况网页的大致创作步骤及部分模块概况.- 9 - （一）网页设计实现的策略描述- 9 - （二）部分主要网页的模型结构- 10 - 五五 网页建设实现的技术及工具网页建设实现的技术及工具.- 12 - （一）分模块详细描述系统各个部分的实现方法- 12 - 六六 性能测试与分析性能测试与分析.- 14 - （一）测试实例- 14 - （二）测试环境与测试条件- 16 - 七七 结束语结束语.- 17 - 致 谢 辞.- 18 - 参考文献- 18 - 云南高校大学生交流互助 - 3 - 摘摘 要要 漂泊在异乡，无论你在云南的哪所高校，无论贫富贵贱，欢迎你加入到云 南高校同乡互助平台这集体，在这里能畅所欲言，有事找平台，相信平台中的 乡亲们会尽力帮助。云南高校同乡互助平台，于 2011 年 8 月开始筹划，并在 2012 年年初正式成立，在开始筹划到正式成期间，我们对各个省，尤其是云南 省以往的同乡会，同乡群等做过详细的调查研究，克服了传统的老乡会存在职 能单一，提供服务落后，覆盖范围小等缺点，以建设成全省最大的大学生同乡 交流基地为目标。广大学生在这里可以享受跨校结识老乡，跨校聚会、交友、 旅游等服务以及有更多获得大学生兼职岗位地机会，全面打造一个覆盖云南高 校的大学生同乡交流服务平台。 云南高校同乡交流平台的创建能更好的增加彼此之间的友谊，毕竟出门在外， 老乡是很亲的。特别是在省外读书的时候，大学一般都是省内招的比较多，省 外就几十个，再分配下去的话一个学校估计就几个人而已。在交流平台可以增 进大家的了解啊或者新生有很多不懂的地方，不管是学习上还是生活上可能都 会出现不适应之类的事情。同乡的或者异乡的学长学姐毕竟比较有经验，在这 他们可以更快的帮忙解决问题 云南高校同乡交流平台根据遵纪守法，自愿、平等，互助互爱的原则拟定 平台的章程，我们会尽最大的努力服务我们所有的成员，为我们的交流创造更 多的机会。 关关 键键 词词 费会员注册 同乡学生互助 云南高校同乡论坛 同乡户外运动 同乡交友 招聘信息 云南高校大学生交流互助 - 4 - 云南高校大学生互助云南高校大学生互助 一一 引言引言 （一）研究设计的意义 美不美家乡水，亲不亲故乡人！ 云南高校大学生同乡交流互助平台会让我们在异乡相识，并且彼此成为朋 友！家乡水最美，故乡人最亲。在长期漂泊在外的游子心中，乡情永远是深厚、 淳朴、亲切的话题，她饱含了游子真挚的情感和眷恋，寄托了游子美好的追求 和向往。云南高校同乡交流互助平台的建立，亦是让所有身处异乡的游子在这 里，寻找到熟悉的乡音，感受到醇厚的乡情，分享到有效的资源，体会到真诚 的互助。 1、通过互助平台，了解各地的基本情况，同时遇到问题也先是求助于同乡 会借助同乡力量及人脉关系网，解决一时之急，这种乡亲乡情文化无疑是一种 无形的财富，其发挥的作用也往往超越主流社会的服务资源，尤其是情感交流， 更有不可替代的地位。 2、远离故乡,难免会有强烈的思乡之情。要是能在异地他乡遇到故乡的人 那真是一件快事，俗话说的好，老乡见老乡，两眼泪汪汪.通过这一个平台，就 能认识同在异地他乡求学的老乡！ 3、云南高校同乡互助平台，覆盖云南各个高校，老乡会圈子的扩大，意味 着可以有更多的机会去结识其他高校的老乡，并与他们成为好朋友。 4、还可以获得由同心圆大学生创业社团联合会提供的一些兼职岗位，让你 的大学生活充实而又意义。 （网站上也会发布很多的兼职招聘信息） 5、可以参加平台发起的大型跨校区老乡聚会，还有一些其他的娱乐活动， 包括旅游，聚餐，竞技项目等。 6、在放假回家的时候也可以通过这个平台代购，既方便又快捷。也可以在 放假的时候同乡的同学、朋友一起相约回家，这样安全得到一定的保障。 7、还会发起不同地方的大学生一起交流聚会使各地文化交流步伐加快。也 让更多的外乡让人了解自己的家乡！ （二）云南高校同乡交流互助平台设计的目的 为在云南省各个高校求学的异地学子提供一个拓宽视野交流互动平台。也 为更好的使外乡的人搞好的了解自己的家乡。人在他乡，因为你我同来自一个 故乡而倍感亲切。在异乡漂泊的日子里，浓浓乡情将陪伴着你度过每一个日日 夜夜！亲爱的各位朋友，期待你的加入！ 云南高校大学生交流互助 - 5 - 二二 现状及设计目标现状及设计目标 （一）现在存在的网站的特点及优缺点分析（一）现在存在的网站的特点及优缺点分析 现存网站的 优点： 1、传统同乡会宗亲色彩很浓。 2、其内在团结力很强，甚至可以共同投资，共同培育后代，现在不少宗亲 会就是依靠当年投资物业等挹注维持会务至今 缺点： 1、但是传统的老乡会却存在职能单一，提供服务落后，覆盖范围小等缺点。 2、老乡会的内容重点不明确，到底它主要反映哪方面的内容？缺乏鲜明的 个人意见，总之如死水一潭，气氛太过苍白，不能引人入胜！ 3、活动的范围较小，就是发起聚会的那部分人，可能就只是网站的管理层 之类的，估计大多数人住在周围的，而没有做到真正的同乡交流互助，只是站 内的部分人聚在一起吃喝玩乐。并未将聚会的真正目的发挥出来。 4、在网站的、贴吧里发帖子的数量较少，质量较低。我没看到想看的反 映家乡面貌的照片，没看到反映同乡的点点滴滴，反而更多的是打酱油式没话 找话的跟贴。贴吧内信息较为杂乱，有的在里面啊发起小广告，有的在里面发 一些不文明信息。从这些都可以看出贴吧的管理不当。 5、紧跟时代潮流不明显，缺乏当前国内外热点问题的讨论，另外讨论的语 言比较保守，甚至对一些流行语似乎了解不多，导致论坛不活跃。 （二）现在存在的网站存在的问题及解决办法 现在同乡交流平台的网页设计存在的问题： 1、在交流同乡互助平台的网页制作时没有搜索引擎的意识。同乡交流网 站除了给已经知道的会员看，更重要的是让更多需要得到帮助的同乡搜索到， 而搜索引擎就是最好的图径。比如你输入“云南高校同乡交流互助“几个字，如 果你的交流平台就排在第一个，这样就可以让更多的同学知道有这样一个网站。 普通人一般只看搜索结果的第一页，排在后面就没有任何意义了。 可惜现在的 很多的交流平台在制作网站、网页的时候完全没有这个意识。 我们的应对措施是：怎么优化搜索引擎排名是个非常复杂的问题，细到每 个网页的命名，甚至在写网页的文字稿的时候就必须有这个概念。我们云南高 校学生交流互助平台一开始就有这个概念，一直注重网页的关键词。 2、是整个同乡交流网站的结构过于复杂，或者就是太过于简单。菜单设 云南高校大学生交流互助 - 6 - 计太繁琐或者太过简单，让我们在进入网站的时候不知道自己需要的东西在哪 里可以找到，研究表明假设有 10 个用户访问你的首页，只 有 40%的人会继续 翻看下面的网页，如果首页的菜单设置不是很清晰的话，可能就会马上失去潜 在的用户。还有更可怕的设计是让用户掉进谜宫，进去就找不到 回来的路，必 须回到首页重新开始。如果要让用户点击 7，8 次才能找到她所需要的信息的话， 那这个网站不管有多漂亮就是失败的。 我们的应对措施是：云南高校学生交流互助平台在首页菜单设计的时候明 确清晰，不需要分页的内容就尽量做到不要分页，我们将用户点击次数减少到 最低。每多一次点击就会失去更多的用户。在设计时我们做到在第一页就能让 用户明确的知道该到哪里找到什么样的信息，而且用最少的点击次数帮助用户 尽快获得所需的信息。 3、对于新技术使用不当。现在的一些交流互助网站非常急于求新，有的 新技术就恨不得马上用上。这样就导致网站的稳定性不高，有时用户不能流畅 地打开，或者正用着网站突 然就 DOWN 了，这样再好的网站都没有人感兴趣 继续了。 我们的应对措施是：由于我们没有非常强硬的技术支持，所以我们宁可使 用最基本最安全的技术，也一定要保证网站的稳定，特别是要考虑各种 浏览器 的用户和手机用户。尤其现在手机上网是个未来大趋势，我们要保证他们上网 的时候没有困难阅读。最后我们在保证网站的正常运行的前提下我们在对网站 进行开发设计，应用一些安全性较高的新技术。 4、交流网站更新速度太快，同学们跟不上。这个问题新浪博客和淘宝在 早期就经常犯。现在又的交流网站三天两头更新，让用户觉得非常闹心，昨天 这个按钮明明在此，今天怎么就不见了！ 我们的应对措施是：这个问题其实比较容易解决，一是策划的 时候多考 虑，想好了再下手，二是只更新图片，尽量不去动那些已经固定的总体框架。 5、网站的设计目的不明确，很多的交流网站设计成了盈利性网站，在网站 中插入了很多的广告文字、图片以及宣传推销某种产品的 flash 模块。 我们的应对措施是： 我做的是公益性网站，为了方便大家交流而建立的网站，而不是为了某种利 益建设网站，所以我们会尽量减少非公益广告的插入。 6、网站是属于公益性，会出现比较多的安全隐患。比如用户信息泄露等 我们的应对措施是： 首先我们尽量避免网页广告，减少广告携带的病毒木马等，然后利用先进 的加密技术对经过用户传输的数据进行加密，以保证数据仅被指定的发送者和 接收者了解，从而保证了用户数据的私有性和安全性，安装防火墙等安全产品， 防火墙等安全产品是拦截基于网络的攻击（如 DDOS、端口扫描等） ，可以限制 不必对外开放的端口，可以方便集中管理、分划网络拓扑。 7、网页在设计时娱乐互动性会比较不足。 我们的解决办法是： 在设计中使用明亮、高对比的颜色可以为浏览的人提供一个强大舒适的环境。 亮色可以充分的吸引注意力从而使得一个设计表现得比较有趣、年轻、调皮和 具有现代感。使用了大胆的色彩，可以利用其积极的主题，就好象小孩子用蜡 笔尽情绘画一样。 增加一些益智类的社交小游戏，比如 2011 年期间，市场上 云南高校大学生交流互助 - 7 - 出现的多款针对“铁杆”玩家的社交游戏。当然还有就是变换轮播图片广告。 还有就是根据现在的网购狂潮连接一些购物网，比如淘宝、拍拍等，也可以在 网站上推荐一些大学生的衣服潮流搭配建议。除此之外就是专题、公告等等的 及时更新。 （三）设计要达到的目标（三）设计要达到的目标 “云南同乡互助平台” ，以建设成全省最大的大学生同乡交流基地为目标。 广大学生在这里可以享受跨校结识老乡，跨校聚会、交友、旅游等服务以及有 更多获得大学生兼职岗位地机会，全面打造一个覆盖云南高校的大学生同乡交 流服务平台。 云南高校大学生交流互助 - 8 - 三三 要解决的几个关键而问题要解决的几个关键而问题 (一)设计中要解决的问题 1、怎样保障用户信息的安全性？ 2、怎样保证库文件的正常使用? （二）设计中采用的关键技术急复杂性分析 图片的剪切或图片大小的调整 图层应用 Photoshop 图片处理 蒙版应用 在路径中键入文字 站点的建设 Dreamweaver 网页设计 网页设计 网页的超链接 Flash 动画制作 网站建设 云南高校大学生交流互助 - 9 - 四四 网页的大致创作步骤及部分模块概况网页的大致创作步骤及部分模块概况 （一）网页设计实现的策略描述 云南高校大学生交流互助 - 11 - 分析各模块功能 确定目录结构和链接 网页具体风格创意 搜集相关素材 创建网页 相关脚本语言及程序设计 运行测试 后期维护 创建网页总体框架 11 云南高校大学生交流互助 - 12 - （二）部分主要网页的模型结构 相册 各乡相册PK 相册 湖 南 浙 江 四 川 云 南 等 省 活动 照片 pk 上传照片 相册首页 用户注册 首页 用户注册 用户名 登录密码密码确认 隶属省份 联系方式 提交 取消 12 13 云南高校大学生交流互助 - 13 - 招聘信息 首页用户登录 招聘信息 求职信息 招聘岗位 14 云南高校大学生交流互助 - 14 - 五五 网页建设实现的技术及工具网页建设实现的技术及工具 （一）分模块详细描述系统各个部分的实现方法 首页 1） 、首先用 photoshop 对收收集的图片进行处理在左边的工具栏中选中 文具工具，我根据自己需要选择了横向文具工具分别在图片的相应的位置添加 文字交流中心，用户登录，简介，求职，相册，贴吧，聚会，户外活动，其他 等文字形成如图 15 所示 2） 、在站点下新建一个网页，在网页中插入上述图 片 15 （插入 图像） ，后单击图片，在 dreamweaver 界面的下方图片 属性栏中就会出项热点工具，利用相应的热点工具对图片的相应位置添加热点， 添加热点后对相应的热点进行链接，链接到相应的网页。完成首页的设置。 用户注册界面 在站点下新建以个网页，选用列弹性剧中注脚这个模板，将网页命名 为交流用户注册，在 H1 标题处插入图片如图 1-6 所示，并在正文位置插入 五 行四列的表格（插入 表格）点击表格的外框在 dreamweaver 界面的下方 属性栏中设置表格的属性将表格的填充，间距，边框的值都改为 0 后在第一列 和第三列的表格中分别输入用户名，性别，登录密码，密码确认，联系电话， QQ，兴趣爱好，隶属省份，个人寄语，就读院校等各项登录信息，后在用户名， 联系电话，QQ，兴趣爱好，隶属省份，个人寄语，就读院校右边的空表格中都 插入文本域， 15 云南高校大学生交流互助 - 15 - （插入 表单 文本域） ，插入好后在 dreamweaver 属性栏中设置用户 名右边表格的文本域的最多字符数为 10 类型设置为单行，字符宽度设置为 30，在登录密码后的表格中插入文本框，并将类型改为密码，最多字符为 16， 宽度为 30，在密码确认右边的表格内插入验证密码（插入 表单 验证密 码） 并在表格的下方插入两个按钮将后一个按钮改为取消，设置属性后居中。 如此操作其他表格得到如图 1-7 所示界面。 16 17 云南高校大学生交流互助 - 16 - 六六 性能测试与分析性能测试与分析 （一）测试实例 实例测试一： 测试工具：在线测试工具 W3C Link Checker 如图 18 所示 测试内容：查明你网站内的所有链接里是否有断链情况 测试过程：1.在 Url 下输入所需要测试的完整地址，分别输入需要测试的网页地 址，对站内的所有网页进行链接测试的准备工作。 2. 点击 check，开始运行软件。开始一段进度条，在线测试工具 W3C Link Checker 开始工作，对选中的网页进行测试查错。 3.查看测试结果，检测的结果中会出现有问题地方的提示，在上面检测结 果中的表格中能够清楚地看见，N/A 表示站内的链接出现错误。List of redirects，显示网页中有多少处是调用别的网站或服务器中的程序以达到在自己 网站运行显示的目的。测试结果如图 19 及 21 所示 18 19 21 云南高校大学生交流互助 - 17 - 实例测试二： 测试工具：Watchfire WebXACT 测试内容：网站质量，易用性和隐私等 测试过程： 1、导航测试 在一个页面上放太多的信息往往起到与预期相反的效果。Web 应用系统的 用户趋向于目的驱动，很快地扫描一个 Web 应用系统，看是否有满足自己需要 的信息，如果没有，就会很快地离开。很少有用户愿意花时间去熟悉 Web 应用 系统的结构，因此，Web 应用系统导航帮助要尽可能地准确。导航的另一个重 要方面是 Web 应用系统的页面结构、导航、菜单、连接的风格是否一致。确保 用户凭直觉就知道 Web 应用系统里面是否还有内容，内容在什么地方。 2、图形测试 在 Web 应用系统中，适当的图片和动画既能起到广告宣传的作用，又能 起到美化页面的功能。一个 Web 应用系统的图形可以包括图片、动画、边框、 颜色、字体、背景、按钮等。图形测试的内容有： （1）要确保图形有明确的用途，图片或动画不要胡乱地堆在一起，以免浪费传 输时间。Web 应用系统的图片尺寸要尽量地小，并且要能清楚地说明某件事情， 一般都链接到某个具体的页面。 （2）验证所有页面字体的风格是否一致。 （3）背景颜色应该与字体颜色和前景颜色相搭配。 （4）图片的大小和质量也是一个很重要的因素，一般采用 JPG 或 GIF 压缩。 3、内容测试 内容测试用来检验 Web 应用系统提供信息的正确性、准确性和相关性。 4、整体界面测试 整体界面是指整个 Web 应用系统的页面结构设计，是给用户的一个整体感。 例如：当用户浏览 Web 应用系统时是否感到舒适，是否凭直觉就知道要找的信 息在什么地方？整个 Web 应用系统的设计风格是否一致？ 对整体界面的测试 过程，其实是一个对最终用户进行调查的过程。一般 Web 应用系统采取在主页 上做一个调查问卷的形式，来得到最终用户的反馈信息。 对所有的可用性测 试来说，都需要有外部人员（与 Web 应用系统开发没有联系或联系很少的人员） 的参与，最好是最终用户的参与。 实例测试三： 测试工具：ATRC Web Accessibility Checker 云南高校大学生交流互助 - 18 - 测试内容： 测试网站的 WCAG 2.0 Level2 兼容性，成一份报告，提出一系 列建议，如：如何提升页头，链接 Web 应用系统的安全性测试区域主要有： 1、 目录设置 Web 安全的第一步就是正确设置目录。每个目，数据，图表和文字的访问速度。 实例测试四 安全测试录下应该有 index.html 或 main.html 页面，这样就不会显示该目录下 的所有内容。 2登录 Web 应用系统基本采用先注册，后登陆的方式。测试有效和无效的用户名和 密码，是否大小写敏感，可以试多少次的限制，是否可以不登陆而直接浏览某 个页面等。 3安全漏洞 服务器端的脚本常常构成安全漏洞，这些漏洞又常常被黑客利用。所以， 还要测试没有经过授权，就不能在服务器端放置和编辑脚本的问题。目前网络 安全问题日益重要，特别对于有交互信息的网站及进行电子商务活动的网站尤 其重要。目前我们的测试没有涵盖网站的安全性的测试，我们拟定采用工具来 测定， 工具如下 SAINT- Security Administrators Integrated Network Tool 此工具能够测出网站系统的相应的安全问题，并且能够给出安全漏洞的解决方 案，不过是一些较为常见的漏洞解决方案。 （二）测试环境与测试条件 网页在校园网，宽带，无线网等连网状态下利用 IE 浏览器进行性能测试.。 云南高校大学生交流互助 - 19 - 七七 结束语结束语 这次网页设计实战个人网站设计完成后，我收获了很多，感触也很深。 我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈 兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更 为之锦上添花的一笔。 当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但 没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不 能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。 通过这次设计，我发现一个很普遍的问题：我们往往是眼高手低，学习这些知 识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难” 这句话，当 我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍 有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两 个字概括认真，只有认真对待才会从骨子里学到东西，才学到心里去了。 我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还 是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都 忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前 的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度， 也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因 此得到一个非常重要的结论只要自己想学只要自己有那份执着与毅力，虚 心的请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是用 不着的，在哪，哪里都是知识，只要自己持有高度的学习热忱。当然，我们在 学习过程中一定要及时巩固、练习，掌握了也不一定熟悉，熟能生巧啊！我们 应该吸取这个教训，否则即使我们最终达到了目的，但我们走了很多弯路，而 不是事半功倍的结果了。不过最终，经过长久的坚持与不断的琢磨，看到了自 己辛苦后的成果，尽管这还有很多不足，但看着它我心里充满着喜悦，一分耕 耘一分收获，这永远是真理。 完成自己的作品后我也观赏了其他同学的作品，对比起来，各有千秋，当然能 从其中发现很多值得我去学习的地方，比如说有的页面布局很好，有的页面内 容很充实，看起来很有感觉，也可以称之为网站了，而我的有些页面看上去， 可能使别人不会产生网站这一个概念，反而会觉得像是 PPT 演示文稿，这也反 映了我的一个问题：心中还没很清楚领悟建立网站的基本要点，还应该加强这 方面的知识储备。另外我也发现有的同学的页面设计插入了太多图片或者太多 浮动的东西，弄得网页太杂，没有一定的风格，更谈不上凸显主题 了从对比中，我学到了很多，能让我扬长避短，吸取他人之精华， 去除他人之糟粕。 这次作业对于我来说不是一项任务而是一种享受，因为我发现我越来越喜欢它， 云南高校大学生交流互助 - 20 - 不管别人说做这件事做到多晚做得有多累，我都没觉得，甚至还越做越兴奋。