网站要月底上线，无奈-捉刀上阵。

客串了四五天美工。

总算把没有图层的效果图转化成html。

毕竟不是专门吃这碗饭的。中途遇到几个问题困惑了很久？

1：原来图片处理软件用的是phpotoShop，那么Fireworks下面的png源文件有没有图层这个概念呢？还是当时美工留下这张图时就没有用图层。

2：id ,class的命名是件头疼的问题。结果整个首页搞下来，通用性的使用了英文命名，专门的一个区域定制的css用了拼音。感觉还是很乱，有没有相对规范点的命令格式？网上找了下，还是无解。另外，习惯于用驼峰命名法，可是据说这种不符合css3.0规范，真要区分要用破折号才行。

3：也是烦了我一个多小时的问题。ie6下面，html使用utf-8格式，css 采用ansi格式。当css中使用了中文后。ie6下面整个网页文档显示不正常，而ie7,ff(firefox),chomre下面都是显示正常。。。一气之下，全部采用了utf-8 without bom格式。爷爷的。

4:链接打开方式：

国内网站设计流行在新窗口打开链接，而国外则是在原有窗口上进行打开，这点从google中文和google 英文站点打开网站的方式就可以知道。有人说这是因为：国内的网速较慢，人们只有打开多个网页慢慢等。可是从我自己的使用体验来看，网速是没有问题的，我在打开英文站点时都会让其在原窗口打开，即使要等待；而在浏览中文资料时，却习惯性新窗口打开。这并不是网速的问题，我在国内访问国外站点的速度肯定比国内慢。

我觉得的是

1)：整个网站布局：中文的站点目前总让人找不到资料在哪里，即UED，或者说是用户体验没做好；

2)：内容有效性：中文的采集站点太多了，只有多看几个网站才能得到有用的信息。或者说：中文的资料没有灵魂，人去亦去。当然，这个问题最高可以扯到政治高度。

3)：网站管理员：总觉得原窗口转换的话用户就是已经离开了。

5：css hacker…

最火微软的ie了，非要搞得特立独行。firefox下面有firebug…ie是否有类似工具呢。。。现在调试css都是先搞定firefox,再css hacker ie6,ie7的。嘿嘿，当不成hacker,就当css hacker吧。。。

区分ie6,ie7,firefox的css hacker写法。

height: 10 em; 正常的

*height: 10 em;针对ie6的

height: 10 em !important;针对firefox的

*height: 10 em !important;针对ie7的。

原因在于ff识别!important.ie6,ie7识别*,ie7又额外识别!important…但是在此基础上，优化级是不一样的，所以我们可以通过上述方式实现针对不同浏览器的表现。

说错了，其实是针对不同浏览器实现同一种表现:

因为相同的css有时在不同浏览器上面表现出来的效果是不一样的。其中最主要的是border，即边框的问题。 有些浏览器把border和padding,margin相加，有些则是算是dom的height里面。由此就产生了位移。

.

上次是将html页转成druapl的主题，有感于从别人手上拿到的html文件命名的繁乱。这次是我写好html交给别人写成cms，不知道技术部的人员会是怎么样的表情。不过相信他们：毕竟，干这些我是业余的，他们才是“砖家”。

相关日志

• 网站转移记1 (1)
• 我不认输 (5)
• 忙乱 (0)
• 归去，也无风雨也无晴 (1)
• 小结 (0)

相册截图

目标达成效果就是点击C区域使A区域的内容变换，这个功能直接jquery-flew的插件直接可以实现。

而B区域随着点击的移动，尝试着去修改flew插件并没有成功，无奈之下只能另启用一个js，接着引用click event来实现移动的效果。

再加上C的鼠标移动、点击，以及布局的调整，基本上这个东西算是完工了

Demo如下：

http://show.dengruo.com/projects/web/20091006/