静态电子购物网站设计回忆

1.概述

本次网页设计全程由制作者本人独立完成。页面风格以简洁为主，导航栏设“首页”、“衣服系列”、“化妆品系列”、“家电系列”、“珠宝系列”、“食品系列”、“产品介绍宣传”共7项。源文件共计占用磁盘空间16MB左右，制作用时为7天，使用了Dreamweaver、Photoshop工具。本站页面共有8个页面，其中7个为导航页，其主要分为3部分页面一个主页面、6个副页面、还有1个产品宣传页。

2.详细设计

2.1网站结构说明

1、首页：头部有一行信息栏有：收藏该网页、登录、注册（登录与注册功能还没添加还是空链接）、登录后可以查看我的信息（该功能需要后台支持，本人也没有实现）；接下来是，该网站的Logo图标、站内搜索；下来是导航菜单。上面简要地技术了该网站的头部的一些必须信息；如下就是首页的主要板块：有购物导航栏、商品促销区（以幻灯片形式展示）、公告栏、（新品上架、特价商品、热卖商品、热评商品、疯狂抢购）

2、副页面系列：（有衣服系列、珠宝系列、食品系列、家电系列、化妆系列）这个页面版式设计是一样的，有(购物、充值、公告栏)以一个选项卡的方式实现的、今天你购物了吗栏（显示该网站今天的销售情况）、各地商城栏（可以本质说是一个友情链接）、猜你喜欢栏（展示所在系列的商品）、浏览一下栏（展示该系列热卖的的商品）。

3.产品介绍宣传页：主要使用视频来介绍一些商品，分为商品视频播放区，商品视频列表区。

网站结构流程图：

2.2首页设计说明

首页设计关键说明

首先设定一个总的DIV，然后里面放的各个栏目都用DIV嵌套来完成。根据自己的设计需要来确定DIV的层次。每个网站的细节都很多。顶部的信息条是使用也使用一个DIV里面在嵌套一些DIV，嵌套的DIV里面嵌套了<span>标签来完成。 购物车的那一行信息使用DIV里面嵌套<ul><li>标签来实现的，其中<li>还嵌套了另一个<ul>实现超链接伪类。

具体代码如下：（只显示了一部分代码）

<div class="headinfomation">
<span><img src="images/icon/SY.png" width="10px" height="10px" /><a href="#"> 收藏购物轩</a></span>
<span>您好，欢迎登录购物轩网！</span>
</div>
<div class="guowuche">
<ul>
  <li><img src="images/icon/guowuche.png" width="12px" height="12px" /><a href="#"><span>  </span>购物车</a></li>
  <li><a href="#">我的订单</a></li>
  <li><a href="#">我的金币</a>
      <ul>
       <li><a href="#">购物礼劵</a></li>
       <li><a href="#">我的消费纪录</a></li>
     </ul>
  </li>
  <li><a href="#">手机购物</a></li>
  <li><a href="#">企业销售</a></li>
  <li><a href="#">帮助</a>
     <ul>
       <li><a href="#">常见问题</a></li>
       <li><a href="#">申请退货</a></li>
     </ul>
  </li>  
</ul>
</div>
</div>

写好了html就为其编写css规则。css规则主要是背景、宽度、高度、字体大小 要不要float, ling-height, align等等。

接下来的的栏目其编写原理都是差不多的.我就不一一细说了。接下来就说说那个五个栏目商品是怎样实现的。主要是运用CSS+js来实现的。

<div id="listBT">
   <ul>
     <li id="L01" class="LB1">新品上架</li>
     <li id="L02" class="LB2">特价商品</li>
     <li id="L03" class="LB2">热卖商品</li>
     <li id="L04" class="LB2">热评商品</li>
     <li id="L05" class="LB2">疯狂抢购</li>
   </ul>
   </div>

上面的代码是商品栏目

<div class="xianshiNR">
         <div id="xs1">
          <ul>
   <li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/1.jpg"</div> <p><a href="#">照相机</a></p> <p>价格：<span>900元</span></p> </div></li>
  <li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/2.jpg"</div> <p><a href="#">显示屏<a></p> <p>价格：<span>1200元</span></p> </div></li>
 <li><div class="XPSJ"><div class="XPSJ_img"><img src="images/shangpinimg/3.jpg"</div> <p><a href="#">WindosPhone</a></p> <p>价格：<span>1900元</span></p> </div></li>
         </ul>
         </div>

上面的图片的展示区，我只给出展示区的一个栏目的部分代码。

SDmodel.sd(["L01","L02","L03","L04","L05"],["xs1","xs2","xs3","xs4","xs5"],"LB1","LB2");这时JS代码调用函数来实现该功能。

下面是CSS规则代码，这是布局网页设计必须掌握的。

#zhengti #main #listBT{ width:960px; height:40px; border:1px solid #0C0; background-image:url(../images/icon/lis1.png);}
#zhengti #main #listBT ul li{ float:left;  font-size:18px; list-style-type:none;}


#zhengti #main #listBT ul .LB1{ 
    cursor:pointer;
	
	color:#666;
	display:block;
	width:120px; 
	height:40px; 
	text-align:center;
	line-height:40px; 
	background-image:url(../images/icon/lis2.png);
 }
#zhengti #main #listBT ul .LB2{ 
     cursor:pointer;
	color:#000;
	display:block;
	width:120px; 
	height:40px; 
	text-align:center;
	line-height:40px; 
	background-image:url(../images/icon/lis1.png);}

#zhengti #main .xianshiNR
{
	width:940px;
	height:540px;
	margin-left:8px;
	margin-top:10px;
	border:0px solid #0C0;
}
#zhengti #main .xianshiNR .tupian{display:none;}


#zhengti #main .xianshiNR #xs1
{
	width:940px;
	height:540px;
	border:0px solid #0C0;
}
#zhengti #main .xianshiNR #xs1 ul li
{
	float:left;
	margin-left:15px;
	margin-top:20px;
	width:165px;
	height:220px;
	
	list-style-type:none;
}
#zhengti #main .xianshiNR #xs1 ul li .XPSJ
{
	text-align:center;
	line-height:30px;
	padding-top:20px;
}

#zhengti #main .xianshiNR #xs1 ul li .XPSJ p span{color:#C00; font-weight:bold;}

2.3商品页面设计效果图，主要是运用Javascript+CSS

2.4产品宣传页设计效果图，主要是运用Javascript+CSS