网站开发基本流程

（1）产品提出需求，给出产品原型图（RP图）

（2）需求评审—例会进行需求评审，产品经理阐述原型图。

（3）指派研发任务（排期）

（4）阶段验收，根据进度，进行效果验收

（5）功能测试 —测试人员：对完成的功能进行测试，检查BUG。

（6）项目发布—运维人员：对产品上线需要的服务器进行管理，维护。

概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量

UI:负责产品的样式设计，产出设计效果图

前端:负责HTML页面与交互后端

前端:负责HTML页面与交互

后端任务：负责业务逻辑的实现和数据库操作

项目规范 

概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量

文件目录

根据项目名称创建项目文件夹。如：ushop

html、css、img、js 文件均归档至项目名称目录中，基本文件如图：

HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html

css 文件以英文命名，

公用样式通常命名为reset.css（常用的浏览器样式），

public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式），

首页通常命名为index.css, 其他页面依实际模块或功能需求命名图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名

（如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）

常用图片格式 gif 、png 、jpg

目录结构参考

文件命名规范 

通过文件名称可以给使用者传达一些有用的信息

网站建设专业服务  九米科技电话：13785208521（同微信）

对于文件的名称的命名，要尽量做到见词达意。

全部英文小写字母，可以使用中线，不可出现其他字符

如果使用一个单词无法准确描述文件的功能，那么可以使用两个或者多个单词。

这时候推荐使用中划线，也就是减号（-）作为连字符必要时，lib文件需包含版本号如jquery.1.8.1.js，压缩文件需包含 min 关键词

书写风格（格式化规范）

HTML 书写规范

文档类型声明及编码：

统一为 html5 声明类型；

编码统一为 utf-8

书写规范：

书写时根据页面结构实现层次分明的缩进；

标签必合属性值必须用双引号包括通常小写字母

书写规范：

书写时根据页面结构实现层次分明的缩进；

标签必合属性值必须用双引号包括通常小写字母

语义化 HTML：

根据页面结构选择合适的标签，属性如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用 p、结构简章重复的部分用 ul、li标签

页面中重要的图片内容要添加 alt=””替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容据模块内容定义class和id名称，

如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright.

网站建设专业服务  九米科技电话：13785208521（同微信）

合理嵌套HTML标签，

ul和li是固定嵌套，ul直接子元素必须是li;

dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

p标签不允许嵌套p标签;a标签不允许嵌套

a标签和其他交互性元素比如button

尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

保证结构与表现相分离：

CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

在页面中尽量避免使用行内样式即 style=”…”或行间属性，尽量使用 class 或者 id

css 书写规范

编码格式：编码统一为 utf-8

书写规范

合理使用id选择器，id选择器用于唯一的页面结构元素

合理使用全局意义的标签选择器

尽可能不使用通配符选择器

避免选择器嵌套层级过多

注意精简代码

属性值十六进制数值能用简写的尽量用简写

属性值为 0 可以省略单位

css 属性书写顺序：

建议遵循 :

特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关

（1）文档流相关属性（display, position, float, clear, visibility,）

（2）盒模型相关属性（width, height, margin, padding, border）

（3）内容排版相关属性（color, font, line-height, text-align, text-indent, vertical-align）

（4）装饰性相关属性（background, opacity, cursor）

图片规范

命名尽量与其模块样式名称保持关联，

尽量使用小写命名（如登录框的背景与图片：login-bg.jpg、user-pic等）

图片格式

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大，优先考虑 JPEG 格式，

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片,优先考虑PNG格式

条件允许的话优先考虑 WebP 格式，PC平台单张的图片的大小建议不大于 200KB

类名命名参考

盒子：box

头部、header、hd

内容：content/container 

页面 主体：main、bd

页脚：footer 

版权：copyright

导航：nav，navbar导航条

子导航：subnav

侧栏：sidebar

栏目：column

文章：article

包装器、外框：wrapper

左右中：left / right / center 

列表：list 

栏目标题：title

更多：more

登录条：loginbar

标 志：logo 

广告：banner

友情链接：friendlink

热点：hot

新闻：news

下载：download 

加入：join

指南：guild

服务：service

合作伙伴：partner 

加入我们：join_us

 菜单：menu

子菜单：submenu 

搜索：search

标签页：tab 

滚动：scroll 

提示信息：msg（message）

小技巧、贴士：tips 

标签：tag

工具条：tool, toolbar

箭头： arrow

下拉：drop 下拉菜单： dorp_menu