QQ 1640076782

2017年03月17日

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

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

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

2015年07月31日

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

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

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

2015年01月30日

网站中字体和字体大小的相关说明

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

网站中字体和字体的大小会直接影响整个网站的美观程度以及用户体验，有时候对网站优化都会起到一定的影响，所以做设计时会极为重视。 我们知道，现在字体种类繁多，英文的，简体的，繁体的等等，但是我们在网站上用到的其实还是普遍的那几种。 第一，在中文站中 在中文站中，我们一般正文部分都使用的是宋体，12号字体，而需醒目的标题等部分使用的是微软雅黑。这是为什么呢？ 在WindowsXP中文版操作系统中，系统的默认字体一般为宋体或是新宋体，每个用户的电脑上面所装的字体不同，如果选用比较特殊的字体，而那些没有装这些特殊字体的用户电脑上，仍然会以宋体的形式显示，所以为了广大的用户，我们一般都会选用宋体或是微软雅黑。字体如下图 大标题选用的是微软雅黑字体，下面的是宋体 第二，英文站中 英文字体可选的范围比较广，一般的用户都装了这些字体，英文站中最常见字体是Arial，其次是ComicSans，这种字体类似人的笔记，是有曲线勾画出来的 网站中可能也需要比较美观，特殊的字体，我们一般都会做在图片上面，例如banner图，但是如果网站中图片太多，一个是影响网站打开速度，同时图片也不如文字易优化，所以不建议多使用。 那么在网站中我们一般使用多大的字体呢？ [...]

2014年12月31日

jquery 实现不错的自适应导航

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

随着智能设备的普及，移动网络的发展，手机网民已经越来越多，为了给手机网民更好的浏览体验，越来越多的网站能够自适应手机屏幕，而导航是每个网站都必不可少的，清晰、明了的网站导航能够让浏览者快速找到他们想要的内容，但由于手机屏幕有限，所以留给导航的位置也就不能太多，如何让导航既清晰又不至于占用太多位置，下面我们来看看通过jquery 实现的自适应导航： 首先我们需要引入jquery.min.js，此外还需要 <script type=”text/javascript” src=”js/pgwmenu.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(‘.pgwMenu’).pgwMenu(); [...]

css实现背景图片自适应大小

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

在外贸网站设计过程中，为了网站的美观或者部分产品的需要，我们会为网站添加一个背景，有时候是小图片平铺，有时候是一整张大的背景图片，由于浏览器尺寸、分辨率的原因，如果背景是一张大图，那么在浏览器尺寸、分辨率不同的情况一下，呈现的效果也会不一样，为了保证好的效果，我们需要让背景图片自适应浏览器窗口大小，即不论浏览器尺寸、分辨率的大小如何，图 片都能占满整个屏幕。下面我们来看看代码： body {background:url(../xxx.jpg);filter:”progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’)”; -moz-background-size:100% 100%;background-size:100% 100%; } 正常状态效果： 浏览器窗口缩小后： [...]

2014年11月28日

简洁版女鞋类外贸购物网站设计

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

外贸购物网站做的比较多，鞋子类的购物网站以前也接触过，只不过按照客户的要求，需要比较简洁的风格，所以首页显示的内容并不多，结构上依然是比较常用的上中下结构，头部是注册、登录、个人中心、搜索、logo、导航版块，中间没用用常用的通栏的Banner,面是分为了左右两个部分，左侧是一个产品的图片切换，右侧显示了一部分产品。在banner下方设计有两个广告位和一个自主编辑文字的地方。底部有关于网站的一些介绍，还有外贸购物网站都有的帮助中心和版权部分。 效果： banner的切换效果没有用常用的过渡效果，而是左侧先出来大图，右侧的小图然后再显示出来，有一些动感。网站整体以深灰色为主,多数地方以线条分割，总体上简洁、大方，其他像服装类的购物网站也可采用这种风格！

jQuery 控制内容部分显示与隐藏

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

在设计制作外贸网站过程中，有时候需要将某一个板块的内容不全部显示，只显示一部分，这个我们首先想到的是通过程序来截取，这个当然是可以的，不过如果想要显示全部的内容就需要跳转到一个新页面，下面我们来看看通过jQuery实现内容灵活的显示与隐藏！ 比如默认情况下我们只需要显示七条数据，当点击显示全部的时候才会全部显示出来，然后也可以灵活隐藏。 默认只显示七个品牌 ，点击显示全部的时候才会把所有的品牌都显示出来！ 显示全部以后也可以灵活返回默认状态！ 在有些外贸购物网站中也可能会用到： 默认显示6条数据，超过6条自动隐藏！ 在点击全部显示的时候才会显示所有的内容！ 实现这个效果，jquery库当然是必不可少的，jquery.js可以直接在网上下载，此外我们还用到一个js <script [...]

2014年10月31日

自适应网页设计中应该注意的细节问题

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

元素宽度不要使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这个很重要，也就是说CSS代码不能指定像素宽度：width:xxx px; 只能设定百分比宽度：　width: xx%; 或者　　width:auto; 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）,这里说一下，1em=16px,可根据实际需要来换算 body {font: [...]

通过CSS3 Media Queries实现网页自适应不同尺寸屏幕

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

随着智能手机的普及，多数人也不再仅仅用电脑来浏览网页、搜索东西，现在有手机，平板电脑等等。所以原来固定宽度的设计在手机、平板上浏览体验并不好，因此我们的网页需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果、提供更好的用户体验，下面我们来看看： 正常效果 比较窄的效果 最窄的效果 当屏幕分辨率大于1024px时，网页宽度将会是960px。通过Media query来检验屏幕分辨率，如果小于960px，页面宽度将会用自适应来取代固定宽度；如果小于600px，主题和边栏将会撑满屏幕并一列显示。当小于480px时，主题和左侧栏会在一栏显示 代码就不贴了，太多 在网页代码的头部，加入一行viewport元标签。 <meta name=”viewport” [...]

2014年06月30日

外贸陶瓷企业网站设计制作

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

陶瓷类的外贸网站，第一次接触到这到行业，如果是购物网站兴许还好下手一些，但是企业站就需要点儿时间了，好在客户自己的要求比较清晰，刚开始沟通就发过来一网站要求参考，别的也没多说，然后就根据参考站然后再结合自己的思路出了首页效果图，客户看过之后觉得还是参考站的结构比较好，所以结构上就以她发来的网站做参考了，但是版块在实际操作时还是有区别，因为所属行来和产品不同，所以也做了部分调整，这样反复修改了几次，首页总算是确定下来了，接下来就是内页了，原本首页确定以后内页相对来说是十分简单的，但是应客户要求，很多内页的版面都需要重新设计，而且页面比较我，所以在设计的过程中花了不少的时间。最后经过与客户的多次沟通，内页也都确定下来了。总体来说整个制作过程还是相对愉快的，客户是一个比较细心的人，所有的要求都讲得很清楚，所以也让我少走了很多弯路，非常感谢！ 第一次的效果图： 最终效果图: 更多网站案例可到onepound官网浏览！

2014年06月28日

Jquery jcarousellite.js 图片自动滚动效果

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

对于常做外贸购物网站的人来说，jcarousellite.js对我们来说并不陌生，因为在产品详细页我们会经常用到这个js来展示产品的细节图。通常情况下，如果产品的细节图过多，我们会通过鼠标左右点击来展示更多的图片，那如果要想所有的细节图都自动滚动该如何来实现呢？其实只要我们理解了jcarousellite.js的各项参数的实际含义，实现起来就相对容易了！首先我们来看看它的各项参数的作用。 参数说明： btnPrev string 上一个按钮的class名, 比如 btnPrev: “.prev” btnNext string [...]

2014年05月30日

外贸包包企业网站设计

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

第一次做包包类的外贸企业网站，刚拿到需求的时候以为是按照企业网站的风格来做，后来和客户沟通之后才清楚客户想要的效果。网站整体上是购物站的风格，但是不能下单购买，不用显示产品的价格，和多数的企业站还是有很大的区别的。这个客户的要求很明确，每个页面都有自己的要求，不过做之前都说得很清楚，所以做起来还是很顺利的！ 效果图： 网站有购物网站有的产品筛选功能，首页还是以产品展示为主，通过选项卡把客户不同分类下的展品都在首页展现出来了！

2014年04月29日

最近上线的多语种企业网站设计小结

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

前几天刚上线了一个多语种的企业网站，整个网站做起来还是挺身而出顺利的，客户给出的要求就是简单大气，看过了客户以前的几个网站之后才开如着手做。应客户的要求，网站还是用了企业网站设计过程中运用较多的蓝色做为主色调，网站的banner给了比较大的位置，而且是用了宽屏的。 Banner下面开始是显示了一行产品，后来客户要求放两排，就又做出调整了，因为网站后期要做优化，所以首页添加了一个新闻版块，用于后期网站的更新，然后就是企业站通常都要求有的公司介绍版块和联系方式版块！ 效果： 因为是多语种，所以后期每种语言都需要做一些小调整，不过这些改动都不算太大，改动稍大一点的就是阿拉伯语了，我们通常的排版习惯都是从左到右，但是阿拉伯语需要从右一左，所以这个在样式和细节方面做了较大的改动，其他总体来说还好！ 如果你有外贸企业网站建站需求，欢迎随时联系我们 QQ客服：415682727 电话：020-39907297

2014年04月28日

jQuery 实现文字弧形/扇形/圆形排列

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

在网站设计过程中，有时会将文字呈弧形/扇形/圆形排列，这个时候我们用的最多的就是PS里面文字变形工具，一串文字可能变成弧形/扇形/圆形排列等形状，也可以变成波浪形等，现在我们来看看直接通过jQuery将网页里面的文字变成不同的形状： 实现这样的效果，jQuery当然是必不可少的， <script src=”bjs/jquery.min.js”></script> <script src=”bjs/plugins.js”></script> <script src=”bjs/circletype.js”></script> <script> $(‘#demo1′).circleType({radius: [...]

2014年04月24日

自适应高度的li浮动并排错位的解决方法

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

几个并排的li高度不固定，如果其中一个li高度与其他不一致，会出现错位现象，如下图： 这个时候该如何解决呢，是一个头疼的问题，通常可以在要换行时候加一个清除浮动可以解决，但是这样培加了太多代码，其实通过CSS也可以解决这个问题的，下面来看看方法。 通常元素并排，我们会用到浮动float,这里我们不再使用浮动，我们用display:inline-block;这个css属性也可以达到同样的效果，不过仅仅是这个也是不可以的，我们还必须给外层元素固定宽度，来看一下具体代码： <div id=”btinfo”> <ul> <li><span id=”btit”>ご注文について</span> <span id=”btnr”>ご注文はヤマダモールOSHAREYAより365日24時間受け付けております。 [...]

2014年03月31日

纯CSS 实现元素底部有阴影效果

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

图片底部有阴影效果，直接通过CSS实现，不用再借助背景图片 效果： 源码： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” [...]

如何将ttc格式字体转换成ttf格式

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

最近在做一网站的时候客户要求用一种并不常用用的字体，但在网上下载的时候只找到了ttc格式的，我们知道ttc格式的字体是不能在PC上使用的，因此必须把ttc格式的字体转换成ttf格式的才可以。 那究竟该如何转换呢，此时我们需要借助一附件，下载该附件 附件使用方法： a 将附件下载至电脑上，并解压，例如解压至e:\ttcbttf； b 将想要的TTC文件（例如是mingliu.ttc）从\Windows\fonts下拷贝到D:\ttcbttf； c 按“Win键+R键”，弹出DOS窗口，在内部输入“e:\ ttcbttf [...]

2014年02月28日

繁体台湾购物网站设计小结

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

前段时间做了一个繁体的购物网站，事前跟客户交流了一下，客户自己就发了两个参考站，然后颜色是客户自己定的深红色，其他也没说什么，我就按照自己经验结全客户的一些要求做了一版权： 头部类似于大部分的中文购物商城,然后下面又设计了了一个今日特价的版块,接着下面就展示了一些大类的产品展示,最下面放置的是一些帮助信息和版权之类的。 效果： 给客户看过之后，客户又发过来一个参考网站，要我按照这个来做，然后又提出了一些其他要求。在重新调整过后最终的定稿方案： 总体来说繁体网站的设计和中文网站的设计没什么大的区别，但是还是要考虑不同文化之间的区别。 如果你有外贸企业网站建站需求，欢迎随时联系我们 QQ客服：415682727 电话：020-39907297

2014年02月27日

.dwt模板文件修改以后，引用了模板的文件如何更新

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

前两天公司原来一老客户的网站内容需要修改，按照通常的做法是直接修改就好了，但是这个网站由于做得时个比较久，全部是静态页面，所以修改起来相对来说就要麻烦很多。而且这个网站还用到了DW里面的.dwt 模板文件，有很多人对这个可能不太熟悉，其实这个就是一个公用文件，很多页面都可以调用。可以理解为我们通常所用的include文件。 在找到网站所用的.dwt文件以后，就按照客户的要求做了修改，但是上传上去以后，网站内容没有任何变化。这才想到可能是方法出了问题，查询了一些资料终于解决了 方法： 1、把所有调用了.dwt模板文件的页面和模板文件本身都要下载到本地一个文件夹里面。 2、在DW里面新建一个站点。（站点新建方法在这里就不多说了） 3、按要求修改.dwt 模板文件，并保存。 4、在保存时，会自动弹出一个对话框 这时候选择更新，待所有文件更新完毕以后，关才对话框 [...]

2014年01月26日

通过CSS 实现特殊效果的精美边框(一)

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

说到CSS的边框效果，我们通常所用的无外乎实线(solid)、虚线(dashed)、点线(dotted)等，这几个算是用到比较多的，如果想要圆角的、阴影等特殊效果，我们首先想到的可能是通过PS做成背景图片来实现，不过现在阴影和圆角也都可以通过CSS来实现。其实不仅仅是圆角，还有很多其他不错的效果也都可以通过CSS来实现。下面我们就来看一个通过CSS实现的卷角阴影效果: html源码： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> [...]

Older Posts »