存档
书接前文 6. 模式窗口（LightBox技术） 模式窗口技术，作为第二代弹出内容技术。模式窗口（LightBox技术介绍）能够很好的代替原来的Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。 7. 多媒体模块 随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。 这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。 注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。
原文链接：http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/ 网页设计师是一群非常善变最新的人，总是希望尝试更新的设计理念。让我们来预测一下2009年的网页设计趋势。 1. Letterpress 凸版效果 在我们的观察中，一个意料之外的趋势是，凸版效果(Letterpress，也就是我们的篆刻中的阴文效果)。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。 2. Rich UI 交互式用户界面 令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。 更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。所以我们断言，自适应用户界面将会在2009年流行起来。
十三个你应该了解的免费Web应用，我相信其中肯定有你需要的，无论你是不是和我一样是一名程序员，或者只是一个普通的网民。其中包括免费的讨论版，免费的文件存储，免费的项目管理系统，还有在金融危机的背景下的理财系统。如果您有其他更好的，或者是国内类似的系统，希望您能留言和大家一起分享一下您的收藏。对于那些在国内可能用到机会很小的，我就只保留链接，不介绍了。 1 moneyio 个人理财系统，当然肯定是不太适合国内用户，推荐几个国内的记账类系统，开心网里就有这个功能。 http://www.qian8ao.com/ http://www.zhangben.com/ 2 Clikboard 的确非常方便，如果有什么需要展示给朋友们的，不需要复杂的配置，当然也没有强大的功能，一切都是为了快捷。 3 Lighthouse 这个要重点推荐一下，像我这样“有经验”的IT民工，用过大多数tracking系统，大牌的JIRA，RationalClear系列，恶心到死的Notes，轻量的Redmine，trac等等，的确是工作项目中不可或缺的一个组成部分。LightHouse是一个风格很清新的管理系统，而且功能也不错。值得试试看。 P.S. 我恨Notes，特别是DB在大洋彼岸的Notes！ 4 Senduit 一个好用在线上传分享文件的站点，类似的可能很多，Senduit 的最大文件上传可达100MB，无需注册！用户可以自己选择文件的存储期限，从30分钟 到 1周 存储期限可供选择，所以Senduit只适合文件的临时存储，而不宜于永久存放。关键是没有满眼的广告，站长做广告无可厚非，关键是别像mofile那么恶心。 5 Web Valuer 这个很多人都推荐过了，算算你的网站值多少钱，算是个小widget，可以丰富下你的网站。可惜不能兑现。。。 6 Manymoon 一个Task管理系统，可以和朋友share任务，并且一起合作，这个里面貌似有了Remember Milk，其他很难望其项背，而且本地还有更加强大的Outlook，可以试一下，说不定讨你喜欢。而且最近Gmail也支持Task了。 7 Nicetranslator 非常不错的翻译网站，可以同时翻译多国语言。 为了展示下他的实力，该段介绍完全由它自己翻译成中文。 NiceTranslator is a fast, easy to use online translator designed with simplicity and functionality in mind. Chinese NiceTranslator是一种快速，易于使用的在线翻译设计简洁，功能一点。 Dutch NiceTranslator is een [...]
做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。 点击查看大图 原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载
原文地址：http://sixrevisions.com/css/20_websites_learn_master_css 相信不少人，哪怕是职业的网页设计师有的时候也不免会觉得CSS有那么点玄妙，有很多小trick并不是那么容易一下子掌握的。 三人行必有我师焉，那就从一些前辈那里学点东西吧，20个CSS和网页设计相关领域的站点，希望能给大家带来一些帮助。 1. A List Apart CSS Topics 老牌CSS站点，从1999年开始一直致力于整理收集面向标准网页开发的优秀文章。 2. CSS Help Pile 收集整理了大量的CSS相关资源，而且归档非常清晰，查询非常方便。 3. CSS Basics 通过一系列教程讲述了CSS的基本概念和基本原理。非常不错的一篇入门教程，我当年也获益良多。 4. Holy CSS Zeldman! CSS相关资源站点，不是《网站重构》的那个Zeldman，不要搞错咯。 5. Eric Meyer: CSS 一位有名的CSS作者的blog，值得一看。 6. 456 Berea Street – CSS category 很流行的CSS站点展示，这类的网站有非常多，多看多收获。激发一下创作灵感。 7. /* Position Is Everything */ 网页很多时候困惑和苦恼都来自于Position问题，那让我们专门来看看这类问题吧。 8. HTML Dog CSS Tutorials 是不是想起了上个世界有个老派的html编辑器，这里有着适应不同程度读者的教程。 9. Learn CSS Positioning in [...]
原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets 版权声明：本文版权归原作者所有 译介仅供国内读者参考 如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。 本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c 1. 不要在HTML文件中使用CSS样式定义 相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。 想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。 千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。 注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。 友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。 2. “语义学Semantics”不是猜字谜游戏 我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义： .l13k { color: #369; } 我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义： .left-blue { color: #369; } 这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。 这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个： .product-description { color: #369; } 这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
