网站设计与管理课程设计_张德龙小组【最终版本】

课 程： 网站设计与管理 题 目： 南湖社区 年 级： 2010 级 专 业： 网络 工程 路基工程安全技术交底工程项目施工成本控制工程量增项单年度零星工程技术标正投影法基本原理 学 生： 欧阳业伟（10066012） 张 德 龙（10066013） 蔡 亮（10066018） 刘 兴 旺（10066030） 卢 俊（10066080） 指导教师： 周凌云、毛腾跃、侯睿 2013 年 5 月 14 日 课程设计任务分配表 学号 姓名 组内分工 评分 10066012 欧阳业伟 负责后期文档的撰写、整理，图片处理等工作。 10066013 张德龙 负责 Web 前端方面的开发工作，包括网站页面 的重构，设计和代码优化，同时协助数据库的 优化。 10066018 蔡亮 负责 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 编辑，新闻图片的采集。 10066030 刘兴旺 负责网站 SEO 优化，网站需求分析设计。 10066080 卢俊 负责服务器搭建，数据库和优化，包括 MySql 相关技术，Apache 服务器技术。 目录 一、 需求分析 ........................................................................................................................... 4 1、 模块分析： ................................................................................................................... 4 2、 网站开发技术需求分析： ........................................................................................... 4 3、 服务器配置分析 ........................................................................................................... 5 4、 需求变化分析及应对策略 ........................................................................................... 5 二、 概要设计 ........................................................................................................................... 5 1. 民大新闻模块 ................................................................................................................... 5 2. 学习频道模块 ................................................................................................................... 5 3. 生活频道模块 ................................................................................................................... 5 4. 民大风景模块 ................................................................................................................... 6 5. 最近评论模块 ................................................................................................................... 6 6. 联系我们 ........................................................................................................................... 6 7. 首页与其它模块的联系 ................................................................................................... 6 8. 模块之间的联系 ............................................................................................................... 6 三、 详细设计 ........................................................................................................................... 6 1. 后台服务器 wamp（Apache + MySQL+PHP+）搭建 ................................................... 7 2. WordPress 博客框架安装................................................................................................. 7 3. 前端的页面及功能的实现（基于 WordPress 主题样式修改而成） ............................ 8 四、 调试分析 ......................................................................................................................... 10 1. 工具和开发环境 ............................................................................................................. 10 2. 调试常遇到的问题 ......................................................................................................... 10 五、 测试结果 ......................................................................................................................... 10 1、 南湖社区网首页页面 ................................................................................................. 10 2、 民大新闻页面 ............................................................................................................. 11 3、 学习频道页面 ............................................................................................................. 11 4、 生活频道页面 ............................................................................................................. 12 5、 民大风景页面 ............................................................................................................. 12 6、 最新评论 ..................................................................................................................... 13 7、 联系我们 ..................................................................................................................... 13 8、 后台管理员页面 ......................................................................................................... 14 六、 课程设计总结 ................................................................................................................. 14 一、 目的 在物联网飞速发展的今天，网站毫无疑问成了各种信息交流的平台，作为一个网络工程 的学生，掌握一些网站开发技术已势在必行。 我们这次做的网站名字叫南湖社区，是一个面向学生自己的小型社区网站，是基于 WorldPress框架制作而成的，网站灵活利用了 WorldPress优势，将网站的功能发挥的淋漓 尽致，主要运用到的技术有 PHP+MySQL 技术，Web 其他基础技术（包括 CSS，javascript） 以及少量的 ps技术和新闻内容编辑技术。 本次网站课程设计的目的在于是学生了解网站开发具体流程，如从需求分析带详细设 计；网站开发相关技术如，PHPWorldPress 框架，CSS 和一些最新发技术；服务器配置和运 维技术，这是很重要的；数据库后台先关设计优化技术等等。 二、 需求分析 1、 模块分析 南湖社区网，应该包含那些信息，首先应该有首页，介绍最近，最新本社区发生的奇闻 异事，重大事件。一个社区应该包含互动平台，所以我们设计了最近评论这一模块。既然是 南湖社区，自然要包含民大新闻这一块，介绍民大发生的重大新闻，供大家浏览与吸取。南 湖社区是围绕民大展开的，所以少不了学习这一模块，不同年龄，不同性别，不同身份在这 个学习平台上都可以自由交流自己的知识和学习别人的知识。民大是一个风景宜人，历史悠 久，学习氛围浓厚的地方，所以少不了民大人文风景介绍这一块，让更多的人了解民大。我 想每一个网站平台都有注册与相互联系这一平台，所以我们也要设计这一平台。综上便是我 们对模块需求的分析。 2、 网站开发技术需求分析 1) PHP 技术：PHP 是一种服务器端的，嵌入 HTML 的脚本语言。PHP 区别其他像客户端 Javascript的地方是它的代码在服务器端执行。最低水平,PHP可以做任何其他 CGI程 序所能做的事,例如收集表格数据,生成动态页面内容,或者收发 cookies.可能最强大, 最有意义的特性是 PHP支持大范围的数据库.书写一个支持数据库的 Web 页面是难以置 信的简单。PHP的众多特性是的开发变得简单。 2) CSS技术：CSS是英语 Cascading Style Sheets（层叠样式表单）的缩写，它是一种用 来表现 HTML 或 XML 等文件式样的计算机语言，CSS 目前最新版本为 CSS2,能够真正做 到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够 对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥 有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀 的表现设计语言。 3) WordPress技术：WordPress 是一种使用 PHP语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的网志。也可以把 WordPress 当作一个内容管理 系统来使用。WordPress 是一个免费的开源项目，在 GNU通用公共许可证下授权发布。 4) Mysql技术：这要求我们熟练使用 mysql，并掌握少量优化技术。 5) SEO技术：搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引 擎内的排名的方式。SEO目的理解是：为网站提供生态式的自我营销解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 ，让网站 在行业内占据领先地位，从而获得品牌收益。 3、 服务器配置分析 网站是在服务器上运行的，服务器配置直接关联到我们网站的正常运营，由于是课程设 计，这里我们选择用一台 PC配置成服务器而不是去租用服务器。 4、 需求变化分析及应对策略 患难时刻见真情，变更才显真功夫，这句话用来形容需求分析毫不为过，如果需求不变 我们就不用做需求分析了。需求变化主要原因是：我们对用户的需求没有彻底弄清楚，弄完， 导致很难准确的把系统需求传达给对方，业务方面的局限性致使开发人员很难准确的获取客 户方真实的需求，为后期的需求变化埋下了祸根。开发人员必须明确网站的需求是不断变更 的，这样才体现处理动态性。下面是我们给出的三种策略： 1） 准确的分析网站的需求，设计出合理的模块； 2） 在设计方案上我们采取了三层设计，明确各层的功能，确保那一层的变动不会影响整个 网站系统的正常运行； 3） 在具体开发中大量运用设计法则，以实现对内不可修改，对外可扩展，使网站的动态维 护所花的代价最小。 三、 概要设计 1. 民大新闻模块 主要是收集民大的比较重要的新闻及重大事件，内容来源与中南民族大学主页和中南民 族大学新闻中心； 2. 学习频道模块 主要是收集学习方面的热点，可以是考研或者与网络工程专业相关的最新的 IT 技术的 发展趋势等； 3. 生活频道模块 主要是收集民大学子的生活情况，比如各少数民族学子的生活习惯、毕业生的动态； 4. 民大风景模块 展示了民大校园美丽的风光景色，主要以民大风景图片为主； 5. 最近评论模块 主要是最近访客的留言和评论； 6. 联系我们 主要是我们小组成员的一些基本个人信息。 7. 首页与其它模块的联系 8. 模块之间的联系 四、 详细设计 1. 后台服务器 wamp（Apache + MySQL+PHP+）搭建 1) 下载 wamp软件，并点击安装，提示一步一步安装直至完毕； 2) 安装成功截图如下： 2. WordPress 博客框架安装 1) 到 WordPress官网下载 WordPress程序，并解压对其进行安装； 2) 解压将 WordPress 程序文件夹放在服务器 www（默认）文件夹下，如下图： 3) 连接数据库，注意 WordPress在安装过程中会自动生成数据库，数据库后台视图如下： 3. 前端的页面及功能的实现（基于 WordPress 主题样式修改而成） 1) 主题总样式文件：style.css； 2) 创建模板页（民大新闻、学习频道、生活频道）为了使得不同页面对应显示相应的文章 （如民大新闻页面只显示民大新闻的文章），调用代码如下： 对应数据库表（posts）页面信息的如下： 3) 创建民大风景页面，代码如下： 4) 评 论 功 能 使 用 WordPress 原 有 模 板 页 contact.php ， 使 用 代 码 进行调用。 5) 页面的页眉部分、页脚部，页面 sidebar部分的调用方法为：、 、 。 五、 调试分析 1. 工具和开发环境 1) 工具：本网站开发工具涉及 DreamweaverCS6.0，Sublime Text3，PhotoshopCS6.0 以及 PhpMyAdmin等。调试工具：IE6~9，谷歌浏览器，火狐浏览器，360安全浏览器等。 2) 开发环境：开发环境有 Apache+php+MySQL，并基于 WordPress框架。 2. 调试常遇到的问题 1) 有的页面在加上一些滚动效果后整个页面发生了变化，后来经过组内各成员讨论分析得 知原因是没有设置滚动的宽度和高度等错误或者是方向没有设置正确，经过修改后这个 问题得以解决。 2) 有的页面有加上一些特效代码后整个页面全部变成空白页面，后来查看源代码分析得知 原因是代码添加的位置不对。 3) 有的页面无法正常显示，原因是因为文件名的错误与连接的上出现错误，了解问题后经 过修改可正常显示。 4) 在加上透明 flash 后，图片没有显示透明效果，后来通过查看比较其他网站的源代码发 现原因是没有设置参数，经过修改图片可以显示其透明效果了。 六、 测试结果 1、 南湖社区网首页页面 南湖社区网首页截图 2、 民大新闻页面 南湖社区网民大新闻频道截图 3、 学习频道页面 南湖社区网学习频道截图 4、 生活频道页面 南湖社区生活频道截图 5、 民大风景页面 南湖社区网民大风景页面截图 6、 最新评论 南湖社区网最新评论模块截图 7、 联系我们 民大社区网联系我们页面截图 8、 后台管理员页面 后台管理员页面截图 七、 课程设计总结 这几周来，我们全身心地投入了此次网站课程设计，经过讨论我们取名为《南湖社区网》， 这是一个面向学生自己的小型社区网站，是一个基于 WordPress 框架制作而成的，网站灵活 利用了Wordpress的优势，将网站的功能发挥的淋漓尽致；主要运用到的技术有：PHP+Mysql、 Html、CSS、Javascript 以及 ps 技术。 此次分组课程设计充分体现我们团队的合作精神；通过设计，我们每个人都受益匪浅， 不仅熟悉掌握了相关技术，更重要的是让我们的团队交流能力大大提高，一个团队的进步离 不开技术和组织管理的交流。一开始的时候大家都没有动手，团队的力量没法发挥，项目也 无法进行，当我们都意识到各自的缺陷之后，由组长带头进行分工，时不时的开会讨论。任 务分配以文档的形式 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 ，大家按着各自的任务要求积极配合，在遇到问题的时候及时向其 他组员提出并一起解决，经过半个多月的时间，我们之间已经形成了一定的默契，终于，我 们很快就提前完成了课程设计。