应用软件实践报告格式.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配置部分：<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function() $(".menuTitle").click(function()$(this).next("div").slideToggle("slow").siblings(".menuContent:visible").slideUp("slow");$(this).toggleClass("activeTitle");$(this).siblings(".activeTitle").removeClass("activeTitle");););</script><style type="text/css">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;</style>以下是和body主体部分：<body><div class="container"><div class="menuTitle">伸缩菜单0</div><div class="menuContent"><ul><li> 伸缩菜单</li><li> 伸缩菜单</li><li> 伸缩菜单</li></ul></div><div class="menuTitle">伸缩菜单1</div><div class="menuContent"><ul><li> 伸缩菜单1</li><li> 伸缩菜单1</li><li> 伸缩菜单1</li></ul></div><div class="menuTitle">伸缩菜单2</div><div class="menuContent"><ul><li> 伸缩菜单2</li><li> 伸缩菜单2</li><li> 伸缩菜单2</li></ul></div></div></body>树形菜单（二级）如图，可以一级一级展开，可以一级一级收回：以下是树形菜单源代码：<style type="text/css" media="all">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( no-repeat 0 40%;.MenuBox .titBox h3.Fst a background:url( no-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 .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%;</style><script type="text/javascript"> <!- function ExChgClsName(Obj,NameA,NameB) var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj; Obj.className=Obj.className=NameA?NameB:NameA; function showMenu(iNo) ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2"); -></script><body><h1>好友管理菜單 </h1><div class="TreeWrap"><div class="MenuBox" id="Menu_0"><div class="titBox"><h3 class="Fst"><a href="javascript:showMenu(0);">同事</a></h3></div><div class="txtBox"> <ul> <li><a href="#">亲</a></li> <li><a href="#">小春</a></li> <li><a href="#">小林</a></li> <li><a href="#">小龙</a></li> <li class="Lst"><a href="#">枫岩</a></li> </ul></div></div><!-MenuBox-><div class="MenuBox2" id="Menu_1"><div class="titBox"><h3><a href="javascript:showMenu(1);">客户</a></h3></div><div class="txtBox"> <ul> <li><a href="#">亲</a></li> <li><a href="#">小春</a></li> <li><a href="#">小林</a></li> <li><a href="#">小龙</a></li> <li class="Lst"><a href="#">枫岩</a></li> </ul></div></div><!-MenuBox-><div class="MenuBox2" id="Menu_2"><div class="titBox"><h3><a href="javascript:showMenu(2);">朋友</a></h3></div><div class="txtBox"> <ul> <li><a href="#">亲</a></li> <li><a href="#">小春</a></li> <li><a href="#">小林</a></li> <li><a href="#">小龙</a></li> <li class="Lst"><a href="#">枫岩</a></li> </ul></div></div><!-MenuBox-><div class="MenuBox2" id="Menu_3"><div class="titBox"><h3><a href="javascript:showMenu(3);">家人</a></h3></div><div class="txtBox"> <ul> <li><a href="#">亲</a></li> <li><a href="#">小春</a></li> <li><a href="#">小林</a></li> <li><a href="#">小龙</a></li> <li class="Lst"><a href="#">枫岩</a></li> </ul></div></div><!-MenuBox-><div class="MenuBox2"><div class="titBox"><h3 class="Lst"><a href="#">退出系统</a></h3></div></div><!-MenuBox-></div></body> 水平下拉菜单，此菜单简单模拟了网站的常见功能，当鼠标停在文字之上时，会出现下拉菜单，鼠标移开，菜单自动收回： 以下是源代码：<head> <title>水平导航下拉菜单(三级)</title> <script src="js/jquery-1.4.3.min.js" type="text/javascript"></script> <link href="css/style.css" rel="stylesheet" type="text/css" /></head><body> <!-main_div-> <div id="main_div1"> <div id="main_div"> <!-header-> <div id="header"> <div id="logo"> <div class="mod_block media_image mb_logo_block" id="MODBLK_222"> <div class="flash_image"> <img alt="" src="images/aa/logo.png"> </div> </div> </div> <!- 站点语言模块Start -> <div class="switch_langbar"> </div> <!- 站点语言模块End -> </div> <div id="nav"> <div class="mod_block mb_56YrvV58_block" id="MODBLK_225"> <div class="nav_l"> </div> <ul class="navigation" id="nav_13Frua"> <li><a href="#">产品报价</a> </li> <li><a href="#">行业新闻</a> </li> <li><span><a href="#">数码频道</a> <ul> <li><span><a href="#67">笔记本</a> <ul> <li><a href="#70">联想</a> </li> <li><a href="#71">神州</a> </li><li><a href="#71">华硕</a> </li><li><a href="#70">宏基</a> </li> </ul> </span></li> <li><span><a href="#69">超级本本</a> <ul> <li><a href="#72">联想</a> </li> <li><a href="#73">神州</a> </li> <li><a href="#74">华硕</a> </li><li><a href="#75">宏基</a> </li> </ul> </span></li> <li><span><a href="#93">台式电脑</a> <ul> <li><a href="#94">联想台式电脑</a> </li> <li><a href="#95">华硕台式电脑</a> </li> </ul> </span></li> <li><span><a href="#75">数码产品</a> <ul> <li><a href="#77">U盘</a> </li> <li><a href="#78">数码像机</a> </li> <li><a href="#79">移动硬盘</a> </li><li><a href="#89">平板电脑</a> </li> <li><a href="#90">DV</a> </li> <li><a href="#91">GPS</a> </li> </ul> </span></li> <li><span><a href="#76">手机</a> <ul> <li><a href="#80">iphone</a> </li> <li><a href="#81">三星</a> </li> <li><a href="#83">摩托罗拉</a> </li><li><a href="#83">诺基亚</a> </li> </ul> </span></li> <li><span><a href="#84">随身听</a> <ul> <li><a href="#86">MP3/MP4</a> </li> <li><a href="#87">耳机</a> </li> </ul> </span></li> </ul> </span></li> <li><span><a href="#103">硬件频道</a> <ul> <li><a href="#104">CPU</a> </li> <li><a href="#106">主板</a> </li> <li><a href="#103">显卡</a> </li> <li><a href="#">硬盘/固态硬盘</a> </li> <li><a href="#104">内存</a><li><a href="#106">显示器</a><li><a href="#103">模拟攒机</a> </li> </ul> </span></li><li><span><a href="#7">公司办公</a> <ul> <li><a href="#14">打印机</a> </li> <li><a href="#7">网络设备</a> </li> <li><a href="#13">投影仪</a> </li> </ul> </span></li> <li><span><a href="#17">游戏专题</a> <ul> <li><a href="#">星际争霸2</a> </li> <li><a href="#15">Dota</a> </li> <li><a href="#16">LOL英雄联盟</a> </li> </ul> </span></li><li><a href="#">下载中心</a> </li> <li><a href="#">ZOL论坛</a> </li> </ul> <div class="nav_r"> </div> <script type="text/javascript">/$(".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");); </script> </div> </div> <!-header end-> </div> </div></body>注：此文件CSS代码过多，由外部导入，祥见style.css文件。三、 结论（应当准确、完整、明确精练；也可以在结论或讨论中提出建议、设想、尚待解决问题等。）软件开发不管只是技术成面的问题，有是还有可能考验到一个人的设计能力，甚至是美术能力，好的设计作品不单单要有过硬的技术，巧妙的逻辑设计，更要视觉上美观。顾客对产品的印象好坏，在很大程度上取决于产品包装好坏，而不是单单程序设计精美实用就可以了，要想将自己的软件设计做好，那么第一个需要考虑的就是客户的第一感受。现在无论是什么类型的酒店装修在市场上竞争都是非常激烈的，对于如何才能将软件设计的更好，是许多软件开发者想要探讨的问题，但是有一条是不变的，那就是优质的服务让顾客赏心悦目。四、参考文献1 W3cSchool CSS 参考手册 2 W3cSchool JavaScript 参考手册 3 W3cSchool HTML 教程 4 尚学堂马士兵JavaScript教学视频五、 指导教师评语 签名： 年 月 日课程设计成绩（五级分制）
