山桐子网站设计规范标准说明书.doc

山桐子网站设计规范标准说明书

一．目的
规范能使页面相同属性单元识别统一，防止混乱，出现错误，避免用户在浏览时，理解困难。
突出个性，减少设计时间，节约资源的目的。
相同的属性能够重复利用，减少资源。
上手简单能够让界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员得到详细的参照。

二．网站界面设计标准

1．网业宽度
网页设计采用1258px*980px分辨率
产品宽度：160px，产品间距：40px/30px
2． 字体
正文采用宋体12号，颜色：#333333
用黑体12号+14号用做标题
3． 图形表单

三．存储目录名的设计标准
1存储目录名
1) 不要将所有文件都存放在根目录下
2) 子目录的建立，首先按主栏目建立以及图片分类
3) 在每个主目录下都建立独立的Images目录
4) 不要使用中文目录，以英文、拼音为主
5) 所有广告、交换链接、banner等保存到adv目录
2．链接结构
树状链接结构与性状链接结构相结合。
3 链接规范
1) 新闻、信息类通常用新开窗口方式打开。
2) 顶导航、底部导航通常采取在本面打开，特殊栏目和功能可新开窗口。
3) 链接带下划线为链接通常的默认网格、顶部导航或特殊位置为观赏性可用样式表取消下划线。
4) 链接的颜色可配合主题颜色风格改变，通常蓝色、暗蓝色、黑色,但激活的链接颜色、鼠标移动其上应有所变化。

四．文件名规范
1 ) 以每个子模块的开头字母为每一个子模块建立文件夹名。
2 ) 索引文件统一使用index.html文件名。
3 ) 如有必要每一个子目录下也要包含一个index.html文件。
4 ) 文件名统一用小写的英文字母，数字，和小划线的组合来命名，尽量按照先后顺序来编文件名。
5 ) 多个同类型文件使用英文字母加数字命名，字母和数字之间用下划线分割。数字位数与文件个数成正比，不够的用0 补齐。
6) 图片的名称应分为头尾两部分，中间用下划线隔开。头部分表示此图片的大类性质。尾部分用来表示图片的具体含义，用英文字母表示。如过鼠标感应效果图片命名规范为"图片名+_+on/off" 。
7) 所有的JS文件， CSS文件， CGI文件，多媒体文件等都应该以其含义的英文或英文简写来命名。
8) 文件名称统一用小写的英文字母、数字和下划线的组合来命名，尽量按单词的英语翻译为名称。
9) 必须建立网站文件清单及其说明文档。

五．代码规范
代码名称 代码说明

1．网页元素
Doctype 网站声明
… html 标记
… 头部标记
meat(name http-equiv) 网页属性说明
… 网页标题
… 网页主体标记文本标记
font-size 文本大小
font-weight 文本粗细
color 文本颜色
font-family 字体
font-style 文本样式
blockquote 文本缩进
strong 文本加粗
italic 文本倾斜
px 像素
右对齐
Justify 两端对齐

2．表格标记

Cellspacing 间距
Bordercolor 边框颜色
Background 背景图片
Bgcolor 背景颜色
Width 宽度
Height 高度
Valign 垂直位置

3．链接标记

… 超链接标记
Href 链接路径
Target 链接目标
a:link 正常超链接样式
a:visited 访问过的超链接
a:hover 鼠标悬浮超链接样式
a:active 按下鼠标时超链接样式
text-decoration 修饰
4．层标记
div 层标签
apdiv 绝对元素
divspan 也是层标签
position 位置
left 层距离左边距离
top 层距离顶部距离
z-indexz 轴大小
background-image 背景图片
visibility 可见性
background-color 背景颜色
inherit 继承父层的可见性
visible 一直可见
hidden 隐藏

5．表单标记

动作
Method 方法
Enctypemime 类型
… 插入表单对象标记
Submit 提交表单
Reset 重设表单
Value 值

6．其他标记

Img 插入图片标记
Src 插入图片路径
… 插入媒体文件对象标记
… 视频、音频标记
Hr 水平线

CSS 样式代码
1．类型代码

font-family 字体
font-size 大小
font-style 样式
line-height 行高
font-weight 粗细
font-variant 变体
text-transform 大小写
color 颜色
text-decoration 修饰

2．背景代码

background-color 背景颜色
background-image 背景图片
background-repeat 重复
background-attachment 附件固定、滚动
background-position 位置水平、垂直

3．区块代码

word-spacing 单词间距
letter-spacing 字母间距
vertical-align 垂直对齐
text-align 文本对齐方式
text-indent 文字缩进
white-space 空格
display 显示

4．方框代码

width 宽度
height 高度
float 浮动
clear 清除（一般不使用）
padding 填充（内容与边界的距离）
padding-top 内容距离上边界多远
padding-right 内容距离右边界多远
padding-bottom 内容距离下边界多远
padding-left 内容距离左边界多远
margin 边界（整个方框与外部的距离）
margin-top 方框距离上面多远
margin-right 方框距离右边多远
margin-bottom 方框距离下边多远
margin-left 方框距离左边多远

5．边框代码

border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-top-width 上边框宽度
border-right-width 右边框宽度
border-bottom-width 下边框宽度
border-left-width 左边框宽度
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色

6．列表代码

list-style-type 列表类型
list-style-image 项目符号图像
list-style-position 列表位置
7．定位代码(对层使用)
position 位置或者类型（绝对、固定）
visibility 显示（可见、隐藏）
width 宽度
z-indexz 轴大小
height 高度
overflow 溢出（内容满了以后的状态）
top 距离上边多远
right 距离右边多远
bottom 距离下边多远
left 距离左边多远
clip 剪辑（上下左右剪掉相应的大小）

8．扩展代码

page-break-before 分页之前样式
page-break-after 分页之后样式
cursor 鼠标样式
filter 过滤器（暂时不知道怎么用）

六．“山桐子”网站的设计标准

1．网站的主题、UI风格、色彩的分析
网站主题：山桐子能源科技网站它的主题就是山桐子，它的利用价值，科技成品及为人类做出的重大贡献。
UI风格：用户界面的设计主要以白色和绿色为主要色彩，清新脱俗的感觉。
色彩的分析：主体色为白色和绿色，浅蓝色的搭配，使得网站的整体效果给人一目了然的感觉
网站主题：山桐子能源科技网站它的主题就是山桐子，主要介绍山桐子的形态特征，植物形态，生长习性，生态环境，地理分布、病害防治、应用价值，它的利用价值，科技成品及为人类做出的重大贡献。

2．模块功能目录名的创建
1．新闻中心:
目录:news
用途:存放于新闻中心下的相关文档。
2．公司简介
目录:gongsjj
用途:记录下公司的一些介绍。
3.科技文献
目录:kejwx
用途:供用户浏览，下载和使用。
4.产品简介
目录:chanpjj
用途:介绍该产品的相关信息供用户选择。
5.会员特权
目录:vip
用途:会员比一般用户拥有更多的权力，比如：能试用新产品。
6．在线留言
目录:zaixly
用途:帮助和解决用户在使用本产品中遇到的各种问题。
7.订单
目录:dingdan
用途:记录下各笔要销售出去的产品。
8．合作伙伴
目录:hezhb
用途:跟公司有关联的企业的记录。
9．图片
目录:images
用途:存储所有的公共图片。
10．模板
目录:Templates
用途:存储所有的文件模板。
11．上传文件
目录:upload
用途:存储所有的上传文件。
12.浏览者
目录:download
用途:记录下所有浏览者的信息。
13．css样式
目录:style
用途:运用的相关文件的样式
14. 公共的文件
目录:include
用途:使公共的文件信息记录在案。

3．主要文件名的创建
1 ) 以每个子模块的开头字母为每一个子模块建立文件夹名。
功能： 用做放每一个子文件名。
2 ) 索引文件统一使用index.html文件名。
功能： 方便搜索。
3 ) 如有必要每一个子目录下也要包含一个index.html文件。
功能： 方便搜索。
4 ) 文件名统一用小写的英文字母，数字，和小划线的组合来命名，尽量按照先后顺序来编文件名。
功能： 不会出现乱码，容易修改错误出。
5 ) 多个同类型文件使用英文字母加数字命名，字母和数字之间用下划线分割。数字位数与文件个数成正比，不够的用0 补齐。