网页设计与制作课程-医药超市系统.doc
精品文档，仅供学习与交流，如有侵权请联系网站删除网页设计与制作课程设计说明书题目：医药超市系统学生姓名学号班级成绩指导教师管理系2011 年 6 月 14 日目 录一、课程设计目的二、设计题目和要求三、设计内容3.1医药超市系统的介绍3.2网站功能的实现(图表) 和重要页面的代码3.3网站的维护与使用四、设计成果以及心得一、课程设计目的和意义检验学生对本课程的最终学习效果，加深对网页设计与制作的基本知识的理解，网页设计与制作技能综合运用和提高，通过真实工作任务，使学生能设计出有一定水平的网页并解决培养解决实际问题的能力，掌握实际网页设计与制作开发流程和开发方法。具体应达到以下目的：1提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。2在实际的项目任务中培养网页设计方面的素养。3在实际的项目任务中使学生网页编程和制作的能力得到提高。4培养学生团队协作和人际交往方面的能力。5. 培养相关知识和技能的综合应用能力。二、设计题目和要求应从专业网站建设的实际出发。具体要求如下：1. 网站的选题自选。2. 站点设计合理、管理有序、无多余文件和文件夹、大小合适。首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index或default等。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。最好是符合各种系统命名规则。3. 站点至少要有三层结构，页面数不得少于8页；其中一页必须是留言板；4. 自选主题，主题内容要合法、健康、实用。5. 网页要有版权说明；6. 要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式。7. 网站主题突出、内容丰富；8. 网站与网页风格应该协调一致，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意。9.各页面设计合理、美观，有创意。图片动画选用要适合主题，不要在网页中插入不相干的图片。适用于各种显示器的分辨率和颜色。不要太宽，否则显示器分辨率小时会出现水平滚动条。10.各个页面之间的链接要合理有效，路径要正确（相对路径）；11.注意网站的大小，图片保存格式和图片大小要合适；12. 代码结构清晰，无垃圾代码三、设计内容 3.1医药超市系统的介绍本在线系统，的主要作用就是用来管理药品出售的，后台服务主页面一个，前台服务主页面一个，二级页面有若干个，还有部分三级页面，主要能实现药品的在线交易，查询等功能。后台能实现数据库的管理，可以浏览、修改、添加、删除数据，还可药品管理、药品类别管理、会员信息管理、员工信息管理、超级会管理员信息管理、订单管理、公告管理等，其与ACCESS数据库连接。3.2网站功能的实现(图表) 和重要页面的代码图一所示，是网页的主页面，前台。（一）、网站的前台 主页上能实现的功能有1.会员登录 2.药品搜索、推荐药品3.查看最新上架药品信息、推荐药品信息、精华药品、保健药品、中药等主页面设计代码如下：【精品文档】第 10 页<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>医药超市</title><link type="text/css" rel="stylesheet" href="int/main.css" /><script type="text/javascript" src="int/jquery-1.4.2.min.js"></script><SCRIPT src="flash/js/common.js" type="text/javascript"></SCRIPT></head><script type="text/javascript"> $(function() var shop_id="" var shop_name="" $(".img").hover( function()$(this).addClass("imgbg");, function()$(this).removeClass("imgbg"); $(".intro img").click(function() var width=window.screen.availWidth; var height=window.screen.availHeight; var sta=$(this).attr("sta"); if (sta!="") shop_name=$(this).attr("shop_name"); shop_id=$(this).attr("shop_id"); $("#name").html(shop_name); $("#bigBox").css("width",width).css("height",height).css("background-color","#000000").fadeTo("fast",0.7).show(); $("#box").show(); else $("#bigBox").css("width",width).css("height",height).css("background-color","#000000").fadeTo("fast",0.7).show(); $("#box2").show(); $("inputname='n'").click(function() $("#bigBox").hide(); $("#box").hide(); $("inputname='yes'").click(function() $("#bigBox").hide(); $("#box2").hide(); $("inputname='y'").click(function() $("#bigBox").hide(); $("#box").hide(); location="doshopping.asp?shop_id="+shop_id;</script><body> <div id="main"> <div id="box2"> <br /><br /><br /><br /><br /> 您没有登录，请先登录！<br /><br /><br /> <input type="button" value="确定" name="yes"/> </div><div id="box" tar="a"> <br /><br /><br /><br /><br /> 您确定要把<span style="color:#006600;" id="name"></span>添加到购物车中吗？<br /><br /><br /> <input type="button" value="确定" name="y"/> <input type="button" value="取消" name="n"/></div> <div id="bigBox" style="display:none; position:absolute; top:0px; left:0px; z-index:100;"></div> <div id="head"> <div id="flashDiv"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="938" height="155"> <param name="movie" value="flash/head.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <embed src="flash/head.swf" quality="high" wmode="opaque" pluginspage=" type="application/x-shockwave-flash" width="938" height="155"></embed> </object> </div> <div id="os">您好，今天是<span id="myTime"></span>.您的状态：未登录</div> </div><div id="nav"> <ul> <li><a href="index.asp">首页</a></li> <li><a href="list.asp?item=a">最新上架</a></li> <li><a href="list.asp?item=b">推荐药品</a></li> <li><a href="list.asp?item=c">精华药品</a></li> <li><a href="list.asp?item=d">保健药品</a></li> <li><a href="list.asp?item=e">中 药</a></li> <li><a href="list.asp?item=f">西 药</a></li> </ul> </div><script type="text/javascript"> function showDate(ele) var tar=document.getElementById(ele); var date=new Date(); tar.innerHTML=date.toLocaleString(); setTimeout("showDate('"+ele+"')",1000);showDate("myTime");</script> <div id="left"> <div id="login"> <form name="login" method="post" action="login.asp"> <br /><br /><br /> 用户名：<input type="text" name="username" /><br /><br /> 密码： <input type="password" name="psw" /><br /><br /> <input type="button" value="登录" onclick="checklogin()" style="width:50px; border:1px solid #006600; height:20px; background-color:#006600; font:12px '宋体' color:#FFFFFF;" /> <input type="button" value="注册" style="width:50px; border:1px solid #006600; height:20px; background-color:#006600; font:12px '宋体' color:#FFFFFF;" onclick="location='regist.asp'"/> <input type="hidden" name="tj" value="ok" /> </form> </div> <div id="search"> <input type="text" name="key" id="st" /> <input type="button" value="搜索" id="sb" style="width:50px; border:1px solid #006600; height:20px; background-color:#006600; font:12px '宋体' color:#FFFFFF;" /><br /> <span style="position:relative; top:64px; left:20px; font:12px '宋体' color:#060;"> <input type="radio" value="keyWords" name="method" checked="checked"/>药品描述 <input type="radio" value="name" name="method" />名称 <input type="hidden" value="keyWords" id="m" /> </span> </div> <div id="tuijian"> <ul> <li><img src="img/dote_03.jpg" /> <a href="shop_con.asp?id=21&mleft=y">金水宝胶囊 </a></li> <li><img src="img/dote_03.jpg" /> <a href="shop_con.asp?id=15&mleft=y">花红片</a></li> </ul> </div> <script type="text/javascript"> $(function() $("#st").val("请输入关键字或名称").focus(function()$(this).val("");); $("inputtype='radio'").click(function() $("#m").val($(this).val(); $("#sb").click(function() if($("#st").val()="") alert("关键字为空，不能检索！");else var key=$("#st").val(); var method=$("#m").val(); location="search.asp?key="+key+"&method="+method; function checklogin() var tar=document.login; var va1=tar.username.value; var va2=tar.psw.value; if(va1="" | va2="") location="err.asp" else document.login.submit(); function zx() location="zx.asp" </script> </div> <div id="right"> <div id="map">您所在的位置： 中药 </div> <div class="item"> <div class="img"><a href="shop_con.asp?id=17"><img src="admin/upLoadImg/14.jpg" /></a> </div> <div class="intro">名称：六味能消胶囊 价格：11.00￥<img src="img/checkout3-blue.gif" onmouseover="this.src='img/checkout3-green.gif'" onmouseout="this.src='img/checkout3-blue.gif'" shop_name="六味能消胶囊 " shop_id="17" sta="" /></div></div> <div class="item"> <div class="img"><a href="shop_con.asp?id=21"><img src="admin/upLoadImg/10.jpg" /></a> </div> <div class="intro">名称：金水宝胶囊 价格：5.00￥<img src="img/checkout3-blue.gif" onmouseover="this.src='img/checkout3-green.gif'" onmouseout="this.src='img/checkout3-blue.gif'" shop_name="金水宝胶囊 " shop_id="21" sta="" /></div></div> <div class="item"> <div class="img"><a href="shop_con.asp?id=22"><img src="admin/upLoadImg/09.jpg" /></a> </div> <div class="intro">名称：云南白药 价格：8.00￥<img src="img/checkout3-blue.gif" onmouseover="this.src='img/checkout3-green.gif'" onmouseout="this.src='img/checkout3-blue.gif'" shop_name="云南白药 " shop_id="22" sta="" /></div></div> <div class="item"> <div class="img"><a href="shop_con.asp?id=24"><img src="admin/upLoadImg/08.jpg" /></a> </div> <div class="intro">名称：安宫牛黄丸 价格：4.5￥<img src="img/checkout3-blue.gif" onmouseover="this.src='img/checkout3-green.gif'" onmouseout="this.src='img/checkout3-blue.gif'" shop_name="安宫牛黄丸 " shop_id="24" sta="" /></div></div> <div class="item"> <div class="img"><a href="shop_con.asp?id=25"><img src="admin/upLoadImg/07.jpg" /></a> </div> <div class="intro">名称：丁酸氢化可的 价格：30.00￥<img src="img/checkout3-blue.gif" onmouseover="this.src='img/checkout3-green.gif'" onmouseout="this.src='img/checkout3-blue.gif'" shop_name="丁酸氢化可的松软膏" shop_id="25" sta="" /></div></div><div style="width:100%; text-align:center; font:12px '宋体' color:#006600;" id="page">共有<span style="color:#FF0000;">5</span>条纪录,共<span style="color:#FF0000;">1</span>页,当前在第<span style="color:#FF0000;">1</span>页 <span style="color:#CCCCCC;">首页 上一页 </span> <span style="color:#CCCCCC;">下一页 尾页 </span></div> </div> <div id="footer"> 友情链接：yeFactory<br /><br /> CopyRight2010-2012 版权所有：yeFactory</div> </div></body></html>（二）、网站的后台 后台主页面1.需要登录后台登陆页面实现代码如下：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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>后台管理系统</title></head><style type="text/css">#login position:relative; top:80px; font:13px "宋体" color:#006633; #div background:url(images/bgbg_10.jpg); width:402px; height:228px; margin:160px; .a width:150px; height:15px; border:1px solid #339966;</style><body style="background:url(images/bg_01.jpg) repeat-x; text-align:center;"> <div id="div"> <form name="login" method="post" action="dealLogin.asp" id="login" onsubmit="return check()"> 通行证:<input type="text" name="username" class="a"/><br /><br />密 码：<input type="password" name="psw" class="a" /><br /><br />验证码：<img src="./checkCode.asp" /><input type="text" name="code" class="a" /><br /><br /><input type="submit" value="登录" style="width:50px; background-color:#009933; border:1px solid #003300;" /><input type="hidden" name="tj" value="ok" /> </form> </div> <script type="text/javascript"> function check() var tar=document.login; var va1=tar.username.value; var va2=tar.psw.value; if(va1="") alert("通行证不能为空！"); return false; else if(va2="") alert("密码不能为空！"); return false; else return true; </script></body></html>2.后台管理设计代码如下：<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body> <div style="width:569px; height:503px; background:url(images/bbbb_03.jpg) no-repeat;"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="480" height="400" style="position:relative; top:80px; left:300px;"> <param name="movie" value="images/clock.swf" /> <param name="quality" value="high" /> <embed src="images/clock.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="480" height="400"></embed> </object> </div></body></html>2.1药品管理页面可实现添加、修改、查看、删除等功能2.2药品类别管理页面可实添加、查看、删除和检索等功能2.3会员信息管理页面可实现添加、查看、删除等功能2.4超级管理员信息管理页面可实现添加、修改、查看、删除等功能2.5订单管理界面可实现订单管理的一系列操作2.6公告管理界面后太主要信息的设计代码如下所示：<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>后台管理系统</title><link type="text/css" href="int/admin.css" rel="stylesheet" /><script type="text/javascript" src="int/jquery-1.4.2.min.js"></script><script type="text/javascript" src="int/admin.js"></script></head><script> $(function() $("#left li").click(function() var src=$(this).attr("src"); $("#con").attr("src",src);</script><body> <div id="head"> <img src="images/logo_03.jpg" style="margin-top:60px;" /><span style="font:13px '宋体' color:#FF0000; position:relative; top:-10px; left:200px;">欢迎您admin，您的级别：超级管理员,今天是：<span id="myTime"></span></span><div id="os"> <input type="button" value="网站首页" onclick="open('./index.asp','','')" /> <input type="button" value="安全退出" onclick="location='quit.asp'" /></div> </div> <div id="left"> <ul> <li src="shop.asp">药品管理</li> <li src="shopClassManage.asp">药品类别管理</li> <li src="member.asp">会员信息管理</li> <li src="employee.asp">员工信息管理</li> <li src="admin.asp">超级管理员信息管理</li> <li src="list.asp">订单管理</li> <li src="note.asp">公告管理</li></ul> </div> <div id="right"> <iframe name="con" id="con" src="test.html" frameborder="0"></iframe> </div><script type="text/javascript"> var tar=document.getElementById("left"); var lis=tar.getElementsByTagName("li"); var len=lis.length; for(var i=0;i<len;i+) lisi.onmouseover=function()this.className="bg"lisi.onmouseout=function()this.className="" function showDate(ele) var tar=document.getElementById(ele); var date=new Date(); tar.innerHTML=date.toLocaleString(); setTimeout("showDate('"+ele+"')",1000);showDate("myTime");</script></body></html>3数据库的连接共有如下几张表：药品管理、药品类别管理、会员信息管理、员工信息管理、超级会管理员信息管理、订单管理、公告管理例如：药品管理会员信息表员工信息四、设计成果以及心得在具体的制作一个网页时我了解到一个优秀的网页设计应该具备以下一些基本原则1 确定网页设计的内容一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么，所有页面都是围绕着这个内容来制作，有了明确的内容对排名有很重要的作用。2 了解你网站所在行业的客户用户是一个网站成败的关键,如果用户要花很多时间进入你网站很有可能用户会立即关掉你网站,或者你网站操作很不方便用户也会马上离开,这种网站是很失败的设计,只会让用户失望的离去.3、做一个典型用户不以用户身份亲身体验网站你才能发现问题，才知道那些需要改进，尽量不要让客户去发现问题，在前期设计时就应该把这些问题解决。4 优化内容 内容是整个网站的核心。在网站设计之前必须明确网站的内容安排。优秀网页设计是要建立在平凡的基础上的。然后在具体的规划一个网站时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。大纲列出来后，还必须考虑每个页面之间的链接关系。是星形，树形，或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。 框架定下来了，然后开始一步一步有条理，有次序地做来，就胸有成竹得多，也会为主页将来发展打下良好的基础。 总的来说，本学期的网页设计与制作这门课程，让我了解了很多的知识，此次的课程设计让我系统的掌握了这些知识！
