全局于网站整体的网页设计（9）
作者：小猪头 来源：蓝色理想 发布时间：2009-03-27 17:15:00
如何进行规范的代码设计
相信很少有人会在网页设计的过程中把代码设计单独拿出来说，虽然在软件设计中代码设计很受重视，但在web设计里，大家更关心网站结构设计、数据库设计、页面视觉设计，很少有人会真正关心前端代码设计。这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的，设计得差的前端代码，在用户使用过程中也许毫无影响，却能将前端工程师和web程序员弄得一塌糊涂。
DIV的规范及科学统筹
说到前端代码，不能不说DIV架构。目前主流的网站页面架构方式已经转向DIV+CSS的结构层和表现层脱离的方式，这个过程也叫做网站的标准化。这与以往的利用表格定位的方式完全不同，更加强调了界面元素的模块化定位，由DIV确定模块的界限，再由CSS代码表现该DIV元素的表现形式。
在DIV的布局方式中，我们更多强调的是规范，因为DIV的ID名称和CLASS类名称是能够由代码编写者自行定义的，所以有明确规范的DIV设计是前端代码设计的前提。如今的web工作往往牵涉到一个团队中的多人进行协作开发，代码被阅读和被修改的次数远远多于它被编写的次数，而保持代码易读、易修改的关键，就在于在代码编写前期确定能被认同的代码规范。
首先我们先了解DIV架构中的命名规则，DIV的许多规范要点体现在ID或者CLASS的命名中，绝大多数设计师习惯使用属性命名方式：即显示绿色14号字的类就命名为green14，蓝色背景区域的类就命名为blueBg。这样命名也未尝不可，但是这样的命名方式对于合作的其他职能部门的同事来说，是毫无意义的。PHP程序员不会关心这个类的字是什么颜色，他只管这块区域应该和哪个程序模块接口；模板编辑也不会关心背景究竟该是什么颜色，他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部。所以我们比较倡导表意命名方式和接口命名方式，比如pageHead和loginArea这样的命名，pageHead明确表示了这块区域的意思，而loginArea指代了这是个登录区域的接口。不管这两个类里的字号颜色等将来因为改版发生了什么改变，它们起到的作用和所定义的固定区域是不会改变的。
其次我们了解一下DIV中类的复用，同一个页面中，DIV的ID是唯一的，表示该页面上独一无二的一种特定表现；而CLASS（类）是可以无限重复使用的，表现该页面上有某些属性相同的若干区域，所以DIV的复用仅仅指的是类。牵涉到复用的时候，类的命名应该尽量多地表意化，有必要的情况下使用属性命名也能起到很好的效果。比如页面中有很多个不同的内容列表区块，但是宽度都是760px，那么使用contList760这样的类名称进行复用就比contListA、contListB、contListC……这样单独且表意不明显的命名要好得多。如图1所示的网站alistapart.com，由图2我们可以看出，它的代码设计非常规整。
0
投稿猜你喜欢
网页显示不正常，出现图片错位，文字跑远……等等，别急，试试IE8自带的”兼容性视图”功能吧!其实出现网页显示问题，一般不是您的电脑或者浏览器- “12-Factor” 是构建SaaS服务的一种方 * ，这套理论适用于任意语言和后端服务（数据库、消
- 下面的各种屏蔽网页鼠标或键盘的代码都是我以前收集的，挺实用的，防一般的访客还是很有用的。1.禁止鼠标选中捕捉网页文字图片等元素在<bo
- 对象：是抽象的概念 如列表 元组 字典 集合 皆为对象序列化：一种方法。目的：把对象存储在磁盘上（即，将对象转换为字节数据/字符数据）。这一
- 问题描述前端时间在公司的时候，要使用angular开发一个网站，因为angular很适合前后端分离，所以就做了一个简单的图书管理系统来模拟前
- 一、使用SQL Server全文搜索配置要使用SQL Server的全文搜索服务，需要进行如下配置。1、开启全文搜索服务：2、开启数据库的全
- 前言大多数人只知道github是开源社区，可以用来做项目的版本管理，但是其实他还有一些其他功能和小彩蛋。有没有和我一样不想花钱去购置服务器的
- 先放关键代码：i = tf.train.range_input_producer(NUM_EXPOCHES, num_epochs=1, s
- 前言：话说，我一直没能理解美工究竟是什么（这是一篇投稿）。因为要求确实很多。目前，我只能理解成，是前端开发+页面设计+用户体验设计的全能手。
- 前言本文将带你学习装饰器在 Python 中的工作原理，如果在函数和类中使用装饰器，如何利用装饰器避免代码重复（DRY 原则，Don&
- 本文实例讲述了Python中类的定义、继承及使用对象的方法。分享给大家供大家参考。具体分析如下：Python编程中类的概念可以比作是某种类型
- 引言这两天在做微服务上云的事，之前一直是本地运行，后来在服务器搭建了生产环境集群。上云时出现了一些幺蛾子云上的服务都需要身份验证的，没有专用
- var p="",s="4e00"; for( var i=0;i<255;i++){ p+=
- 在cmd输入：python -m django --version来源：https://blog.csdn.net/ShellDawn/ar
- 第一种np矩阵可以直接与标量运算>>>import numpy as np>>>arr1 = np.ar
- 简单的学习下利用socket来建立客户端和服务端之间的连接并且发送数据1. 客户端socketClient.py代码import socke
- matplotlib默认根据数据系列自动缩放坐标轴范围。pyplot模块中的autoscale函数可以切换是否自动缩放坐标轴范围，xlim(
- 由于在遭遇到这个页面之前我们一 * 互刚好在讨论交互设计原则之类的话题，其中有一条是：包容性，即满足主体用户需求的同时，尽可能兼顾非主体用户需
- 目录一、pyecharts绘制饼图语法简介二、绘制普通饼图三、绘制圆环图四、绘制饼图-玫瑰图一、pyecharts绘制饼图语法简介饼图主要用
- 相关文章推荐：各种loading加载图标下载 gif格式loadinfo和ajaxload一样，也是一个在线Ajax载入动画生成工
