应用软件实践报告格式.doc

《应用软件实践报告格式.doc》由会员分享，可在线阅读，更多相关《应用软件实践报告格式.doc（14页珍藏版）》请在三一办公上搜索。

1、北京化工大学北方学院课程设计报告课程名称 应用软件实践 设计题目 Javascript设计 专业、班级 计科0902 学 号 090202040 姓 名 董晔 指导教师 段雪丽 设计时间 2012.9.102012.10.12 2012年 10 月 12 日一、 引言（简要说明设计题目的目的、意义、内容、主要任务等）题目要求：使用JavaScript的技术来实现至少三种菜单，比如水平导航下拉菜单，支持3级菜单；树形结构菜单；目录结构菜单；滑动菜单；伸缩菜单等题目分析：针对题目要求，制作了三个html文件，分别名为：伸缩菜单、树形菜单（二级）、水平导航下拉菜单(三级)，每个html分别放在同名文

2、件夹下，每个文件夹分别有为html配置的js与css文件。意义：软件开发不单单是技术层面的问题，外包装是十分重要的，为了让自己的软件更加好看，JavaScript中良好的布局，对css的设计十分重要。二、 正文（课程设计的主要内容，包括实验与观测方法和结果、仪器设备、计算方法、编程原理、数据处理、设计说明与依据、加工整理和图表、形成的论点和导出的结论等。正文内容必须实事求是、客观真切、准确完备、合乎逻辑、层次分明、语言流畅、结构严谨，符合各学科、专业的有关要求。）伸缩菜单，此菜单所应当有的效果是，刚打开文件时菜单全部处于闭合状态，如图： 1 当鼠标点击后鼠标点击菜单后会弹开，当再次点击后，之前

3、然开的菜单会自动关闭，然后被点击的菜单弹开，最多只能有一个菜单被弹开，如图所示： 2 3 4如果再次点击已弹开的菜单时，菜单会自动收起，如图1所示。以下是源代码，CSS配置部分：$(document).ready(function() $(.menuTitle).click(function()$(this).next(div).slideToggle(slow).siblings(.menuContent:visible).slideUp(slow);$(this).toggleClass(activeTitle);$(this).siblings(.activeTitle).removeC

4、lass(activeTitle);););bodymargin:0;background-color:#9ad075;.containerwidth:100%; text-align:center;.menuTitlewidth:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;.activeTi

5、tlewidth:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;.menuContentbackground-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;li backgroun

6、d:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;ulmargin:0;padding:0;以下是和body主体部分：伸缩菜单0 伸缩菜单 伸缩菜单 伸缩菜单伸缩菜单1 伸缩菜单1 伸缩菜单1 伸缩菜单1伸缩菜单2 伸缩菜单2 伸缩菜单2 伸缩菜单2树形菜单（二级）如图，可以一级一级展开，可以一级一级收回：以下是树形菜单源代码：a,a:visited color:#333

7、;text-decoration:none;a:hover color:#f60;body,td font:13px Geneva,宋体, Arial, Helvetica,sans-serif;ul,li margin:0;padding:0;list-style:none;h1,h2,h3,h4,h5,h6 margin:0;padding:0;h1 padding:5px;color:#900;font:16px bold Geneva,宋体, Arial, Helvetica,sans-serif;h1 small font-size:11px;font-weight:normal;c

8、olor:#660;.TreeWrap width:200px;.MenuBox .titBox a,.MenuBox .titBox a:visited,.MenuBox2 .titBox a,.MenuBox2 .titBox a:visited margin-left:10px;padding-left:40px;color:#003;font-size:12px;display:block;.MenuBox .titBox h3 a background:url( no-repeat 0 40%;.MenuBox .titBox h3.Fst a background:url( no-

9、repeat 0 40%;.MenuBox .titBox h3.Lst a background:url( no-repeat 0 40%;.MenuBox2 .titBox h3 a background:url( no-repeat 0 40%;.MenuBox2 .titBox h3.Fst a background:url( no-repeat 0 40%;.MenuBox2 .titBox h3.Lst a line-height:250%;background:url( no-repeat 0 0;.MenuBox2 .txtBox display:none;.MenuBox .

10、txtBox ul li padding-left:65px;line-height:150%;.MenuBox .txtBox .num color:#e00;.MenuBox .txtBox ul background:url( repeat-y 16px 0;.MenuBox .txtBox ul li background:url( no-repeat 28px 50%;.MenuBox .txtBox ul li.Lst background:url( no-repeat 28px 50%; 好友管理菜單 同事 亲 小春 小林 小龙 枫岩 客户 亲 小春 小林 小龙 枫岩 朋友 亲

11、小春 小林 小龙 枫岩 家人 亲 小春 小林 小龙 枫岩 退出系统 水平下拉菜单，此菜单简单模拟了网站的常见功能，当鼠标停在文字之上时，会出现下拉菜单，鼠标移开，菜单自动收回： 以下是源代码： 水平导航下拉菜单(三级) 产品报价 行业新闻 数码频道 笔记本 联想 神州 华硕 宏基 超级本本 联想 神州 华硕 宏基 台式电脑 联想台式电脑 华硕台式电脑 数码产品 U盘 数码像机 移动硬盘 平板电脑 DV GPS 手机 iphone 三星 摩托罗拉 诺基亚 随身听 MP3/MP4 耳机 硬件频道 CPU 主板 显卡 硬盘/固态硬盘 内存显示器模拟攒机 公司办公 打印机 网络设备 投影仪 游戏专题

12、星际争霸2 Dota LOL英雄联盟 下载中心 ZOL论坛 /$(.navigation li:first).css(background-image,none);var topMenuNum = 0;$(#nav_13Frua li span).hover(function()topMenuNum+;$(this).attr(id,kindMenuHover+topMenuNum);$(#kindMenuHover + topMenuNum + ul).show();$(this).parent().addClass(hover);,function()$(#+$(this).attr(id

13、)+ ul).hide();$(this).attr(id,);$(this).parent().removeClass(hover);); 注：此文件CSS代码过多，由外部导入，祥见style.css文件。三、 结论（应当准确、完整、明确精练；也可以在结论或讨论中提出建议、设想、尚待解决问题等。）软件开发不管只是技术成面的问题，有是还有可能考验到一个人的设计能力，甚至是美术能力，好的设计作品不单单要有过硬的技术，巧妙的逻辑设计，更要视觉上美观。顾客对产品的印象好坏，在很大程度上取决于产品包装好坏，而不是单单程序设计精美实用就可以了，要想将自己的软件设计做好，那么第一个需要考虑的就是客户的第一感受。现在无论是什么类型的酒店装修在市场上竞争都是非常激烈的，对于如何才能将软件设计的更好，是许多软件开发者想要探讨的问题，但是有一条是不变的，那就是优质的服务让顾客赏心悦目。四、参考文献1 W3cSchool CSS 参考手册 2 W3cSchool JavaScript 参考手册 3 W3cSchool HTML 教程 4 尚学堂马士兵JavaScript教学视频五、 指导教师评语 签名： 年 月 日课程设计成绩（五级分制）