网页设计命名规则

1. 如果你是网页设计师，如果你用的还是拼音命名，你真的落伍了
   内容： 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.css
   CSS 命名规则
   头： 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
   合作伙伴： partner
   XHTML 文件中 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 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
   产品评论
   Editor's review .editor-review
   编辑评论
   New release .news-release
   最新产品
   Publisher .publisher
   生产商
   Screen shot .screenshot
   缩略图
   FAQ .faqs 常见问题
   Keyword .keyword
   关键词
   Blog .blog 博客
   Forum .forum 论坛
   2. 另外在编辑样式表时可用的注释可这样写：
   <-- Footer -->
   内容区
   <-- End Footer -->
   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 { float:left; }
   .bottom { float:bottom; }
   (4) 标题栏样式 , 使用 " 类别 + 功能 " 的方式命名 , 如
   .barnews { }
   .barproduct { }
   注意事项 :
   www.yueguangfz.com
   1. 一律小写 ;
   2. 尽量用英文 ;
   3. 不加中杠和下划线 ;
   4. 尽量不缩写，除非一看就明白的单词
   .
   主要的 master.css
   模块 module.css
   基本共用 base.css
   主题 themes.css
   专栏 columns.css
   打印 print.css
   文字 font.css
   表单 forms.css
   补丁 mend.css
   布局，版面
   layout.css