图集1/1

正文 4124字数 286,120阅读

一.网站设计及基本框架结构:

网页设计命名规范
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”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。 6. Sidebar “Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“. 7. Footer “Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
Run code
Cut to clipboard

    二.需要注意的几点:
    1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名. 如:red/left/big等。 2.组合命名规则: [元素类型]-[元素作用/内容] 如:搜索按钮: btn-search 登录表单:form-login 新闻列表:list-news 3.涉及到交互行为的元素命名: 凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则: 鼠标悬停:：hover 点击：click 已浏览：visited 如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
    Run code
    Cut to clipboard

      三.Photoshop图层结构规范:
      Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
      图层命名结构

      四．常用命名汇总:
      站点：site 首页：homepage 当前位置：currentPath 二级页面/子页面：subpage 布局：layout 搜索：search 网页头部：head/header 登录条:loginbar 标志:logo 侧栏：side/sidebar 广告条:banner 导航:nav 主 导 航：mainNav 顶 导 航：topNav 子导航:subNav 当前位置导航：crumb 菜单:menu 子菜单:subMenu 菜单内容：menuContent 子菜单内容：subMenuContent 下拉：drop 下拉菜单:dropMenu 工具条：tool/toolbar 表单:form 栏目:column 箭头：arr/arrow 搜索:search 搜索按钮:btn-search 滚动条:scroll 主题/外观：theme 页面主体：main 页面中部：mainBody 内容:content 标签页:tab 文章列表:list 标签内容：tagContent 当前标签：tagCurrent/currentTag 提示信息:msg 转角/圆角：cor/corner 特别的：spec 资源：source 加入：joinus 小技巧:tips 栏目标题:title 链接:links 页脚:footer 服务:service 指南：guild 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 注 释：note 投票:vote 合作伙伴:partner 友情链接：friendlink 关于我们：aboutus 提交:submit 搜索框：searchbox 文本框:textbox 网页底部：foot/footer 版权:copyright 网站地图: sitemap 列 定 义：column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列)
      Run code
      Cut to clipboard

        分类命名：
        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
        Run code
        Cut to clipboard

          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 { }
          Run code
          Cut to clipboard

            注意事项: 　　1.一律小写; 　　2.尽量用英文; 　　3.不加中杠和下划线; 　　4.尽量不缩写，除非一看就明白的单词. 　　主要的 master.css　　模块 module.css　　基本共用 base.css 　　布局，版面 layout.css　　主题 themes.css　　专栏 columns.css 　　文字 font.css　　表单 forms.css　　补丁 mend.css　　打印 print.css 统计:count
            Run code
            Cut to clipboard

              以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav 　　规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。

              一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：
              f-blue:表示蓝色字体样式 f-blod:表示粗体字体样式 对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如： n-title:新闻标题 n-list:新闻列表
              Run code
              Cut to clipboard

                五、CSS文件及样式命名
                1、CSS文件命名规范
                全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css；
                Run code
                Cut to clipboard

                  2、CSS样式命名规范
                  本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。

                  为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：

                  头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

                  下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。）