山桐子网站设计规范标准说明书一．目的 规范能使页面相同属性单元识别统一，防止混乱，出现错误，避免用户在浏览时，理解困难 突出个性，减少设计时间，节约资源的目的 相同的属性能够重复利用，减少资源上手简单能够让界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员得到详细的参照二．网站界面设计标准1．网业宽度网页设计采用1258px*980px分辨率产品宽度：160px，产品间距：40px/30px2． 字体 正文采用宋体12号，颜色：#用黑体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 补齐。