W3C's Editor/Browser Amaya

前天,W3C发布了他们的网页编辑器 - Amaya 10。开源软件,提供了多平台的版本。编辑器除了支持HTML和CSS以外,还支持SVG(W3C制定的“可升级矢量图形”)和PDF等...遗憾的是目前还不支持中文对中文的支持比较差。

界面相对简陋,不过表达的十分清晰,标准的可视化工具。如果在中文的支持方面有所改善,绝对是网页设计师用来代替dreamweaver的好工具。本人由于长期受TextMate的照顾,不太习惯可视化工具,所以很快就放下了...

white-space : pre-wrap

pre标签用来显示预格式(preformatted)文本,实际应用中我一般用来显示各种代码。

以前通常会给pre定义这样的CSS,使pre不被过长的文本撑破,而出现滚动条:

pre { overflow: auto; width: 515px; }

但是当横向、纵向滚动条同时存在时,很让人抓狂。于是在CSS 3中,white-space有了一个新的值pre-wrap,再加上一些浏览器的私有属性,我们就得到了解决方案:

pre {
white-space: pre-wrap; /* 支持css 3的浏览器 */
white-space: -moz-pre-wrap; /* 老版Mozilla*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5以上 */
}

来自:Wrapping the pre tag

是设计师还是开发人员?

“网站前台打杂”现在有了一个很响亮的名字 - “网站前端开发工程师”,但是我是设计师还是开发者呢?以下是一篇讨论这个问题的问题,翻译的有些生硬,浏览不顺的可以看看原文。

翻译至:Are we designers or developers?,作者 Roger Johansson

在站点的关于页面(原作者的about),我称自己为“开发人员/设计师/应时作家”。这有一点模棱两可,我仍然在寻找一个答案:当别人问我靠什么来维持生计时,我的回答。我是一个设计师?网站开发人员?网站程序员?全部都是?都不是?这是很难用一句简单的话来回答。

我的答案会基于谁来问,什么时候问,为什么问,在什么情况下问。有时我会说“我在网络上工作” 或者 “我是做网站的”,任意一个答案都是真的,但是并没有真正的表达我到底是干什么的。显然给出一个简单明了的答案很容易。

在某个方面,我是一个十足的设计师,虽然最近在做一些没有花哨图案的设计。很多人错误的认为设计单纯的等于图形设计,但是我认为设计也可以是使创意变成现实的过程。当我这么做的时候,我可以称自己为网页设计师。

不可否认,如果“网页设计师”的头衔对我来说只是对工作内容的解释,这违背了我从网络泡沫得来的经验。那经验提醒我许许多多的外行人投身到网络,只是因为膨胀的网络需要更多的人而已。这同时让我想到业余的爱好者们只会使用破解版本的Dreamweaver 或者 GoLive提供的WYSIWYG模式来制作一个网站。所以我发现很有必要称自己为网页设计师

作为另一个选择,有时我称自己为“网页开发者”。但是问题在于很多人都认为网页开发者更多的做后台程序,而我却很少做此类的工作。但是这听起来比网页设计师更专业。

我们还有什么其他的选择?嗯,还有这么些头衔像UI程序员,前端开发者,UE设计师等等,太多了,然而可以正确表达出我在做什么的却很少,这样对于那些并不是从事网络相关行业的人,就很难理解了。

这真的能成为问题吗?大多数情况下,不是。但是有点棘手的是理发师或者你的邻居并不能通过这些来明白你到底怎么维持生计。虽然“我在网络上工作” 或者 “我是做网站的”看起来很好的回答了问题,但这并没有告诉他们,你做图形设计,程序,或者其他的。

所以我想问那些,并没有真正意义上的做图形设计,但是主要使用HTML, CSS, JavaScript, and accessibility来工作的读者,两个问题:

  1. 认为 自己是一个设计师还是一个开发者?
  2. 称呼 自己是一个设计师还是一个开发者?

如果你得到了一个明确的答案,那就向答案的目标进发吧。

CSS Mastery - 阅读笔记二

在"Styling lists and creating nav bars"章节发现一个对我来说很有用的ie bug fix:li {display:inline;}作者的注释是"Removes large gaps in IE/WIN".马上试验了一下,真的解决了一个长久困扰我的问题。

以前在做一些纵向的导航菜单的时候,经常会用到一个锚(a)的hover效果,范例可以看这里

li a {display:block;background:#000;color:#FFD800;}
li a:hover,li.here a {background:#570B06;}

这里我们把锚(a)块级化以后,在IE7.0之前的版本中,锚(a)后面会有一个空白textnode,另起一行的问题,这样便把各个li的间距加大了。我以前的fix方式,就是把html结构里li前后的空格都消灭掉,做法比较烦人...

现在好了,只要li {display:inline;}就可以了,多看书还是有益的 :)

 1 2 3 4 Next →