今天支付宝UED团队给大家分享一个好玩的东东,那就是由我们的鸽子同学做的点亮网页的firefox插件.

———————————————下面是说明——————————————————

*安装前,请确认您已安装Firebug插件,获取Firebug请访问:http://getfirebug.com/

目前功能:

  1. 开启网页编辑模式,随意编辑任意网页;与Fiddler一起使用,快速调试线上网页;HTML代码快速生成;
  2. 刷新CSS,DOM不刷新;禁用CSS样式;
  3. CSS Sprites位置快速设定;
  4. 保持登录状态,Session不过期。
  5. 导出任意节点为PNG图片;

下载:

本地下载(Firefox直接安装) 1.7版new
Mozilla官方介绍页面 1.6版

目的:

  1. 以任意网页为模板,快速制作DEMO——浏览器就是网页编辑器;
  2. 与Fiddler配合,快速调试线上网页;
  3. 保持网站Session,减少登录操作次数;
  4. 快速设置CSS Sprites的位置,鼠标拖移即可得到位置;
  5. 修改了CSS,无需刷新整页,刷新CSS即可;
  6. 此扩展完全使用JS开发,并使用了CSS3、HTML5等技术,方便移植到Chrome或Safari下;

图示:


拉霸图1

前言:其实这篇文章早就在酝酿中了,但近期忙于新的工作流程及日常发布,这么晚才发了出来。只写了大概思路,算是对这一作品的总结。大家多多拍砖,有兴趣的同学,可以一起交流。
E-mail:leapoct@gmail.com

公司周年活动项目需要前端技术人员参与,我有幸加入。期间需要制作拉霸,现将心得总结如下,以做讨论、研究之用。

一、素材的配置规划

页面中需要嵌入3个拉霸,每个拉霸中的图片不同,对应的奖品信息不同,不用说了,xml上!!!

More »

最近在内部讨论关于”完美三栏”的话题,看到一篇”In Search of the Holy Grail“,相当的好.故此翻译之.

In Search of the Holy Grail


很抱歉我没有将这篇文章命名.我不是想夸大他的重要性或是轻视其他的Holy Grails.但是确实是这么称呼,我们都明白它的含义.

三栏,一个是固定宽度的导航栏,另一个是GOOGLE广告,或是Filckr图片展示,就像Fancy的松露巧克力一样,和一个重要的柔滑的夹心。在这个博客流行的黄金年代它是相当适用的,加之相当大的实现难度,理所应当的获取了”圣杯”的名称.

有很多文章是讨论关于”圣杯”的,也有很多很好的模板可以使用。但是,所有的方案都是以牺牲以下特性为代价的:合理的内容顺序宽度自适应合理的标签。这三者往往是这难以达到合理的布局中要折中的元素

在最近的一个项目中我终于找到了传说中的圣杯。我在不会改变您的代码和灵活性的前提下尽可能的描述他。他会是:

  • 一个自适应适应的中心和固定宽度的侧边栏
  • 允许中间的内容先于其他出现在代码中
  • 允许任何一栏都是最高的高度
  • 只需要额外的一个DIV标签
  • 非常的简单的CSS代码和很少很少的HACK 补丁


More »

近期支付宝的系统邮件进行了一次改版,在这次改版的过程中,我们遇到了很多在网页中显示正常的html邮件在邮箱中显示异常的问题,下面我们把遇到的问题和一些常用的代码书写规则和大家分享:

共性问题:(许多邮箱都会出现的问题)

1. 字体大小会发生变化,排版出现异常:

解决方法:使用table来排版,每个部分的样式用内联样式写法style=”…” ,例如:

1
2
3
4
5
<td style=” font-size:12px; color:#000000;”>
    <a href=”” target=”_blank” style=color:#FFFFFF;”>
        XXXX
    </a>
</td>

这 种写法使样式能准确的作用到每个html元素,防止部分web客户端过滤全局样式或者因同名样式引起的问题。其实这是每个edm制作方法中都会提到的问 题,只是刚开始做edm的人大多都有偷懒的心态,事实证明这个懒偷不得,就算是用id选择器添加样式的写法也会被邮箱忽略。

2. 链接显示颜色被改变:

这 个问题和上一个问题有一定关联。一些邮箱(如sohu和gmail)会将链接定义成特定的颜色,若使用内联样式控制颜色,又会导致在其它邮箱中悬浮状态的 链接不能变色。为了保证链接颜色显示正常,又能让用户的鼠标移过时产生变化,我们最后在模板中采用了变化下划线的方法。

3. 图片显示:

图片必须设定高宽,关键图片alt=”…” 属性要写得很清楚,不要使用背景图片。

写alt属性是让浏览器在图片未被显示前提示图片内容。不使用背景图片是防止部分web邮箱和客户端对背景图片进行过滤,例如Qq邮箱中的背景图片会随窗口的大小变化而产生移动,而outlook2007干脆就过滤了背景图片。

个性问题:(个别邮箱遇到的问题)

1. TOM邮箱排版问题:

TOM邮箱默认<span>标签是另起一行,在代码中尽量不要使用span标签(如改变字体颜色),使用其他标签替代,修改后的“小提醒”部分的代码写法:

1
<strong style=”font-weight:normal;”>XXX</strong>

2. Outlook2007:没有背景图片、贫乏的背景颜色、不支持CSS的float或 position ;

原因:Outlook 2007已经不再使用IE来渲染HTML格式E-mail,改而使用Word2007引擎,以期提高邮件的安全性、增强渲染的统一性。

注意css样式中的line-height属性在outlook2007中会导致拼合的图片存在间隙,因此需要确保该属性只影响文字区域。

此外,设计师如何在测试邮件在各个邮箱中的效果?在这里我们推荐用163邮箱进行邮件测试(非常感谢国际站的同学的提供这个方法):

方法:注册163邮箱;选择“写信”;在文字样式栏上点击“全部功能”;在弹出的栏目中选最后一个“<>”即可发送html代码;

第一步:

第二步:

最后,非常感谢集团其它公司以及许多同行给予我们的帮助,在修改邮件模板的过程中,我们从这里也得到很多帮助:

口碑UED(大米):http://ued.koubei.com/?p=239

其它链接:http://www.inpeck.com/blog/2008/04/30/suggestions-of-email-document/

附:补充资料(感谢伯约的补充)

关于Outlook2007:

因为Outlook2007用的是Word2007来检测HTML邮件中的标签元素的,由于Word2007不支持以下CSS属性,所以会有一系列问题

background-attachment; background-image; background-position; background-repeat;

clear; display; float; list-style-image; list-style-position

以下的链接中对outlook2007(word2007)支持的HTML和CSS作了详细说明:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2):

http://msdn2.microsoft.com/en-us/library/aa338201.aspx

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2):

http://msdn2.microsoft.com/en-us/library/aa338200.aspx

2007 Office System Tool: Outlook HTML and CSS Validator: 点此查看