这套标准并不是单纯性的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
