这套标准并不是单纯性的CSS、html或JavaScript命名规范，它涉及到了许多应用PhotoShop这种设计工具开展网页制作全过程中的命名规范。

很多网页美工设计效果图源代码沒有对涂层取名的习惯性，而在网上大多数命名规范全是有关css、html、js和一些服务端語言的，设计方案层面的命名规范非常少。室内设计师也是技术性精英团队的组员，而前端工程师技术工程师*须应用室内设计师的设计效果图源代码的，因此统一命名规范和设计标准针对精英团队的合作和工作效能肯定是有益处的。

WEBUI设计命名规范

一.网站制作及基础框架剪力墙:

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”是网址的关键地区，如果是blog得话它将包括的日志。这些还能够取名为:“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层，就可以产生组，全部涂层尽量减少应用默认设置取名(涂层 序号)。

*一级涂层构造如下图:

第二级框架图例(医院网):

第三级框架图例及设计效果图比照(医院门诊新闻报道频道)：

四．常见取名归纳:

页头: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

sitmap:sitemap