网站开发文档
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于开源框架的网站开发
云南大学软件学院综合技能实践项目
——网站开发文档
网站主题：麦田圈之谜
网站开发团队: 刘晶软件工程20111120055
王志梅软件工程20111120164
沈璐软件工程20111120192
指导老师：***
2012年12月7日星期五
一、网站总体说明
1.网站结构
网站首页(主题内容：麦田圈之谜，导航，关联板块向导) ——导航下拉列表相关内容链接——站内内容。
首页呈现：
2.网站页面语言
运用wamp搭建软件开发环境，网站设计采用div+css设计，使用超文本预处理语言php 来开发网站。
3.设计思路
基于麦田圈主题的思考，在网站设计时，主页设置导航，链入下拉子单，转另一内容页面，主页板块简要介绍麦田怪圈印象，并设动态图片作展示，在局部突出的基础之上渗透方便用户了解信息的理念。
二、特色介绍
1.网站设计个性化，首页导航栏“主页”下设有十种背景色选项，访问用户可根据需求自由进行变换，方便浏览网站信息。
效果呈现如图：
2.网站右下角设置有页面内容置顶功能，如图所示：
3.页面右上角设置有search，方便站内搜索相关信息：
4. 作为开放性考虑，网站首页右侧设有facebook，google等网站相关链接：
三、开发过程记录总结
1.在搭建开发环境的过程中，安装XAMPP服务器系统开发套件总
是出错，为解决这一问题，我们通过网上搜索到一款软件wamp来替代XAMPP创建开发环境，wamp可在64位机下运行，从而成功地搭建起了平台，安装了joomla。
2.首次安装joomla和有的组件时，如sample data，覆盖了数据库，导致内容丢失，还有flexcontent会自动复制原有内容，造成了一些不必要的麻烦，为解决这些问题，我们又重装了一次joomla，对相关组件进行了选择，使得后续开发得以顺利进行。
3.在选择保留插件时，误关了user这个插件，导致了后台无法登录，即使账号密码正确，也一直停留在登录页面，后发现问题及时进行了修正。
4.以管理员身份在后台安放内容的过程中，新建导航栏某一题标下方的下拉菜单时，由于位置选择了根，导致未能新建成功，而是建了一个导航题标，后将其位置更改为父目录才新建成功。
5.在网站首页设置相关链接时，偶尔出现链接无效，404的情况，后通过查找相关资料，使用各种网上诊断工具，不断优化了页面，解决了大部分死链情况。
四、总结
1.通过此次网站设计开发，了解了用wamp搭建环境的方法，对joomla做网站的功能有了一定认识，并且在遇到困难和解决困难的过程中，得到了一些扩展的使用心得。
2.在网站内容和风格的设计过程中，充分展示了具有时代特征的思想
理念，关注当下热点，内容涉及科学前沿的探索，对新兴人群更具吸引力。
3.对以后更高层次网站的开发设计和相关文档的编写奠定了基础。
4.体现出当今社会团队合作的理念，一些网站尤其是大型网站更需要这种资源优化配置，分工明确，共同开发的精神。
云南大学软件学院综合技能实践项目
——网站使用测试报告
测试对象：麦田圈网站
网站测试人: 刘晶软件工程20111120055
王志梅软件工程20111120164
沈璐软件工程20111120192指导老师：李海
测试时间：2012年12月7日星期五
一、测试目的
测试网站功能的完整性
二、测试方法
将完成的网站进行发布，从Internet 连线到我们的外部IP的
Joomla!, 使用http://ip/joomla/, 看看是否能连线到网站，并对
对网站的基本功能进行测试。
测试开始后，我们从另一台pc机，在浏览器中输入
http://113.55.44.46/joomla/，成功地连线到了网站，进入主页。
三、网站相关功能说明及测试结果
连线到网站后，首页显示如图：
网站主题：麦田圈之谜。
旁边附有云南大学标识，导航栏“主
页”下拉菜单中网站背景色十选项测试均正常，如图为“渐变蓝”
切换到“街道”背景色的测试：
其余导航下拉菜单选项经测试均连接正常，通过这些选项点击可进入下一页面，浏览相关信息。
运用search搜索站内信息，测试显示良好：
右下角置顶功能显示正常无误，动态图片展示正常。
经过相关测试，网站基本实现基础功能，连接正常，运行良好。
四、网站不足
1.页面内容有待充实，设计风格也不是很完美。
2.contact链接尚未完善，出现404。
3.网站静态展示居多，缺少相关视频内容，多样化欠缺。
4.相关特色设计虽然新颖，但在实用性上有所欠缺。
由于是初次用joomla做网站，难免会有不足之处，我们将会在以后的学习中改进提高，开发出更多有创意，功能完备的网站。
另附源代码：
<!DOCTYPE HTML>
<html lang="zh-cn" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base href="http://113.55.44.46/joomla/" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>主页</title>
<link href="/joomla/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/joomla/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="http://113.55.44.46/joomla/index.php/component/search/?format=opensearch" rel="search" title="搜索crop circles sercets" type="application/opensearchdescription+xml" /> <link href="/joomla/templates/yoo_subway/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/joomla/cache/widgetkit/widgetkit-6b22bc86.css" type="text/css" />
<script src="/joomla/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/core.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/caption.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/joomla/media/widgetkit/js/jquery.js" type="text/javascript"></script>
<script src="/joomla/cache/widgetkit/widgetkit-a20e6bb5.js" type="text/javascript"></script> <script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
window.addEvent('domready', function() {
$$('.hasTip').each(function(el) {
var title = el.get('title');
if (title) {
var parts = title.split('::', 2);
el.store('tip:title', parts[0]);
el.store('tip:text', parts[1]);
}
});
var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});
});
</script>
<!--[if lte IE 8]><link rel="stylesheet" href="/joomla/media/widgetkit/css/ie.css" /><![endif]-->
<link rel="apple-touch-icon-precomposed" href="/joomla/templates/yoo_subway/apple_touch_icon.png" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/base.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/layout.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/menus.css" />
<style>body { min-width: 1180px; }
.wrapper { width: 1030px; }
#sidebar-b { width: 230px; }
#maininner { width: 800px; }
#menu .dropdown { width: 250px; }
#menu .columns2 { width: 500px; }
#menu .columns3 { width: 750px; }
#menu .columns4 { width: 1000px; }</style>
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/modules.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/tools.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/system.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/extensions.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/custom.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/animations.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/background/gradientblue.css" /> <link rel="stylesheet" href="/joomla/templates/yoo_subway/css/font2/newciclefina.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/font3/newciclefina.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/style.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/css/print.css" />
<link rel="stylesheet" href="/joomla/templates/yoo_subway/fonts/newciclefina.css" />
<script>window["WarpSystemPath"]="http://113.55.44.46/joomla";</script>
<script>window["WarpThemePath"]="/joomla/templates/yoo_subway";</script>
<script src="/joomla/templates/yoo_subway/warp/js/warp.js"></script>
<script src="/joomla/templates/yoo_subway/warp/js/accordionmenu.js"></script>
<script src="/joomla/templates/yoo_subway/warp/js/dropdownmenu.js"></script>
<script src="/joomla/templates/yoo_subway/js/three.js"></script>
<script src="/joomla/templates/yoo_subway/js/template.js"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="/joomla/cache/template/ie-6ab6da9f.css" /><script src="/joomla/templates/yoo_subway/warp/js/html5.js"></script><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/joomla/cache/template/ie7-7ee3247c.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="/joomla/cache/template/ie8-f79acb07.css" /><![endif]--></head>
<body id="page" class="page sidebar-b-right isblog transparency-25 system-transparent" data-config='{"twitter":0,"plusone":0,"facebook":0}'>
<div id="page-body">
<div class="page-body-1">
<div id="socialbar">
<ul class="social-icons">
<li><a class="twitter" target="_blank" href="/yootheme"></a></li> <li><a class="facebook" target="_blank" href=""></a></li>
<li><a class="googleplus" target="_blank" href="https://"></a></li>
<li><a class="feed" target="_blank" href="/rss"></a></li>
</ul>
</div>
<div class="wrapper grid-block">
<header id="header">
<div id="toolbar" class="grid-block">
</div>
<div id="headerbar" class="grid-block">
<a id="logo" href="http://113.55.44.46/joomla">
<h1><em><strong><img src="/joomla/images/banners/1.png" border="0" alt="" width="54" height="46" />麦田圈之谜</strong></em></h1>
</a> </div> <div id="menubar" class="grid-block">
<nav id="menu">
<ul class="menu menu-dropdown"><li class="level1 item101 parent active current"><a href="/joomla/" class="level1 parent active current"><span><span class="icon" style="background-image:
url('http://113.55.44.46/joomla/images/yootheme/menu/icon_menu_home.png');"> </span>主页</span></a><div class="dropdown columns2" style="width:400px;"><div class="dropdown-bg"><div><div class="width50 column"><ul class="level2"><li class="level2 item131"><a href="/joomla/?profile=default" class="level2"><span>渐变蓝</span></a></li><li class="level2 item132"><a href="/joomla/?profile=ambientpink" class="level2"><span>粉红</span></a></li><li class="level2 item133"><a href="/joomla/?profile=street" class="level2"><span>街道</span></a></li><li class="level2 item134"><a href="/joomla/?profile=animatedred" class="level2"><span>动画红</span></a></li><li class="level2 item135"><a href="/joomla/?profile=wood" class="level2"><span>木质</span></a></li></ul></div><div class="width50 column"><ul class="level2"><li class="level2 item164"><a href="/joomla/?profile=ambientturquoise" class="level2"><span>绿松石</span></a></li><li class="level2 item165"><a href="/joomla/?profile=gradientgrey" class="level2"><span>渐变灰</span></a></li><li class="level2 item166"><a href="/joomla/?profile=grass" class="level2"><span>草地</span></a></li><li class="level2
item167"><a href="/joomla/?profile=bridge" class="level2"><span>桥</span></a></li><li class="level2 item168"><a href="/joomla/?profile=animated" class="level2"><span>动画蓝</span></a></li></ul></div></div></div></div></li><li class="level1 item137 parent"><a href="/joomla/index.php/widgetkit" class="level1 parent"><span><span class="icon" style="background-image:
url('http://113.55.44.46/joomla/images/yootheme/menu/icon_menu_widgetkit.png');"> </span>神圣几何学</span></a><div class="dropdown columns2" style="width:400px;"><div class="dropdown-bg"><div><div class="width50 column"><ul class="level2"><li class="level2 item138"><a href="/joomla/index.php/widgetkit/slideshow" class="level2"><span>圆、方、三角、螺旋</span></a></li><li class="level2 item147"><a href="/joomla/index.php/widgetkit/slideset" class="level2"><span>五边形、五角星</span></a></li></ul></div><div class="width50 column"><ul class="level2"><li class="level2 item149"><a href="/joomla/index.php/widgetkit/gallery" class="level2"><span>六边形、六角星</span></a></li><li class="level2 item146"><a href="/joomla/index.php/widgetkit/2012-12-02-13-16-52" class="level2"><span>生命之花</span></a></li></ul></div></div></div></div></li><li class="level1 item106 parent"><a href="/joomla/index.php/zoo" class="level1 parent"><span><span class="icon" style="background-image:
url('http://113.55.44.46/joomla/images/yootheme/menu/icon_menu_zoo.png');">
</span>UFO</span></a><div class="dropdown columns1"><div class="dropdown-bg"><div><div class="width100 column"><ul class="level2"><li class="level2 item175"><a href="/joomla/index.php/zoo/2012-12-02-10-25-38" class="level2"><span>是UFO 制造了麦田圈吗</span></a></li><li class="level2 item180"><a href="/joomla/index.php/zoo/2012-12-02-10-33-26" class="level2"><span>新观点-设计图</span></a></li><li class="level2 item181"><a href="/joomla/index.php/zoo/wiltshire" class="level2"><span>神秘的Wiltshire</span></a></li><li class="level2 item183"><a href="/joomla/index.php/zoo/2012-12-02-13-33-42" class="level2"><span>玛雅预言</span></a></li><li class="level2 item184"><a href="/joomla/index.php/zoo/2012-12-02-13-35-50" class="level2"><span>外星人回信</span></a></li></ul></div></div></div></div></li></ul></nav>
<div id="search">
<form id="searchbox" action="/joomla/index.php" method="post" role="search"> <input type="text" value="" name="searchword" placeholder="search..." />
<button type="reset" value="Reset"></button>
<input type="hidden" name="task" value="search" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="101" />
</form>
<script src="/joomla/templates/yoo_subway/warp/js/search.js"></script>
<script>
jQuery(function($) {
$('#searchbox input[name=searchword]').search({'url': '/joomla/index.php/component/search/?tmpl=raw&type=json&ordering=&search phrase=all', 'param': 'searchword', 'msgResultsHeader': 'Search Results', 'msgMoreResults': 'More Results', 'msgNoResults': 'No results found'}).placeholder();
});
</script></div>
</div> </header>
<div id="main" class="grid-block"> <div id="maininner" class="grid-box">
<section id="content" class="grid-block">
<div id="system-message-container">
</div>
<div id="system">
<div class="items items-col-0 grid-block"><div class="grid-box width100 leading">
<article class="item" data-permalink="http://113.55.44.46/joomla/index.php/7-holiday-impressions">
<header>
<time datetime="2012-12-07" pubdate>
<span class="day">07</span>
<span class="month">12月</span>
<span class="year">2012</span>
</time>
<h1 class="title">
<a href="/joomla/index.php/7-holiday-impressions" title="麦田圈印象">麦田圈印象</a>
</h1>
</header>
<div class="content clearfix">
<p><img src="/joomla/images/banners/2.jpg" border="0" alt="" width="128" height="145" /></p>
<p>从17世纪至今，关于麦田怪圈的争论就不绝于耳。
它们常常在春天和夏天出现，几乎遍及全世界，美国、澳大利亚、欧洲、南美、亚洲，无处不在。
世界上唯一没有出现过麦田圈的国家只有一个：南非。
虽然研究发现有80%的麦田怪圈属于人类的恶作剧，但是其他的是人类目前无法完成的。
</p>
</div>
</article>
<div class="links">
<a href="/joomla/index.php/7-holiday-impressions" title="麦田圈印象">
Continue Reading </a>
</div>
</div>
</div>
</div></section>
<section id="innerbottom" class="grid-block"> <div class="grid-box width100 grid-h"> <div class="module deepest">
<div>
id="slideshow-52-50bc75c3dfdf2" class="wk-slideshow wk-slideshow-subway-list" data-widgetkit="slideshow"
data-options='{"style":"subway_list","autoplay":1,"interval":5000,"width":"auto","height":18 8,"duration":500,"index":0,"order":"default","navigation":200,"animated":"fade"}'> <div>
<ul class="nav nav-200 clearfix">
<li>
<span>my music</span>
</li>
<li>
<span>my movies</span>
</li>
<li>
<span>my books</span>
</li>
<li>
<span>my apps</span>
</li>
</ul>
<div class="slides-container"><ul class="slides"><li><article class="wk-content clearfix"><img alt="Demo Image" height="150" width="310" src="/joomla/images/yootheme/demo/slideshow/demo_music.png" /></article></li><li><article class="wk-content clearfix"><img alt="Demo Image" height="150" width="310" src="/joomla/images/yootheme/demo/slideshow/demo_movies.png" /></article></li><li><article class="wk-content clearfix"><img alt="Demo Image" height="150" width="310" src="/joomla/images/yootheme/demo/slideshow/demo_books.png" /></article></li><li><article class="wk-content clearfix"><img alt="Demo Image" height="150" width="310" src="/joomla/images/yootheme/demo/slideshow/demo_apps.png" /></article></li></ul></div> </div>
</div> </div> </div> </section>
</div>
<!-- maininner end -->
<aside id="sidebar-b" class="grid-box"><div class="grid-box width100 grid-v"><div class="module mod-box mod-box-color2 deepest">
<p><a href="/joomla/index.php/component/content/?id=20&Itemid=66"> <img class="size-auto align-center" src="/joomla/images/yootheme/icon_contact.png" border="0" alt="Contact Icon" width="126" height="126" /></a></p>
<h3 class="module-title">QQ:153702172</h3>
</div></div><div class="grid-box width100 grid-v"><div class="module mod-box mod-box-transparent deepest">
</div></div><div class="grid-box width100 grid-v"><div class="module deepest">
<div id="gallery-51-50bc75c3e5680" class="wk-slideshow wk-slideshow-subway" data-widgetkit="slideshow"
data-options='{"style":"subway","width":220,"height":220,"autoplay":1,"order":"default","in terval":5000,"duration":500,"index":0,"navigation":1,"buttons":1,"slices":20,"animated":"ke nburns","caption_animation_duration":500,"lightbox":0}'>
<div>
<ul class="slides <li><img src="/joomla/cache/widgetkit/gallery/51/01-0d26af5daa.jpg" width="220" height="220" alt="01" /></li>
<li><img
src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAA AAABAAEAAAICV AEAOw=="
data-src="/joomla/cache/widgetkit/gallery/51/02-e7e0339d8a.jpg" width="220" height="220" alt="02" /></li>
<li><img
src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAA AAABAAEAAAICV AEAOw=="
data-src="/joomla/cache/widgetkit/gallery/51/03-23dc028592.jpg" width="220" height="220" alt="03" /></li>
<li><img
src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAA AAABAAEAAAICV AEAOw=="
data-src="/joomla/cache/widgetkit/gallery/51/04-a8db99f204.jpg" width="220" height="220" alt="04" /></li>
<li><img
src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAA AAABAAEAAAICV AEAOw=="
data-src="/joomla/cache/widgetkit/gallery/51/05-c2fcced429.jpg" width="220" height="220" alt="05" /></li>
<li><img
src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAA AAABAAEAAAICV AEAOw=="
data-src="/joomla/cache/widgetkit/gallery/51/06-12834dcf42.jpg" width="220" height="220" alt="06" /></li> </ul>
<a class="buttons" href="JavaScript:void(0);"><div class="prev"></div><div class="next"></div></a> </div> class="caption"></div><ul class="captions"><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<ul
class="nav"><li><span></span></li><li><span></span></li><li><span></span></li><li><span> </span></li><li><span></span></li><li><span></span></li></ul></div>
</div></div></aside>
</div>
<!-- main end -->
<footer id="footer" class="grid-block">
<a id="totop-scroller" href="#page"></a>
<div class="module deepest">
<p>Built with HTML5 and CSS3 | Copyright © 2012.12.7</p>
</div>Powered by <a href="">Warp Theme Framework</a> </footer>
</div>
</div>
</div>
</body>
</html>。