山桐子网站设计规范标准说明书
一.目的
规范能使页面相同属性单元识别统一,防止混乱,出现错误,避免用户在浏览时,理解困难。
突出个性,减少设计时间,节约资源的目的。
相同的属性能够重复利用,减少资源。
上手简单能够让界面设计师,用户体验设计师,前台技术工程师,发布支持人员,运营编辑人员得到详细的参照。
二.网站界面设计标准
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 像素
…
段落
换行符
Align 文本对齐方式
Center 居中对齐
Left 左对齐
Right 右对齐
Justify 两端对齐
2.表格标记
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.表单标记
表单标记Action 动作
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 补齐。