文档库 最新最全的文档下载
当前位置:文档库 › 四组山桐子网站设计规范标准说明书

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

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

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

一.目的

规范能使页面相同属性单元识别统一,防止混乱,出现错误,避免用户在浏览时,理解困难。

突出个性,减少设计时间,节约资源的目的。

相同的属性能够重复利用,减少资源。

上手简单能够让界面设计师,用户体验设计师,前台技术工程师,发布支持人员,运营编辑人员得到详细的参照。

二.网站界面设计标准

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.表格标记

… 表格标题

… 行

… 列

… 表格的表头Border 边框Cellpadding 填充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.表单标记

表单标记

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 补齐。

相关文档