web标准化页面制作规范.docVIP

WEB标准化页面制作规范 命名规范 站点目录 清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植有着重要的影响。 以下为站点目录内容： css文件目录:存放CSS 样式文件 flash文件目录:存放.swf文件 html 文件目录:存放分栏目内容页面 images文件目录:存放图片文件 js文件目录:存放JS文件 常用目录名： data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) (脚本) Language (语言) css (样式)等…… 文件的命名规范 文件命名的指导思想是：使得你自己和工作组的每一个成员能够方便的理解和记忆每一个文件的意义，从而可以更方便的查找、修改、移植文件等管理操作，提高工作效率。 文件名称英文单词或拼音长度不超过20个字符 （如：1、产品页面，可以命名为：product.html或者chanpin.html 2、最新动态_查看详情页面，可以命名为：zxdt_ckxq.html） 文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母 网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读 (1)页面结构 容器: bigbox 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 左右中：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 (class)css样式的命名规范 一些常规性的样式名称命名规范化，能够加强样式的重用性，使页面样式代码的重复性出现的机率降低。Css样式命名的规范化，能够使页面结构和样式文件起到一一对映的关系，修改以及优化起来更加清晰明了。 (1)颜色:使用颜色的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } (2)字体大小,直接使用font+字体大小作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英文名称,使用功能(简写)+对齐位置,如 .fl_left { float:left; } .fl_right { float:right } .text-left{text-align:left} 注意事项: 1.不使用大写形式的类名和id名; 2.尽可能使用描述性的英文单词的组合作为类名和id名; 3.id名及类名的多个英文单词之间使用“_”短横线分隔; 4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL) 附：一些CSS框架的命名参考 主要的 master.css 模块 module.css 基本共用 base.css 主题 themes.css 专栏 columns.css 打印 print.css 文字 font.css 表单 forms.css 补丁 mend.css 布局，版面 layout.css 图片制作规范 图片的命名规则 名称为英文单词或拼音，如果需要加数字