1、文档编号 :WH-ZY-XB-009 合成规范 本文主要用于规范合成的工作,包括 文件存放,操作步骤, 文件的命名,源文件的保存,注意的细节等等,希望通过此文来规范。 序号 规范内容 文件存放规范 1 本地存放规范 建立统一标准的文件夹以存放工作文件,全部项目文件均放到一个名为 work 的文件夹下,并按年份建立次级目录,再以工作单系统中的项目名称为文件夹名称对应存放相关文件。 如: 2008 年广东伊立浦项目,存放路径应为: work2008/Y_广东伊立浦 合成文件存放路径为: work2008/Y_广东伊立浦 /合成 程序文件 存放路径为 : work2008/Y_广东伊立浦 /程序 2
2、 SVN 存放规范 使用 SVN 工具连接到对应项目 SVN 路径下,建立“合成”目录,将合成的页面上传到该目录。 如:广东伊立浦项目, SVN 路径为: https:/121.32.89.90:8088/svn/Y_广东伊立浦 合成存放路径应为: https:/121.32.89.90:8088/svn/合成 程序文件 存放路径为 :https:/121.32.89.90:8088/svn/程序 3 测试路径存放规范 合成文件存放路径:在测试路径 下找到相应项目的文件夹建立 web 目录,将合成的页面上传到改目录。 如:广东伊立浦项目,存放路径应为: http:/ (一般情况下项目的文件夹是
3、已经存在) 广东伊立浦项目,最终存放路径(已经完成前台程序开发)应为: http:/ 2009 为当年年份 基础规范 1 设计页面 PSD 从 SVN 上下载 2 进行页面合成前,请认真阅读项目需求定义书,有不清楚的地方及时与项目经理进行沟通。 3 确认项目 资料是否齐全,不齐全应与项目经理索取,如无资料的页面可暂时资料为空白。 4 如在合成过程中遇到与项目需求定义书不符或其他特殊情况应及时向部门经理汇报。 5 大部分一、二级栏目页面由合成人员独立参照原色痕迹风格补齐,如设计页面设计要求较高或合成人员达不到设计要求的页面,应告知部门经理和项目经理,由项目经理下工作单给设计人员设计页面。 6 切
4、割图片过程中,图片必使用 photoshop 导出品质好的 Gif、 Jpg 格式小图片。对于大图片要以多张小图组合进行切割,对于单色图片使用 Gif 格式文件,可以不用图 片的地方尽量不使用图片,多以样式或文字体现。 7 网页中共有的部分置于 SST( Service Side Include)包含文件中,如每页的页头、页脚、栏目菜单等。 8 在首页代码中的 中加入 的制作信息。 9 页面要兼容两种浏览器 IE 和 Firefox,但以 IE 为主。 10 页面在宽屏显示器下或在高象素浏览不会出现变形。 11 整个页面布局合理,保持简洁的 html 代码。 12 每个页面的资料,合成人员应该
5、认真核对,避免页面上出现文字不同或错别字现象。 13 经测试完成后,将合成的项目放到 SVN 和测试路径上,正确填写工作单内容并关闭工作单,告知主管与项目经理工作情况。 操作步骤 1 整站合成 1、 查看合成的设计稿测试路径; 2、 查看项目需求说明书,确定网站合成的页面类型; 3、 与项目经理索取网站的资料; 4、 与项目经理沟通,具体了解项目; 5、 与负责项目设计的设计师沟通了解页面需要注意的地方; 6、 在 SVN 上下载设计稿; 7、 按设计稿并参考需求制作网页 ,并按需求进行补充页面 8、 页面上如要求制作 JS 特效 ,分析制作脚本可行性 ,根据要求制作 ,否则与项目经理沟通。
6、9、 按需求文档和设计稿进行自检。 10、上传测试路径与 SVN。 2 合成修改 在建项目,在 SVN 上获取相应的文件 (如果该项目已经做好程序,请在该项目下的“程序”获取文件 )锁定修改,改完后文件“提交”,并将修改过的文件传到相应的测试路径。 已上正式路径的项目,从正式路径下载相应的文件修改。 3 多语言版本制作 在该目录下创建语言版本目录(目录名称:参考命名规范)。 如 : 英文版 目录名称为 english 日语目录名称为 japanese 如语言版本 没有设计页面,把该项目已经做好程序的版本的 所有前台文件 ,拷贝到创建的语言版本目录下,把文字、图片、内容等 静态资料修改 。 (外
7、语版:文字必须使用外语字体,通常为 Arial、Verdana) 如语言版本设计了页面,就在创建的目录下,合成页面。 繁体版 制作原理:共用简体版,采用 js 技术动态翻译页面的文字信息。 操作流程: 流程步骤说明: A 程序员 在根目录下新建 big5 文件夹,将简体版程序复制一份到该文件夹下;将路 径或者文件地址提交给相关合成人员。 具体的操作: 创建 big5 文件夹,该文件夹包含整个简体版程序 新建一个 JS 文件:将 languageNew.js复制到 JS 文件夹里 在共用的页面调用该 JS 比如:在共用的 bottom 代码底部加上如下开始 程序员 合成人员 程序员 结束 创建文
8、件供合成人员使用 修改图片等静态文件 测试,修改链接地址 4 英文版 (置标适用 ) 目录名: siteen 制作原理:共用简体版的模板文件,把图片和页面中的文字信息进行翻译和修改处理 操作流程: a) 进入后台系统,创建英文版,文件夹名 siteen,生成文件 b) 把中文版的文件复制到 siteen 文件夹中,并把 .Svn 的文件删除 c) 根据中文版的模板进行修改,修改图片和出现的中文,进行英文翻译 d) 后台系统中的“栏目名称”用中文,“栏目前台名称”用 英文,模板页面中读取当前栏目时读取“栏目前台名称”。 e) 分页置标用改成英文的,提交表单的页面也要把中文进行英文翻译。 f) 改
9、好发布网站后,要测试英文版的流程是否与中文版的一致,要录入简单的信息 (如何没有提供翻译,则保持原有中文版数据,并且在标题及内容后面加上 EN 字样 ),确保首页有数据读取。 合成完成自检 严格按照合成工作规范及设计工作规范进行设计工作 按照项目经理(客户)提出的要求按质按量的进行合成及修改 在修改文档上,相应标出已经本人修改过的修改意见,以免修改遗漏。(针对修改文档比较多的情况) 按照需求定义书规划的栏目及程序类型进行合成 保证合成的页面与原设计稿相符 页面在宽屏显示器下或在高象素浏览不会出现变形 页面涉及到链接的地方相应加上链接 测试完成后提交 SVN 并上传到测试服务器 网站目录设置 1
10、 企业网站 页面文件统一放在根目录。 images 用于存放本网站的图片文件 css 用于存放本网站的样式文件 media 用于存放本网站的 flash,avi,quick time 等多媒体文件,该文件夹可根据需要开设 script 用于存放本网站的 js,vbscript 脚本文件, 该文件夹可根据需要开设 2 电子商务、行业网站、页面比较多的项目 “首页”存放在根目录。 在根目录下建立以下文件夹: images 用于存放本网站图片,该目录下可以根据需要开设子文件夹,将图片文件归类。 css 用于存放本网站的样式文件。 media 用于存放本网站首页和不同栏目公用的 flash,avi,q
11、uick time 等多媒体文件,该文件夹可根据需要开设。 script 用于存放本网站所有的 js,vbscript 脚本文件,该文件夹可根据需要开设。 common 用于存放网站的通用文件如 SSI(Service Side Include) 包含文件。如:头部、低部。 temp 用于存放客户提供的各种文字图片等文件,该文件夹可根据需要开设。 按主导航栏目在根目录下建立相应目录,目录名以小写的英文字符命名且不含空格和特殊字符(下划线和破折号除外)。 如:产品中心 products/ 新闻资讯 news/ 如果存在主导航上没有的栏目,网页的功能相应建立目录。 如:会员专区,导航上没有这个栏目
12、,但是功能独立,可以在根目录下建立一个文件夹存放。 会员专区 member/ 3 多语言版本网站 每个语言版本存放于独立的目录, ezSITE 项目中多语言版本以非独立站点方式创建的,样式表、图片、多媒体等目录分开存放(如: images_en),其他页面文件统一放在网站根目录下。 如:简体中文 通常放在根目录下 繁体中文 big5 英语 english 日语 Japanese 命名规范 1 命名原则 命名应该能够标识事物的特性。命名一般采用小写的英文,除特殊情况才使用中文拼音,不要在文件名中使用空格和一些让人迷惑不解的符如、 &、 *、 %等。 2 文件命名规范 首页统一使用 index 文
13、件名(小写)。 如: index.html、 index.asp、 index.jsp、 index.aspx、 Index.php 按栏目名的英语翻译取单一单词为名称。 如:公司简介 profile 信息反馈 news 产品 products 联系我们 contact 当一个页面有多个静态页面分页面时,使用小写的英文字母、数字和下划线组合。 如:企业资质取名为: quality.html 所有属于“企业资质”的依次取名为: quality_1.html, quality_2.html, 或 quality1.html, quality2.html, 如果文件的数量是两位数,请将前九个文件命名
14、为: quality_01.html, quality_02.html, 或 quality01.html, quality02.html, 3 图片命名规范 图片命名原则以图片英语字母为名,名称分头尾两部分,用下划线隔开,头部分表示此图片的大类性质,如广告、标志、按钮等。 如:标志性的图片为 logo.gif 主导航: mainnav(globalnav) 子导航: subnav 边导航: sidebar 放在页面顶部 的广告、装饰图片等长方形的图片: banner 在页面位置不固定并且带有连接的小图片: button(btn) 在页面上某一位置连续出现,性质相同的链接栏目的图片: menu
15、 装饰用的图片: pic(photo) 不带链接表示标题的图片: title 依照次原则类推 尾部分用于表示图片的具体含义。 如: button_resest.jpg title_about.jpg banner_product.jpg menu_job.jpg 注意事项 1 企业网站 产品列表、新闻列表等信息列表使用无序列表实现,外观结构 使用 CSS 来控制。 使用统一的分页样式 使用样式控制整站的像素 考虑页面是否方便程序人员加程序(表单,分页的数据 ,栏目类标题数据等),还有特殊表现方式的处理,如鼠标划过事件相应, tab 切换,下拉菜单等动态交互效果。特殊的字符处理(如特殊字符换行,
16、防止长字符撑大容器 , 防止文章条数过少容器边框缩小等)。 如: 涉及到程序的图片数据 (产品列表等 ),如果设计上该图片是有边框修饰的,必须通过样式套用达到把边框修饰效果。 如: 2 电子商务平台合成 合成电子商务平台除了要注意以上企业网站合成注意事项以外,还 要注意以下事项: 在每个栏目首页加上关键字; 合理的使用 html 标记 布局页面,少用表格,避免页面放在一个 table 里面,注意页面的加载速度; 合成页面尽量少用图片,通过样式和文字实现页面效果; 根据项目的需求进行合成,包括一部分的前台脚本; 面对网站需求的临时变更,版本迭代的变更,也要做到可以容易的应对和维护,开发模式和效率
17、上需要思考代码的复用和多人协同开发。 页面编码 1 DOCTYPE(文档类型 ) 用来指定页面所使用的 XHTML(或者 HTML)的版本 。 制作符合标准的页面,必不可少的关键组成部分就是 DOCTYPE 声明。 只有确定了一个正确的 DOCTYPE, XHTML 里的标识和 CSS 才能正常生效 。明可以选择:过渡的( Transitional)、严格的( Strict)和框架的( Frameset) , 现时合成统一使用 过渡的 ( 一种要求不很严格的 DTD,允许在页面中使用 HTML4.01 的标识 , 符合 xhtml 语法标准 )。 DTD 的写法如下: (请不要删除 ) Html 文件 DTD 放在页面的首行 动态 文件 DTD 放在页面第二行,首行为 CodePage 如 : 如果没有 DTD声明,请注意所合成的页面,是否兼容浏览器。 2 head区代码 head 区是指首页 HTML 代码的 和 之间的内容 , 合成必须加入如下标签: 网页显示字符集除 ezSITE 项目外统一使用 utf-8, ezSITE 项目采用 GB2312: 禁止一个项目内有些合成页面使用 utf-8,有些使用 gb2312 Asp 文件请在页面首行加上 网页制作者信息在网站的首页按下面加入: