网页设计的一般命名规则.doc

网页设计过程中一般命名规则由-学无止境-整理id的命名:(1)页面结构容器: container页头：header 内容：content/container页面主体：main页尾：footer 导航：nav侧栏：sidebar 栏目：column左右中：left right center页面外围控制整体布局宽度：wrapper(2)导航导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu标题: title 摘要: summary(3)功能标志：logo 广告：banner 登陆：login 登录条：loginbar注册：regsiter 搜索：search 功能区：shop 标题：title加入：joinus 状态：status 按钮：btn 滚动：scroll标签页：tab 文章列表：list 提示信息：msg 当前的: current小技巧：tips 图标: icon 注释：note 指南：guild服务：service 热点：hot 新闻：news 下载：download投票：vote 合作伙伴：partner 友情链接：link 版权：copyright(四)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.尽量不缩写，除非一看就明白的单词.主要的master.css模块 module.css基本共用 base.css主 题 themes.css专栏 columns.css打印 print.css文 字 font.css表单 forms.css补丁 mend.css布局，版面 layout.cssCSS命名规则 头：header尾：footer导航：nav 内容：content/containe侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo广告：banner页面主体：main热点：hot 新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg 小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partnerXHTML文件中id的命名(1)页面结构 容器: container页头：header内容：content/container页面主体：main 页尾：footer侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2) 导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3) 功能 标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus 状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild 服务：service热点：hot新闻：news下载：download投票：votet合作伙伴：partner友情链接：link版权：copyright做网页时，常会因为不会命名和命名重复而造成好多不不必要的麻烦，正确的命名的确很重要，我这里也收集了一些命名规则，发上来大家共享下。 .CSS ID 的命名 外套：wrap 主导航：mainnav 子导航：subnav 页脚：footet 整个页面：content 页眉：header 页脚：footer 商标：label 标题：title 主导航：nav（mainnav/globalnav） 顶导航：topnav 边导航：sidebar左导航：leftsidebar 右导航：rightsidebar当前位置：loc旗志：logo 标语：banner菜单内容1： menu1 content 菜单容量：menu container子菜单：submenu边导航图标：sidebarIcon 注释：note面包屑：breadcrumb(即页面所处位置导航提示）容器：container内容：content搜索：search登陆：Login功能区：shop(如购物车，收银台)当前的current 网站公用相关 Container div #container 容器 Header or banner div #header 页头部分 Main or global navigation div #main-nav 主导航 Menu #menu 菜单 Sub Menu #submenu 子菜单 Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏 Main div #main 页面主体 Content div #content 内容部分 The main content area #content-main 主要内容区域 Footer div #footer 页脚部分 Tag #tag 标签 Message #msg #message 提示信息 Tips #tips 小技巧 Vote #vote 投票 Friend Link #friendlink 友情连接 Title #title 标题 Summary #summary 摘要 Sub-navigation list #sub-nav 二级导航 Search input #search-input 搜索输入框 Search output #search-output 搜索输出和搜索结果相似 Search #search 搜索 Search results #search-results 搜索结果 Copyright information #copyright 版权信息 brand #branding 商标 branding-logo #branding-logo LOGO Site information #siteinfo 网站信息 Copyright information etc. #siteinfo-legal 法律声明 Designer or other credits #siteinfo-credits 信誉 Join us #joinus 加入我们 Partnership opportunities #partner 合作伙伴 Services #service 服务 Regsiter #regsiter 注册 Status #status 状态 电子贸易相关 Products .products 产品 Products prices .products-prices 产品价格 Products description .products-description 产品描述 Products review .products-review 产品评论 Editors review .editor-revi