在网页设计过程中常用的命名规则.doc

如果你是网页设计师，如果你用的还是拼音命名，你真的落伍了内容：content/container导航：nav侧栏：sidebar 栏目：column标志：logo页面主体：main 广告：banner热点：hot新闻：news下载：download子导航：subnav菜单：menu搜索：search页脚：footer滚动：scroll版权：copyright友情链接：friendlink子菜单：submenu内容：content标签页：tab文章列表：list注册：regsiter提示信息：msg小技巧：tips加入：joinus栏目标题：title指南：guild服务：service状态：status投票：vote尾：footer合作伙伴：partner登录条：loginbar页面外围控制整体布局宽度：wrapper左右中：left right center (二)注释的写法:/* Footer */内容区/* End Footer */(三)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内容：content/containe尾：footer导航：nav侧栏：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导航：nav侧栏：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投票：vote合作伙伴：partner友情链接：link版权：copyright做网页时，常会因为不会命名和命名重复而造成好多不不必要的麻烦，正确的命名的确很重要，我这里也收集了一些命名规则，发上来大家共享下。1.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 LOGOSite 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-review 编辑评论New release .news-release 最新产品Publisher .publisher 生产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛2.另外在编辑样式表时可用的注释可这样写：内容区3.样式文件命名主要的 master.css布局，版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css网页切图过程中div+css命名规则内容：content/container 导航：nav侧栏：sidebar 栏目：column 标志：logo 页面主体：main 广告：banner热点：hot新闻：news下载：download子导航：subnav菜单：menu搜索：search 页脚：footer滚动：scroll版权：copyright 友情链接：friendlink子菜单：submenu内容：content标签页：tab 文章列表：list注册：regsiter 提示信息：msg 小技巧：tips加入：joinus 栏目标题：title 指南：guild服务：service 状态：status投票：vote尾：footer 合作伙伴：partner 登录条：loginbar页面外围控制整体布局宽度：wrapper 左右中：left right center (二)注释的写法:/* Footer */内容区/* End Footer */(三)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 flo