web毕业论文 下载本文

Web前端页面设计

包括代码的可维护性,组件的易用性,分层语义模板和浏览器分级支持

等。

2.1.1 分层开发

在数字媒体技术系网站概要确定后就需要进行分层开发的划分,根据项

目内容的不同,划分工作。大致分为,总体结构搭建,模块制作,页面制作,底层JS搭建,JS交互效果,内部测试,代码优化。如图2-1所示:

这样做的好处是能根据项目的不同,划分出不同的功能模块,合理的安

排时间,在有限的时间内做出很多模块和功能。降低开发成本,提高开发率。

总结结构搭建

模块制作 页面制作

分层开发

底层JS搭建 JS交互效果 内部测试 代码优化

图2-1分层开发图

2.1.2 代码编写

前期工作准备好后,就开始进入代码编写阶端,我们采用LSM方式进行, 大致流程为总规划和设计草稿完成后,就进行前期的前端开发(搭建大

致的HTML结构),然后设计出完设计稿后再进行页面样式的完善,最后完成正式的页面后交给开发,嵌套程序。

13

Web前端页面设计

这样做的好处不仅能有效的提高开发效率,实现逐层开发,让前端提前

介入,减少整体消耗的时间,确保产品有更多的时间修改和完善。

确定了流程后还需要对产品原型进行分析,拆分,把复用性高的部分找 出来制作成代码模块,方便以后的套用。确认二,三级页面的风格搭建

统一框架。

前端设计样式确定以后,就进行通用模块样式的设计(包括按钮,分页,

默认字体颜色,连接颜色等),完成后并提交给前端,统一的搭建。

在代码的编写过程中,最重要的是标准和规范的执行遵守,在编写HTML

时候充分发挥想象尽可能的满足后期样式表现的需要 。如图2-2所示:

PRD prototype 前端制作(HTML)

页面设计 前端制作(样式完善)

提交开发

代码编写

图 2-2 编写代码流程图

代码编写过程中让前端提前进入开发流程中来,在样式属性后就进行HTML

结构的编写,页面设计完成后,在进行样式表的开发,这样不仅能节省很多的开发时间,提高开发效率,能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性,正所谓无规矩不成方圆,这样能便于后期维护,减少维护成本。而模块化,是敏捷开发所必需的,重要性在这里也不做过多的描述。

14

Web前端页面设计

2.1.3 内部测试与后续优化

前端的内部测试,指出页面与设计稿不匹配的地方,优化部分细节页面

样式。测试不仅能提高内测的质量,还能更早的发现问题并及时的修改,否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后,

就需要进行制作文件的优化以确保代码的最优化,尽可能地压缩图片和

减少外部HTTP请求如图2-3所示:

设计参与测试

内部测试与后续优化

整体测试 后续代码优化

图2-3 内部测试流程图

15

Web前端页面设计

总结结构搭建

模块制作 页面制作

分层 底层JS搭建 JS交互效果 内部测试 代码优化

前 端 开 发 流 程 代码编写 PRD prototype 前端制作(HTML)

页面设计 前端制作(样式完善)

提交开发

设计参与测试

内部测试与后续优化 整体测试 后续代码优化

图2-4 前端开发流程图

这套流程制定出来就一直要求所有前端设计必须严格按照流程执行,也经过了很长时间的磨合跟改进。虽然不是很完美,但是很适合我们现在开发的需要,好处也是显而易见的,遵循并使用它对我们的发开有很大的帮助,能更好的应对高强度,高质量的开发需要。代码更可控,开发效率更高。

16