2008 Aug 29

Using Background Image to Replace Text

CSS Zen Book是一个被很多位置捧到天上的书,目前啃到一半,我觉得他里面提示的文章更有用。但可以原文都只有一个英文原文的链接,感觉有点可惜了,所以准备以后发现好文章就翻译过来。这是我翻译的第一篇文章,非正式的文章,仅仅作为辅助阅读,我更不是什么翻译专业,所以很多为是很随意的翻译。

这个文章跟我的关系挺复杂的:几乎每天都在用里面的方法,但是直到CSS Zen Garden的那本书里面提到这篇文章我才知道这个方法的来源和特点。尽管是一篇03年的文章,但是目前还有人在使用这种方法,而且是那种可访问性非常差的做法。所以看看这件事情的来龙去脉还是很有趣的。正文如下:
Read More

2008 Aug 29

Uni and harmony

今天展示的站点是来自一家视觉设计公司的thegoodness,首先吸引我注意的是他们的官方网站。与其他的工作室的首页不同,他们的页面宁静、统一、和谐,黑色系的色调让人觉得高雅、专业。从某种程度来讲比另外用其他色彩取胜的站点更胜一筹。

页面上最给我印象深刻的是色彩的统一、布局的统一、视觉流的统一

这种开PS的人就可以做出来的效果在却显得非常漂亮,这就是统一所带来的力量。

作品展览页下面的页面导航,遵循了顶部导航的风格。
整体来说,是一个很难得的站点,用简单的线条、形状构筑了丰富的内涵。

已收录到PageShow,快去看看!

2008 Aug 29

Clear One-Page Layout

对于一个呈现信息很少,目的很单一的站点,也许你为它构建导航栏是多余的。这不仅会浪费浏览者的时间,也会降低站点的流量效率。偶尔,你可以耍点个性——做个单页呈现的页面吧。
今天向大家介绍的ceruleandesigns.com就是很好的例子,采用了垂直布局,单页就把所有内容完整的表达出来,一气呵成,页面整体效果非常不错。

首先进入视线的是蓝色的朦胧背景,蓝色和白色的对比是相当舒服的。在表单的处理上,订制了背景图片,为什么没有处理提交按钮让我很纳闷。尽管表单的效果看起来很Cool,但是第一次浏览的时候我却不敢把鼠标往那块点,因为看起来像Buttom而非TextArea。

作品列表的设计也相当精致,有悬浮效果,背景图片采用了半透明效果。醒目且美观,总而言之是实用性很强。

也许这个作品并不能算成熟的作品,但是单页布局的设想让我们在构建内容不多的网站时有了另一个思路!

已收录到PageShow,快去看看!

2008 Aug 29

How to Fvck That Page

为什么你的居中属性没有生效?为什么浮动元素不听你的话?为什么这个图片会这样显示?……
这样或那样的问题困扰着步入网页设计的每个人,以下就以个人经验来来总结一下解决问题的流程。

懒人大法——问你的朋友

如果你有同样做网页设计的朋友,可以和他一起研究,也许他早就你想要的答案。至于在论坛论坛求助,就要看你RP了。

提前预防——看清楚IE、Mozilla下的CSS支持

最踏实的方法就是在此之前就熟悉CSS在主流浏览器里的支持情况,有时候拿着CSS手册看,看到里面说的属性或选择赴多么多么的NB,结果没一个浏览器支持。这方面的讯息网络上已经积累了不少:

乖孩子的做法——有时间多读读书

如果你有幸从头到尾读下任何一本XHTML教程,你写出来的叶子就算无法正常显示,你也可以问心无愧。写书的,再菜也是这方面有过研究的学者。当然有一本好教材,那才叫如虎添翼。
这方面的书籍,基本没有悬念的指向O‘Reilly出版社,就两本:《XHTML权威指南》6TH Edition(EN)5TH Edition(CN)、《CSS权威指南》1ST Edition(CN)2ND Edition(EN)。第二本书的有第三版,但是改动不大,而且只有英文版,不必求新。这些书EM上可以拖到,临时解馋,拥有一本实体书才是最重要的。CSS方面还有一本一定有的书,电子版的CSS2手册
另外最让人想不到的一点是W3C文档,那上面很多东西都是宝!

坏孩子的做法——我用hack我怕谁

一般来说是不推荐hack的,但是hack用起来真的很方便,而且如果真的成功了有种解脱了的感觉……汗~下面是我保存下的hack资源:

做个细心人——关注页面可访问性

很多时候就算一般浏览器显示正常,也不意味着所有浏览者都能正常阅读。可访问性——这是一个很大的课题,有的人会研究得很BT,往往也和SEO挂上钩,有时候读别人的文章,我会头晕。对于一般网站,我觉得能做到如下一些就好,其他事情可以自行Google:

  • 选择合适的DOCTYPE
  • 标记恰当的语言
  • 构建具有意义并且独特的标题
  • 提供完整的导航工具
  • 把你的主要内容提前
  • 理性地使用颜色
  • 使用真实链接
  • 将链接写上title属性,图片上写上alt属性
  • 设置键盘快捷方式
  • 不要打开新窗口
  • 学会使用arconyms
  • 表格头TD标签如果要加粗,请换Caption
  • 别为了布局而用spacer imgaes
  • 使用水平标尺
  • 恰当使用Header
  • 用label标签组织表单
  • 为每个页面提供搜索选项

如果通过以上途径都没有改善问题,那么你能做的只有两件事情:

  1. 更换你的思路,实现另一种效果
  2. 等待hack或浏览器更新

Let’s Fvck That Page

Page 13 of 13« First...910111213