扬眉的博客 http://www.pz138.cn/blog 专注于Web前端技术与标准化!积累与分享中...... Wed, 04 Aug 2010 06:01:29 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 第十期的WEB标准广州交流会 http://www.pz138.cn/blog/?p=159 http://www.pz138.cn/blog/?p=159#comments Wed, 04 Aug 2010 06:01:29 +0000 admin http://www.pz138.cn/blog/?p=159 2010-07-30，一个风和日丽的周日下午，我们在网易举行了第十期的WEB标准交流会。这期有35人参加了交流，这期的主题是前端工程师应该如何学习javascript,雨木林风的阿斌和阿甘分别分享了他们的知识经验“WEB设计需要工业化”，“Javascript学习入门（思想篇）”，谢谢他们从东莞那边赶过来参加，初次过来就带来了这么好的分享。交流会中还有一个令人惊喜就是振之的出现，带来了他对前端工作的一些看法和经验。印象最深的就是他说的一句话，在学习中，把自己当成“专家”，用写教程的方法去学习和提高。站在高处去俯视下面，用自己所学的知识转去帮助别人。在交流会开始林毅提到的样式模块命名规范，我觉得他只是提出其中一个案例给我们去参考，每个团队可以根据自己的需求再去自定。我想能够分享出来的，精神都是可嘉的。一个团队，在做项目时，样式的命名是否规范，代码是否整洁，关系到程序员是否方便加入程序，关系到以后工作维护的方便，还有一点就是对于SEO优化的帮助。我想CSS命名规范是有扩展性的，不能定死。结构可以固死，但样式却是可变。

]]> http://www.pz138.cn/blog/?feed=rss2&p=159 0 图片自适应屏幕分辨率大小 http://www.pz138.cn/blog/?p=152 http://www.pz138.cn/blog/?p=152#comments Tue, 13 Jul 2010 03:18:45 +0000 admin http://www.pz138.cn/blog/?p=152 今天在网上看到这篇文章，之前在做立白办公管理系统时也曾遇到这个图片缩放问题，特转载过来，原文章http://uecss.com/image-adaptive-screen-resolution-size-of-the-2.html

我们在切图的时候常会遇到这样一个问题：Design of the head常是一个通栏很漂亮的一个图片，它的宽度超过了1024的屏幕分辨率，虽然我们现在用的到的都是大于1024的分辨率，但也不排除用1024或是比1024更小的分辨率。那这个时候这个非常漂亮的图片怎么办呢这个时候我们就可以使用图片随着分辨率的大小自动调整的方法来解决这个问题：

这里我们需要用到一个JS文件,点击下载这个JS:

http://cid-8127d59343265667.skydrive.live.com/self.aspx/NamipanPublic/2010-01-25/jquery.js

还有必须前面申明 :<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
不然在ie下面就是没用的 。这些都准备好之后，在img的下面加上这样一段代码：

在图片上引用ID:img src=”" id=”banner” alt=”" 注：这个ID要一至，不然会没有效果。这时我们会看到图片会自适应分辨率的大小图片会被自动缩放，但是可能会和Design有一些出入。我们可以采用第二种方法： 图片的变化只限于分辨率小于1300或是1024的情况下变化，那么我们的那段代码就要这样去写:

这样我们就只会看到当分辨率小于1024的时候才会看到图片自动缩放了。

]]> http://www.pz138.cn/blog/?feed=rss2&p=152 0 第九期的广州WEB标准交流会 http://www.pz138.cn/blog/?p=145 http://www.pz138.cn/blog/?p=145#comments Tue, 13 Jul 2010 02:54:15 +0000 admin http://www.pz138.cn/blog/?p=145 2010月6月26日，第九期的广州WEB交流会在广州天河动易网络公司举行，尽管那天下午微风习习，大雨倾盆，也阻止我们20多位同学的热情参与，也深深感受到动易公司的人对于我们这帮与会同学款款相待。

这期的主题是前端工程师的知识收集与管理：包括个人的和团队的，从工具、流程到平台！动易的怪兽在会中分享了他自己在个人知识的收集与管理，对于知识的定义、来源，为什么要进行知识管理、知识分享与利用等，在知识管理工具方面，他同我们分享了Google Reader、OneNote、个人博客、为知、Evernote，我印象最深的是Google Reader这个工具，通过他的操作演示，使我们更加认识到这个工具在知识管理方面带来的方便性。

与自己之前的知识管理方法相比较，感觉自己的方法仍是比较传统，在每做一个项目都有一个当时用到的效果与知识点参考的文件夹。其它的都是在电脑中归类保存，后刻盘，在网络上，比较少分享出去，一般都是内部同事分享的多。现在最缺的就是没有足够的时间去整理当时遇到的每一个知识点，让它成档。是时候应该学会用工具去管理自己的知识了。有了知识不懂得积累与管理，技术水平也很难提高。在参加完交流会后，第一件事就是注册了Google Reader账号。还有在知识收集方面也犯过错误就是收集保存了大量技术性的文章，有时候比较少再去看第二遍。

乐于分享，真正快乐的人是自己。通过分享真正提高的人是自己。突然感悟。

]]> http://www.pz138.cn/blog/?feed=rss2&p=145 0 “面包屑导航”的来源 http://www.pz138.cn/blog/?p=142 http://www.pz138.cn/blog/?p=142#comments Wed, 07 Jul 2010 07:21:13 +0000 admin http://www.pz138.cn/blog/?p=142        很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。

      在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等月亮一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当月亮升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

       这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始，汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上，然后迅速地撒遍了全世界，变成了今天大家所熟知的“面包屑导航”。

]]> http://www.pz138.cn/blog/?feed=rss2&p=142 0 圆角CSS样式 http://www.pz138.cn/blog/?p=140 http://www.pz138.cn/blog/?p=140#comments Tue, 22 Jun 2010 02:15:16 +0000 admin http://www.pz138.cn/blog/?p=140 风前几天传了一个圆角CSS样式过来，将这个效果运用到PG CBD项目中，在用thickbox弹出窗口时，始终是直角的，测试了好久仍没法是圆角，怪事，单独访问这个文件就没事的，IE6，7，FIREFOX下都正常显示圆角，但作为弹出窗口来显示，却始终是直角的。

border-radius.htc

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>

<style type=”text/css”>
body {
 background-color: #fff;
 font: normal 11pt Trebuchet MS,Arial,sans-serif;
}

.box2 {
 background: #f8f5e7;
 width: 420px;
 height: 220px;
 margin: 0 auto 35px auto;
 padding: 30px;
 color: #fff;
 font-weight: bold;
 border: 2px solid #a14200;

 -moz-border-radius: 15px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 behavior: url(border-radius.htc);
}

.rel {
 margin: 50px 0 0 33px;
 padding: 25px;
 position: relative;
 z-index: inherit;
 zoom: 1; /* For IE6 */
}

</style>
</head>

<body>
 <div>
  <div>
   this cat is a hybrid of domestic and wild breeds :)
  </div>
 </div>
</body>
</html>

]]> http://www.pz138.cn/blog/?feed=rss2&p=140 0 滑动门效果 http://www.pz138.cn/blog/?p=138 http://www.pz138.cn/blog/?p=138#comments Tue, 22 Jun 2010 02:08:55 +0000 admin http://www.pz138.cn/blog/?p=138 昨天做了一个滑动门效果，发现点击修改后的图片，真的是要判断好，要不老是改不到自己想要的效果。
<script type=”text/javascript”>
function changeicon(divid,imgurl)
{
var bdivid = “C”+divid;
document.getElementById(“topm1″).style.backgroundImage = “url(images/smsbtn2_07.jpg)”;
document.getElementById(“topm2″).style.backgroundImage = “url(images/smsbtn_08.jpg)”;
document.getElementById(“Ctopm1″).style.display = “none”;
document.getElementById(“Ctopm2″).style.display = “none”;
document.getElementById(divid).style.backgroundImage = imgurl;
document.getElementById(bdivid).style.display = “”;
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+”.location=’”+args[i+1]+”‘”);
}
</script>
<div id=”Sms2″>
          <div id=”Smstitle”>
            <div id=”topm1″ style=”width:175px; height:28px; background:url(images/smsbtn_07.jpg) no-repeat left top;” onclick=”changeicon(‘topm1′,’url(images/smsbtn_07.jpg)’)”><img src=”images/spacer.gif” width=”175″ height=”28″ border=”0″ /></div>
            <div id=”topm2″ style=”width:174px; height:28px; background:url(images/smsbtn_08.jpg) no-repeat left top;” onclick=”changeicon(‘topm2′,’url(images/smsbtn2_08.jpg)’)”><img src=”images/spacer.gif” width=”174″ height=”28″ border=”0″ /></div>
          </div>
          <div style=”clear:both”></div>
          <!–手机查询 –>
          <div id=”Ctopm1″>
            <table width=”348″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”margin:0 auto;”>
              <tr>
                <td height=”43″ align=”center”>发送时间</td>
                <td align=”center”>发送内容</td>
                <td align=”center”>发送状态</td>
              </tr>
              <tr>
                <td align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td height=”23″ align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td height=”23″ align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td height=”23″ align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td height=”23″ align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
              <tr>
                <td height=”23″ align=”center”>05.25  10:00</td>
                <td align=”center”>41250134589</td>
                <td align=”center”>成功</td>
              </tr>
            </table>
          </div>
          <!–中奖查询 –>
          <div id=”Ctopm2″ style=”display:none;”>
            <p>恭喜您！<br />
              您已获得（小票号码4125468）护舒宝“飞往三亚等你来拿“第<u>&nbsp;&nbsp;&nbsp;&nbsp;</u>轮幸运中奖用户，敬请留意您留下的联系方式，我们将尽快与您联系兑奖事宜。</p>
          </div>
        </div>

]]> http://www.pz138.cn/blog/?feed=rss2&p=138 0 栅格化的设计有多少人能做到？ http://www.pz138.cn/blog/?p=134 http://www.pz138.cn/blog/?p=134#comments Tue, 22 Jun 2010 02:04:03 +0000 admin http://www.pz138.cn/blog/?p=134 对于之前对设计人员提出的栅格化设计，后制作人员也能按栅格化的标准去制作，一个团队中如果有自己的一个CSS框架，工作效率将会事半功倍。这样在布局中遇到相同结构的，可以利用。

]]> http://www.pz138.cn/blog/?feed=rss2&p=134 0 css的中文注释导致ie6无法读取样式 http://www.pz138.cn/blog/?p=136 http://www.pz138.cn/blog/?p=136#comments Tue, 22 Jun 2010 02:02:54 +0000 admin http://www.pz138.cn/blog/?p=136 刚才同事问我一个问题，为什么在IE6下无法读取样式的，在IE7和FIREFOX下是正常读取的，查了一下，原来是CSS的中文注释导致ie6无法读取样式，把这些注释删除或换成英文，就正常读取了。

]]> http://www.pz138.cn/blog/?feed=rss2&p=136 2 邮件EDM模板制作规范 http://www.pz138.cn/blog/?p=130 http://www.pz138.cn/blog/?p=130#comments Mon, 07 Jun 2010 02:20:02 +0000 admin http://www.pz138.cn/blog/?p=130 最近在做一些活动项目，时不时会有邮件发送页面（简称EDM）的制作，做好的页面，经过无数次的测试，总结出下面的EDM制作标准，现与大家分享下，希望对大家有帮助。

第一部分 邮件模板概括

1、邮件类型：

1) 新闻订阅；一般文字内容居多，每段文字具有相应的链接可供点击，同时加入少量图片进行点缀，模板顶部带有显著的公司logo和邮件发送内容标示，模板底部具有公司的联系方式，免责申明等栏目，邮件通常大于50K。

2) 产品订阅；一般图片内容为主，图片带有相应的链接可供点击，目的是有针对性的介绍最新的产品或活动信息，由于采用图片为主的形式，邮件大小通常在20k以内。

注：以上类型的模板制作均采用标准的html语言，并插入具有绝对地址链接的图片和链接。

 2、邮件模板显示尺寸：

考虑到现在显示器不同分辩率的问题，一般建议邮件模板的显示宽度为800px至1024px之间；模板高度在1280px左右（即用户之需要一次滚动屏幕就可浏览全部内容）。

模板最佳尺寸：显示宽度400px-800px，模板高度控制在一屏以内。 

3、标准邮件模板中需包括以下内容： 

1)  标准页眉页脚应用
必须含有邮件无法正常显示的引导入口，如下的类似文字，如：

如果无法浏览此邮件，请点击这里；

另外，最好建议用户将发件人加入联系人列表。

必须含有明显的退订链接标示（退订链接可直接由发送系统提供或链接到用户自己提供的退订链接）；

2) 其他页眉页脚应用：

表明邮件的主要目的

邮件退订

选择订阅内容

修改订阅邮箱

隐私保护说明

企业服务标准等

注：目前网民使用的主流的浏览器有：

微软IE6 / IE7 / IE8、以IE为核心的遨游/Green、Google Chrome及FireFox，使用覆盖率超过90%；经过模板制作规范的建议修改后，以上浏览器均能正常显示模板。 

第二部分 静态页面的制作 

一、内容比例

邮件模板中，图片及文字应具有平衡的比例，从门户的判断机制上来看，邮件正文中文本的比例越合理，被判断为垃圾邮件的可能性越小，尤其是网易。通常我们建议根据邮件的内容将非效果性文字都以文本的形式呈现。

二、 切图方式 

1、页面制作方式目前分为table与div两种方式

要确保邮件模板在不同的邮件客户端中显示效果保持一致，需采用table格式的切割；而div格式由于有些属性不被邮件客户端完全支持，所以建议避免使用。 

2、切割图片时，在不影响图片失真的情况下，所切割图片应尽可能的优化

图片优化后，容量减小，保证了用户打开邮件时，在最短时间内看到感兴趣的图片，提高邮件模板的阅读率；另外，当遇到页面中有动画时，可将动画导出为gif图片；对于页面中的flash动画，目前大部分邮件客户端暂不支持正常的显示。

 3、插入的图片要定义高和宽

通常图片的高和宽都使用width和height进行定义，但在qq邮箱中会清除页面里所有图片的高和宽，导致页面显示变形；所以图片的高和宽建议采用style中定义的方式，如： style=”width:xxx;height:xxx”。

 4、不使用背景图片

在outlook中，背景图片将无法显示，其他邮件客户端可正确显示背景图片。

 5、图片的地址链接

不采用map标记形式，因为map标记在outlook中无法进行正常的点击，即无法打不开该链接指向的网址。

 6、不使用word转换的html文件作为模板

由于word转换后会在html中插入大量无用代码，导致邮件出现显示错乱和易被拦截等问题。同时，建议对word文档手工转换成html网页后，加入相关图片，以更好的吸引客户眼球。 

三、CSS样式定义

 1、CSS样式的添加可分为两种方式：

1)   外部调用样式；

2)  内部调用样式；

3) HTML Tag中直接定义样式。

 2、对以上内容分别进行相关阐述

1)  外部调用样式，指在网页的<head>中写出样式表文件的名称和路径，例如：

<head>

<link href=”all.css” rel=”stylesheet”/>

</head>

2)  内部调用样式，指在页面的头部，以<style>开头，以</style>结尾的样式定义。例如：

<head>

<style>

body{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

margin:0 auto;

padding:0px;

color:#000000;

}

               </style>

         </head>

3)  HTML Tag中直接定义样式，指直接在html tag标记中写style定义。例如：

<span style=”font-family:Arial;font-size:12px;color:#6F6E6E”>文字信息</span>

第一种和第二种方式为制作网页的常用方式，但这两种方式在邮件客户端中某些定义将无法生效。第三种方式在邮件客户端中显示兼容性最高，但手工制作繁琐，所以系统集成了“网页抓取”功能，抓取功能将自动把第一种和第二种网页转换成第三种网页的样式定义模式，从而确保了模板显示的最大兼容性。

3、其他

Alt值——在主要的图片中定义Alt，标注上图片中的文字内容，在图片无法正常显示时，用户仍然可以看到图片所要传达的主题内容。

 第三部分 页面的测试

 页面制作完毕以后，需上传到web专用服务器

测试时页面抓取分为：

⑴、url抓取（url抓取是系统专为提供模板显示兼容性而设计的功能，建议使用）

⑵、html代码复制，使用代码复制要求网页中的链接或引用都使用绝对地址，否则网页中的图片将无法在邮件中正常显示；）

 第四部分 查看邮箱

 邮件模板的发送有可能发生的三种情况

1、邮件进入收件箱；

2、邮件进入垃圾箱；

3、邮件被拒收；

 出现以上情况后，建议对邮件做如下调整：

1、适当更换邮件主题；

2、删除模板中可能为国家规定的政治敏感词汇或色情、推销等词汇；

3、模板内容采用文字和图片混合排列的方式；

4、删除模板中不必要的链接，邮件中的链接不易过多，建议少于10个；

 第五部分 经验总结

 门户的规则总是不断更新，当我们无法掌握准确的规则信息时，可以通过每次发送经验中的问题，总结出解决的办法。以下是一些常见或不易发现的问题。

 问题1：

 正确写法<a href=”http://www.hyattonthebund.cn/”target=_blank>

一个<a>链接,被分硬回车分成三部分,用户往往会这样做,尤其是word用户 

问题2：

<td width=”127″><a href=”http://www.hyatt.com/hyatt/reservations/flow1/corpCheckAvailability.jsp” target=”_blank”><img src=”images/index_13.jpg” alt=”link1″ width=”165″ height=”22″ border=”0″ /></a><a href=”http://www.hyatt.com/hyatt/reservations/flow1/corpCheckAvailability.jsp” target=”_blank”>

 一个链接对应两个<a>第二个<a>没有结束,IE不会报错,但积少成多,造成邮件体积大,服务器负担变重.

 问题3：

<td width=”147″><img src=”images/index_14.jpg” alt=”link2″ width=”127″ height=”22″ border=”0″ />  </td>

Td里面只有图片,老系统会在</td>前加个空格,造成图片撑裂的问题,解决方法,在抓取模板后在代码部分手动清除空格

 问题4：

mailto 的正确写法,

<a href=”mailto:shanghai.bund@bj.allyes.com”>shanghai.bund@bj.allyes.com</a>

 问题5：

对于纯英文邮件，发送时必须使用utf-8字符集进行发送，减少因字符集问题带来的无法阅读问题。

 其他经验总结：

 1-模板制作尽量用色块,做成类似插画的效果,少用过度,切图时用gif减少容量,减轻发送负担

 2-打开模板时要检查里面的js,尽量去掉js,因为有的客户端会报错,尤其是outlook

 3 -应该尽量在dw里重做客户模板,不要用ps直接生成的html 

4-遇到图片裂痕问题,要在dw里面重新手动画table,手动添加图片解决

 5-一个<td></td>里面只能有一个img,有三个的话就容易出现上面4提到的问题,如果有三个图在一个td里面解决方法,新建一个三列一行的表格吧三个图分别放在单独的列里面

6-特殊符号●,Á,Ë,等等 用&#8226;等标准的xhtml替代

7-尽量不用背景图outlook里面显示有问题 

8-系统抓取模板的时候也会出错,尽量从代码模式中找到问题

 9-链接打开方式为_blank

 10-不用map方式制作链接 

11-css就近书写

<p style=”COLOR: #718685; FONT-FAMILY: Arial, Helvetica, >

文字文字文字文字文字文字</p> 

备注：邮件模板的制作将随着门户规则的更新而有所变动，请注意。

]]> http://www.pz138.cn/blog/?feed=rss2&p=130 0 2010年5月 – Web标准化交流会 http://www.pz138.cn/blog/?p=125 http://www.pz138.cn/blog/?p=125#comments Fri, 14 May 2010 06:56:21 +0000 admin http://www.pz138.cn/blog/?p=125 话题：分享你在开发中的经验
讨论你如何快速的定位且解决bug，如何与同事之间有效的沟通，如何分析一个项目，你也可以分享你使用的开发工具等….
时间：2010-5-29 14:00 – 18:00
报名时间：2010-5-10 至 2010-5-23 交流会邀请会在5-23日统一发出，请留意您的邮件。
报名链接：http://www.w3ctech.com/joinus/
广州地点：广州市珠江新城海月路1-48号广粤天地D2铺，Vasstu雅士度印度餐厅（临近马场路，南国花园正门斜对面路口转入后直走） | 联系人：林毅

]]> http://www.pz138.cn/blog/?feed=rss2&p=125 0