资源描述
实训三 进销存首页界面制作
———————————————————————————————— 作者:
———————————————————————————————— 日期:
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〉
〈/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〉
</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〉 ;
〈/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> ;
〈/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> ;
</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> ;
</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〉
〈/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> ;
</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〉 ;
</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> ;
</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〉
</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〉
展开阅读全文