炫彩美瞳电子商务网页策划_第1页
炫彩美瞳电子商务网页策划_第2页
炫彩美瞳电子商务网页策划_第3页
炫彩美瞳电子商务网页策划_第4页
炫彩美瞳电子商务网页策划_第5页
已阅读5页,还剩16页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

前言近几年岁着科技的进步,网络购物逐渐被大众所接受,人们可以随时随地地进行购物,因此网站设计越来越受到重视,本学期我们小组主要设计了一个美瞳网站。本电子商务网站采用的是模式为浏览器服务器(B/S)模式,即客户通过数据连接来调用后台数据库中的数据。网站名称:“炫彩美瞳”旗舰店;网站类型:销售各种款式的美瞳的网站;网站技术:HTML语言+CSS样式+JavaScript语言+ASP技术+ACCESS数据库。

1网站规划1.1网站设计目的意义我们设计的美瞳网站是为了给大众最新的美瞳信息,人们可以足不出户就可以看到最新的美瞳信息,我们可以在网站上做促销,任何地点的任何人只要能够访问互联网,他们就能成为您的网站的潜在的访问者,并成为潜在的用户。当然,除此之外,网站上设有客服,提供24小时的在线交流,顾客可以随时随地地和我们反映情况,当我们的网站建设的十分成功的时候,将会为网站的使用者在网站访客的心目中加分,同时可能留住访客成为对我们“有价值的人”。1.2网站设计使用技术本网站使用了Firework中的图像处理技术,Dreamever中的静态网页制作技术,HTML语言+CSS样式+JavaScript语言+ASP技术+ACCESS数据库。1.3网站布局本网页采用T形布局,显示顶部的为网站的Logo标识符、导航条,下方左边为宣传广告,下方右边为特价优惠的物品信息,最下方为网站的联系地址。页面结构比较清晰,层次分明,也是一种比较常见的形势,在适当的配色下可以把网页的特点都凸显出来。页面大小900x1300,像素为900。1.4网站配色网站的界面设计以草绿色和浅蓝色为主色调,给人一种清新淡雅的感觉,艺术感十分的强。产品介绍也都采用素雅的图片。1.5网站导航网站导航有产品分类、品牌介绍、新品上线、智能测试、会员中心,会员登录、注册、聊天室、新闻1.6网站栏目隐形眼镜盒、本店公告、五一特价优惠、温馨小链接、护眼小常识、日韩美瞳最新动态、产品合作商2网站功能介绍2.1网站功能设计本网站分为前台展示和后台管理两大部分,其中前台的主要功能是商品展示、护眼常识、防伪查询和用户购买及评价留言,后台的主要功能是管理员管理商品、处理订单、管理用户、管理基本信息。具体介绍如下:2.1.1前台主要功能及特点2.1.2主页功能(1)顶部导航:产品分类、品牌介绍、新品上线、智能测试、会员中心(2)会员登录界面;(3)会员注册包括用户名和密码,修改成功后可以进入后台进行密码修改;(4)聊天室会员登录后可以一天24小时地和客服在聊天室进行沟通交流反映意见。聊天记录会被保留下来(5)新闻;主要展示了一些网站的最新相关信息,特价优惠,幸运抽奖,积分赢大礼等活动。对相关产品进行促销和宣传;(6)新品展示,包括商品名称、商品图片、商品价格,共8种;(7)特价优惠,包括商品名称、商品图片、商品价格,共6种;(8)炫彩美瞳的联系方式和厂家地址;(9)温馨连接,包括护眼小常识、防伪查询、日韩美瞳全新动态、产品合作商;(10)本店公告,包括五一疯狂促销活动、会员专区;(11)有关美瞳的视频广告;2.1.3后台主要功能及特点(1)对管理员的管理:包括对管理员的信息进行管理和更改;(2)商品添加通过对访问权限的设定,只有通过登录进入后台的人才可以进行密码修改;(3)商品浏览管理员可以对自己添加的商品信息进行浏览包括商品名称、商品价格、商品余量、商品编号、商品图片等(4)密码修改通过登录进入到后台之后可以对密码进行修改,密码修改有新密码,真实姓名等。(5)订单查看:分页显示交易记录;(6)会员管理:包括会员的交易记录,会员基本信息。(7)对管理员的管理:包括添加、删除管理员、修改密码、管理员个人信息;(8)对网站音乐的控制;3网站效果图设计3.1主页效果图3.2副页效果图4数据库设计采用access进行数据库设计,有3个数据表:产品表(product)、用户信息表(account)表、新闻表(news)(1)account表图4-1图4-1(2)news表图4-2图4-2(3)product表图4-3图4-35详细设计5.1数据库连接技术在需要与数据库进行连接的所有页面的设计上,我采用相对路径"Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("meitong/bjjjjj.mdb")方式然后上传5.2会员注册技术中的注册信息检查由于在会员注册时,用户可能输入非法信息,如两次密码不一致,所以本设计使用JavaScript语句来判断用户的输入是否合法,主要代码如下:'executetheupdate If(CStr(Request.Form("NewPassword"))=Cstr(Request.Form("anewPassword")))ThenSetMM_editCmd=Server.CreateObject("ADODB.Command")MM_editCmd.ActiveConnection=MM_editConnectionMM_editCmd.CommandText=MM_editQueryMM_editCmd.ExecuteMM_editCmd.ActiveConnection.CloseIf(MM_editRedirectUrl<>"")ThenResponse.Redirect(MM_editRedirectUrl) Elseresponse.Write("两次输入的密码不符!")EndIfEndIfEndIfEndIf图5-15.3客服聊天室登录页面<HTML><HEAD><TITLE>这张是最简单的聊天室的登录页面</TITLE></HEAD><BODY><FORMname="form1"method="post"action="chatpage.asp"><SCRIPTfor=form1event=onsubmitlanguage=VBScript>ifform1.f_name.value=""thenmsgbox"名字不能为空!" form1.clearattributesendif</SCRIPT><P>请输入您的名字:<INPUTtype=textname=f_namesize=20></P><INPUTtype=submitvalue=登录><INPUTtype=resetvalue=重新输入></FORM></BODY></HTML><%@LANGUAGE="VBSCRIPT"CODEPAGE="65001"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><styletype="text/css"><!--body{ background-image:url(image/2000.jpg);}body,td,th{ color:#3300FF;}--></style></head><%ifnotrequest.form("message")=""thenapplication.lock'lock方法用来暂时阻止其他用户改变应用程序变量 fori=10to1step-1 application("talk"&i)=application("talk"&(i-1))nextp=session("u_name")&"说:"&request.form("message") application("talk"&0)="("&time&")"&p application.unlock'unlock方法用来解锁endif%><BODYbgcolor="lightgreen"><FORMname="form1"method="post"action="message.asp"><%=session("u_name")%>,请输入谈话内容:<BR><INPUTtype=textname=messagesize=40></P><INPUTtype=submitvalue=发送></FORM></BODY></html>聊天页面<%session("u_name")=request("f_name")application.lock'lock方法用来暂时阻止其他用户改变应用程序变量fori=10to1step-1application("talk"&i)=application("talk"&(i-1))nextp=session("u_name")&"进入聊天室"application("talk"&0)="("&date&"  "&time&")"&papplication.unlock'unlock方法用来解锁%><HTML><HEAD><TITLE>这张是最简单的聊天室的聊天页面</TITLE></HEAD><FRAMESETrows=100,*><FRAMEsrc="message.asp"><FRAMEsrc="display.asp"></FRAMESET></HTML>显示信息页面<HTML><HEAD><TITLE>这张是最简单的聊天室的显示信息页面</TITLE><METAhttp-equiv=refreshcontent="5;<%=myself%>">'每5秒钟更新一次页面</HEAD><BODYbgcolor="lightgreen"><%fori=0to10ifapplication("talk"&i)<>""then response.write(application("talk"&i)&"<BR>") endifnext%></BODY></HTML>图5-25.4用户登录用户输入自己的用户名和密码即可完成登录,代码如下:<!--#includefile="Connections/asdp.asp"--><%Recordset1.ActiveConnection=MM_asdp_STRING<tdcolspan="2"><divalign="center">用户注册</div></td></tr><tr><tdwidth="111"><divalign="center">用户名:</div></td><tdwidth="419"><label><inputname="dname"type="text"id="dname"/></label></td></tr><tr><td><divalign="center">密码:</div></td><td><label><inputname="dpass"type="text"id="dpass"/></label></td></tr><tr><td><divalign="center">真实姓名:</div></td><td><label><inputname="dtrue"type="text"id="dtrue"/></label></td></tr><tr><tdcolspan="2"><label>          <inputtype="submit"name="Submit"value="注册"/> <inputtype="submit"name="Submit2"value="重置"/></label></td></tr></table><inputtype="hidden"name="MM_insert"value="form1"></form></body></html><%Recordset1.Close()SetRecordset1=Nothing%>--></style></head><body><formid="form1"name="form1"method="POST"action="<%=MM_LoginAction%>"><tablewidth="454"border="1"align="center"><tr><tdcolspan="2"><divalign="center">用户登录</div></td></tr><tr><tdwidth="163"><divalign="center">用户名:</div></td><tdwidth="275"><label><inputname="dname"type="text"id="dname"/></label></td></tr><tr><td><divalign="center">密码;</div></td><td><label><inputname="duser"type="text"id="duser"/></label></td></tr><tr><tdcolspan="2"><label>             <inputtype="submit"name="Submit"value="登录"/>   <inputtype="submit"name="Submit2"value="重置"/></label></td></tr></table>图5-35.5用户注册用户只要输入自己的用户名、真实姓名和密码即可完成注册创建注册表单网页zhuce.asp,注册成功提示网页success.asp,注册失败提示网页lose.asp。回到用户注册页面zhuce.asp,打开应用程序,选择服务器行为,添加插入记录功能,从表单中获取的用户名与密码等与数据库中对应字段对应选中,成功跳向登录成界面success.asp。3.添加检查新用户的服务器行为/用户身份验证/检查新用户名,用户名存在的话跳向zhucesb.asp。4、预览网页,查看结果。图5-4在book数据库中添加新闻表news,并添加多条的新闻运行iis创建虚拟目录,设置dw的运行环境。使用数据源odbc添加系统的dsn数据源在DW数据库面板中添加数据库连接asdp修改你原来的zhuye.html为zhuye.asp在DW数据库面板的绑定中新建针对news表的记录集,在主页zhuye.asp公告栏目中插入一个单元格,在单元格中绑定新闻标题news_bt字段选中公告栏中的单元格,使用数据库面板中的服务器行为中的设置重复记录并输入记录的条数新建新闻显示news.asp网页,在网页中插入一个两行一列的表格,在表格的第一行绑定新闻标题news_bt,在第二行绑定新闻内容news_nr,保存该网页。回到zhuye.asp网页,选中绑定的新闻标题,使用数据库面板中的服务器行为添加跳转详细页输入news.asp与url参数id选中。回到zhuye.Asp网页在该页面中添加服务器行为/记录集分页/添加特定记录,参数id与zhuye.asp传递的参数相同newsid,并确定。10.保存zhuye.asp11.预览网页,查看结果12.使用css样式美化网页。5.6关于美瞳的动态新闻图5-5新闻跳转后截图图5-65.7后台密码修改(见6,0重难点分析)商品浏览设置商品添加的表单。插入记录集重置选区插入记录分级图5-7商品添加<!--#includefile="Connections/asdp.asp"-->MM_authFailedURL="addsb.asp"MM_editConnection=MM_asdp_STRINGMM_editTable="product"MM_editRedirectUrl="addcg.asp"MM_fieldsStr="spid|value|spname|value|spprice|value|spxx|value|sptplj|value|spnum|value"MM_columnsStr="spid|',none,''|spname|',none,''|spjg|none,none,NULL|spxx|',none,''|sptplj|',none,''|spnum|none,none,NULL"图5-8添加访问权限后,输入用户名非设定值图5-96重难点分析6.1实现用户密码的修改新建数据表Account表,该表用来存储用户名、用户密码、授权级别和用户真实姓名。

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论