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

山桐子网站设计规范标准说明书一目的 规范能使页面相同属性单元识别统一，防止混乱，出现错误，避免用户在浏览时，理解困难。 突出个性，减少设计时间，节约资源的目的。 相同的属性能够重复利用，减少资源。上手简单能够让界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员得到详细的参照。二网站界面设计标准1网业宽度网页设计采用1258px*980px分辨率产品宽度：160px，产品间距：40px/30px2 字体 正文采用宋体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 用途:记录下所有浏览者的信息。13css样式目录:style用途:运用的相关文件的样式14. 公共的文件目录:include 用途:使公共的文件信息记录在案。3主要文件名的创建1 ) 以每个子模块的开头字母为每一个子模块建立文件夹名。功能： 用做放每一个子文件名。2 ) 索引文件统一使用index.html文件名。功能： 方便搜索。3 ) 如有必要每一个子目录下也要包含一个index.html文件。功能： 方便搜索。4 ) 文件名统一用小写的英文字母，数字，和小划线的组合来命名，尽量按照先后顺序来编文件名。 功能： 不会出现乱码，容易修改错误出。5 ) 多个同类型文件使用英文字母加数字命名，字母和数字之间用下划线分割。数字位数与文件个数成正比，不够的用0 补齐。