动态网站课程设计.docx
《动态网站课程设计.docx》由会员分享，可在线阅读，更多相关《动态网站课程设计.docx（28页珍藏版）》请在冰豆网上搜索。
动态网站课程设计
动态网站课程设计报告
课程题目：
AnotherMe服装品牌网站建设
学院：
信息科学技术学院
专业：
电子商务
姓名：
琚霑
学号：
201124040127
指导老师：
宋春晖
一、课程设计目的
1.通过对网站的实施操作，加深对所学知识的理解，查漏补缺，发现问题并解决问题；
2.通过课程设计加深对网页制作技巧的熟悉程度；
3.通过对动态网站的建设掌握制作动态部分的技巧，如数据库的连接等。
二、课程设计任务
本次课程设计的主要任务是建设一个服装品牌的动态网站，网站主要分为首页、新品、服饰、精选搭配、品牌专享及品牌故事六个部分，每个部分下又分为不同子页，如服饰下分为上装系列、下装系列和裙装专区三个部分。
本网站动态部分主要体现在留言区、在线客服、会员注册、“您的感受”和AnotherMe聊天区中。
小组成员及分工如下表：
成员
主要任务
组长
赵维
1.前期网站需求分析问卷调查设计
2.网站页面架构设置，确定网站设计目标，网站设计分工安排
3.网站内容填充以及为网站填充各种链接
4.图片轮放设计
5.动态效果设计
组员
琚霑
1.前期网站需求分析问卷调查设计
2.网站页面架构设置，确定网站设计目标
3.网站内容填充
4.图片文字资料的搜集，色彩的搭配
5.下拉菜单设计
6.数据库的建立，E-R图的绘制
三、AnotherMe服装网站的设计
本次课程设计的选题主要来源于我们考虑到大学城学生购物的不便性。
身处在桂林洋大学城这个偏僻的农村，我们深感到购物的不便。
如果选择去市区购物，路途遥远且不说，只坐车这一个问题就能把我们折磨得够呛——由于车辆少而造成坐车拥挤且劳累，所以大部分学生选择网上购物。
然而，网上购物也会出现一大堆问题，最主要的问题就是物流太慢，配送时间长，一般都需要四五天以上。
因此，我们决定创建自己的服装品牌网站AnotherMe，其主要目的是为了解决大学城学生的购物困难，品牌主要针对桂林洋大学城18-25岁之间的女学生。
在大学城建立这样一个服装网站，其最大的优势就是大大缩短了产品配送时间，最迟两天物件就可送到顾客手中。
由于品牌的主要风格是清新甜美高雅，所以网站设计的主色调尽量选择清新甜美的颜色，我们选择了粉红色作为网站的主打色。
网站的建设主要有六个部分构成，分别是首页、新品、服饰、精选搭配、品牌专享及品牌故事，并且这六个标题构成了网站导航条的内容，每个部分下有不同的子页，每个子页中包含了动态部分。
网站建设的主要技术有photoshop、flash、下拉菜单、图片轮换操作、层、数据库等技术的运用。
此次课程设计的目的主要是掌握动态操作的方法，所以我们在每个页面中多处设计了动态部分，如在线客服、留言区、页面跳转等操作。
网站大致框架如下图所示：
：
表示动态部分
四、AnotherMe服装网站的实现
网站的构建主要运用了Photoshop、Flash和Dreamweaver等软件。
主要的技术有图片轮换、下拉菜单、图片轮换操作、层、数据库连接等。
下面就对每一张页面的实现做详细介绍。
首先是首页的制作。
首页从上至下大致可以分为5个部分，其中最上面和最下面的部分是固定的，在每个页面中都会以固定的位置出现。
第一部分是做导航条及其以上部分的内容，正如图中我们所看到的，在页面的眉头我们放置了搜索、会员登陆等界面，在其下方就是我们的品牌logo及日期，再下面就是导航条。
具体实现这些操作的代码如下：
|
会员登陆
我的账户
我的收藏
购物车
|
|
网页中动态的显示系统日期时间
functionstartTime（）
{
vartoday=newDate（）;//定义日期对象
varyyyy=today.getFullYear（）;//通过日期对象的getFullYear（）方法返回年
varMM=today.getMonth（）+1;//通过日期对象的getMonth（）方法返回年
vardd=today.getDate（）;//通过日期对象的getDate（）方法返回年
varhh=today.getHours（）;//通过日期对象的getHours方法返回小时
varmm=today.getMinutes（）;//通过日期对象的getMinutes方法返回分钟
varss=today.getSeconds（）;//通过日期对象的getSeconds方法返回秒
//如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：
20：
09
MM=checkTime（MM）;
dd=checkTime（dd）;
mm=checkTime（mm）;
ss=checkTime（ss）;
varday;//用于保存星期（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（）方法
}
functioncheckTime（i）
{
if（i<10）{
i="0"+i;
}
returni;
}
时间：
|
从上向下第二部分是由三张图片构成的图片轮换，并且每张图片都配有相应的文字，实现本部分操作的代码如下：
$（document）.ready（function（）{
$（'#slider'）.s3Slider（{
timeOut:
2000
}）;
}）;
0px;top:
0px;right:
0px;">
AnotherMe是一个充满设计激情与创造力、集先进设计的理念，对客户了解入微并极其负责的团队。
我们的服装风格时尚多变，我们的每一件服装必是精品。
创造的激情是驱动我们向前的重要因素，它是我们想象力的原动力，帮助我们实现概念和构思。
我是赵小赵，我为AnotherMe。
首页的第三部分主要就是插入一些图片和文字，用来展示我们品牌的个性与风格。
第四部分如下图所示，其中上装、下装和裙装三个部分都添加了链接，点击就会进入相应的页面。
“我的地盘，你做主”是一个动态的表现，点击进去就可以给我们添加留言
此处动态部分的实现代码如下：
collapse"width="778"align="center">
collapse"width="260"bgcolor="#CCCCCC"align="center">
collapse"width="100%">
10px;">·管理员帐号修改·
13px;">">返回
|
|
|
collapse"width="100%">
Action=AdminModpass&Id=<%=id%>"onSubmit="returnAdminModpass（this）;">
登录名：
"maxlength="16"class="input"> |
旧密码：
|
新密码：
|
确 认：
|
|
<%
'新增管理员页面
Case"Admin_Add"
checkadmin
%>
collapse"width="778"align="center">
collapse"width="260"bgcolor="#CCCCCC"align="center">
collapse"width="100%">
10px;">·新增管理员·
13px;">">返回
|
|
|
collapse"width="100%">
Action=Addadmin"onSubmit="returnAddadmin（this）;">
管理员名称：
|
管理员密码：
|
确认密码：
|
|
<%
'管理员列表页面
Case"List"
checkadmin
SetmRs=Server.CreateObject（"adodb.recordSet"）
Sql="Select*fromAdmin"
mRs.openSql,conn,1,1
%>
collapse"width="778"align="center">
collapse"width="700"bgcolor="#CCCCCC"align="center">
collapse"width="100%">
10px;">·管理员列表·
13px;">">返回
|
|
|
collapse"width="100%">
ID
管理员名称
管理员密码
操作
|
<%dowhilenotmRs.eof%>
this.bgColor='#E7EFF8';"onMouseOut="javascript:
this.bgColor='#FFFFFF';">
<%=mRs（"Admin_Id"）%>
<%=mRs（"Admin_User"）%> |
<%=mRs（"Admin_Pass"）%> | Action=Admin_Modpass&Id=<%=mRs（"Admin_Id"）%>&Admin=<%=mRs（"Admin_User"）%>">修改
<
升级会员 