Web设计命名规则

Web设计命名规范
在设计一个HTML文件时，需要为站点文件夹、文件及文档结构、ID及类命名，在需要命名是初学着可能只会依据自己的想法随便给一些简单的名称，但若是一味的乱起名称，不仅会让团队的伙伴看不明白，还会导致标签名称混乱，这样会使得代码维护十分困难，是非常不利于管理的。所以我们在设计整个网站，还是一个单独的HTML页面，都应该要有良好的命名规则。
文件名称必须由英文字母开头，通常命名的规则是根据内容的分类和框架的类型翻译成英文单词来命名，例如：div id=“nav”（表示为这个div是个导航条），所有单词应当用小写字母，名称中可以使用数字，或下划线，例如：div=“main_piclist”（表示主要内容下的图片列表）、div=“nav_bg.jpg”（表示导航条的背景图），还可以使用中划线进行名称之间的连接，例如：div=“main-left”（表示左侧内容的布局）所有命名要尽量避免使用中文字符，要以最少的字母达到最容易理解的含义，除非一看即懂，否则尽量不缩写。

一、站点文件夹主要建立以下文件夹：
　　1、images 存放一些网站常用的图片；
　　2、css 存放一些CSS文件；
　　3、Flash 存放一些Flash文件；
　　4、Temp 存放所有临时图片和其它文件；
　　5、copyright 版权信息（可选）
　　6、readme 说明文件
　　
二、web文件命名
　　主要根据页面内容和功能命名。如：
index.html 首页文件
information.html 旅游资讯
scenery.html 风景欣赏
ticket.html 网上购票
About.html 关于我们
Join.html 加入我们

三、CSS文件命名示例
1.index.css：单独为首页建立样式
2.base.css：共用样式。
3.style.css：独立页面所使用的样式文件。
4.global.css：页面样式基础，全局公用样式，页面中必须包含。
5.layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
6.Master.css/main.css：主要的样式表
7.forms.css：表单样式
四、页面结构命名
1．page：代表整个页面，用于最外层。
2．wrap：外套，将所有元素包在一起的一个外围包，用于最外层
3．wrapper：页面外围控制整体布局宽度，用于最外层
4．container：一个整体容器，用于最外层
5．head、header：页头区域，用于头部
6．nav：导航条
7．content：内容，网站中最重要的内容区域，用于网页中部主体
8．main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容
9．column：栏目
10．sidebar：侧栏
11．foot、footer：页尾、页脚。网站一些附加信息放置区域，（或命名为copyright）用于底部
12．content/container：内容
　　13. left right center：左右中

ContentLeft contgentRight
五、导航命名
1.nav、navbar、navigation、nav-wrapper：导航条或导航包，代表横向导航
2.topnav：顶部导航
3.mainbav：主导航
4.subnav：子导航
5.sidebar：边导航
6.leftsidebar 或 sidebar_a ：左导航
7.rightsidebar 或 sidebar_b：右导航
8.title：标题
9.summary：摘要/li>
10.menu：菜单。区域包含一般的链接和菜单
11.submenu：子菜单
12.drop：下拉
13.dorpmenu：下拉菜单
14.links：链接菜单

六、功能命名
1.logo：标记网站logo标志
2.banner：标语、广告条、顶部广告条
3.login：登陆，（例如登录表单：form-login）
4.loginbar：登录条
5.regsiter：注册
6.tool、toolbar：工具条
7.search：搜索
8.searchbar：搜索条
9.searchlnput：搜索输入框
10.shop：功能区，表示现在的
11.icon：小图标
12.label：商标
13.homepage：首页
14.subpage：二级页面子页面
15.hot：热门热点
16.list：文章列表，（例如新闻列表：list-news）
17.scroll:滚动
18.tab：标签
19.sitemap：网站地图
20.msg 或 message：提示信息
21.current：当前的
22.joinus：加入
23.status：状态
24.btn：按钮，（例如搜索按钮可写成：btn-search）
25.tips：小技巧
26.note：注释
27.guild：指南
28.arr、arrow：标记箭头
29.service：服务
30.breadcrumb：(即页面所处位置导航提示）
31.download：下载
32.vote：投票
33.siteinfo：网站信息
34.partner：合作伙伴
35.link、friendlink：友情链接
36.copyright：版权信息
37.siteinfoCredits：信誉
38.siteinfoLegal：法律信息

七、CSS样式命名
1.对齐样式命名：left（左边内容）、center（中间内容）、right（右边内容）等；
2.颜色英文命名：red（红色）、green（绿色）、yellow（黄色），又或者border_red（红色边框）等；
3.颜色代码命名：f00（红色）、ff0（黄色）、f90（橙色）等；
4.文字大小命名：font12px（字体12像素）、font16px（字体16像素）等；
5.页面线条命名：line_x （横线）、line_y （纵线）或 line_red（红线）、line_black（黑线）
6.图片图标命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
7.页面广告命名：ad_01、ad_02
8.背景框架命名：nav_bg（代表导航条的背景图片位置）、tool_bg（代表工具栏的背景图片位置）
八、类class的书写规范示例
　　（1）颜色：使用颜色的名称或者16进制代码，如
　　.red { color： red； }
　　.f60 { color： #f60； }
　　.ff8600 { color： #ff8600； }
　　（2）字体大小，直接使用"font+字体大小"作为名称，如
　　.font12px { font-size： 12px； }
　　.font9pt {font-size： 9pt； }
　　（3）对齐样式，使用对齐目标的英文名称，如
　　.left { float：left； }
　　.bottom { float：bottom； }
　　（4）标题栏样式，使用"类别+功能"的方式命名，如
　　.barnews { }
　　.barproduct { }
　　九、注意事项
　　（1）一律小写；
　　（2）尽量用英文；
　　（3）不加中杠和下划线；
　　（4）尽量不缩写，除非一看就明白的单词

注：
命名：根据每块元素的主题 或者功能、在页面上的位置
驼峰命名 从第二个单词开始每个单词的首字母大写 如; #mainLeftBox{}
写包含样式的时候能找到这个元素并且不影响其他元素即可

登录条：loginBar 标志：logo 侧栏：sideBar
广告：banner 导航：nav 子导航：subNav
菜单：menu 子菜单：subMenu 搜索：search
滚动：scroll 页面主体：main 内容：content
标签页：tab 文章列表：list 提示信息：msg
小技巧：tips 栏目标题：title 加入：joinus
指南：guild 服务：service 热点：hot
新闻：news 下载：download 注册：regsiter
状态：status 按钮：btn 投票：vote
合作伙伴：partner 友情链接：friendLink 页脚：footer
版权：copyRight

外　套：wrap 版 权：copyRight 商　标：label 标　题：title
顶导航：topnav
边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar
标　语：banner 菜单内容1： menu1Content
菜单容量：　menuContainer 子菜单：　　submenu
边导航图标：sidebarIcon 注释：　　　note
面包屑：breadCrumb(即页面所处位置导航提示)
容器：container 内容：content 搜索：search
登陆：login 功能区：　　shop(如购物车，收银台)
当前：current

命名：根据每块元素的主题 或者功能、在页面上的位置

驼峰命名 从第二个单词开始每个单词的首字母大写 #mainLeftBox{}

写包含样式的时候能找到这个元素并且不影响其他元素即可

页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法
登录条：loginBar 标志：logo 侧栏：sideBar
广告：banner 导航：nav 子导航：subNav
菜单：menu 子菜单：subMenu 搜索：search
滚动：scroll 页面主体：main 内容：content
标签页：tab 文章列表：list 提示信息：msg
小技巧：tips 栏目标题：title 加入：joinus
指南：guild 服务：service 热点：hot
新闻：news 下载：download 注册：regsiter
状态：status 按钮：btn 投票：vote
合作伙伴：partner 友情链接：friendLink 页脚：footer
版权：copyRight

外　套：wrap 版 权：copyRight 商　标：label 标　题：title
顶导航：topnav
边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar
标　语：banner 菜单内容1： menu1Content
菜单容量：　menuContainer 子菜单：　　submenu
边导航图标：sidebarIcon 注释：　　　note
面包屑：breadCrumb(即页面所处位置导航提示)
容器：container 内容：content 搜索：search
登陆：login 功能区：　　shop(如购物车，收银台)
当前：current