存档
书接前文 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年流行起来。
SmashingMagazine今天给我们带来了一篇非常全面的汇总，介绍了50个超级有用的CSS开发工具，其中相当多的小工具都是让我觉得非常有帮助的，甚至有了做几个中文版的念头，虽然C2C(Copy to China)的习惯并不是那么好，但是有的时候真的觉得在每日奔波，与CPI抗争的局势下，要有点创新的主意真的很难。 闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。 CSS and Typography Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。 CSS Type Set 貌似被墙了，有兴趣的翻出去看看 Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea） CSS-Typoset Matrix and code generator 快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。 body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; } html>body { font-size: 14px; } p { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; } h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; } h2 [...]
做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。 点击查看大图 原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载
楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。 问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。 还是换个方式解读一下这几个选项吧。 Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。 Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : static;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。 1点需要提及的，z-index，仅仅作用与position为relative absolute的元素上。 Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top [...]
今天介绍一个网页辅助设计框架，960 Grid System。什么是960 Grid System，简单的来说，是用来辅助设计师快速的创建网页原型的辅助系统，960这里是网页的横向尺寸，960px，为什么是960这个数字，而不是1000或者900？ 来温习下数学推演： 960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍： 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480 共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为： N(960) = N(2^6 * 3 * 5) = 26 同理可以得到： [...]
