原文：http://ued.alimama.com/?p=233
CSS Sprites简介
通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。 阅读全文…
【译者的话】 网页上的小广告(banner)已经成为一种宣传推广的重要形式，但这些小广告除了版面细小外，图象的表现还受到象素较低等其它因素影响，给传统的平面设计师带来了新挑战。如何让你的小广告在混乱无章的网页中脱颖而出？本文介绍了几种解决的思路。
原文出处：www.bamagazine.com
如何在细小的空间设计出视觉效果吸此人的广告(banner)？
第一步：使用简单的照片
对付一些区域狭窄的空间需要涉及一些特别的要求，第一步，就是采用一张简单但又能传达很多信息的照片。
一般的广告总是采用整张图片加上文字配合，而网页上一个标准的小广告的尺寸是 12 0 × 90 象素，分辨率为 72dpi 。空间确实很小。你如何在这个小地方加进你想要的东西？象上图，难道你想让整个纽约市都塞进这个小空间里？那只会让这些建筑物变成一个个斑点而已。当我们面对这些小广告的版面时，并不应该只是将整张图片简单缩小——因为空间已经很小，分辨率又很低。而一般的网页上总是充斥着很多混乱的信息，将图片只是简单地缩小，那些细微的东西完全不会此起人们的注意。所以我们要思考的是：简单、醒目及简短。我们并不需要使用整张纽约市的照片才能代表纽约，我们应该要运用这个城市的一些象征符号来传达这种信息，比如：自由女神像，帝国大厦，当然，你还可以自己决定其它的东西。
我们要寻找一张具有象征意味的照片，构图要简单，颜色要醒目，角度要明显，对比要强烈，当然，最好是所有这些因素都能够在一起。
阅读全文…
首先说明下范围
- 用Javascript来开发WEB页面的动画效果
- 该思路同时考虑页面效率、SEO，如果数据大，也可以缓解后端压力。
- 这个是程序设计思路
- 还谈不上思想，只是自己实践使用过的一个方法
我们经常看到网页上有各种各样的动画，例如下图
有N条记录，需要在页面上滚动显示，并且需要循环。
我们先假设一下条件
- 这些记录都需要被搜索引擎收录
- 直接对页面元素做动画有困难（这里可能比较简单，但是困难的情况还是很多的）
- 信息需要循环显示
- 数据比较多，N条
这个时候出现问题
- 数据必须是HTML标签，不能直接写入JS
- 直接对页面元素控制，并做动画有难度。由于要循环，得拆分子元素
- 数据比较多，控制子元素会出现效率问题
第一个问题呢，我们这么做，让HTML载入，然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。
第二个问题怎么搞呢，我们在读完数据之后，再搞出一个代理层来，比如叫A层。那么A层仅仅是提供显示，JS控制这个层来做动画。每次动画的时候呢把新的数据填进去，再做动画。
第三个问题迎刃而解，控制A层就OK了。
Y方案：具体看看流程吧：（我把JS读取数据的步骤省略不说了，这个相信大家都知道怎么搞）
第一步，元素的层次结构：
A层 z-index:2;———— 隐藏 //负责动画
真层 z-index:1;———— 显示 //给爬虫看，且负责显示的当前信息
第二步动画：完成后返回第一步既可。
A层填入数据–》显示–》动画
动画结束之后，B层直接设置坐标，到标准位置
A层隐藏。
上面这样做的理由是，填数据的过程，是会造成页面抖动的，所以我们把这个过程隐藏的来完成。
更升级的问题，如果真层直接设置坐标也比较困难，怎么办？那么就再搞个B层出来
X方案：
A层 z-index:3;———— 隐藏 //负责动画
B层 z-index:2;———— 显示 //只显示当前信息
真层 z-index:1;———— 隐藏 //仅仅给爬虫看，以及读取数据用，之后不再显示
动画的时候，A填入数据–》A显示–》A动画–》B填入数据–》A隐藏
再升级下问题：如果数据实在太多，没法一次用HTML载入完成，怎么办？那么用AJAX来搞吧，具体做法和上面一样
从具体到抽象：设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层，不断的更新数据，不断的隐藏显示来造成假象，然后做动画。
注意的问题：如果每个item中，图片比较多，可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步，且比较难控制坐标的时候，那么适合用X方案。
近年来，广告已成为很多网站的主要收入来源。不久前，在线广告往往遭到访客的拒绝，广告客户也不确定它的价值和效力。今天，大多数访客期望在商业网站上看到广告，广告客户已经认识到各种在线广告的潜在机会。长期以来广告一直是印刷出版物的一部分，如杂志和报纸，现在它们已经在网上期刊和出版物扮演同样的角色。
网站所有者或者发布的产品和服务总是会担心广告存在的影响，同时它也影响着网页设计师，因为他们必须设计出能带来广告收益同时又满足访客需求的网站。依靠广告收入的网站需要一个有合适位置和排版的设计以更好的卖出广告，广告客户需要一个能让他们的广告达到一定曝光度的位置。
当设计师没有把广告作为首要关注点，那么设计出一种尴尬的布局就很好解释了，这种布局要么有损网站流量广告，要么把广告放置在无法吸引访客注意的位置。为了让客户的广告效益达到最大化，同时对网站的界面和可用性影响最小，设计师必须在设计的整个过程中把广告需求考虑在内。
阅读全文…
