超越CSS

按有用程度 按页码先后 最新笔记

• 

  全本书

  锕橙 (dancing freak)

  不明白为什么非得要写页码或者章节。 我不想把这篇东西作为书评，这不过是我的一点学习笔记而已。而且是整本书看下来的总结。 这是一本极具欣赏性的书。欣赏性，这是程序教学书籍普遍最缺乏的东西。因此这本书是出了HEAD FIRST之外最能给我留下印象的书。其实这样的设计也反映了作者的一个观点：前端工程师的眼里不应该只有代码。 要设计师去看CSS是很难的，但是要让前端工程师去欣赏设计.. (更多)

  不明白为什么非得要写页码或者章节。

  我不想把这篇东西作为书评，这不过是我的一点学习笔记而已。而且是整本书看下来的总结。

  这是一本极具欣赏性的书。欣赏性，这是程序教学书籍普遍最缺乏的东西。因此这本书是出了HEAD FIRST之外最能给我留下印象的书。其实这样的设计也反映了作者的一个观点：前端工程师的眼里不应该只有代码。

  要设计师去看CSS是很难的，但是要让前端工程师去欣赏设计则不那么难。前者在挑战设计师的逻辑，后者只是让工程师去欣赏美的东西，美的东西谁都喜欢。然后，在下一次工作，前端工作者能把设计当做一件美的作品去把它完成，这样能激发前端工作者的热情和认真的态度。前端工作室也是创造者，按照设计师的图纸做出美丽的成品。

  但是很多前端工程师在破坏这些作品，即使在浏览器里面，一切视觉效果良好，但是潜藏的缺憾足以摧毁这件作品。这一切都是因为部分前端工作室没有履行好自己的职责，包括我。

  比如布局。

  我一直为如何完成布局而烦恼。起初是因为兼容问题。浏览器差异导致我们不得不用HACK修改样式，令文件变得臃肿而不优雅。

  还有基于布局的HTML设计，令页面增加大量无意义的div，并且打乱了网页内容的顺序。虽然最终能按照视觉设计完成网页，但这样出来的作品粗糙而臃肿，缺少拓展性和可维护性。

  看完这本书后，我对布局与设计改观了。

  首先是基于内容的HTML顺序设计。这样带来的好处其实是不言而喻的。一方面它能照顾到残障人士使用的浏览器，除去CSS也能正常阅读和使用，另一方面它保持了HTML的顺序结构，试网页的拓展变得容易，同时把CSS的灵活运用到极致。

  这就是禅意花园的魅力之处，我到现在才体会到。

  还有布局。浮动与定位的相互配合运用。并没有绝对的准则，但是只有你了解了每种布局的特性，才能启发性的灵活运用。尝试不用hack，用多种布局方式的配合避开bug。

  还有网格设计。

  之前没有重视这种设计方式。因为那时候我觉得使用浮动之后，一切是难以精确定位的，所以过于细致的定位反而体现不出web的流动性。

  但是看到流体布局和定位布局之后，我有了新的想法。网格设计是一个很好的工具，而我们前端工作者应该运用技术去精确实现这些设计，而不是因为浮动带来的不确定性而畏惧。（或者仅仅是因为我对浮动的知识了解不够，而觉得浮动带来了不确定因素）

  总结一下：

  1.使用表意化的HTML布局，不为了布局滥用div等标签

  2.把浮动与定位结合使用

  3.使用网格，严格对齐，还原设计。

  (收起)

  2011-07-26 10:26:24   回应

  收藏

  推荐

• 

  全本书

  锕橙 (dancing freak)

  不明白为什么非得要写页码或者章节。 我不想把这篇东西作为书评，这不过是我的一点学习笔记而已。而且是整本书看下来的总结。 这是一本极具欣赏性的书。欣赏性，这是程序教学书籍普遍最缺乏的东西。因此这本书是出了HEAD FIRST之外最能给我留下印象的书。其实这样的设计也反映了作者的一个观点：前端工程师的眼里不应该只有代码。 要设计师去看CSS是很难的，但是要让前端工程师去欣赏设计.. (更多)

  不明白为什么非得要写页码或者章节。

  我不想把这篇东西作为书评，这不过是我的一点学习笔记而已。而且是整本书看下来的总结。

  这是一本极具欣赏性的书。欣赏性，这是程序教学书籍普遍最缺乏的东西。因此这本书是出了HEAD FIRST之外最能给我留下印象的书。其实这样的设计也反映了作者的一个观点：前端工程师的眼里不应该只有代码。

  要设计师去看CSS是很难的，但是要让前端工程师去欣赏设计则不那么难。前者在挑战设计师的逻辑，后者只是让工程师去欣赏美的东西，美的东西谁都喜欢。然后，在下一次工作，前端工作者能把设计当做一件美的作品去把它完成，这样能激发前端工作者的热情和认真的态度。前端工作室也是创造者，按照设计师的图纸做出美丽的成品。

  但是很多前端工程师在破坏这些作品，即使在浏览器里面，一切视觉效果良好，但是潜藏的缺憾足以摧毁这件作品。这一切都是因为部分前端工作室没有履行好自己的职责，包括我。

  比如布局。

  我一直为如何完成布局而烦恼。起初是因为兼容问题。浏览器差异导致我们不得不用HACK修改样式，令文件变得臃肿而不优雅。

  还有基于布局的HTML设计，令页面增加大量无意义的div，并且打乱了网页内容的顺序。虽然最终能按照视觉设计完成网页，但这样出来的作品粗糙而臃肿，缺少拓展性和可维护性。

  看完这本书后，我对布局与设计改观了。

  首先是基于内容的HTML顺序设计。这样带来的好处其实是不言而喻的。一方面它能照顾到残障人士使用的浏览器，除去CSS也能正常阅读和使用，另一方面它保持了HTML的顺序结构，试网页的拓展变得容易，同时把CSS的灵活运用到极致。

  这就是禅意花园的魅力之处，我到现在才体会到。

  还有布局。浮动与定位的相互配合运用。并没有绝对的准则，但是只有你了解了每种布局的特性，才能启发性的灵活运用。尝试不用hack，用多种布局方式的配合避开bug。

  还有网格设计。

  之前没有重视这种设计方式。因为那时候我觉得使用浮动之后，一切是难以精确定位的，所以过于细致的定位反而体现不出web的流动性。

  但是看到流体布局和定位布局之后，我有了新的想法。网格设计是一个很好的工具，而我们前端工作者应该运用技术去精确实现这些设计，而不是因为浮动带来的不确定性而畏惧。（或者仅仅是因为我对浮动的知识了解不够，而觉得浮动带来了不确定因素）

  总结一下：

  1.使用表意化的HTML布局，不为了布局滥用div等标签

  2.把浮动与定位结合使用

  3.使用网格，严格对齐，还原设计。

  (收起)

  2011-07-26 10:26:24   回应

  收藏

  推荐