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

北京化工大学北方学院课程设计报告课程名称 应用软件实践 设计题目 javascript设计 专业、班级 计科0902 学 号 090202040 姓 名 董晔 指导教师 段雪丽 设计时间 2012.9.102012.10.12 2012年 10 月 12 日一、 引言（简要说明设计题目的目的、意义、内容、主要任务等）题目要求：使用javascript的技术来实现至少三种菜单，比如水平导航下拉菜单，支持3级菜单；树形结构菜单；目录结构菜单；滑动菜单；伸缩菜单等题目分析：针对题目要求，制作了三个html文件，分别名为：伸缩菜单、树形菜单（二级）、水平导航下拉菜单(三级)，每个html分别放在同名文件夹下，每个文件夹分别有为html配置的js与css文件。意义：软件开发不单单是技术层面的问题，外包装是十分重要的，为了让自己的软件更加好看，javascript中良好的布局，对css的设计十分重要。二、 正文（课程设计的主要内容，包括实验与观测方法和结果、仪器设备、计算方法、编程原理、数据处理、设计说明与依据、加工整理和图表、形成的论点和导出的结论等。正文内容必须实事求是、客观真切、准确完备、合乎逻辑、层次分明、语言流畅、结构严谨，符合各学科、专业的有关要求。）伸缩菜单，此菜单所应当有的效果是，刚打开文件时菜单全部处于闭合状态，如图： 1 当鼠标点击后鼠标点击菜单后会弹开，当再次点击后，之前然开的菜单会自动关闭，然后被点击的菜单弹开，最多只能有一个菜单被弹开，如图所示： 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).removeclass(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;.activetitlewidth: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 background: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;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;color:#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(/mycode/csstreemenu/tree/ico_folder_open.gif) no-repeat 0 40%;.menubox .titbox h3.fst a background:url(/mycode/csstreemenu/tree/ico_folder_open_fst.gif) no-repeat 0 40%;.menubox .titbox h3.lst a background:url(/mycode/csstreemenu/tree/ico_folder_open_lst.gif) no-repeat 0 40%;.menubox2 .titbox h3 a background:url(/mycode/csstreemenu/tree/ico_folder.gif) no-repeat 0 40%;.menubox2 .titbox h3.fst a background:url(/mycode/csstreemenu/tree/ico_folder_fst.gif) no-repeat 0 40%;.menubox2 .titbox h3.lst a line-height:250%;background:url(/mycode/csstreemenu/tree/icon_exit.gif) no-repeat 0 0;.menubox2 .txtbox display:none;.menubox .txtbox ul li padding-left:65px;line-height:150%;.menubox .txtbox .num color:#e00;.menubox .txtbox ul background:url(/mycode/csstreemenu/tree/line_y.gif) repeat-y 16px 0;.menubox .txtbox ul li background:url(/mycode/csstreemenu/tree/t.gif) no-repeat 28px 50%;.menubox .txtbox ul li.lst background:url(/mycode/csstreemenu/tree/t_lst.gif) no-repeat 28px 50%; 好友管理菜單 同事 亲 小春 小林 小龙 枫岩 客户 亲 小春 小林 小龙 枫岩 朋友 亲 小春 小林 小龙 枫岩 家人 亲 小春 小林 小龙 枫岩 退出系统 水平下拉菜单，此菜单简单模拟了网站的常见功能，当鼠标停在文字之上时，会出现下拉菜单，鼠标移开，菜单自动收回： 以下是源代码： 水平导航下拉菜单(三级) 产品报价 行业新闻 数码频道 笔记本 联想 神州 华硕 宏基 超级本本 联想 神州 华硕 宏基 台式电脑 联想台式电脑 华硕台式电脑 数码产品 u盘 数码像机 移动硬盘 平板电脑 dv gps 手机 iphone 三星 摩托罗拉 诺基亚 随身听 mp3/mp4 耳机 硬件频道 cpu 主板 显卡 硬盘/固态硬盘 内存显示器模拟攒机 公司办公 打印机 网络设备 投影仪 游戏专题 星际争霸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)+ ul).hide();$(this).attr(id,);$(this).parent().removeclass(hover);); 注：此文件css代码过多，由外部导入，祥见style.css文件。三、 结论（应当准确、完整、明确精练；也可以在结论或讨论中提出建议、设想、尚待解决问题等。）软件开发不管只是技术成面的问题，有是还有可能考验到一个人的设计能力，甚至是美术能力，好的设计作品不单单要有过硬的技术，巧妙的逻辑设计，更要视觉上美观。顾客对产品的印象好坏，在很大程度上取决于产品包装好坏，而不是单单程序设计精美实用就可以了，要想将自己的软件设计做好，那么第一个需要考虑的就是客户的第一感受。现在无论是什么类型的酒店装修在市场上竞争都是非常激烈的，对于如何才能将软件设计的更好，是许多软件开发者想要探讨的问题，但是有一条是不变的，那就是优质的服务让顾客赏心悦目。四、参考文献1 w3cschool css 参考