2020年(项目管理)云南大学软件学院综合技能实践项目基于开源框架的网站

（项目管理）云南大学软件学院综合技能实践项目基于开源框架的网站

云南大学软件学院综合技能实践项目——“基于开源框架的网站开发”实验指导书

李海（编）

“基于开源框架的网站开发”实验指导书

“基于开源框架的网站开发”综合技能实践项目概述

“基于开源框架的网站开发”综合技能实践是提高学生对网络专业知识的综合应用能力与技能, 使学生学习网络理论知识的基础上提高并加强工程化知识与实践知识的教育。通过本实验课程，使学生践行CDIO思想,了解网络项目开发流程及相关文档的编写，实现简单网络开发项目的开发，提交项目开发文档及成果。为学生以后在学习工作中进行网络开发设计打下工程基础，积累实际工程经验。它是计算机专业学生在掌握一些基本的网络编程语言后，进行系统的事件技能训练的开端，也是后继专业实践、毕业设计的基础。

“基于开源框架的网站开发”综合技能实践课的目的

使学生了解网站开发过程，初步学习网站的运行原理、技术方法以及服务器的基本配置。培养学生的计算机实践能力，包括：

1通过阅读教材和资料，做好网站开发前的准备——自学能力；

2借助计算机网络以及学生所学习的基础程序设计语言和网络服务知识，开发一个项目——动手能力；

3能够运用计算机网络原理知识结合实际使用网络经验，对网站项目开发进行初步分析判断——分析能力；

4学会撰写网站开发各阶段的实验报告即配合网站开发提交各阶段的文档——表达能力；

5对各自负责的模块通过以前所学习的知识实现——设计能力；

6软件开发以小组为单位进行，小组成员合作的方式实现该项目——团队合作能力；

7培养与提高学生的科学素养——实事求是的科学作风、严肃认真的工作态度、主动研究的探索精神。

“基于开源框架的网站开发”综合技能实践任务

以团队形式提交网站开发项目书，实现项目书中规划的网站的开发，并提交项目开发文档及网站源代码。

考核方式及成绩评定办法

平时成绩20%

按时每次出勤情况和任务按时完成情况，可分为优，良，中，差四个等级进行评定(优为90分，良为80分，中为70分，差为50分及以下)

构思性实践（C）20%

构思很好90 构思较好80 构思一般70 构思基本满足要求60

设计性实践（D）20%

设计很好90 设计合理80 设计一般70 设计基本反映了构思60

实现性实践（I）20%

功能完全实现，界面良好，容易操作90

功能完全实现，界面和操作一般80

功能基本实现70

实现了大部分的功能60

运作性实践（O）20%

运作良好90

运行正常，偶尔出现bug 80

运行正常，但出现bug频率较高70

运行基本正常，会出现错误和bug 60

项目完成后提交文档：

1）网站开发方案或网站开发计划书：网站开发的规划和进度安排；

2）网站开发文档：网站开发建设过程中出现的问题和解决方法的记录和总结；3）网站使用测试报告：对网站功能使用进行必要说明，并完成测试，记录测试结果。

1.选题要求

自主选题；选题不宜过大、过难，以实用为目的；团队开发；编程语言不限。

项目指导：

第一部分网站服务器环境搭建

根据选择搭建网站技术的不同，在开发网站前应现搭建合适的网站开发部署平台，如采用asp和https://www.360docs.net/doc/b612867669.html,技术应该配置好Windows IIS服务，采用JSP技术，应搭建好Java开发平台，采用PHP技术，应构建Apache+MYSQL+PHP 环境。下面以PHP开发平台为例，介绍Apache+MYSQL+PHP环境简单搭建.

XAMPP是一款非常优秀Apache+MYSQL+PHP的服务器系统开发套件，也是笔者用到现在为止感觉最好用的一款APACHE+MYSQL+PHP套件了。同时支持Zend Optimizer，支持插件安装，目前最新xampp的版本是1.7.2。官方网址：http://

3) Mercury:

Postmaster: postmaster (postmaster@localhost)

Administrator: Admin (admin@localhost)

TestUser: newuser Password: wampp

4) WEBDAV:

User: wampp Password: xampp

四、常见问题

1、关于为xampp添加ZEND OPTIMIZER的说明：

XAMPP 1.7.2 默认PHP加速是使用eaccelerator加速的，功能上相当于Zend Optimizer，但是缺少ZEND OPTIMIZER的网页加密解析功能。

最新的Zend Optimizer 3.3.3不支持PHP 5.3x，最高到PHP 5.2.x，估计稍后Zend Optimizer发布新版本的时候才能支持，所以如果大家仍然想使用Zend Optimizer，可以采用以下方法：

1、不使用XAMPP，全部手动安装PHP、APACHE、MYSQL和Zend Optimizer。

2、使用XAMPP的早期版本，网上也能搜索到，早期版本默认支持ZEND OPTIMIZER。

3、Zend Optimizer 3.3安装的时候会自动为PHP.INI文件增加Optimizer引擎接口。

4、如果大家不使用网页加密只使用PHP加速，就是用eaccelerator就可以了。

5、最后一点，就是xampp仅作开发环境使用，请不要用于服务器环境，因为xampp有很多安全问题未作处理，官方也特别做这个声明。

2、APACHE无法启动的常见问题

那是因为端口占用导致无法启动APACHE，不过可以通过关闭占用端口程序的方式再次启动APACHE，APACHE启动错误日志所在目录：D:\xampp\apache\logs，打开现实(OS 10048)通常每个套接字地址(协议/网络地址/端口) 只允许使用一次: “make_sock: could not bind to address 0.0.0.0:80”，这时，可以通过在开始运行里输入CMD回车进入命令行，输入netstat -anb回车，检查占用端口的应用程序，一般迅雷、BT等软件都会占用80端口，关闭后应该可以启动。或者先启动Xampp后启动迅雷等P2P软件也可以。

3、参照上文XAMPP安装和配置完成后，我们就可以安装Dreamweaver等网页程序编辑软件，进行网页编程测试了。

第二部分网站搭建配置案例

基于开源框架的网站很多，可根据个人掌握的网站开发技术和网站需求不同，选取合适的开源网站系统进行配置和设计。

下面以Joomla为例来示范简单网站建设流程。

Joomla!是一套在国内外相当知名的内容管理系统，它属於企业入口网站类型套件，顾名思义，就是比较适合作为商业类型的网站程式，使用它您不需自己懂得程式设计，就可以架设一个拥有强大後台管理及前端的入口网站。

Joomla!是使用PHP语言加上MySQL资料库所开发的软体系统，可以在Linux、Windows、MacOSX等各种不同的平台上执行。

?基本需求: 开启PHP解译功能+ 安装MySQ数据库

?Joomla!中文版下载: http:// 注：请先下载原版，然后下载语言包。

?前台演示：https://www.360docs.net/doc/b612867669.html,/

一、Joomla!安装

下载完整包装後解压，於您的网站根目录之下(假设为C:\WWW)建立一子目录joomla 並且将完整包装解压缩到该目录之下。当然你也可以不用建目录，直接安排在根目录。如时你安装在远程主机（Linux／Uinux）上请注意以二进制上传。

解压完成後，确认这个文件的存在C:\WWW\joomla\installation\index.php

这个网址对应於您的网站URL应为http://[网址]/joomla/installation/index.php (例如http://127.0.0.1/joomla/installation/index.php)，在浏览器中连接这个网址之後出现安装第一步的画面，选择中文安装语言。

接下来出现一些环境变数的检查，检查看看是否都能通过

接下来阅读授权约定後，点选下一步进入MySQL设定，大部分用户依照建议值就可以。

接下来输入站台名称，例如我的小站

接下来系统会帮你产生一组管理员密码，您不要忘了记下来，新版Joomla_1.5.2安装在这个地方有一点出入，新版是直接要求输入邮箱和密码，但都大同小异。另外这边也会显示您的网址以及网页目录，请检查是否正确。

最後一步，系统再度告知管理员帐号及密码，一定要记得喔，最後也请把installation子目录完全删除。

二、网站的配置：

使用下列的网址:http://127.0.0.1/joomla/index.php (注意可能因每人设定不同有变化) ，开启之後就是网站的初始网页。其中的有许多内容需要修改，因此下一步您要进入管理者网页介面。

想要进入管理的介面，点击管理区之後输入帐号及密码，即可进入管理介面。

进入之後会看到管理介面，接下来就请根据个人需求进行修改：

测试方式:

你可以邀请一位同学, 从Internet 连线到你的外部IP的Joomla!, 使用http://

ip/joomla/ , 看看是否能连线到你的网站.对网站的基本功能进行测试。测试完成后形成网站测试报告。

参考文档：

一、网站建设

网站建设是涵盖网站定位考虑，从营销角度立意而进行一个建设网站的过程，其中包括了前期网站定位、内容差异化、页面沟通等战略性调研确立后，去域名注册、空间租用、网站风格设计、网站代码制作五个部分，这

个过程需要网站策划人员、美术设计人员、WEB程序员共同完成。网站可以分为政府、事业单位网站，商业网站，个人网站及门户网站等等。

专业网站建设分为8步

网站建设分为如下8步：

一、申请域名（域名备案）；

二、申请空间；

三、定位网站；

四、分析网站功能和需求（网站策划）

五、网站风格设计；

六、网站代码制作；

七、测试网站；

八、FTP上传网站；

九、网站维护

做网站规划

这个问题是做网站规划首先要考虑的，首先必须分析可能的访问者有哪些，然后有针对性地设计相关内容。一般来说，一个企业网站主要的访问者有几类，即：直接用户、经销商、设备和原材料供应商、竞争者等。前两类访问者是公司的现有用户和潜在用户，也是网站内容应该重点满足的对象。至于供应商，除去那些具备B TO B功能的综合性电子商务网站来说，大多数以信息发布为主的企业网站很少顾及到，因此，也不是一般企

业网站的重点内容。至于竞争者，来访的目的无非是了解你公司的新动向，或者网站设计水平如何，是否有值得借鉴的地方，对此，在发布有关内容时应该给予适当的“防备”，而不是让竞争者满载而归。

内容应该作为网站的重点

既然公司的现有用户和潜在用户是网站的重点照顾对象，那么就要认真分析他们需要什么信息。以一个电视机生产企业为例，一个用户/潜在用户访问某企业网站的目的大致有几种：看看有什么新产品、对比不同规格产品的性能和价格、与其它品牌的同类产品进行对比、查询本地销售商和保修地址等等，如果可以进行网上订购，用户自然也希望了解与此相关的信息，比如订货方式、支付手段、送货时间和费用、退换商品政策等。因此，这些内容应该作为网站的重点。

说起来如此简单，似乎应该是再明白不过的道理，但是，很多网站在内容设计上“跑题”的现象却时常发生。即使在电子商务已经比较发达的美国，企业网站设计不合理的状况也十分明显，在中国，也许就更显得不足为怪了。

第一代网站建设技术：

运用一般的网页制作软件，把一些平面页面效果转化成网页，然后把网页链接起来成为一个企业网站。采用“第一代网站建设技术”制作出来的企业网站，由于更新以及修改网站内容均需专业人员，维护麻烦，网站修改以及增加网页均需支付费用，导致企业经常不更新其网站内容，失去

了建设网站的意义；同时由于纯静态页面没有交互性，使得客户不能很好的与企业沟通。

第二代网站建设技术：

是指在第一代网站建设技术基础上，针对网站的某一个功能采用一些数据库管理模块（如新闻发布、产品发布等），网站的后台对这些个别的功能模块进行管理。采用“第二代网站建设技术”制作出来的企业网站，在一定程度上摆脱了第一代网站建设技术在网站内容更新困难上的缺点，适合对于网站日常更新维护频繁，对网站各功能模块有独特需要的大型企业网站，但由于需要对企业的不同建站需求进行定制开发，所以价格一般也较高，一般中小企业难以承受。

第三代网站建设技术：

2003年初以来出现了第三代网站建设技术――智能建站系统。网站用户通过智能建站系统能够很方便快捷地管理自己的网站，自己定义网站的框架内容，并能够随时升级网站的功能，且解决了每个客户都需要的网站前台界面个性化的需求。使用智能建站系统进行企业网站开发建设，能够适应大多数中小企业对于网站建设的一般需求，开发周期短，更新维护便捷，是中小企业建设网站的理想选择。

网站建设前期准备工作

网站建设前期准备工作相当重要，这决定你建站的目的，以及日后维护网站，让你的网站发挥作用等是相当的重要。在设计网站前，必须先准备好以下工作：

1.网站框架频道

网站频道就是网站的大框架，也就是主体部分，比如：首页，公司简介，新闻动态，产品展示，在线留言，联系我们等，这是标准的企业网站的内容。如果你有特定的框架，请您一一列出，这样方便我们设计。2.网站风格要求

您必须知道您网站的目的，是以广告形式、还是仅给现有的老客户观察？是功能型的，还是展示型的？风格定位要准确，功能型的是，网站在美工设计上可能不适合大块图片，在数据功能上比较强大，比如搜索，会员注册等，一般大型企业网、购物网、大型门户、交友网等都是属于功能型的，如果是展示型的，这种类型的网站可能大部分追求视觉上的美丽，对功能要求不高。那在美工上面，设计上就得有强烈的视觉感了。这种网站一般属于：美容业、女性用品、服饰等。

3.网站的针对对象

在设计网站前，您必须告诉我们您的网站所针对的人群、区域、国家等。如果能提供某种行业的更好，这样我们在设计上就会针对这种人群的浏览习惯特别定制您的网页。

网站建设都要考虑哪些因素？

一、网站风格/创意

风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。整体形象包括站点的版面布局，色彩，字体，浏览方式等…。如：我们觉得迪斯尼是生动活泼的而IBM则是专业严肃的。每一个网站都会给人

们留下的不同感受。这里我们需要做到的是根据网站的定位做出网站特有的风格。除此我们还需要在风格同一上需要把握一下，其实这个风格的统一和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，都要统一风格，贯穿全站。这样子用户看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。

创意，所谓创意就是不拘一格？某些设计师在做创意的时候大费周章，做出来确实不可否认很有创意、很别致，但往往对于行业网站的客户为什么不能接受呢？此时不要太责怪客户的不识货，应该反思，抓住客户的需求。其实做行业网站不需要很多大的创意，也不要浪费过多的时间去追求如何个性、如何好看，我们只需要一点小小的创意贯穿全站，也许会使网站更生动更具有吸引力、更有思想，比如中国现车交易网(2005年此站已经消失)就是一个很好的案例，它把车的外形融入到网站中，使它脱颖而出。

二、网站LOGO

Logo顾名思义就是站点的标志图案，logo最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站logo的设计过程中一般有以下三种思路：1.直接以网站网址作为logo。2.根据网站提供的产品/服务特点展开logo设计。3.以传递网站运营商的经营理念为特色。

三、视觉流程

人们在阅读某种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。在心理学的研究表明，一般的浏览习惯是从上到下、从左到右，在一个平面上，上松下稳而压抑。同样，平面的左松右稳。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。在网页设计中一些突出或推荐的信息通常都放在这个位置。当然这种视觉流程只是一种感觉并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就可以更为灵活地运用，在网页设计中，灵活而合理地运用直接影响到传达信息的准确与有效性。

四、网页框架与布局

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，在这里就不做一一论述了。其实在我们做设计的时候并没有过多的去考虑什么形式，比如我们在一张纸看到一个圆形的东西，很容易可以联想到它像太阳，而有些人则联想到月亮等等…这都

是一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做处合理的框架布局。

1．分辨率

网页的整体宽度可分为三种设置形式：百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用，行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题，科技发展到现在我们通常用的是1024*768和800*600的分辨率，现在网络上很多都是用到778个象素的宽度，在800的分辨率下面往往使整个网页很压抑，有种不透气的感觉，其实这个宽度是指在800*600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760~770的象素，不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

2．空间的合理利用

很多的网页都具有一个特点，用一个字来形容，那就是“塞”，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致浏览时会遇到很多的不方便，主要就是页面主次不分，喧宾夺主，要不就是没有重点，没有很好的归类，整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也可以用个“散”字来形容。

并非要把整个页面塞满了才不觉得空，也并非让整个页面空旷才不觉得满，只要合理的安排、有机的组合，使页面达到平衡，即使在一边的部

分大面积留空，同样不会让人感到空，相反这样会给人留下广阔的思考空间，给人回味又达到了视觉效果。

3．文字编排

在网页设计中，字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。

3.1文字图形化

文字图形化就是将文字用图片的形式来表现，这种形式在页面的子栏目里面最为常用，因为它具有突出，同时又美化了页面，使页面更加人性化加强了视觉效果。是文字无法达到的。对于通用性的网站弊端就是扩展性不强。

3.2强调文字

如果将个别文字作为页面的诉求重点，则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下也可以使用文字图形化。

五、网站配色

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色再进行微小的调整。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩，而又不花，色调统一。这种配色方法在网站设计种最为常用。

4.灰色在网页设计中又称为“万能色”，其特点是可以和任何颜色搭配，在使用时把握量避免网页变灰。

在网页配色中，尽量控制在三种色彩以内，以避免网页花、乱、没有主色的显现。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

二．网站相关技术

网站的定义

网站分静态网站与动态网站

静态网页，动态网页主要根据网页制作的语言来区分：

静态网页使用语言：HTML（超文本标记语言）或XML（可扩展标记语言）

动态网页使用语言：HTML＋ASP 或HTML+ASP,NET或HTML＋PHP 或HTML＋JSP 等。

什么是静态网页？静态网页有哪些特点？

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。

静态网页的网址形式通常为：

也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。

静态网页的特点简要归纳如下：

（1）静态网页每个网页都有一个固定的URL，且网页URL

以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；

（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；

（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；

（5）静态网页的交互性较差，在功能方面有较大的限制

静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。另外,如果扩展名为.asp但却没有连数据库,完全是静态的页面,那也是静态网站.只是.asp扩展名。