用户界面设计课程设计报告.docVIP

. . 目 录 TOC \o 1-3 \h \z 第一章 绪论 3 1.1 课程设计的目的 3 1.2 课程设计的背景和意义 3 1.3 课程设计环境及技术 3 第二章 需求分析 4 2.1 开发背景 4 2.2 功能要求 4 第三章 系统分析与设计 5 3.1 总体设计方案及思路 5 3.2 模块分析 5 第四章 界面实现 7 4.1 页面编辑、页面截图及相关技术介绍 7 4.2 部分页面编辑界面 11 第五章 课程设计心得体会 12 参考文献 13 第一章 绪论 1.1 课程设计的目的 1. 通过个人站点中界面的设计掌握站点及界面的制作方法。 2. 实践中体会界面的布局模式、颜色搭配、声音搭配、光线柔和程度、操作难以程度的变化对操作人员的感知影响。 3. 理论结合实际，通过实践完善理论的掌握。 1.2 课程设计的背景和意义 时下随着各种通讯技术的发展，互联网已在中国逐步进入普及阶段，许多人在充分享受浏览新闻，网上聊天，网络游戏，网上交易，收发电子邮件等网络的各种乐趣后，开始不满足于被动式的接受，希望能主动参与网络，因此大量的个人网站应运而生了。通过建立个人网站能更清晰的了解简单个人网站的结果组成以及一些相应技术的使用。并且通过网站的设计能让我将书本上的东西与实际动手能力相结合，将知识运用于现实，实现自我的知识储备的提升，在实战中让自己得到锻炼。 1.3 课程设计环境及技术 此次课程设计我运用windows xp操作系统，页面主要采用html语言、Java Script语言以及少量js语言，美图效果采用美图工具秀秀剪辑。 Windows xp系统开发环境较为成熟，进行开发设计的时候比较稳定。 Html语言是页面编辑的基本语言，易于上手，较为简单。 Java Script语言用于页面的动态图片及动画效果的实现。 Js语言简化页面代码的编辑，方便修改和读取。 美图工具可以简化背景页面的修改和美化。 第二章 需求分析 2.1 开发背景 此次网站设计主要针对界面的方面进行考察，所以仅实现简单的跳转和相关的页面操作即可，不需进行后台数据库的操作。 我的课程设计是针对个人网站的界面设计，所以在进行设计之前我浏览了一些个人网站的界面效果，进行对比参考发现，个人网站主要切入点应该是简单易懂、易于操作、个性突出。所以我先进行了有个人特色的页面背景的美化，突出我的网站，我的特色这一要点。之后在网站的开发上主要关心用户操作的方便性和色调搭配的舒适性以及背景音乐的愉悦性进行设计。 2.2 功能要求 首页：能够完成页面跳转功能，可以自主选择头像，具有滚动欢迎字体，具有滚动图片功能，有动态上浮云朵功能。 （首页中设有五个超链接，可方便的跳转到其下的子页面，对子页面进行浏览和编辑。） 管理员登录：能够完成页面跳转功能，有添加和更新用户信息功能，用户自主选择时间功能。 （管理员登录页面设有不同于首页的五个超链接，可进行主页和其他相关子页面的跳转。） 学生登录：能够完成页面跳转功能，有添加和更新用户信息功能。 （学生登录页面设有返回首页的超链接，方便跳转回首页） 课程设置：能够完成页面跳转功能，有添加和更新用户信息功能。 （课程设置页面设有返回首页的超链接，方便跳转回首页） 学生成绩查询：能够完成页面跳转功能，有添加和更新用户信息功能。 （学生成绩查询页面设有返回首页的超链接，方便跳转回首页） 学生考试评价：能够完成页面跳转功能，有添加和更新用户信息功能，有静态文本显示功能。 （学生考试评价页面设有返回首页的超链接，方便跳转回首页） 第三章 系统分析与设计 3.1 总体设计方案及思路 1．要建立个人网站，首先必须要了解一下目前网页制作的基本语言HTML，我通过网络学习了一些简单的HTML语言，这让我对页面的处理有了一定的了解。 2．学会使用目前流行的网页制作软件，如Frontpage、Dreamweaver等一些功能强大，所见所得的软件，初步了解就可，不用全部掌握，一般是边用边学，不断提高使用水平。我选择了使用Dreamweaver，Dreamweaver的好处是简单易于上手能在短时间内实现网站的大体结构。 3．广泛的上网浏览各种网页，一开始最好能下载一些较简单的个人网页，因为他们所用到的技术较为简单，可用网页制作软件打开研究。然后推荐去浏览一些专业的网页设计网站，学习一些排版经验，同时可下载一些网页结构模版供自己套用。 4．确定我的网站主题，本次我主要设计一个简单的介绍自己的网站而且时间有限，技术还不够成熟，所以做出来的作品可能还不够成熟 5．网页最好不要用特别与众不同的颜色、字体，因为每个人使用的计