QQ 1640076782

2017年03月17日

多语言外贸钢铁站改版设计

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 3:41 下午

客户之前的站因为有几年了，觉得功能和设计上都有些过于简单，决定重新改版。客户的要求很明确，要功能齐全，大气美观，而且要有利于优化。经过前期沟通，结事客户产品的自身属性，网站还是延用原来的蓝色主色调。网站总体还是按照上中下的结构来划分。 头部： 因为还有其他小语种，所以右上角有语言选择。产品和产品分类都比较多，相对于普通企业站来讲，搜索栏占据的位置较大，而且还添加了产品分类的选择提高客户体验度 中间部分： 中间部分又细分成了几个版块，考虑到产品分类比较多，左侧部分列举了大部分产品分类信息，方便客户快速找到相对应的产品，右侧是banner图和部分热销的产品。 除了产品的展示外，还有对公司实力，公司产品和工厂车间的介绍模块，方便客户详细了解公司情况。 底部： 底部主要是常规的集团介绍，产品快速导航和帮助模块，还有重要的联系我们版块，因为客户要求重点突出联系我们，所以这一版块用了蓝色的背景和其他版块区分开来，一目了然。 和老站相比，新站更加大气，信息更全面，能让客户快速对公司有所了解，快速找到想要的产品，体验上有很大提升。 这是老站： [...]

2016年09月11日

最近的灯具类外贸企业站设计案例

Filed under: 英语网站设计 — 标签：, — lifengwu @ 7:34 上午

灯具类的外贸企业网站之前也做过几个，不过都是LED类的，综合类的第一次接触，和客户沟通之后，大概了解了一下客户和产品和要求。 客户的总体要求：让人感觉我们是一家产品齐全，重视质量，独特研发的工厂 结合客户的要求和产品特点以及客户方提供的logo确定好网站的整体风格着手开始做好了首页 头部和底部都用了比较深的灰色作为背景 考虑到客户的产品分类比较多，在首页banner的下方优先展示了比较热门的分类，展示方式以图文结合的方式，图片没有采用通常的一样的尺寸，而是左侧一个大图，右侧几个小图的方式排列以和下面的产品展示部分区分开来 中间部分除了客户的热销产品和新品的展示外，增加了”我们的优势”和“客户评价”两个版块，丰富了网站的内容同时增加用户对网站的信任度 底部后来应客户要求增加了合作伙伴这一版块，展示了合作方的logo,进一步提升用户对产品的信任度 网站整体效果，请关注我们官网的最新上线栏目查看！

2015年07月31日

外贸机械类企业网站设计小结

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 4:19 下午

机械类的企业站以前也有做过，不过机械这个行业毕竟也比较大，涉及到地类目也比较多，比如说有烘干机、风幕机、印刷机等，本次的客户主要产品是包装设备，主要产品有半自动及全自动封罐机、贴标机等。 通过沟通交流，客户最开始没有提任何建议和要求， 客户 16:29:23 我想我不给你任何的建议，因为以前都是这样，我说出我的意图后，基本出来后我看到都没有什么创意，因为都是按我的思维模式去做了。我想你先做，然后过程中可以让我知道你的想法 我就根据客户的产品属性并结合他原有的ＬＯＧＯ做出了第一个版面，不过这个版面没有得到客户认可，要求做一些调整 客户 17:40:16 我是这样想的 客户 [...]

网站下拉顶部固定不动一直悬浮在最上面

Filed under: 英语网站设计 — 标签：, — lifengwu @ 3:57 下午

在网站内容比较多的时候，通常情况下如果要再回到顶部，就需要动用鼠标直接滚动到最上面，这样对用户来说并不是十分方便，尤其是在网站内容比较多的时候，这个时候很多人都会想到网站下拉的时候顶部固定不动这个效果，那要怎么实现呢 首先这必须要有JQuery的配合才会有效果，因此首先我们需要引入JQuery库，下面我们以1.7.2的jquery版本为例： <script src=”js/jquery-1.7.2.min.js”></script> 其次还需要引入这样一段JS代码： 其中红圈部分是可以要据实际需要来做修改的，我们想让哪部分内容一直浮动固定，就填写对应的元素ＩＤ就可以了，可以只是导航，也可以整个网站头部的内容，本例中是让整个头部的内容都固定浮动的 正常状态，滚动条在最顶端的时候： 下拉到网页中间部分之后的状态： 我们发现头部一直是在最上方浮动的，方便用户快速切换到自己想要的目录，这是目前我使用的方法 如果你有更好的方法，欢迎交流！

油画类购物站设计分享

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 3:24 下午

第一次接触到油画类的外贸购物站，不过客户的要求比较明确，大到风格、布局，小到版块名称，客户都已经确定好了，因此做起来也省了不少的时间 和客户沟通的部分聊天记录： 布局结构就跟这个差不多 凯博油画 0616 10:33:32 不过我要在幻灯片下面放一段介绍自己网站文字 凯博油画 0616 10:34:02 然后再下面是卖的最好产品，也就是best seller 凯博油画 0616 10:36:47 http://www.chinashopping888.com/bag/ b布局就按照这个来吧 [...]

最近上线的外贸农产品企业网站设计

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 3:05 下午

外贸企业网站平时接触的比较多，各行各来的都有，这次客户的主要产品农产品大蒜，客户给的要求是设计要大气，突出主要产品，因为客户网站是改版，因些ＬＯＧＯ之类的都是用原来的，根据LOGO和农产品的特性，网站整体采用了绿色，象征健康。目前只有一个英文版本，应客户要求，预留了其他小语种的导航链接，显示了较多的客户主打的产品。 头部： 考虑到网站的整体风格，banner采用了全屏的模式，即在任何尺寸的显示器下，baner都是100%布满屏幕。 banner下方是客户主打的产品版块，应客户要求，一共展示了四行，因此仅这一块就占据了不少的内容。主打产品版块部分内容： 产品版块下方是常见的公司介绍的版块，最下方是版权及其他内容，客户可自由编辑： 如果你也有外贸企业网站的建站需求，欢迎和我们联系！

2015年05月29日

支持多浏览器的html5视频播放器

Filed under: 英语网站设计 — 标签：, — lifengwu @ 10:12 上午

随着html5越来越广泛的被使用于外贸网站的建设中，已经有很多的html5播放器可以将视频轻松插入到网页之中，从而使我们的网站页面更精彩，下面我们就来看一款非常不错的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov），而且还支持回退方式，即使一些低版本的浏览器不支持HTML5播放也可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器（IE6、7、8、9, Firefox , Chrome , Opera , Safari , iOS [...]

几款不错的jQuery 社交网络分享插件

Filed under: 英语网站设计 — 标签：, — lifengwu @ 10:10 上午

近年来社交媒体越来越流行了，能够分享音乐、视频、图像甚至是其他的 docs 文档到互联网上去，这样子还能够提高页面的点击量。通常，一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台，比如说这些社交平台 上：Facebook, Google, Twitter, Pinterest等等。 这里我们选择了几款非常不错的 jQuery 社交分享插件。只需要少量的代码，就可以将它们轻松的集成到你的网站上，并且能够帮助你的访问者分享网站上的内容。 [...]

通过css3的animation 来控制元素的显示和隐藏

Filed under: 英语网站设计 — 标签：, — lifengwu @ 9:10 上午

CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性! animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）： 之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。 <button onclick=”fadeIn()”>显示</button> [...]

最近上线的外贸鞋服类购物站

Filed under: 英语网站设计 — 标签：, — lifengwu @ 7:53 上午

外贸鞋服类的购物站我们建的比较多，应客户要求，网站采用清新风格，首页有比较多的广告图的位置和较多的产品展示.　整个头部比较简单，没有采用常用的左右结构，ＬＯＧＯ没有像通常的网站那样放在网站左侧，而是作为一个独立版块居中显示。导航和搜索共用一个版块分列左右，整个网站的字体没有采用通用的Arial,而是采用了特殊字体UbuntuR和整个网站的风格协调！ 头部下面是图片轮换版块和关于网店的一些介绍和推荐的产品分类，产品分类没有以纯文字形式展现，而是以图片+文字的形式展示的。 推荐的产品分类版块 首页的产品内容展示版块，考虑到产品特征，图片尺寸都设置为比较修长的风格 底部采用的是通用的风格，商城帮助中心和版权信息！

2015年04月30日

外贸机械密封产品类企业网站设计

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 12:09 下午

机械密封类产品外贸网站并不是第一次接触，此次这个外贸站客户是昆山的，由于客户的LOGO已经确定，所以网站最终的主色调只能根据LOGO的颜色来进行搭配！LOGO是以蓝绿为主，所以网站的主色调也是这两个颜色为主，头部内容比较简单，LOGO、社交网站链接、导航三块内容。 中间除了有轮换Banner外，还有hot products、新闻、公司简介和下载版块简介信息，而且网站的搜索版块没有像通常的网站一样放在头部，而是放在了热销产品的下方。 自动滚动的热销产品版块： 产品搜索版块： 新闻、公司简介和下载简介版块 底部采用了蓝色的底色和主色蓝色呼应，除了很多网站通常的版权信息之外还增加产品分类信息的展示版和联系我们版块，方便浏览者快速浏览各个不同分类的产品。 网站整体风格比较简洁！

简洁型外贸购物网站设计

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 11:16 上午

外贸购物网站设计的时候风格比较多样，有的客户要求简洁型的，有的要求展示较多的内容，还有的要求综合考虑，而且不同类型的产品，风格也不尽相同，这时候就必须结合产品自身还有客户的要求综合考虑，以达到理想的效果！ 此次的这个购物网站产品以鞋子和衣服为主，应客户要求采用了比较简洁的风格 头部： 包含了购物站常有的登录、注册链接，产品搜索版块以及购物车，其中应客户要求还有货币切换这一功能！ 中间是一个大的banner展示图切换，用以展示最新闻热产品广告图和最新产品促销广告图！ 广告图下方是文字介绍信息，介绍产品和公司相关的情况，其中可以在里面插入一些和产品相关的关键词，对google 优化也是有好处的 文字下方的产品展示应客户要求图片展示的比较小，但是产品的展示数量比较多，避免了页面过长的情况出现！ 底部有一个导航的位置，方便客户在滑动到底部以后也能快速浏览其他想要浏览的信息，还有就是版权信息和一个自由编辑内容的版块，可以是google优化的关键词，也可以是其他信息，最终是要对网站优化有好处！

CSS3 Auto值的Transition Bug解决方案

Filed under: 英语网站设计 — 标签：, — lifengwu @ 10:00 上午

在一个外贸购物网站的制作过程中，遇到了Auto值的Transition Bug问题，各种搜索尝试之后得到解决方案 当我们需要给width、height等值设置Transition（过渡）时，如果我们的起始状态（或结束状态）为auto时，Transition就会失效。 由于二级菜单数量不定，因此ul.sub高度不定，我们需要为其赋予auto值(即根据内容高度自由扩展)，这时的Transition（过渡）就不灵了。 hover状态会起效，但是Transition失灵。 该怎么解决呢？这时我们需要尽可能的绕过auto值，可以通过使用max-height绕过height:auto值。当然，width可以使用max-width。 即 首先我们需要确保max-height的值超过所有项中的最大值，也就是说一定要罩得住。 其实这里的transiton是从0到200px之间过渡，需要赋予合适的过渡持续时间、合理的max-height值以取得最佳的效果，可以根据实际情况来设定不同的值！ 如果有更好的方法，欢迎交流！

最近上线的简洁型外贸钢结构企业网站

Filed under: 英语网站设计 — 标签：, — lifengwu @ 8:35 上午

我们公司设计制作的外贸钢铁类的企业网站比较多，涉及钢材、铝制品、脚手架、管材等钢铁类行业，因为各行业行业特点不一样，所以不同的行业风格也不一样，而这个钢结构的网站后期还有google优化需求，所以在前期设计的时候也要考虑这些因素！ 应客户要求，整个网站采用了蓝色色调，头部是常有的LOGO、搜索、导航等版块 其中背景有一个平铺的灰色底纹！ 中间部分是一个轮换的banner图片用以展示公司的形象或者产品图片，考虑到客户体，首页也有一个产品展示版块！ 考虑到后期的google优化，首页有新闻版块，此外还有关于我们和联系我们版块方便浏览者快速了解公司的情况 底部采用蓝色的底色和头部相呼应，整个网站风格比较简洁，如果你有外贸网站建设或者google优化方面的需求，可以随时跟我们联系咨询！

2015年03月31日

通过CSS3制作网站面包屑导航效果

Filed under: 英语网站设计 — 标签：, — lifengwu @ 7:39 上午

面包屑导航对我们来说并不陌生，能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面，在没有了解CSS3以前，一看到这个效果我们肯定认为这个要通过PS做成图片后才能实现这种效果，但是这需要做多张图片才能实现这种效果，下面我们来看看能过CSS3如何来实现这个效果： Html源码： <div id=”mbmenu”> <ul> <li><a href=””>Step1</a></li> <li><a href=””>Step2</a></li> <li><a [...]

CSS3 Media Queries在常用设备（iphone、ipad等）的设置方法

Filed under: 英语网站设计 — 标签： — lifengwu @ 7:14 上午

CSS3 中的 Media Queries 对我们来说并不陌生，在网站需要自适应各种尺寸屏幕的时候我们会经常用到，根据不同的屏幕尺寸调用相对应的样式表。功能是非常强大的，它可以让我们定制不同的分辨率和设备，并在不改变内容的情况下，制作的网页在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。下面我们来看看常用移动设备的CSS3 Media Queries iPad Media Queries [...]

多语言风幕机类外贸网站设计制作

Filed under: 英语网站设计 — 标签：, — lifengwu @ 7:00 上午

因为不同行业针对的客户群体的不同，很多外贸类网站不单单是针对英语类的国家，像西班牙语、阿拉伯语、法语、俄语这些国家的客户群也是比较多的，因为不同的语言国家的习惯不一样，因为网站在制作过程中有需要对不同的语言做一些处理，比如最常见的，多数国家的文字阅读习惯都是从左往右，但是阿拉伯语国家的阅读是从右往左的，这就需要我们在针对阿拉伯语的制作过程中要特别注意这一些，要符合当地人的习惯！ 这个网站在制作过程中有些小波折，因为客户原来有自己的网站，所以对新闻设计要求跟原来的网站结构上比较类似，因为起初客户对这个要求不是很明确，所以导致走了不少弯路，好在后来明白了这一点，首页初稿也通过了！ 最终效果图: 首页展示的内容比较多，除了我们常见的about us、products、new版块外，客户还要求展示了产品分类、公司的一些认证信息，其中产品相关的信息占了较大的比重，产品分类除了文字外还需要一张图片，新闻也是以图文并茂的形式展现的，客户体验还是很不错的！ 网站制作过程中，和客户沟通确实是非常重要的一步！

最新上线的木门外贸企业站

Filed under: 英语网站设计 — 标签：, , — lifengwu @ 6:39 上午

外贸企业站是我们公司经常会做的，而木制品类的，以前也做过木地板类、厨柜板材类的外贸企业站，企业站多数是以展示型为主，有的客户要求首页比较简洁的，有的客户则要求首页能展示比较多的公司、产品信息，这个都是根据不同的客户需要来制作的。 我们通常做的网站布局都是以上中下结构为主，左右结构的虽然也有，但是比较少，这个客户就是要求左右布局的，对我来说也算是一个新的尝试，因为客户的产品主打绿色、环保，所以最初设计的时候是能深绿色为主的。左侧是网站的LOGO、导航信息，右侧有关于我们和产品模块，考虑到后期客户可能会有google seo 需求，所以还有一个新闻版块。 初期效果图： 后期经过和客户的进一步沟通，首页主色和版块都进行了调整，效果： 页面以深灰色为主，以一个大的图片作为背景，总体以简洁为主。 如果你也有外贸企业网站建设、google优化方面的需求，欢迎和我们联系！

2015年02月27日

三步教您如何在网站中加入Find us on Facebook按钮

Filed under: 英语网站设计 — 标签：, — limeng @ 4:08 上午

“Find us on Facebook”按钮可以促进一个Facebook页面可能保持与朋友和客户的关系更密切。 通过添加“Find us on Facebook”按钮，你会吸引更多的粉丝，让公司产品和服务等得到更好的推广，或者至少得到关注。 如何添加Facebook的按钮呢？三步教您如何在网站中加入Find us [...]

如何给select标签的option内容加上超链接

Filed under: 英语网站设计 — 标签：, — limeng @ 3:01 上午

select是下拉列表菜单，option是里面每个项目的值，给select标签的option内容加上超链接，也就是当选择某个option内容的内容时，能跳转到该页面，如何给select标签的option内容加上超链接？这是有多种方法可以实现了，我只介绍一种最简单，方便的方法，直接根据onchange属性使之跳转。 <select> <option value=””>&mdash; Primary Nav &mdash;</option> <option value=” ” [...]

Older Posts »