动态网站课程设计报告
             
              课程题目：Another Me服装品牌网站建设
              学    院：信息科学技术学院
              专    业：电子商务
              姓    名：琚 霑
              学    号：201124040127
              指导老师：宋 春 晖
一、课程设计目的
    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、下拉菜单、图片轮换操作、层、数据库等技术的运用。此次课程设计
javascript动态效果的目的主要是掌握动态操作的方法，所以我们在每个页面中多处设计了动态部分，如、留言区、页面跳转等操作。

网站大致框架如下图所示：
：表示动态部分

四、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 = FullYear();//通过日期对象的getFullYear()方法返回年     
                var MM = Month()+1;//通过日期对象的getMonth()方法返回年     
                var dd = Date();//通过日期对象的getDate()方法返回年     
                var Hours();//通过日期对象的getHours方法返回小时   
                var Minutes();//通过日期对象的getMinutes方法返回分钟   
                var Seconds();//通过日期对象的getSeconds方法返回秒   
                // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09   
                MM=checkTime(MM); 
                dd=checkTime(dd); 
                mm=checkTime(mm);   
                ss=checkTime(ss);     
                var day; //用于保存星期（getDay()方法得到星期编号） 
                Day()==0)  day  =  "星期日 " 
                Day()==1)  day  =  "星期一 " 
                Day()==2)  day  =  "星期二 " 
                Day()==3)  day  =  "星期三 " 
                Day()==4)  day  =  "星期四 " 
                Day()==5)  day  =  "星期五 " 
                Day()==6)  day  =  "星期六 " 
                ElementById('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> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。