PC端项目规范
根据项目名称创建项目文件夹。
cn 存放中文HTML文件
en 存放英文HTML文件
flash 存放Flash文件
images 存放图片文件
imagestudio 存放PSD源文件
flashstudio 存放flash源文件
inc 存放include文件
library 存放DW库文件
media 存放多媒体文件
project 存放工程项目资料
temp 存放客户原始资料
js 存放JavaScript脚本
css 存放CSS文件
用PS切图时记得保存带切片的psd,方便后期修改
HTML的命名原则
引文件统一使用index.htm index.html index.asp文件名(小写)
css文件以英文命名,公用样式通常命名为reset.css(常用的浏览器样式)、public.css(公共样式)、首页通常命名为index.css,其他页面依实际模块或功能需求命名
图片
图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质
例如:广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名: banner
标志性的图片取名为: logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
装饰用的照片我们取名: pic
不带链接表示标题的图片我们取名: title
html书写规范
文档类型声明及编码
·统一为html5声明
·编码统一为utf-8
书写规范
·根据页面结构实现层次分明的缩进
·标签、属性、属性命名由小字母及下划线、数字组成,且所有标签必须闭合
属性值必须用双引号包括
语义化 HTML
·根据页面结构选择合适的标签,如标题根据重要性用h1-h6不同等级的标签标记、段落标记用P、结构简章重复的部分用ul、li标签
·页面中重要的图片内容要添加alt=“”替换文本 ,以便图片丢失时,用户可以根据替换文本了解页面内容
·根据模块内容定义class和id名称,如包含logo和搜索框等在内的头部标签用.header,包含联系信息,版权等的模块用footer或copyright
合理嵌套HTML标签
·合理嵌套HTML标签,ul和li是固定嵌套,ul直接子元素必须是li;dl和dt,dd是固定嵌套,dl的直接子元素必须是dt和dd;p标签不允许嵌套p标签;a标签不允许嵌套a标签和其他交互性元素。行内标签不应嵌套块级标签。
书写代码时
·添加注释:应该为大区块样式添加 注释,小区块适量注释
·class与id的命名
命名要语义化、简明化
css属性书写顺序,
建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float(包括clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow等;自身属性主要包括: width & height & background & border; 文本属性主要包括:font、color、text-align、text-decoration、text-indent等;其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等
属性补充
border-collapse:collapse 合并表格的边框
cursor 定义鼠标形状
可能的值:
url 自定义光标
default 默认光标
auto 默认。浏览器设置的光标
crosshair 光标呈十字
pointer 一只手
move 指示对象可被移动
letter-spacing: 定义字符间距
word-spacing: 定义单词间距
visibility 属性规定元素是否可见
visible 默认值,元素可见
hidden 隐藏
outline
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。语法同border
常用于去除输入框的轮廓线。outline:none;