加入国际站
返回旧版 新版反馈
关闭 评分
铜币:
剩余
* 评分才能提交噢
理由:

 | 
只看楼主


  • 0 楼#

    cnhonseng

    • 粉丝
      31
    • 人气
      197
    • 积分
      100
    • 铜币
      64

    大家都知道阿里巴巴最近对企业网站做了一个很大的改变就是全球旺铺的推出。全球旺铺使得各位的网站不再是千篇一律了,不再那么的单调,大家能根据自己的喜好自由编辑及修改啦。真正实现“我的网站我做主”
    其实全球旺铺的推出也是大势所趋,在网页全面进入HTML5+CSS3时代,Table时代必将退出历史的舞台。网页设计也不再局限于最初的设计一张图片一切割再用table放在一起就完事,而是可以使用可以灵活变化的DIV+CSS。全球旺铺的推出还有一个更大的优势就是在于对访问者也就是我们的潜在客户的一个吸引,旧版固定的模板使得好多人的网站除了产品及公司信息外其它基本一样,使人有一种视觉疲劳感。
    说了这么多废话,希望大家不要见怪。现在正式回到今天的主题。
    首先谈谈网页设计的两个基本点:配色和布局:
    1.    配色:一个专业的设计师设计出来的网页用色绝不会很多(按钮及图片除外)。好多朋友可能认为颜色多感觉很漂亮,其实刚好相反,要弄清企业网站的最终用途,它是用来展示产品给客户看的。当然网页也不是不重要。颜色太多没有主次有时会给人一种不舒服的感觉,而且可能可掩盖产品的突出性。
    2.    布局:旺铺不同于自己的网站,布局基本已经定了,就不多说了。只和大家谈谈首页,首页简单来说就是一个引导页,让人知道了解这个公司的基本信息及各类产品,最终点击吸引它的产品了解详情情况。。。。。。
    看到好多朋友差不多把它公司所有的产品分类显示在首页,这样的好处就是客户在首页就可以看完全部的产品,但大家是否有考虑如果产品太多客户是否有耐心全部看完,还有图片太多会导致网页加载变慢等情形。

    大家知道一个网页一般分为三部分:顶部、正文(内容)和底部:

    1.    顶部:
    公司Logo 或公司名称或两者都有,有的可能还会加一个banner。除了这些外还有一个导航
    本司顶部采用的是一个带有logo的banner,banner 一般采用纯白色或单一淡色系的背景,但因为是节假日原因,所以现在暂时使用的是橙色的。导航侧是采用与logo色调一样的配色。
    不足之处:当把字体设置成白色时,鼠标悬浮在导航上会全部是白色的,本打算把字体设置成白色的,现不得不改为黑色。希望能改进 a.hover 样式。(此点阿里技术人员已改进)

    图片:1.JPG



    2.    正文:
    1. 轮播Slider四张图片: 可以放产品最新优惠、最新展会信息、主打产品或者分类产品、服务优势或相关认证信息等。因为暂时没来得及做这些图,所以我暂时放的是分类产品。
    2. 图片:2.JPG

    3. 公司信息About Us:这个栏目内容基本固定了,位置可以根据自己喜好改变。这个中发现有些是右侧是四张图片,原来是套餐多的原因。
    4. 图片:3.JPG


    5. 在线联系:左侧加入了所有子帐号在线联系,这样方便客户如找不到某产品下的同事时可以咨询其它在线同事,更及时的服务客户,右边图片侧是圣诞祝福,也可以更换其它宣传图片。
    6. 图片:4.JPG


    7. 所有产品分类 (默认)
    8. 图片:5.JPG


    9. 最新产品(默认)
    10. 最热产品或推荐产品(手动添加)
    11. 橱窗产品及搜索和产品分类(默认)

    不足之处:其实一直想把产品搜索移到顶部去,但不可以。
    1. 邮件咨询(默认)
    2. 联系我们(手动添加)

    上面两项放在一起可以给客户更多的联系方式选择,做到更好的服务大家。
    不足之处:不能留邮箱,但看到有朋友却可以,原因不明。希望可以改善。
    3.    底部
    默认底部是阿里巴巴的相关信息,我们也可以自己增加一个模块把自己公司信息放在底部,或者放在背景图片底部。

    以上相关信息是我在装修过程中的一些方法及想法,欢迎大家批评指教。
     
     
    本司网站:见左边个人图像下面的介绍。

     
     
     
     
     
     

  • 1 楼#

    cnhonseng

    • 粉丝
      31
    • 人气
      197
    • 积分
      100
    • 铜币
      64

    现总结一些常见问题给大家作参考:
    1. 在线联系:
       详细代码参见19楼!
       
    2. 滚动轮播:
       好多朋友提到不能上传滚动图片的问题,今天在线帮一个朋友装修时发现原来是浏览器的问题,大家尽量少用 国内的一些浏览器吧,因为好多用的还是IE6的内核(山寨),只是在界面上做了些修改。建议大家使用谷歌chrome、firefox或苹果safri浏览器(官方有windows版)
    3. 导航颜色:
       上贴提到的当把导航字体设置成白色,鼠标悬浮全部是白的问题阿里技术人员已改进。在此表示感谢!
    4. 产品分类排列(应朋友跟贴要求):
       参照51楼详细代码.
       

    图片:1.jpg


    5. 排列未完待续。
     
     
     
     

  • 2 楼#

    zoe

    • 粉丝
      13
    • 人气
      50
    • 积分
      0
    • 铜币
      2

    期待着

  • 3 楼#

    若兰

    • 粉丝
      180
    • 人气
      764
    • 积分
      0
    • 铜币
      1085

    楼主的铺垫很长哈,来支持一下原创心得分享~

  • 4 楼#

    cn220040268

    • 粉丝
      1
    • 人气
      34
    • 积分
      0
    • 铜币
      9

    楼主的心得,很有道理,顶一个

  • 5 楼#

    世界末日

    • 粉丝
      4
    • 人气
      262
    • 积分
      0
    • 铜币
      51

    暂未装修,无从下手,说点细节操作啊

  • 6 楼#

    cnhonseng

    • 粉丝
      31
    • 人气
      197
    • 积分
      100
    • 铜币
      64

    qzwg:暂未装修,无从下手,说点细节操作啊 (2012-12-26 11:54) 

    想要什么样品的细节呀?
    提出来我会和大家一起学习和分享的!

  • 7 楼#

    陶瓷刀工厂

    • 粉丝
      5
    • 人气
      180
    • 积分
      31
    • 铜币
      93

    首先,陶瓷刀工厂非常感谢楼主的分享精神!写的不错!
    我也很想分享和学着分享我厂制造出来的精美健康,真正钻石级的陶瓷刀!
    期待见证呵!
    在需要的朋友可加我Q307930287
    感谢分享!

  • 8 楼#

    陶瓷刀工厂

    • 粉丝
      5
    • 人气
      180
    • 积分
      31
    • 铜币
      93

    马上装修我的旺铺

  • 9 楼#

    cn220040268

    • 粉丝
      1
    • 人气
      34
    • 积分
      0
    • 铜币
      9

    楼主,多写点,还有报价单也是一样的,对吧

  • 10 楼#

    pkcell01

    • 粉丝
      12
    • 人气
      364
    • 积分
      140
    • 铜币
      1342

    非常精辟,谢谢了

  • 11 楼#

    cncoopa

    • 粉丝
      1
    • 人气
      61
    • 积分
      0
    • 铜币
      3

             

  • 12 楼#

    szatc

    • 粉丝
      0
    • 人气
      98
    • 积分
      0
    • 铜币
      2

    不错哦

  • 13 楼#

    szatc

    • 粉丝
      0
    • 人气
      98
    • 积分
      0
    • 铜币
      2

    想问下,你那个在线联系方式是如何设置的

  • 14 楼#

    chinagdcap

    • 粉丝
      34
    • 人气
      227
    • 积分
      25
    • 铜币
      308

    又是这样子...要回复的...

  • 15 楼#

    icemakerchina

    • 粉丝
      0
    • 人气
      25
    • 积分
      100
    • 铜币
      15

    不错,楼主高人也

  • 16 楼#

    cndgpvc

    • 粉丝
      0
    • 人气
      92
    • 积分
      0
    • 铜币
      257

    不错,学习了!

  • 17 楼#

    cn1001535166

    • 粉丝
      0
    • 人气
      34
    • 积分
      0
    • 铜币
      2

    瞅瞅

  • 18 楼#

    cnhonseng

    • 粉丝
      31
    • 人气
      197
    • 积分
      100
    • 铜币
      64

    szatc:
    想问下,你那个在线联系方式是如何设置的


       自定义内容并切换HTML编写模式,贴入下列代码,注意更换旺旺id及图片,右边大图的大小为800px*202px。

    <div style="width: 990.0px; height: 210.0px; float: left;">
    <ul style="list-style: none; width: 160.0px; float: left;">
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041441&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041441&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575423.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220040285&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220040285&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356420797812.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cnhonseng&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cnhonseng&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575473.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041433&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041433&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575527.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041439&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041439&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575546.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220040268&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220040268&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356420797778.jpg" alt="" width="108px" height="29px" /></li>
    </ul>
    <img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356421492351.jpg" alt="" width="800px" height="202px" /></div>



  • 19 楼#

    cn220041439

    • 粉丝
      0
    • 人气
      38
    • 积分
      30
    • 铜币
      26

    不错,支持,我学习一下



  • 大家都知道阿里巴巴最近对企业网站做了一个很大的改变就是全球旺铺的推出。全球旺铺使得各位的网站不再是千篇一律了,不再那么的单调,大家能根据自己的喜好自由编辑及修改啦。真正实现“我的网站我做主”
    其实全球旺铺的推出也是大势所趋,在网页全面进入HTML5+CSS3时代,Table时代必将退出历史的舞台。网页设计也不再局限于最初的设计一张图片一切割再用table放在一起就完事,而是可以使用可以灵活变化的DIV+CSS。全球旺铺的推出还有一个更大的优势就是在于对访问者也就是我们的潜在客户的一个吸引,旧版固定的模板使得好多人的网站除了产品及公司信息外其它基本一样,使人有一种视觉疲劳感。
    说了这么多废话,希望大家不要见怪。现在正式回到今天的主题。
    首先谈谈网页设计的两个基本点:配色和布局:
    1.    配色:一个专业的设计师设计出来的网页用色绝不会很多(按钮及图片除外)。好多朋友可能认为颜色多感觉很漂亮,其实刚好相反,要弄清企业网站的最终用途,它是用来展示产品给客户看的。当然网页也不是不重要。颜色太多没有主次有时会给人一种不舒服的感觉,而且可能可掩盖产品的突出性。
    2.    布局:旺铺不同于自己的网站,布局基本已经定了,就不多说了。只和大家谈谈首页,首页简单来说就是一个引导页,让人知道了解这个公司的基本信息及各类产品,最终点击吸引它的产品了解详情情况。。。。。。
    看到好多朋友差不多把它公司所有的产品分类显示在首页,这样的好处就是客户在首页就可以看完全部的产品,但大家是否有考虑如果产品太多客户是否有耐心全部看完,还有图片太多会导致网页加载变慢等情形。

    大家知道一个网页一般分为三部分:顶部、正文(内容)和底部:

    1.    顶部:
    公司Logo 或公司名称或两者都有,有的可能还会加一个banner。除了这些外还有一个导航
    本司顶部采用的是一个带有logo的banner,banner 一般采用纯白色或单一淡色系的背景,但因为是节假日原因,所以现在暂时使用的是橙色的。导航侧是采用与logo色调一样的配色。
    不足之处:当把字体设置成白色时,鼠标悬浮在导航上会全部是白色的,本打算把字体设置成白色的,现不得不改为黑色。希望能改进 a.hover 样式。(此点阿里技术人员已改进)

    图片:1.JPG



    2.    正文:
    1. 轮播Slider四张图片: 可以放产品最新优惠、最新展会信息、主打产品或者分类产品、服务优势或相关认证信息等。因为暂时没来得及做这些图,所以我暂时放的是分类产品。
    2. 图片:2.JPG

    3. 公司信息About Us:这个栏目内容基本固定了,位置可以根据自己喜好改变。这个中发现有些是右侧是四张图片,原来是套餐多的原因。
    4. 图片:3.JPG


    5. 在线联系:左侧加入了所有子帐号在线联系,这样方便客户如找不到某产品下的同事时可以咨询其它在线同事,更及时的服务客户,右边图片侧是圣诞祝福,也可以更换其它宣传图片。
    6. 图片:4.JPG


    7. 所有产品分类 (默认)
    8. 图片:5.JPG


    9. 最新产品(默认)
    10. 最热产品或推荐产品(手动添加)
    11. 橱窗产品及搜索和产品分类(默认)

    不足之处:其实一直想把产品搜索移到顶部去,但不可以。
    1. 邮件咨询(默认)
    2. 联系我们(手动添加)

    上面两项放在一起可以给客户更多的联系方式选择,做到更好的服务大家。
    不足之处:不能留邮箱,但看到有朋友却可以,原因不明。希望可以改善。
    3.    底部
    默认底部是阿里巴巴的相关信息,我们也可以自己增加一个模块把自己公司信息放在底部,或者放在背景图片底部。

    以上相关信息是我在装修过程中的一些方法及想法,欢迎大家批评指教。
     
     
    本司网站:见左边个人图像下面的介绍。

     
     
     
     
     
     



  • 现总结一些常见问题给大家作参考:
    1. 在线联系:
       详细代码参见19楼!
       
    2. 滚动轮播:
       好多朋友提到不能上传滚动图片的问题,今天在线帮一个朋友装修时发现原来是浏览器的问题,大家尽量少用 国内的一些浏览器吧,因为好多用的还是IE6的内核(山寨),只是在界面上做了些修改。建议大家使用谷歌chrome、firefox或苹果safri浏览器(官方有windows版)
    3. 导航颜色:
       上贴提到的当把导航字体设置成白色,鼠标悬浮全部是白的问题阿里技术人员已改进。在此表示感谢!
    4. 产品分类排列(应朋友跟贴要求):
       参照51楼详细代码.
       

    图片:1.jpg


    5. 排列未完待续。
     
     
     
     



  • 期待着



  • 楼主的铺垫很长哈,来支持一下原创心得分享~



  • 楼主的心得,很有道理,顶一个



  • 暂未装修,无从下手,说点细节操作啊



  • qzwg:暂未装修,无从下手,说点细节操作啊 (2012-12-26 11:54) 

    想要什么样品的细节呀?
    提出来我会和大家一起学习和分享的!



  • 首先,陶瓷刀工厂非常感谢楼主的分享精神!写的不错!
    我也很想分享和学着分享我厂制造出来的精美健康,真正钻石级的陶瓷刀!
    期待见证呵!
    在需要的朋友可加我Q307930287
    感谢分享!



  • 马上装修我的旺铺



  • 楼主,多写点,还有报价单也是一样的,对吧



  • 非常精辟,谢谢了



  •          



  • 不错哦



  • 想问下,你那个在线联系方式是如何设置的



  • 又是这样子...要回复的...



  • 不错,楼主高人也



  • 不错,学习了!



  • 瞅瞅



  • szatc:
    想问下,你那个在线联系方式是如何设置的


       自定义内容并切换HTML编写模式,贴入下列代码,注意更换旺旺id及图片,右边大图的大小为800px*202px。

    <div style="width: 990.0px; height: 210.0px; float: left;">
    <ul style="list-style: none; width: 160.0px; float: left;">
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041441&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041441&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575423.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220040285&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220040285&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356420797812.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cnhonseng&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cnhonseng&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575473.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041433&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041433&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575527.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220041439&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220041439&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356419575546.jpg" alt="" width="108px" height="29px" /></li>
    <li><a href="http://amos.us.alitalk.alibaba.com/msg.aw?v=2&uid=cn220040268&site=enaliint&s=2" target="_blank"> <img src="http://amos.us.alitalk.alibaba.com/online.aw?v=2&uid=cn220040268&site=enaliint&s=2" alt="Chat Now" border="0" /></a><img src="http://i01.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356420797778.jpg" alt="" width="108px" height="29px" /></li>
    </ul>
    <img src="http://i00.i.aliimg.com/img/esite/20/04/40/200480540/image/1212/1356421492351.jpg" alt="" width="800px" height="202px" /></div>





  • 不错,支持,我学习一下


168 回复

与 外贸社区|外贸圈 的连接断开,我们正在尝试重连,请耐心等待