实训三-进销存首页界面制作.doc

实训三 进销存首页界面制作

———————————————————————————————— 作者：
———————————————————————————————— 日期：

2

个人收集整理 勿做商业用途
实训三 进销存首页界面制作
实训目的：完成进销存管理系统首页文件的制作
实训内容：良好的用户界面可以增强软件的易用性，使用户对软件有良好的映象.在本系统中，首页文件由4个文件组成,采用框架技术集成。

1. 功能菜单页面(menu.aspx）
本页面完成系统所需的全部功能菜单,由静态HTML和JS代码组成，全部代码如下：
〈％@ Page Language=”C#” AutoEventWireup=”true” CodeFile="menu。aspx。cs” Inherits=”menu" ％〉

〈！DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www。w3。org/TR/xhtml1/DTD/xhtml1—transitional.dtd”>

〈html xmlns="http：//www。w3。org/1999/xhtml”〉
〈head id=”Head1” runat=”server"〉
<title〉〈/title〉

〈STYLE type="text/css”〉
BODY ｛ SCROLLBAR—FACE—COLOR： ＃799ae1; BACKGROUND： #799ae1； MARGIN： 0px; FONT: 12px 宋体; SCROLLBAR—HIGHLIGHT—COLOR： ＃799ae1; SCROLLBAR—SHADOW-COLOR: #799ae1; SCROLLBAR-3DLIGHT-COLOR: ＃799ae1； SCROLLBAR—ARROW—COLOR: ＃ffffff; SCROLLBAR—TRACK-COLOR: #aabfec; SCROLLBAR-DARKSHADOW—COLOR： ＃799ae1 }
TABLE { BORDER-RIGHT: 0px； BORDER—TOP： 0px; BORDER—LEFT： 0px； BORDER—BOTTOM： 0px;
height： 12px;
｝
TD { FONT: 12px 宋体 ｝
IMG ｛ BORDER—RIGHT: 0px； BORDER—TOP: 0px; VERTICAL-ALIGN： bottom； BORDER-LEFT: 0px； BORDER—BOTTOM： 0px }
A ｛ FONT： 12px 宋体; COLOR： #000000; TEXT—DECORATION: none ｝
A:hover ｛ COLOR： #428eff； TEXT—DECORATION： underline ｝
。sec_menu { BORDER-RIGHT: white 1px solid; BACKGROUND: ＃d6dff7; OVERFLOW: hidden; BORDER-LEFT： white 1px solid; BORDER-BOTTOM: white 1px solid ｝
。menu_title { ｝
.menu_title SPAN ｛ FONT-WEIGHT： bold； COLOR： ＃215dc6； POSITION: relative; TOP: 2px }
.menu_title2 { }
。menu_title2 SPAN ｛ FONT—WEIGHT： bold; COLOR： ＃428eff; POSITION: relative； TOP: 2px ｝

〈/STYLE〉
〈script type="text/javascript" 〉
var count=0；//做计数器
var limit=new Array(）;//用于记录当前显示的哪几个菜单
var countlimit=1；//同时打开菜单数目，可自定义
function expandIt(el） ｛
obj = eval（"sub" + el)；
if （obj。style.display == "none"） ｛
obj.style。display = "block”；//显示子菜单
if (count〈countlimit) {//限制1个
limit[count］=el;//录入数组
count++；
}
else ｛
eval（”sub" + limit［0])。style.display = "none”；
for （i=0；i<limit。length—1;i++） ｛limit［i］=limit［i+1］;｝//数组去掉头一位，后面的往前挪一位
limit［limit.length—1]=el;
}
｝
else {
obj.style.display = "none”;
var j;
for (i=0；i〈limit。length；i++) ｛if (limit[i］==el) j=i;｝//获取当前点击的菜单在limit数组中的位置
for （i=j；i<limit.length-1;i++) {limit［i]=limit[i+1]；}//j以后的数组全部往前挪一位
limit[limit。length-1]=null;//删除数组最后一位
count—-;
｝
｝
〈/script>
</head〉
〈body style=" margin:0px； padding：0px；"〉
<form id="form1” runat=”server”〉

<table width="100％” cellpadding="0” cellspacing="0” border="0” align=”left”〉
<tr><td height=”25”>
〈table cellpadding=”0” cellspacing="0" width=”158" align=”center">
〈tr〉
<td height=”42" valign=”bottom"〉
<img align=”absmiddle" src=”images/title。gif” width="158" height="38">
〈/td〉
〈/tr〉
〈/table〉
〈table cellpadding=”0” cellspacing="0" width=”158" align=”center” style="margin—bottom:1px;">
〈tr〉
<td align="center" height="25" class="menu_title" onMouseOver="this.className='menu_title2';” onMouseOut=”this。className=’menu_title'；" background=”images/admin_left_1.gif” id=main1 onclick=expandIt（1）〉
〈span>入库管理</span>
〈/td>
〈/tr〉
〈tr〉
<td id=sub1 style="display:none” class=”sec_menu” >
〈table cellpadding="0" cellspacing=”0” align=”center” width="150"〉

〈tr〉
〈td height="10”></td〉
〈/tr>
<tr>
〈td height="20" align=”center”><a href="buy.aspx” target=”main"〉〈img align=”absmiddle" src="images/ico/ico01。gif" border="0"><br />产品入库</a〉&nbsp;
〈/td〉
〈/tr>
〈tr〉<td height=”5”></td〉〈/tr〉
<tr>
〈td height="20" align="center”〉<a href=”buy_search。aspx” target="main"〉<img align="absmiddle" src="images/ico/ico02。gif" border=”0"><br /〉入库记录查询〈/a〉&nbsp;
</td〉
</tr〉

〈/table〉
<table cellpadding=”0" cellspacing="0" align="center” width="135”〉
〈tr>
<td height=”10”〉</td>
</tr〉
</table〉

〈/td>
</tr〉
〈/table〉
〈table align=”center" cellpadding=”0” cellspacing=”0” width="158" style=”margin-bottom：1px；">
<tr〉
〈td align="center” class=”menu_title” onMouseOver=”this。className='menu_title2’；” onMouseOut=”this。className=’menu_title’；”
id=main2 onclick=expandIt（2) style="background-image： url(’images/admin_left_2.gif'）” height=”25” 〉
<span>产品销售</span〉</td〉
</tr〉
〈tr>
<td id=sub2 class="sec_menu" style="display:none；"〉
〈table cellpadding=”0" cellspacing="0” align="center” width="150”〉

〈tr〉
〈td height=”10”〉〈/td>
</tr>
<tr>
〈td height="20” align="center”><a href="sell。aspx" target=”main”〉〈img align="absmiddle" src="images/ico/ico03.gif” border=”0”><br /〉产品销售〈/a〉&nbsp；
〈/td>
〈/tr>
<tr>〈td height="5”〉</td〉</tr〉
<tr>
<td height=”20” align="center"〉<a href="sell_search。aspx” target=”main"〉<img align="absmiddle" src=”images/ico/ico04.gif” border=”0"〉〈br />销售记录查询〈/a>＆nbsp；
〈/td>
〈/tr>

</table〉
〈table cellpadding="0” cellspacing="0" align="center" width=”135”〉
<tr>
〈td height=”10"〉</td〉
〈/tr〉
</table>〈/td>
〈/tr〉
〈/table〉

〈table align="center" cellpadding=”0" cellspacing="0" style=”width: 158px” style=”margin—bottom:1px；">
<tr〉
〈td height=”25” align="center” style=”background-image: url('images/admin_left_2。gif'）” class=”menu_title” onMouseOver="this。className=’menu_title2’；” onMouseOut=”this.className='menu_title'；”
id=main3 onclick=expandIt(3)〉
<span>库存管理</span〉</td〉
〈/tr〉
<tr〉
〈td id=”sub3” class="sec_menu" style=”display：none；">
<table cellpadding=”0" cellspacing=”0” align=”center” width=”150"〉

<tr〉
<td height="10”〉</td〉
〈/tr〉
<tr〉
<td height=”20” align="center”><a href=”product_Search.aspx” target="main">〈img align=”absmiddle” src=”images/ico/ico05。gif” border="0"〉〈br /〉库存查询〈/a〉＆nbsp;
</td>
〈/tr>
〈tr〉<td height=”5”〉</td〉</tr〉
〈tr>
〈td height="20" align=”center"〉〈a href=”product_warning.aspx” target="main”>〈img align="absmiddle” src=”images/ico/ico06。gif" border="0">〈br /〉库存报警〈/a>&nbsp；
〈/td〉
〈/tr〉

</table〉
<table cellpadding="0" cellspacing=”1” style="width： 100％">
<tr〉
<td height=”5”>
</td〉
</tr>
〈/table>
</td>
〈/tr>
</table>

<table align="center” cellpadding=”0" cellspacing="0" style="width: 158px； margin-bottom：1px;”>
〈tr〉
〈td height=”25" align=”center” style="background—image： url(’images/admin_left_2。gif'）” class="menu_title” onMouseOver=”this.className='menu_title2’；” onMouseOut=”this.className='menu_title'；"
id=main4 onclick=expandIt（4）〉
<span>信息查询〈/span>
</td〉
</tr>
〈tr>
〈td id="sub4" class =”sec_menu” style="display:none；">
<table cellpadding=”0” cellspacing=”0" align="center" width=”150"〉

〈tr>
〈td height=”10">〈/td>
〈/tr>
<tr>
〈td height="20” align="center”〉<a href="worker_Search。aspx” target="main"〉<img align=”absmiddle” src=”images/ico/ico37.gif” border=”0”〉<br /〉员工信息查询</a>&nbsp；
</td〉
〈/tr>
<tr〉〈td height=”5”〉</td〉〈/tr>
<tr>
〈td height="20" align=”center”><a href=”shangpin_search。aspx" target="main"><img align="absmiddle” src=”images/ico/ico37。gif" border="0”〉〈br /〉商品信息查询</a>&nbsp；
</td>
〈/tr>
〈tr〉<td height=”5"></td〉</tr>
〈tr>
〈td height=”20” align=”center”><a href=”gongyingshang_Search。aspx” target="main”〉〈img align=”absmiddle" src=”images/ico/ico37。gif" border="0">〈br />供应商信息查询〈/a〉&nbsp;
〈/td〉
</tr〉
〈tr〉<td height=”5”〉</td></tr>
〈tr〉
<td height=”20” align=”center"><a href=”sell_search.aspx” target=”main”〉〈img align=”absmiddle” src=”images/ico/ico37。gif" border=”0”><br />销售信息查询〈/a>＆nbsp;
〈/td>
〈/tr>
〈tr〉<td height=”5”〉〈/td〉〈/tr>
〈tr>
〈td height="20" align=”center”〉<a href=”buy_Search。aspx" target="main"〉<img align="absmiddle” src=”images/ico/ico37。gif” border=”0”〉<br />商品入库查询〈/a〉＆nbsp；
〈/td〉
</tr〉

</table〉
〈/td〉
〈/tr〉
〈/table>
<table align=”center” cellpadding="0" cellspacing="0” style="width： 158px； margin—bottom:1px;”〉
<tr〉
<td height="25" align=”center” style="background—image: url（’images/admin_left_2。gif'）” class=”menu_title" onMouseOver=”this。className=’menu_title2’；” onMouseOut="this.className='menu_title'；"
id=main5 onclick=expandIt（5）>
<span>基本信息管理〈/span></td>
〈/tr>
〈tr>
〈td id="sub5" class=”sec_menu” style="display:none;">
〈table align="center" cellpadding=”0” cellspacing=”0” style=”width: 150px”〉
<tr〉
〈td height=”10”>〈/td〉
〈/tr>
〈tr>
〈td height="20” align="center”〉〈a href=”worker。aspx” target=”main">〈img align="absmiddle” src=”images/ico/ico11。gif” border="0"><br />员工信息管理</a>&nbsp；
</td>
〈/tr〉
〈tr〉〈td height="5"〉</td〉〈/tr>
〈tr〉
〈td height="20” align="center”><a href=”shangpin.aspx” target="main"〉〈img align="absmiddle" src=”images/ico/ico11。gif" border="0”〉<br />商品信息管理</a〉&nbsp；
</td〉
〈/tr〉
<tr〉〈td height=”5”〉</td〉〈/tr>
〈tr〉
〈td height=”20” align=”center”>〈a href="gongyingshang.aspx" target="main">〈img align="absmiddle" src="images/ico/ico11.gif" border="0"〉〈br />供应商信息管理〈/a>＆nbsp；
〈/td〉
〈/tr>
〈tr〉<td height="5"〉〈/td>〈/tr>
<tr〉
<td height="20" align=”center"><a href="danwei.aspx” target="main"〉〈img align="absmiddle” src="images/ico/ico11。gif" border=”0”><br /〉产品单位管理〈/a>&nbsp；
</td>
</tr〉
<tr〉〈td height=”5”></td>〈/tr〉
<tr〉
〈td height=”20" align=”center"〉〈a href=”bigClass.aspx” target=”main”><img align="absmiddle" src=”images/ico/ico11.gif” border=”0”><br />产品大类管理〈/a>＆nbsp；
</td〉
〈/tr〉
<tr〉〈td height=”5"〉〈/td></tr〉
〈tr>
<td height="20" align=”center”〉〈a href="smallClass。aspx” target=”main"〉<img align="absmiddle" src="images/ico/ico11。gif" border=”0"><br /〉产品小类管理</a〉&nbsp;
</td>
</tr>
〈/table〉
〈/td>
</tr>
〈/table>

<table align="center” cellpadding="0" cellspacing="0" style="width: 158px; margin—bottom:1px;">
<tr〉
<td height="25” align=”center" style="background-image： url(’images/admin_left_2。gif')”style="background-image: url（'images/admin_left_2.gif')” class=”menu_title” onMouseOver="this。className='menu_title2’;" onMouseOut=”this。className=’menu_title';”
id=main6 onclick=expandIt（6）>
<span>系统管理</span〉</td>
〈/tr〉
<tr>
<td class =”sec_menu" id=”sub6" style=”display:none;">
<table align=”center” cellpadding="0” cellspacing=”0” style=”width： 150px”〉
〈tr>
<td height=”10”></td〉
〈/tr〉
〈tr〉
<td height=”20” align=”center”〉<a href=”admin。aspx” target="main">〈img align="absmiddle” src="images/ico/ico05。gif" border=”0"><br /〉操作员管理〈/a〉＆nbsp；
〈/td>
</tr〉
〈/table〉
〈/td〉
〈/tr>
</table〉
</td>〈/tr>
</table〉
</form>
</body〉
〈/html〉

2. 页面顶端文件(top.aspx）
本文件的作用是放置一些常用功能的快捷按钮，使客户可以快速打开常用功能，由HTML代码构成。全部代码如下：
<％＠ Page Language="C#" AutoEventWireup=”true" CodeFile="top.aspx.cs” Inherits="top" ％〉

<!DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN" "http：//www.w3。org/TR/xhtml1/DTD/xhtml1—transitional.dtd”〉

<html xmlns="http://www.w3.org/1999/xhtml”〉
〈head runat="server”>
<title〉无标题页</title>
〈/head>
<body style=” background—color:＃799ae1;margin:0px； padding—top:5px；”〉
<form id="form1” runat="server”〉

<TABLE cellSpacing=0 cellPadding=0 width=”100%" border=0 top=”0”〉
〈TR〉
〈TD width=”160" height=5〉　〈/TD>
<TD valign="bottom" width="95"〉
<a href="buy.aspx" target="main”〉<img src=”images/ico/button1。jpg" border=”0"〉〈/a>
</TD〉
<TD valign=”bottom” width=”95">
〈a href="product_search.aspx” target="main”〉<img src=”images/ico/button2.jpg" border=”0"></a〉
〈/TD>
〈TD valign=”bottom” width="95"〉
<a href="sell.aspx" target="main”〉<img src=”images/ico/button3.jpg" border=”0">〈/a〉
〈/TD>
<TD valign=”bottom" width=”95"〉
〈a href="product_warning。aspx" target="main"〉〈img src="images/ico/button4。jpg” border=”0”〉〈/a〉
〈/TD〉
〈TD valign="bottom” width=”＊">
<a href="desk.aspx" target="main”>〈img src=”images/ico/button8.jpg" border=”0”>〈/a〉
</TD>
<td> 〈a href="login。aspx?action=quit" target=”main”>
〈b〉退出〈/b>〈/a〉
</td〉
</TR〉</TABLE>

〈/form〉
</body>
</html>

3. 底部信息文件(bottom.aspx)
本文件由HTML代码和JS代码构成，用于显示时间和版权等信息.全部代码如下： 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile=”bottom.aspx.cs” Inherits="bottom” ％>

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1。0 Transitional//EN" ”http：//www。w3。org/TR/xhtml1/DTD/xhtml1-transitional。dtd”>

〈html xmlns=”http://www。w3。org/1999/xhtml">
〈head runat=”server"〉
<title>无标题页</title>
<style>
td｛font-size:12px；color：#ffffff；｝
</style〉
<script language=”JavaScript”>
<!-—
function tick（) ｛
var hours, minutes, seconds；
var intHours， intMinutes, intSeconds；
var today;
today = new Date（);
intHours = today。getHours（)；
intMinutes = today。getMinutes()；
intSeconds = today.getSeconds（）；

if （intHours == 0) ｛
hours = "00:”;
} else if （intHours < 10） {
hours = "0” + intHours+"：”;
} else {
hours = intHours + ”:";
｝

if (intMinutes 〈 10) {
minutes = ”0"+intMinutes+”:”;
} else ｛
minutes = intMinutes+"：”;
}
if (intSeconds 〈 10） {
seconds = "0”+intSeconds+” ”;
｝ else ｛
seconds = intSeconds+” ”;
}
timeString = hours+minutes+seconds；
Clock.innerHTML = timeString；
window。setTimeout("tick();”, 1000)；
｝

window。onload = tick;
//--〉
〈/script〉
〈/head〉

〈body style=" background-color:#799ae1; margin：0px； padding：0px;”〉
<form id=”form1” runat="server”〉
<div〉