包菜先生http://www.cabbageman.cn/blog/有设计有音乐的生活。RainbowSoft Studio Z-Blog 1.8 Devo Build 80201zh-CNCopyright cabbageman.cn Rights Reserved.Mon, 06 Jul 2009 11:04:40 +0800试验面向对象的CSSa@b.com (cabbageman)http://www.cabbageman.cn/blog/post/23.htmlMon, 06 Jul 2009 10:36:37 +0800http://www.cabbageman.cn/blog/post/23.html“你如何为成千上万的用户和页面提供CSS？” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于 面向对象的CSS (OOCSS) ，这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了，它还是一种思考的方式。根据这个观念可以有很多优势，主要来说有：

  • 它可以让你写更快的、可维护的、基于标准的前端代码。
  • 它在CSS中预先加入了一些必须的元素，这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理：

  1. 分离结构和表现；
  2. 分离容器和内容。

建议花些时间看一看 面向对象的CSS的幻灯。总共有64页，绝对值得一看。

Object Oriented CSS
View more documents from Nicole Sullivan.

PS:神飞之前就有考虑将此幻灯翻译成中文，但是作者不允许下载，所以大家就将就着看吧先，另外考虑翻译一些相关的文章来更多的解释OOCSS。

PS2，貌似国内也有个人做了一个OOCSS，意思也是面向对象的CSS，不过和这个不是同一个。

原文：http://www.qianduan.net/object-oriented-css.html

以下部分为我个人试验代码：

<html>
<head>
<style>
.model{background:#f00;width:200px;height:200px;}
.saleMod{extends: model;border:1px solid #000;}
</style>
</head>
<body>
<div class="model"></div>
<div class="model saleMod"></div>
</body>
</html>

的确有助于减少CSS代码，我开始在新项目中研究使用这一思想。

]]>工作杂谈http://www.cabbageman.cn/blog/post/23.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=23http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=23&key=bae00afdGMAIL昨天更新了，但是还有可以改进的地方。a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/22.htmlFri, 03 Jul 2009 09:16:30 +0800http://www.cabbageman.cn/blog/post/22.htmlGMAIL昨天更新了，加入了拖放文件夹的功能，并把文件夹放在了收件箱下面，更加方便的对邮件进行归类。

但是还是有不足的地方：

很多时候我群发邮件，使用通讯录里的名单，总是会出现这种错误提示，得一个个去排查，非常浪费时间。

像QQ邮箱就做得很不错，直接点击联系人就可以到收件箱了，很赞的一个设计。


]]>交互设计http://www.cabbageman.cn/blog/post/22.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=22http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=22&key=43c9a840Web UI 设计(网页设计)命名规范a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/21.htmlThu, 02 Jul 2009 17:38:49 +0800http://www.cabbageman.cn/blog/post/21.htmlWeb UI 设计命名规范
最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。

这套规范并非单纯的CSS、html或JavaScript命 名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美 工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服 务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名 规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范

一.网站设计及基本框架结构:

网页设计-命名规范

1.    Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.    Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3.    Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4.    Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7.    Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover   点击：click   已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

三.Photoshop图层结构规范:

Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

第一级图层结构如下图:

web-ui-设计-规范

第二级结构图例(医院网站):

网页设计-教程

第三级结构图例及效果图对比(医院新闻栏目)：

网页设计-效果图
效果图

photoshop-网页设计-教程
图层命名结构

四．常用命名汇总:

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

]]>工作杂谈http://www.cabbageman.cn/blog/post/21.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=21http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=21&key=0d5c1464GenNext网站a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/20.htmlTue, 30 Jun 2009 15:52:03 +0800http://www.cabbageman.cn/blog/post/20.htmlGenNext网站

]]>作品集http://www.cabbageman.cn/blog/post/20.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=20http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=20&key=e1771364CTI华测检测公司网站英文版a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/19.htmlTue, 30 Jun 2009 15:47:10 +0800http://www.cabbageman.cn/blog/post/19.htmlCTI华测检测公司网站英文版

华测检测有限公司是综合性、专业性、全球性的第三方测试、检验与验证机构。
 

]]>作品集http://www.cabbageman.cn/blog/post/19.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=19http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=19&key=33c87cc5SinoHub SCM系统界面截图a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/18.htmlTue, 30 Jun 2009 15:43:50 +0800http://www.cabbageman.cn/blog/post/18.htmlSinoHub SCM电子元器件供应链管理系统界面截图

]]>作品集http://www.cabbageman.cn/blog/post/18.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=18http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=18&key=a1a09f2c深圳错觉乐队网站a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/17.htmlTue, 30 Jun 2009 15:41:23 +0800http://www.cabbageman.cn/blog/post/17.html深圳错觉乐队官方网站，介绍乐队成员情况，乐队演出相关图片及视频。设计以黑色为基调，突出音乐感和空间感，更好的展示乐队形象！

 

]]>作品集http://www.cabbageman.cn/blog/post/17.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=17http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=17&key=9cbbe403黄志成设计公司网站a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/16.htmlTue, 30 Jun 2009 15:36:46 +0800http://www.cabbageman.cn/blog/post/16.html深圳市黄志成广告有限公司主要服务于服装摄影领域，作品国际化。网站采用FLash制作，展示其丰富的设计作品。

]]>作品集http://www.cabbageman.cn/blog/post/16.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=16http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=16&key=516b9308Casablanca西餐厅网站a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/15.htmlTue, 30 Jun 2009 15:32:39 +0800http://www.cabbageman.cn/blog/post/15.htmlCasablanca西餐厅网站

作品描述: 深圳蛇口Casablanca餐饮文化公司,法国人开的一家集西餐，企业活动为一体的餐饮公司。 为了推广其业务，首次采用调研为手段制作了相关网站，为该餐厅业务推广取得良好的效益!

]]>作品集http://www.cabbageman.cn/blog/post/15.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=15http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=15&key=c77d1caa歌曲《好想有个太太》-09年贺岁歌曲a@b.com (cabbageman)http://www.cabbageman.cn/blog/post/14.htmlTue, 30 Jun 2009 11:10:01 +0800http://www.cabbageman.cn/blog/post/14.html    《好想有个太太》
     词：超哥 曲：Steven
 
    好想有个太太，为我做饭烧菜。
    现实却很无奈，让我仍需等待。
 
    也因寂寞难耐，谈过几次恋爱。
    谁知屡战屡败，轻轻松松被踹。
 
    其实我也奇怪，为啥总被淘汰。
    历尽打击伤害，总算知道大概。
 
    嫌我不讲穿戴，嫌我长得不帅。
    嫌我个头太矮，嫌我没有气派。
 
    熊猫长得不帅，却受世人关爱。
    丑是自然灾害，矮是因为缺钙。
    做人只求正派，讲啥穿戴气派！
    我们这个年代，注定缺少真爱。
 
    女人不是太坏，就是心胸狭隘。
    或许除此之外，还有部分可爱。
 
    只怕时至现在，早已有了后代。
    面对这种事态，不要气急败坏。
 
    我们除了忍耐，至少还能等待。
    只要相信真爱，她就一定存在。
 
    要么咱就不爱，爱就爱个痛快。
    没有爱的灌溉，生活百无聊赖。

 

好想有个太太.mp3

]]>我的短片http://www.cabbageman.cn/blog/post/14.html#commenthttp://www.cabbageman.cn/blog/http://www.cabbageman.cn/blog/feed.asp?cmt=14http://www.cabbageman.cn/blog/cmd.asp?act=tb&id=14&key=87229be6