‘页面实现’ 分类的存档

结构与表现分离[div+css]带着我们了解了W3C标准，也成为了前段工程师必须掌握的技能，前端重构！让我们用更语义化的代码谱写我们的页面！

没有评论网页栅格系统研究（4）：技术实现

2009年12月7日

前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。

Blueprint的实现

Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：
阅读全文…

分类: 视觉设计, 页面实现 标签: , , , , ,

没有评论网页栅格系统研究（3）：粒度问题

2009年12月7日

研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）

淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：

（图1） 阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: , , , , , , ,

没有评论网页栅格系统研究（2）：蛋糕的切法

2009年12月7日

首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。

阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: , , , , , ,

没有评论网页栅格系统研究（1）：960的秘密

2009年12月7日

研究网页栅格系统前，来看一组数据：

网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960

上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。

根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？

阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: , , , ,

没有评论CSS阴影详解

2009年12月3日

设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合：

h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}

这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！

事实上，对于文字的阴影效果，我们完全可以用CSS来实现！
阅读全文…

分类: 前端开发, 页面实现 标签: , ,