动态网站课程设计.docx
动态网站课程设计报告 课程题目：Another Me服装品牌网站建设 学 院：信息科学技术学院 专 业：电子商务 姓 名：琚 霑 学 号：2 指导老师：宋 春 晖一、课程设计目的 1.通过对网站的实施操作，加深对所学知识的理解，查漏补缺，发现问题并解决问题； 2.通过课程设计加深对网页制作技巧的熟悉程度；3.通过对动态网站的建设掌握制作动态部分的技巧，如数据库的连接等。二、课程设计任务 本次课程设计的主要任务是建设一个服装品牌的动态网站，网站主要分为首页、新品、服饰、精选搭配、品牌专享及品牌故事六个部分，每个部分下又分为不同子页，如服饰下分为上装系列、下装系列和裙装专区三个部分。本网站动态部分主要体现在留言区、在线客服、会员注册、“您的感受”和Another Me聊天区中。小组成员及分工如下表：成 员主 要 任 务组 长赵 维1.前期网站需求分析问卷调查设计2.网站页面架构设置，确定网站设计目标，网站设计分工安排3.网站内容填充以及为网站填充各种链接4.图片轮放设计5.动态效果设计组 员琚 霑1. 前期网站需求分析问卷调查设计2. 网站页面架构设置，确定网站设计目标3. 网站内容填充4. 图片文字资料的搜集，色彩的搭配5. 下拉菜单设计6.数据库的建立，E-R图的绘制三、Another Me服装网站的设计 本次课程设计的选题主要来源于我们考虑到大学城学生购物的不便性。身处在桂林洋大学城这个偏僻的农村，我们深感到购物的不便。如果选择去市区购物，路途遥远且不说，只坐车这一个问题就能把我们折磨得够呛由于车辆少而造成坐车拥挤且劳累，所以大部分学生选择网上购物。然而，网上购物也会出现一大堆问题，最主要的问题就是物流太慢，配送时间长，一般都需要四五天以上。因此，我们决定创建自己的服装品牌网站Another Me，其主要目的是为了解决大学城学生的购物困难，品牌主要针对桂林洋大学城18-25岁之间的女学生。在大学城建立这样一个服装网站，其最大的优势就是大大缩短了产品配送时间，最迟两天物件就可送到顾客手中。由于品牌的主要风格是清新甜美高雅，所以网站设计的主色调尽量选择清新甜美的颜色，我们选择了粉红色作为网站的主打色。网站的建设主要有六个部分构成，分别是首页、新品、服饰、精选搭配、品牌专享及品牌故事，并且这六个标题构成了网站导航条的内容，每个部分下有不同的子页，每个子页中包含了动态部分。网站建设的主要技术有photoshop、flash、下拉菜单、图片轮换操作、层、数据库等技术的运用。此次课程设计的目的主要是掌握动态操作的方法，所以我们在每个页面中多处设计了动态部分，如在线客服、留言区、页面跳转等操作。网站大致框架如下图所示：表示动态部分立即注册我的地盘你做主会员登陆裙装专区上装系列下装系列新品服饰精选搭配会员专享品牌故事首页Another Me网站和我说句话您的感受四、Another Me服装网站的实现 网站的构建主要运用了Photoshop、Flash和Dreamweaver等软件。主要的技术有图片轮换、下拉菜单、图片轮换操作、层、数据库连接等。下面就对每一张页面的实现做详细介绍。首先是首页的制作。首页从上至下大致可以分为5个部分，其中最上面和最下面的部分是固定的，在每个页面中都会以固定的位置出现。第一部分是做导航条及其以上部分的内容，正如图中我们所看到的，在页面的眉头我们放置了搜索、会员登陆等界面，在其下方就是我们的品牌logo及日期，再下面就是导航条。具体实现这些操作的代码如下：<table width="1024" height="45" border="0"> <tr> <td width="507"><form id="form1" name="form1" method="post" action=""> <input type="text" name="textfield" /> <input type="submit" name="Submit" value="搜索" /> </form></td> <td width="507"><table width="511" border="0"> <tr> <td width="134" height="26"><font color="#000000"><a href="会员注册系统/user_login.asp">会员登陆</a></font></td> <td width="111"><font color="#000000">我的账户</font></td> <td width="117"><font color="#000000">我的收藏</font></td> <td width="117"><font color="#000000">购物车</font></td> </tr> </table></td> </tr></table><table width="1024" border="0"> <tr> <td height="10"><img src="image/logo331.jpg" width="1024" height="1" /></td> </tr></table><table width="1024" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="420" height="108"><img src="image/logo3.png" width="357" height="108" /></td> <td width="405" bgcolor="#FFFFFF"> </td> <td width="360" height="113"> <title>网页中动态的显示系统日期时间</title> <script language="JavaScript"> function startTime() var today=new Date();/定义日期对象 var yyyy = today.getFullYear();/通过日期对象的getFullYear()方法返回年 var MM = today.getMonth()+1;/通过日期对象的getMonth()方法返回年 var dd = today.getDate();/通过日期对象的getDate()方法返回年 var hh=today.getHours();/通过日期对象的getHours方法返回小时 var mm=today.getMinutes();/通过日期对象的getMinutes方法返回分钟 var ss=today.getSeconds();/通过日期对象的getSeconds方法返回秒 / 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09 MM=checkTime(MM); dd=checkTime(dd); mm=checkTime(mm); ss=checkTime(ss); var day; /用于保存星期（getDay()方法得到星期编号） if(today.getDay()=0) day = "星期日 " if(today.getDay()=1) day = "星期一 " if(today.getDay()=2) day = "星期二 " if(today.getDay()=3) day = "星期三 " if(today.getDay()=4) day = "星期四 " if(today.getDay()=5) day = "星期五 " if(today.getDay()=6) day = "星期六 " document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day; setTimeout('startTime()',1000);/每一秒中重新加载startTime()方法 function checkTime(i) if (i<10) i="0" + i; return i; </script> </head> <body onload="startTime()"> <font color="#666666" color="#000000"> 时间：<span id="nowDateTimeSpan"></span></font> </td> </tr></table>从上向下第二部分是由三张图片构成的图片轮换，并且每张图片都配有相应的文字，实现本部分操作的代码如下： <link href="css/styles.css" type=text/css rel=stylesheet><script src="js/jquery.js" type="text/javascript"></script><script src="js/s3Slider.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() $('#slider').s3Slider( timeOut:2000 ););</script><div id="slider" style="left:0px; top:0px; right:0px;"> <ul id="sliderContent"> <li class="sliderImage"> <img src="image/image2.jpg" width="1024" height="600" alt=""> <span class="bottom">Another Me是一个充满设计激情与创造力、集先进设计的理念，对客户了解入微并极其负责的团队。</span> </li> <li class="sliderImage"> <img src="image/image1.jpg" width="1024" height="600" alt=""> <span class="bottom">我们的服装风格时尚多变，我们的每一件服装必是精品。</span> </li> <li class="sliderImage"> <img src="image/image3.jpg" width="1024" height="600" alt=""> <span class="bottom">创造的激情是驱动我们向前的重要因素，它是我们想象力的原动力，帮助我们实现概念和构思。</span> </li> <li class="sliderImage"> <img src="image/image4.jpg" width="1024" height="600" alt=""> <span class="bottom">我是赵小赵，我为Another Me。</span> </li> 首页的第三部分主要就是插入一些图片和文字，用来展示我们品牌的个性与风格。第四部分如下图所示，其中上装、下装和裙装三个部分都添加了链接，点击就会进入相应的页面。“我的地盘，你做主”是一个动态的表现，点击进去就可以给我们添加留言此处动态部分的实现代码如下：<table border="0" cellpadding="0" style="border-collapse: collapse" width="778" align="center"><tr><td bgcolor="#FFFFFF" height="300"><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="260" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-left:10px;">· 管理员帐号修改 ·</td><td align="right" style="padding-right:13px;"><a href="<% =Url %>"><font color="#FF0000">返回</font></a></td></tr></table></td></tr><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><form method="post" Action="?Action=AdminModpass&Id=<% =id %>" onSubmit="return AdminModpass(this);"><tr><td align="center" width="80">登录名：</td><td><input name="Admin_User" type="text" value="<% =Request.Querystring("Admin") %>" maxlength="16" class="input"></td></tr><tr><td align="center">旧密码：</td><td><input name="Admin_Gps" type="password" maxlength="16" class="input"></td></tr><tr><td align="center">新密码：</td><td><input name="Admin_Nps" type="password" maxlength="16" class="input"></td></tr><tr><td align="center">确 认：</td><td><input name="Admin_Pass" type="password" maxlength="16" class="input"></td></tr><tr><td height="40" colspan="2" align="center"><input type="submit" value=" 修改 " class="bmit"> <input type="reset" value=" 重置 " class="bmit"></td></tr></form></table></td></tr></table></td></tr></table><%'新增管理员页面Case "Admin_Add"checkadmin%><table border="0" cellpadding="0" style="border-collapse: collapse" width="778" align="center"><tr><td bgcolor="#FFFFFF" height="300"><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="260" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-left:10px;">· 新增管理员 ·</td><td align="right" style="padding-right:13px;"><a href="<% =Url %>"><font color="#FF0000">返回</font></a></td></tr></table></td></tr><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><form method="post" Action="?Action=Addadmin" onSubmit="return Addadmin(this);"><tr><td align="center" width="100">管理员名称：</td><td><input name="Admin_User" type="text" class="input"></td></tr><tr><td align="center">管理员密码：</td><td><input name="Admin_Pass" type="Password" class="input"></td></tr><tr><td align="center">确认密码：</td><td><input name="Password" type="Password" class="input"></td></tr><tr><td height="40" colspan="2" align="center"><input name="Submit3" type="submit" value=" 添 加 " class="bmit"> <input name="Submit22" type="reSet" value=" 重 置 " class="bmit"></td></tr></form></table></td></tr></table></td></tr></table><%'管理员列表页面Case "List"checkadminSet mRs=Server.CreateObject("adodb.recordSet")Sql="Select * from Admin"mRs.open Sql,conn,1,1%><table border="0" cellpadding="0" style="border-collapse: collapse" width="778" align="center"><tr><td bgcolor="#FFFFFF" height="300"><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="700" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-left:10px;">· 管理员列表 ·</td><td align="right" style="padding-right:13px;"><a href="<% =Url %>"><font color="#FF0000">返回</font></a></td></tr></table></td></tr><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr align="center"><td width="7%" height="25">ID</td><td width="25%">管理员名称</td><td width="30%">管理员密码</td><td colspan="2">操作</td></tr><% do while not mRs.eof %><tr align="center" onMouseOver="javascript:this.bgColor='#E7EFF8'" onMouseOut="javascript:this.bgColor='#FFFFFF'"><td height="25"><% =mRs("Admin_Id") %></td><td><% =mRs("Admin_User") %></td><td><% =mRs("Admin_Pass") %></td><td width="10%"><a href="?Action=Admin_Modpass&Id=<% =mRs("Admin_Id") %>&Admin=<% =mRs("Admin_User") %>">修改</a></td><td width="10%"><%if "'"& mRs("Admin_User") &"'"<>"'"& Session("Admin") &"'" Then Response.Write"<a href=""?Action=Deladmin&Id="& mRs("Admin_Id") &""" onclick=""return Del(this);"">删除</a>" %></td></tr><%mRs.movenextloopmRs.closeSet mRs=nothing%></table></td></tr></table></td></tr></table><%'登陆页面Case "login"%><table border="0" cellpadding="0" style="border-collapse: collapse" width="778" align="center"><tr><td bgcolor="#FFFFFF" height="300"><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="260" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-left:10px;">· 管理登陆 ·</td><td align="right" style="padding-right:13px;"><a href="<% =Url %>"><font color="#FF0000">返回</font></a></td></tr></table></td></tr><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><form method="post" Action="?Action=logincheck" onSubmit="return Login(this);"><tr><td align="center" width="80">管理员：</td><td><input type="text" name="Admin_User" class="input"></td></tr><tr><td align="center">密 码：</td><td><input type="password" name="Admin_Pass" class="input"></td></tr><tr><td height="40" colspan="2" align="center"><input type="submit" value=" 登录 " class="bmit"> <input type="reset" value=" 重置 " class="bmit"></td></tr></form></table></td></tr></table></td></tr></table><%'回复页面调用Case "reply"checkadminSet mRs=conn.execute("select * from Books where Books_Id="&Id)If mRs.eof thenResponse.Write "<script>alert('非法操作：留言不存在！');this.location.href='"& Url& "'</SCRIPT>"Response.EndEnd If%><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="778" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-left:10px;">· 回复留言 ·</td><td align="right" style="padding-right:13px;"><a href="<% =Url %>"><font color="#FF0000">返回</font></a></td></tr></table></td></tr><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><form method="post" Action="?Action=Reply&Id=<% =Id %>"><tr><td align="center" width="80">昵称：</td><td><input name="Books_Name" type="text" value="<% =mRs("Books_Name") %>" class="input"></td></tr><tr><td align="center">Q Q：</td><td><input name="Books_Qq" type="text" value="<% =mRs("Books_Qq") %>" class="input"></td></tr><tr><td align="center">邮箱：</td><td><input name="Books_Mail" type="text" value="<% =mRs("Books_Mail") %>" class="input"></td></tr><tr><td align="center">留言：</td><td><textarea name="Books_Info" rows="9" cols="57" class="text"><% =uhtmlencode(mRs("Books_Info") &"") %></textarea></td></tr><tr><td align="center">回复：</td><td><textarea name="Books_Reply" rows="6" cols="97" class="text"><% =mRs("Books_Reply") %></textarea></td></tr><tr><td height="40" colspan="2" align="center"><input type="submit" value=" 回复留言 " class="bmit"> <input type="reset" value=" 重新输入 " class="bmit"></td></tr></form></table></td></tr></table><%mRs.closeSet mRs=nothing'列表页面调用Case Else%><table border="0" cellpadding="3" cellspacing="1" style="border-collapse: collapse" width="778" bgcolor="#CCCCCC" align="center"><tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td style="padding-lef
