Web UI 设计(网页设计)命名规范
作者：暴风彬彬 来源：彬Go 发布时间：2009-05-13 13:06:00
今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套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“.
0
投稿猜你喜欢
- 数据库（database）MySQL 是最流行的开源数据库系统，可运行于几乎所有的操作系统平台。在《MySQL 安装》一文中详解介绍了安装步
- 一个拖动层和Onmouse自动下拉效果，IE支持，不支持ff。下面所示的效果四个小块可以拖动到页面任意点，大黑块可以连同四个小块随动。<
- 今天的这篇文章是讲XHTML中的细节部分的，这篇续述的主题就是ID与CLASS怎么用，在标题中有提及使用原则与技巧，这里的使用原则与技巧是我
- 程序代码： '关键字的搜索 str="select * from tableNam
- 声明定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/I
- 今天搭了个“发短信”的页面，找朋友测试，没想到一位大侠直接弄了本长篇小说发我手机上……为了我的宝贝手机能继续健康澎湃，给文本区域(texta
asp网站程序在国内运用很广,但是类似于im286.asp?id=20050307213811这样的url有点不利于搜索引擎的收录,也就是说- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下： mysql -
- JavaScript组件打包模式js组件通常带着css image ，但这样使用起来可能会有些小麻烦，为了让组件足够的solo，有了把css
- 一、概论超大型系统的特点为：1、处理的用户数一般都超过百万，有的还超过千万，数据库的数据量一般超过1TB;2、系统必须提供实时响应功能，系统
- 介绍我们一起来做个示例，在.NET中新建一个类，并在这个类里新建一个方法，然后在SQL Server中调用这个方法。按照微软所述，通过宿主
- 实际上，在web开发中，cookie仅仅是一个文本文件，当用户访问站点时，它就被存储在用户使用的计算机上，其中，保存了一些信息，当用户日后再
- 实际参数在函数中我们可以使用 arguments 对象获得 （注：形参可通过 arguments.callee 获得），虽然 argumen
- 代码如下:Create PROCEDURE Batch_Delete @TableName nvarchar(100), --表
- 在应用SA-FileUp时，必须确认用户已对目的路径有读、写、删除的权力。在多文件上传中，由于浏览器不支持SIZE= 属性，所以对多文件的情
- <base href="http://digi.tech.qq.com/images/ld/2007/1022/
- 如何用javascript来判定选择单选的radio哪个被选择,多选的checkbox有那几个被选中? <!DOCTYPE
- 由于某些原因需要把函数直接放到 img 标签上的 onload 属性执行，比如：For some reasons we have to ex
- 原型：EventManager是一个重要的原型，它用来赋予对象自定义事件的能力当对象类型的原型继承EventManager时，对象具有定义、
- IP字段截取，判断访问者ip，根据ip来显示不同图片,很简单的程序<％ip=request.servervariables("
