1.规范产生的目的
a.为提高团队协作效率, 利于后台添加功能和前端的后期优化维护
2.文件规范
a.文件名称:
a.1统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符
b.HTML的命名原则:
b.1引文件统一使用index.htm index.html index.asp文件名(全部小写)
b.2各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称
例如:产 品---product
b.3栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示
b.4每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm index.html index.asp
c.图片的命名原则:
c.1图片的名称分为头尾两部分,用下划线隔开;
c.2:
放置在页面顶部的长方形的图片: banner
标志图片: logo
在页面上位置不固定并且带有链接的小图片: button
在页面上某一个位置连续出现,性质相同的链接栏目的图片: menu
装饰用的照片: pic
不带链接表示标题的图片: title
(部位名+下划线+数字+图片信息名称的组合)
例如:banner_sohu.gif menu_aboutus.gif menu_job.gif title_news.gif logo_mi.gif
鼠标感应效果图片命名规范为"图片名+_+on/off"
例如:menu1_on.gif menu1_off.gif
d.javascript的命名原则
例如:广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.js
e.动态语言文件命名原则
以性质_描述,描述可以有多个单词,用“_”隔开,一般是指该页面概要
例如:register_form.asp register_post.asp topic_lock.asp
3.文件存放位置规范
cn | 存放中文HTML文件 |
en | 存放英文HTML文件 |
flash | 存放Flash文件 |
images | 存放图片文件 |
imagestudio | 存放PSD源文件 |
flashstudio | 存放flash源文件 |
inc | 存放include文件 |
library | 存放DW库文件 |
media | 存放多媒体文件 |
project | 存放工程项目资料 |
temp | 存放客户原始资料 |
js | 存放JavaScript脚本 |
css | 存放CSS文件 |
4.CSS书写规范
a.CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。
a.1样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例:“ .shadow ”
a.2文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“ .no12 ” 、“ .no12-24 ”
a.3HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“HTML标签”例:hr { border: 1px dotted #333333 }
a.4态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。
该样式写法有2种: a.nav:link nav.a:link 第一种只能修饰<a>标签中;第二种可以修饰所有包含有<a>标签的其他标签。
页面内的样式加载必须用链接方式<link rel="stylesheet" type="text/css" href="style/style.css">;位于title上方
2.7 注释规范
1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 /*这儿是注释*/;
3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;
类命名规则:
头:header
内容:content/container
尾: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
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)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\
LOGO的国际标准规范
为了便于INTERNET上信息的传播,有了这样的一整套关于网站LOGO的标准,目前有三种规格:
88*31 互联网上最普遍的LOGO规格。
120*60 一般大小LOGO。
120*90 大型LOGO。