兄奕文档说明

一、网站架构如下：

网站主架构（主导航）：Home(首页)、Why choose us（为什么选择我们）、Product(产品页面)、About us（关于我们）、Case(案例图片)、Contact us(联系页面)。

上述主导航中的Product和 About us还有二级分类，首先Product子分类： PVC Edge banding（PVC平板封边）、Screw cover（环美贴）、PVC Profile（PVC异形）、3D crystal edge banding（ 3D封边条）。其次About us子分类：Base situation（基本情况）、Market development（市场开发）、Brand construction（品牌建设）、Product development（产品开发）、Quality management（质量管理）、Team building（团队建设）、Attain international standard（达到国际标准）。

二、网站部分效果介绍：

1、Home(http://www.xiongyi.com.cn/)

悬浮导航（上图）：当鼠标上下滚动时也会随着滚动（它永远都会在你的视线中、不离不弃）。无论你在当前页面浏览到任何位置都可以随时点击导航中的菜单到其他页面。还有单击窗口右下方的‘TOP’按钮可以快速回到网页的最顶部。

首页滚动Banner（上图）， 首先：当我们进入这个页面首先映入眼帘的是这张大图（banner），这张图几乎全展示了我们要推出的产品，让浏览者一进入网站就知道我们是卖什么的。这里有五张banner滚动切换展示，后面的四张则是单系列产品的案例及其原图的合成图。这样可以让浏览者更加深刻的了解我们的产品。

其次：这个地方值得介绍的一处动画效果，页面加载进来的同时我们会看到图片上红色点会有依次放大、旋转、缩小，当你把鼠标移到红点上时，你会看到一个图文区域从右向左快速飞来，上面显示的是这个红点所在位置的产品介绍。

首页产品设备（上图）：这个地方主要介绍它的设计，我们看到这张图不是正规的矩形，它改变了传统的展示方式，它这两个凹进和凸出的三角形把上下完美的联结在一起。

2、Product(http://www.xiongyi.com.cn/product/)

产品列表页(上图)：进入产品页面我们可以看到产品原图和它的案例图片展示的，这样我们可以一目了然就知道该产品应该运用到什么地方。同时当鼠标移到大图上方时还有一个动画效果，点击‘MORE’可以进入到对应产品系列页面。点击‘PVC Edge Banding’也可以进入，点击产品原图进入当前产品页面，可以了解它的详细信息。

其它系列同上。

3、Contact Us(http://www.xiongyi.com.cn/contact-us/)

最后就是联系我们页面介绍：这里主要介绍动画效果，当页面加载完后我们会看到图片底部会有小白点慢慢向上飘，这个效果把整个页面从‘静’转变成了‘动’，感觉就是就像有生命一样。这个独特的效果会吸引大部分人的眼球。这个地方是采用HTML5里面的画布技术实现的。

总结：在设计师的精心设计下使整个网站感觉高端大气。也正是现在主流风格，再加上一些新技术效果（css3），相信会得到浏览者高度评价和认可。