前端小白实战过程----制作在线购物类网页

前言

在线购物网站是当下比较流行的一类网站，越来越多的公司企业着手架设在线购物类网站平台。我在网上搜了很多，发现了易于新人着手的网页项目。那么本篇文章，将展示我对一个网页的编写过程。

整体布局

找了个“优尚”的网站，体现的组件比较多，主要包括产品搜索，账户登录，广告推荐，产品推荐，产品分类等内容。最终的网页效果如图。

设计分析

购物网站的一个特点就是突出产品，突出购物流程，优惠活动，促销活动等信息。在线购物类网站的主要特性体现在如下几个方面：
1.要有商品搜索功能，有详细的商品分类。
2.增加广告活动位，帮助特色产品推广。
3.可以设置热门产品推荐位。
4.让浏览者知道在网页中如何快速地查找自己需要的信息。

排版架构

本实例的在线购物网站是上下型结构，header有网页头部、导航栏；中间为网页主要内容，banner、产品；footer为页脚信息，我画了一个整体框架。如图：

Logo与导航区

导航使用水平结构，与其他类别网站相比，是前边有一个购物车显示，把购物车功能放到这里使用户更方便快捷地查看购物情况。以下为网页头部的效果。

其具体的HTML框架代码如下：

<!--------------------------------------------NAV-------------------------------------------->
<div id="nav"><span><a href="#">我的账户</a> | <a href="#" style="color:#5CA100;">订单查询</a> | <a href="#">我的优惠券</a> | <a href="#">积分换购</a> | <a href="#">购物交流</a> | <a href="#">帮助中心</a></span> 你好，欢迎来到优尚购物[ <a href="#">登录</a>/<a href="#">注册</a>] </div>
<!--------------------------------------------logo-------------------------------------------->
<div id="logo">
  <div class="logo_left"><a href="#"><img src="images/logo.gif" border="0" /></a></div>
  <div class="logo_center">
    <div class="search"><form action="" method="get">
	<div class="search_text">
  <input type="text" value="请输入产品名称或订单编号"  class="input_text"/>
	</div>
	<div class="search_btn"><a href="#"><img src="images/search-btn.jpg" border="0" /></a></div>
    </form></div>
	<div class="hottext">热门搜索&nbsp; <a href="#">新品</a>&nbsp;&nbsp;&nbsp;<a href="#">限时特价</a>&nbsp;&nbsp;&nbsp;<a href="#">防晒隔离</a>&nbsp;&nbsp;&nbsp;<a href="#">超值换购</a> </div>
  </div>
  <div class="logo_right"><img src="images/telephone.jpg" width="228" height="70" /></div>
</div>
<!--------------------------------------------MENU-------------------------------------------->
<div id="menu">
  <div class="shopingcar"><a href="#">购物车中有0件商品</a></div>
  <div class="menu_box">
    <ul>
	  <li><a href="#"><img src="images/menu1.jpg" border="0" /></a></li>
	  <li><a href="#"><img src="images/menu2.jpg" border="0" /></a></li>
	  <li><a href="#"><img src="images/menu3.jpg" border="0" /></a></li>
	  <li><a href="#"><img src="images/menu4.jpg" border="0" /></a></li>
	  <li><a href="#"><img src="images/menu5.jpg" border="0" /></a></li>
	  <li><a href="#"><img src="images/menu6.jpg" border="0" /></a></li>
	  <li style="background:none;"><a href="#"><img src="images/menu7.jpg" border="0" /></a></li>
	  <li style="background:none;"><a href="#"><img src="images/menu8.jpg" border="0" /></a></li>
	  <li style="background:none;"><a href="#"><img src="images/menu9.jpg" border="0" /></a></li>
	  <li style="background:none;"><a href="#"><img src="images/menu10.jpg" border="0" /></a></li>
	</ul>
  </div>
</div>

上述代码主要包括三个部分：nav、logo、menu。其中nav区域主要定义购物网站中的账户、订单、注册、帮助中心等信息；logo部分主要定义网站的logo、搜索框信息以及其他；menu主要定义网站的导航菜单。
在CSS样式文件中，对应上述代码的CSS代码如下。

/*==========================nav==========================*/
#nav{ width:970px; height:30px; line-height:30px; margin:auto; padding:0 5px 0 5px;}
#nav a{ color:#666;}
#nav a:hover{ color:#5CA100;}
#nav span{ float:right;}

/*==========================logo==========================*/
#logo{ width:980px; height:70px; margin:auto;}
.logo_left{ float:left; width:277px; margin-right:41px;}

.logo_center{ float:left; width:400px; height:70px;}
  .search{ margin-top:13px; height:29px; background:url(../images/search.jpg) no-repeat;}
    .search_text{ float:left; width:312px; padding-left:27px; margin-top:3px;}
    .search_btn{ float:left;}
  .input_text{ width:300px; height:23px; font-size:12px; color:#949494; border:none; background:none; line-height:23px;}
  .hottext{ color:#949494; line-height:24px;}
  .hottext a{ color:#949494;}

.logo_right{ float:right; width:228px; height:70px;}

/*==========================menu==========================*/
#menu{ margin-top:10px; margin:auto; width:980px; height:41px; overflow:hidden;}

.shopingcar{ float:left; width:140px; height:35px; background:url(../images/shopingcar.jpg) no-repeat; color:#fff; padding:10px 0 0 42px;}
.shopingcar a{ color:#fff;}

.menu_box{ float:left; margin-left:60px;}
  .menu_box li{ float:left; width:55px; margin-top:17px; text-align:center; background:url(../images/menu_fgx.jpg) right center no-repeat;}
  

上面的代码中。选择器定义了nav，logo，以及nav的各类属性。

Banner与资讯区

购物网站的Banner区域同企业型的比较起来差别很大，主要企业是为了突出企业文化。而购物网则是为了放置主推产品、优惠活动、促销活动等。该部分实现的的效果如图。

其具体的HTML代码如下：

<!--------------------------------------------banner_top-------------------------------------------->
<div id="banner">
  <div class="banner_box">
  <div class="banner_pic"><img src="images/banner.jpg" border="0" /></div>
  <div class="banner_right">
    <div class="banner_right_top"><a href="#"><img src="images/event_banner.jpg" border="0" /></a></div>
	<div class="banner_right_down">
	  <div class="moving_title"><img src="images/news_title.jpg" /></div>
	  <ul>
	    <li><a href="#"><span>国庆大促5宗最，纯牛皮钱包免费换！</span></a></li>
		<li><a href="#">身体护理系列满199加1元换购飘柔！</a></li>
		<li><a href="#"><span>YOUSOO九月新起点，价值99元免费送！</span></a></li>
		<li><a href="#">喜迎国庆，化妆百元红包大派送！</a></li>
	  </ul>
	</div>
  </div>
  </div>
</div>

在上述代码中，banner分为两部分，左侧放大，右侧缩小和文字消息。
在CSS样式文件中，上面的对应代码如下：

/*==========================banner_top==========================*/
#banner{ background:url(../images/banner_top_bg.jpg) repeat-x; padding-top:12px;}
.banner_box{ width:980px; height:369px; margin:auto;}
.banner_pic{ float:left; width:726px; height:369px; text-align:left;}
.banner_right{ float:right; width:247px;}
  .banner_right_top{ margin-top:15px;}
  .banner_right_down{ margin-top:12px;}
  .banner_right_down ul{ margin-top:10px; width:243px; height:89px;}
  .banner_right_down li{ margin-left:10px; padding-left:12px; background:url(../images/icon_green.jpg) left no-repeat center; line-height:21px;}
  .banner_right_down li a{ color:#444;}
  .banner_right_down li a span{ color:#A10288;}

#banner选择器定义了背景图，对齐方式，链接样式等。

产品区域

该区域为图文混排的结构，购物网站大量运用图文混排方式，如下。

其具体的HTML代码如下所示：

<div class="clean"></div>

<div id="content2">
  <div class="con2_title"><b><a href="#"><img src="images/ico_jt.jpg" border="0" /></a></b><span><a href="#">新品速递</a> | <a href="#">畅销排行</a> | <a href="#">特价抢购</a> | <a href="#">男士护肤</a>&nbsp;&nbsp;</span><img src="images/con2_title.jpg" /></div>
  <div class="line1"></div>
  <div class="con2_content"><a href="#"><img src="images/con2_content.jpg" width="981" height="405" border="0" /></a></div>
  <div class="scroll_brand"><a href="#"><img src="images/scroll_brand.jpg" border="0" /></a></div>
  <div class="gray_line"></div>
</div>

<div id="content4">
  <div class="con2_title"><b><a href="#"><img src="images/ico_jt.jpg" border="0" /></a></b><span><a href="#">新品速递</a> | <a href="#">畅销排行</a> | <a href="#">特价抢购</a> | <a href="#">男士护肤</a>&nbsp;&nbsp;</span><img src="images/con4_title.jpg" width="27" height="13" /></div>
  <div class="line3"></div>
  <div class="con2_content"><a href="#"><img src="images/con4_content.jpg" width="980" height="207" border="0" /></a></div>
  <div class="gray_line"></div>
</div>

上述代码中，contnet2定义化妆品类，content4定义女包类。
对应的css代码如下：

/*==========================content2==========================*/
#content2{ width:980px; height:545px; margin:22px auto; overflow:hidden;}
  .con2_title{ width:973px; height:22px; padding-left:7px; line-height:22px;}
  .con2_title span{ float:right; font-size:10px;}
  .con2_title a{ color:#444; font-size:12px;}
  .con2_title b img{ margin-top:3px; float:right;}
  .con2_content{ margin-top:10px;}
  .scroll_brand{ margin-top:7px;}

#content4{ width:980px; height:250px; margin:22px auto; overflow:hidden;}
#bottom{ margin:auto; margin-top:15px; background:#F0F0F0; height:236px;}
.bottom_pic{ margin:auto; width:980px;}

上述代码定义了产品类别的背景图、高度、宽度、对齐方式等。

页脚部分

就不弄复杂的页脚了，本例中比较简单，是使用一个div标记放置了一个版权信息图片。

html:<div id="copyright"><img src="images/copyright.jpg" /></div>

css:#copyright{ width:980px; height:150px; margin:auto; margin-top:16px;}

最终就实现了一个静态的购物网站，这属于比较简单的项目。
那么如有需要源代码和资料的小伙伴可以私信我，本篇文章就结束了。