《人机界面设计》课程设计书模板
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课程设计书
——《人机界面设计》开源平台设计开发
学院教育科学学院
小组第七小组
组长冯清
成员许珊珊、章丽、王广亮
完成时间2013年12月12号
目录
1设计主题概述 (3)
2设计方案 (3)
2.1设计所采用的技术手段 (3)
2.2详细设计方案 (4)
3项目平台实现的功能及预期价值分析 (12)
3.1平台的功能说明 (12)
3.2平台的预期价值分析 (15)
4项目评价 (15)
5致谢 (16)
1设计主题概述（要求：不少于300字，阐释设计主题内容，主要功能模块和设计思路。
设计主题是主要爱针对的是大学英语六级阅读问题，由此我们开发了六级阅读、单词、资源下载、练习提高、图片频道、文章中心、交流论坛共七个模块。
每个模块都配有相关的内容和针对六级阅读而设立的相关资源。
在六级阅读的模块中，我们特别设立了议论文、说明文、记叙文、抒情散文共四个模块，分别有对应的六级阅读真题文章提供给大家阅读。
通过分类。
使同学们能够有针对性的对自己薄弱的阅读类型进行强化练习，这样使同学们的学习更加具有针对性，效果也更加明显。
特别的，我们针对六级英语阅读的“飞阅”网站中，我们还添加了我们更具特色的图片频道。
这个模块中，我们专门收集各个西方国家的优美风景、优秀建筑、风土人情等各种优美、精致的图片。
这是我们六级阅读网站的一大特色，为的让大家通过这些图片的欣赏，产生对这些国家，这些内容求知的欲望，进而使大家产生阅读的兴趣，使大家主动的投入到英文的阅读中去。
而在文章中心这个模块里我们将六级遇到的文章分类，依次放在不同的小模块里，使用户者能够更加清楚的知道这个文章的具体内容。
在会员中心部分，我们设置了个人的空间，可以让用户者能够相互的聊天或者上传自己的资料都可以。
我们设计的这个网站里面将信息全部分类了，使用户者可以更全面的学习，并且里面还包括了练习提高部分，使用户者可以将自己学到的知识巩固的更牢。
2设计方案
飞阅这个网站的设计理念是针对现在大学里面很多的人在面对考六级的时候都束手无措，这个网站分为几大模块，依次是首页，六级阅读，资料下载，单词，练习提高，图片频道和文章中心等部分。
我们在设计的时候是用到帝国这个开源平台来设计的。
然后在管理后台部分将每个模块的代码和资料依次放进去，在写代码的时候，我们先在草稿纸上设计出每个模块的基本架构。
2.1 设计所采用的技术手段
本网站的设计是基于帝国CMS开源软件。
首先在电脑上安装帝国软件，然后再用管理员的身份登录后台，在后台管理部分编写首页的代码，再辅助使用Dreamwaver编写代码，在编写的时候我们现在草稿纸上将设计的模块基本的画出来
Photoshop设计logo，Sql server2005创建数据库。
这一系列的技术组合应用使得系统性能显著提高，同时使得系统的拓展性、操作性、实用性大大增强。
应用服务器软件采用Web服务器，数据库采用Sql server2005。
（具体包括各模块开发所采用的软件，承担该模块开发成员介绍）
2.2 详细设计方案
1）首页
设计过程是先设计好框图，收集好首页需要的图片及素材，然后按照帝国CMS模板，修改成我们想要的效果，在此过程中，需在Dreamwaver修改页面色调，每个板块的大小，用Photoshop修改图片，使之成为我们需要的大小及格式。
下面两幅图是整个首页，最上方的一行是本就有的，只是在对应部分修改标题。
网站logo是在photoshop中制作150×74像素的GIF格式的图片，右边的网站形象图片是在photoshop中修改成630×74像素的GIF格式的图片。
然后是导航条,我们根据自己的需求，适当增删模块个数，并在Dreamwaver中修改了导航条的字体和颜色。
右边的大图是一系列格式大小相同的图片。
最下方的“友情链接”的制作过程是先在百度中搜寻关于英语的网站，复制网址到链接部分，这样点击就会出现对应的网站。
2）六级阅读
在dreamwaver中把导航条中的六级阅读按钮分成四个模块。
按种类分别将议论文、说明
文、记叙文和抒情散文插入。
材料是在百度文库中下载的。
3）单词
“单词”这块跟“六级阅读”制作过程一样，只不过插入的内容不同。
4）资源下载
在后台模板里面找到管理内容模板，在管理内容模板里面找到资源下载的部分，在里面编写下载的模板，如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>[!--pagetitle--] - Powered by EmpireCMS</title>
<meta name="Keywords" content="[!--pagekey--]" />
<meta name="description" content="[!--pagedes--]" />
<link href="[!--news.url--]skin/default/css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="[!--news.url--]skin/default/js/tabs.js"></script> </head>
<body class="showpage">
[!--temp.header--]
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr valign="top">
<td class="main"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="position">
<tr>
<td>您当前的位置：[!--newsnav--]</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td><table width="100%" border="0" cellpadding="3" cellspacing="2" bgcolor="#FFFFFF">
<tbody>
<tr>
<td width="78" align="center"
nowrap="nowrap" bgcolor="#E1EFFB"><b>软件名称：</b></td>
<td colspan="2"
bgcolor="#E1EFFB"><b>[!--title--]</b></td>
</tr>
<tr>
<td align="center"><strong>文件类型：
</strong></td>
<td width="296">[!--filetype--]</td>
<td width="180" rowspan="9"
align="center"><a href="[!--titlepic--]" target="_blank"><img src="[!--titlepic--]" border="0" width="128" /></a></td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>界面语言：</strong></td>
<td
bgcolor="#F4F9FD">[!--language--]</td>
</tr>
<tr>
<td align="center"><strong>软件类型：
</strong></td>
<td>[!--softtype--]</td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>运行环境：</strong></td>
<td bgcolor="#F4F9FD">[!--softfj--]</td>
</tr>
<tr>
<td align="center"><strong>授权方式：
</strong></td>
<td>[!--softsq--]</td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>软件大小：</strong></td>
<td bgcolor="#F4F9FD">[!--filesize--]</td>
</tr>
<tr>
<td align="center"><strong>软件等级：</strong></td>
<td><img
src="[!--news.url--]e/data/images/[!--star--]star.gif" border="0" /></td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>软件登陆：</strong></td>
<td
bgcolor="#F4F9FD">[!--username--]</td>
</tr>
<tr>
<td align="center"><strong>作者：
</strong></td>
<td>[!--softwriter--]</td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>官方网址：</strong></td>
<td colspan="2" bgcolor="#F4F9FD"><a href='[!--homepage--]' target="_blank">官方站</a></td>
</tr>
<tr>
<td align="center"><strong>程序演示：</strong></td>
<td colspan="2"><a href='[!--demo--]' target="_blank">演示</a></td>
</tr>
<tr>
<td align="center"
bgcolor="#F4F9FD"><strong>整理时间：</strong></td>
<td colspan="2"
bgcolor="#F4F9FD">[!--newstime--]</td>
</tr>
<tr>
<td align="center"><strong>软件简介：</strong></td>
<td
colspan="2"> [!--softsay--]</td>
</tr>
<tr>
<td width="78" align="center"
nowrap="nowrap" bgcolor="#F4F9FD"><b><font color="#008E00">下载地址：
</font></b></td>
<td colspan="2" bgcolor="#F4F9FD">
[!--downpath--]</td>
</tr>
<tr>
<td align="center"
nowrap="nowrap"><strong>下载帮助：</strong></td>
<td colspan="2"><img
src="[!--news.url--]e/data/images/gonggao.gif" border="0" /><a
href="[!--news.url--]e/pl/?classid=[!--classid--]&id=[!--id--]">发表评论</a> <img
src="[!--news.url--]e/data/images/gonggao.gif" border="0" /><a
href="[!--news.url--]e/member/fava/add/?classid=[!--classid--]&id=[!--id--]">加入收藏夹</a> <img src="[!--news.url--]e/data/images/gonggao.gif" border="0" /><a
href="[!--news.url--]e/public/report/?classid=[!--classid--]&id=[!--id--]"
target="_blank">错误报告</a></td>
</tr>
<tr>
<td width="78" align="center" valign="top" nowrap="nowrap" bgcolor="#F4F9FD"><b><font color="#008E0">相关软件：
</font></b></td>
<td colspan="2"
bgcolor="#F4F9FD">[!--other.link--]</td>
</tr>
<tr>
<td align="center" valign="center"
nowrap="nowrap"><strong>下载说明：</strong></td>
<td colspan="2">☉推荐使用网际快车下载本站软件，使用WinRAR v3.10 以上版本解压本站软件。
<br />
☉如果这个软件总是不能下载的请点击报告错误,谢谢合作!!<br />
☉下载本站资源，如果服务器暂不能下载请过一段时间重试！<br />
☉如果遇到什么问题，请到<a
href="" target="_blank">本站论坛</a>去咨寻，我们将在那里提供更多
、更好的资源！<br />
☉本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
[!--temp.pl--]</td>
<td class="sider"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="title">
<tr>
<td><strong>推荐下载</strong></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td><ul>
<script
src='[!--news.url--]d/js/class/class[!--self.classid--]_goodnews.js'></script></ul></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="title margin_top">
<tr>
<td><strong>最后更新</strong></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td><ul>
<script
src='[!--news.url--]d/js/class/class[!--self.classid--]_newnews.js'></script></ul></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="title margin_top">
<tr>
<td><strong>热门点击</strong></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td><ul>
<script
src='[!--news.url--]d/js/class/class[!--self.classid--]_hotnews.js'></script></ul></td>
</tr>
</table></td>
</tr>
</table>
[!--temp.footer--] [!--page.stats--]
</body>
</html>
然后再在里面添加具体的资料即可。
5）练习提高
在代码部分将练习提高部分分成几个大的板块，在每一板块依次添加内容，如
在将每个文章标题做链接转到具体的文章上即可。
6）图片频道
图片频道设计的理念就是希望引起学习者的注意，让他们对学习英语感兴趣，图片频道部分分为三大模块，依次是欧美建筑，欧美风俗和欧美人物，让学习者能够了解外国的状况，设计的板块如图
7）文章中心
文章中心是六级阅读所遇到的基本文章，可以加大用户者的视野，让他们能够对一些话题很熟悉。
这个板块是在模块里将代码写完，然后在信息栏目将需要的资料依次添加即可。
8）会员中心
（具体都包含哪些功能模块，每个功能模块详细设计过程，每个模块至少要有4张截图）
3项目平台实现的功能及预期价值分析（要求：不少于2000字，有插图说明。
）平台的功能说明
这个平台主要针对六级阅读，目的性很强。
英语类的网站特别多，像四六级英语、专业英语、考研英语等。
但是范围很广种类繁杂，每个模块涉及不深，资料也难以齐全。
所以我们设计了这个平台，专门为那些被阅读困扰的考生。
主要分析六级阅读题材，根据以往的考试内容收集热点话题，列出英语阅读中的高频单词，提供快速阅读和深入阅读的方法技巧。
“单词”是专门学习六级单词，包括拼写、音标、用法、例句等；在“资源下载”这一块可以下载浏览者所需的资料，包括单词、文章、图片大多数是本网站其他板块的精髓；在“练习提高”中有历年阅读真题，以便在实践中得以提高；“图片频道”中呈现的全是海外风景、欧洲建筑、西方时尚，以拓宽浏览者视野，增加学习英语的兴趣。
“文章中心”里面是各种不同题材的文章。
“会员中心”就是用来交流经验、解决具体英语阅读问题。
1)首页
首页是本网站的总入口和形象代表。
访问者可以在首页看到本网站的各个栏目的菜单链接,即导航条。
首页同时为各个栏目提供精简的小区域，访问者可以从各个小区域看到各个栏目的大致内容并点击进入。
首页的左上角是代表本网站的logo。
最上方有一系列功能，如加入收藏，注册会员，登录、投稿等。
首页下方提供友情链接区域，可以放置若干个网站的友情链接，这些友情链接可以指向其他关于英语的网站。
首页会显示最近更新的信息，分模块置于首页。
首页还包括网站简介、联系方式等。
2）六级阅读
在dreamwaver中把导航条中的六级阅读按钮分成四个模块。
按种类分别将议论文、说明文、记叙文和抒情散文插入。
4）资源下载
主要针对英语六级阅读的相关资料的下载，用于课外补充学习。
所包含的资料有六级英语阅读高频单词的归纳，总结，详细解释。
5）单词
归纳和总结了在大学英语六级阅读中经常出现的单词，并配上详细的解释，例句，和相关的近义词。
这些资源只要你成为付费会员，都可以直接下载获取相关资源。
5）练习提高
很多关于六级阅读的练习，为了节省时间，也使得学习很具有效率，所以里面的练习都是有针对性的一些习题，你可以根据自己薄弱的地方进行有选择的网上练习。
6）图片频道
为了进一步提高同学们对英语学习的兴趣，特别的，我们针对六级英语阅读的“飞阅”网站中，我们还添加了我们更具特色的图片频道。
这个模块中，我们专门收集各个西方国家的优美风景、优秀建筑、风土人情等各种优美、精致的图片。
这是我们六级阅读网站的一大特色，为的让大家通过这些图片的欣赏，产生对这些国家。
6）文章中心
收集了很多有特色的经典六级阅读文章供同学们学习，阅读。
进而丰富同学们的知识面，扩展学习内容。
9）会员中心
（具体都包含哪些功能模块，每个功能模块详细设计过程，每个模块至少要有4张
3.1 平台的预期价值分析
大学生、职业学院生甚至工作人士会面临过六级难的问题，而英语六级中阅读占的分值很高，而六级考生常常会抱怨阅读时间少，生词多，句子繁杂，题型灵活，题材颇偏。
因此提高英语阅读效率成为了他们亟待解决的问题。
所以这样一个专门帮助提高英语阅读的网站是会广受欢迎的。
不仅因为这个网站的针对性强，还因为它的材料齐全，方法面面俱到，充分考虑到了六级阅读中会遇到的问题，即使千虑一失，还可以经论坛来解决。
阅读是英语学习中永恒不变的话题，即使不考六级，英语阅读能力还是需要的，所以英语阅读网站永远不会失去其价值。
英语是一门国际化语言，学习英语的人只会越来越多。
我们的网站是一个动态网站，永远保持鲜活，会随六级阅读的改革而变换题材、题型。
4项目评价（不少于500字，从设计创新性、主题的鲜明性等方面中肯分析整个项目设计的最终效果，肯定做出的成绩，指出其中需要改进之处）
这个平台主要针对六级阅读，目的性很强。
英语类的网站特别多，像四六级英语、专业英语、考研英语等。
但是范围很广种类繁杂，每个模块涉及不深，资料也难以齐全。
所以我们设计了这个平台，专门为那些被阅读困扰的考生。
主要分析六级阅读题材，根据以往的考试
内容收集热点话题，列出英语阅读中的高频单词，提供快速阅读和深入阅读的方法技巧。
在“练习提高”中有历年阅读真题，以便在实践中得以提高。
“图片频道”中呈现的全是海外风景、欧洲建筑、西方时尚，以拓宽浏览者视野，增加学习英语的兴趣。
“文章中心”里面是各种不同题材的文章。
“交流论坛”就是用来交流经验、解决具体英语阅读问题。
大学生、职业学院生甚至工作人士会面临过六级难的问题，而英语六级中阅读占的分值很高，而六级考生常常会抱怨阅读时间少，生词多，句子繁杂，题型灵活，题材颇偏。
因此提高英语阅读效率成为了他们亟待解决的问题。
所以这样一个专门帮助提高英语阅读的网站是会广受欢迎的。
不仅因为这个网站的针对性强，还因为它的材料齐全，方法面面俱到，充分考虑到了六级阅读中会遇到的问题，即使千虑一失，还可以经论坛来解决。
阅读是英语学习中永恒不变的话题，即使不考六级，英语阅读能力还是需要的，所以英语阅读网站永远不会失去其价值。
英语是一门国际化语言，学习英语的人只会越来越多。
我们的网站是一个动态网站，永远保持鲜活，会随六级阅读的改革而变换题材、题型。
5致谢（老师的悉心指导，全组同学的团队协作…）
在整个网站的制作过程中，首先要感谢老师教授我们网站设计技术，向我们介绍开源平台、开源软件以及在制作过程中的帮助我们解决难题，在技术及视觉艺术上极大地指导帮助我们。
然后感谢全体同学的团结，整个制作过程中没有出现分歧，协同合作，充分发挥了团队的力量。
在感谢其他使用帝国CMS的其他小组，他们也给予了我们一些技术上的帮助。
最后感谢在制作网站过程中对我们有用的网站，尤其是百度文库，它为我们提供了大量的英语阅读资料。