Web UI 设计(网页设计)命名规范
作者：暴风彬彬 来源：彬Go 发布时间：2009-05-13 13:06:00
今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。
这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
Web UI 设计命名规范
一.网站设计及基本框架结构:
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“.
0
投稿猜你喜欢
- 本文实例为大家分享了python定时复制远程文件夹中文件的具体代码，供大家参考，具体内容如下import os, shutil, sysim
- 本文实例讲述了Python面向对象程序设计之继承与多继承。分享给大家供大家参考，具体如下：1. 继承在C++和Java中，使用继承时，子类的
- 本文给出一条 SQL 语句用于展示在同一名服务器上，不同的数据库间查询，注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 昨天在做一道CTF题的时候碰到了一个图片异或的问题，操作大概如下：将一个图片读入，然后每字节进行异或操作，核心代码可简化为以下：#codin
- 应用正则表达式的全局匹配，可以匹配出字符出现的次数，比较这些次数，将最大的保存并返回。代码如下： var countMost = funct
1. 前言相信参与使用Oracle数据库进行项目开发、运维的同学常常被Oracle JDBC驱动的Maven依赖折磨。现在这一情况在今年二月- 本文分享的实例主要实现的是Python+matplotlib绘制一个有阴影和没有阴影的3D条形图，具体如下。首先看看演示效果：完整代码如下：
- 前言本文提供将视频按照时间维度进行剪切的工具方法，一如既往的实用主义。主要也是学习一下golang使用ffmpeg工具的方式。环境依赖ffm
- 功能是打开本机端口，映射到指定IP的端口场景1本机：tomcat启动8080，通过本端口工具打开80，指向到tomcat的8080。请求本机
- 一、问题描述当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用inp
- mysql binlog3种格式，row,mixed,statement. 解析工作mysqlbinlog --base64-output=
- 遇到的问题当时自己在使用Alexnet训练图像分类问题时，会出现损失在一个epoch中增加，换做下一个epoch时loss会骤然降低，一开始
- 我们在用Firefox上一些网站会看到这样的显示：现在时间是：108年1月26日而IE浏览器的话就显示正常的：现在时间是：2008年1月26
- 前言selenium处理文件上传大致会有两种情况，一种是文件上传使用的是input标签元素，即<input type="fi
- 先来看看python的版本： >>> import sys >>> sys.version &a
- 前言：随着移动端的普及出现了很多的移动 APP，应用软件也随之流行起来。最近又捡起来了英雄联盟手游，感觉还行，PC 端英雄联盟可谓是爆火的游
- predict_proba 返回的是一个 n 行 k 列的数组，列是标签（有排序）， 第 i 行 第 j 列上的数值是模型预测 第 i 个预
- 直接看代码using System;using System.Configuration;using MySql.Data.MySqlCli
- logging模块介绍Python的logging模块提供了通用的日志系统，熟练使用logging模块可以方便开发者开发第三方模块或者是自己
- 很多时候，我们执行页面上某个URL请求的时候，需要有等待的时间。如果是直接的页面跳转，浏览器会有缓冲进度展示，但是如果是AJAX，我觉得应该
