HTML5项目开发需要先做哪些工作

开发步骤

初入这行的时候很多人仅仅以为H5开发只是做些页面而已,而实际上要将工作做得尽善尽美,这些要点是需要牢牢记住的。

1 书写基本的需求分析报告

1.1 哪些“任务”是基于需求分析报告的?

1.1.1 reset文件的基本调整

1.1.2 标签的基本选用

1.1.3 典型的布局选用和基本的布局操作

1.1.4 切图工作

1.2 因此我们能够想到,在进行需求分析的时候

1.2.1 美工图大小和具体内容区域大小的区别(提示:一定要考虑内容区域外的样式如何处理)

1.2.2 会不会有fixed定位

1.2.3 有没有返回顶部的功能需求

1.2.4 哪些地方需要注意超出隐藏

1.2.5 哪些地方需要内容撑开高度

1.2.6 哪些地方需要有链接跳转

1.2.7 hover(提示:有些美工图会提供三态,初始、移入和按下)效果是什么样子

1.2.8 哪些地方需要加鼠标的小手状态

1.2.9 哪些有JS特效,需要考虑效果~

1.2.10 基本字体字号、颜色和背景颜色的选用

1.2.11 分清楚背景图和数据图

1.2.12 公共模块拆分出来

1.2.13 哪些地方是需要提交数据的 form

2 基本的前期准备

2.1 文件夹结构搭建

2.2 准备reset重置文件以及基本的几个JS文件,根据情况引入

2.3 合理修改reset文件[基于网站分析结果] 需要修改的内容如下:

2.3.1 基本的背景颜色和文字颜色

2.3.2 a标签的两种状态

2.3.3 基本的字体大小和样式设置

2.3.4 删除掉没有使用到的样式设置

2.3.5 保证after伪元素清浮动的方法在reset当中

3 移动端与PC端的特殊性

3.1 移动端

3.1.1 全新的选择器以及大部分的CSS3属性都得到了很好的支持

3.1.2 视口的设置

3.1.3 基本rem的处理

3.1.4 user-select;tap-highlight-color;-webkit-transform-style等样式的处理

3.1.5 需要额外注意“指触区”

3.1.6 模拟测试之外,需要进行真机调试

3.1.7 320屏幕像素下,字体大小最小为12px

3.1.8 a标签的title和img标签的title可以删除 嵌套原则可以适当的调整

3.1.9 最大最小宽的考虑

3.1.10 针对背景图进行background-size的处理

欢迎沟通交流~HTML5学堂

3.2 PC端

3.2.1 使用新标签后,对新标签的兼容处理

3.2.2 需要测试各个浏览器(HTML5学堂提示:保证在IE6~7的低端浏览器中,布局与功能正常)

3.2.3 对于子代选择器、CSS3新增选择器等能否使用取决于具体开发兼容要求

3.2.4 IE下的测试,需要启动服务器,即在wamp下运行

4 整体开发的基本顺序提醒

4.1 注意模块的最小宽度或者最大宽度

4.2 先完成一级布局与二级布局

4.3 针对公共模块进行开发

4.4 制作具体的模块

5 具体开发规范

5.1 文件名禁止使用中文命名

5.2 编写代码的时候,需要合理的缩进(不要出现空格与Tab格混用)与注释

5.3 遵循基本的嵌套规则

5.4 不要忘记a标签的href和title、img标签的alt、title、src,a标签的target(从何处打开链接)

5.5 CSS后代选择器,尽量不要超过3层,不要超过4层

5.6 类名采用单词(语义)命名,多个单词采用中划线连接

5.7 不设置不必要的属性和属性值,如针对占满父级整行的块元素设置width:100%

5.8 CSS样式按照顺序书写:显示属性——>自身属性——>文本——>其他——>CSS3属性

5.9 HTML与CSS中的引号需要保持一致,禁止出现单引号与双引号混用

5.10 类名和id名通常不重复的

5.11 每段语句结束后的分号(英文)必不可少

6 开发细节

6.1 注意保持盒模型大小的一致性(如:增加左右padding,原有width需要变小)

6.2 及时清除浮动,并采用合理的清除方式

6.3 针对定位元素,处理z-index值

6.4 数据图需要限制宽高

6.5 背景图需要进行合并

6.6 对于需要超出隐藏的需求,单行文本隐藏或显示为省略号(……),比如在模块标题需要进行设置,多行文本如果显示区域高度固定,需要设置超出隐藏。

6.7 img标签需要浮动或设置display:block,以防止img元素下的3像素空隙

6.8 a标签的指触区需要注意

6.9 合理使用群组和后代选择器

7 最后不可缺少的相关工作

7.1 CSS压缩

7.2 JS压缩

7.3 图片压缩

7.4 ico文件的制作

7.5 404页面

8 other but so important

最后:书写代码的时候,需要综合考虑SEO、扩展性、代码量以及代码可读性,尽可能寻找最佳解决办法。

你可能感兴趣的:(HTML5项目开发需要先做哪些工作)