论文总字数：21344字

摘 要

随着信息技术的不断发展，越来越多的信息内容被呈现在互联网上。虽然CSS3规范和HTML5规范正在不断成熟，但其中不可避免的一个环节仍然是需要前端人员手动编写代码进行页面设计。

本课题是一种让前端网页设计师通过可视化界面来设计网页的工具，不需要编写HTML和CSS代码，而是通过可视化的界面操作，自动生成可以独立交付使用的HTML和CSS代码。本课题可以减轻前端开发人员的工作量，改变传统WEB静态页面设计思路，用更加高效，更加有设计感的方式，更加人性化的工具绘制网页。

关键词：网页，HTML，CSS，开发工具

Online web design tools

Abstract

With the continuous development of information technology, more and more information content is presented on the Internet. Although CSS3 and HTML5 specification specification is maturing, but still a part of the inevitable need to manually write code the front page design.

This paper is a way for the web designer through visual web interface design tools, without having to write HTML and CSS, but by the visual interface, automatic generation can be delivered independently of HTML and CSS code. This issue can reduce the workload of web developer to change the traditional static pages WEB design ideas, with more design sense of fashion, more humane tool to draw pages.

Keywords: Web, HTML, CSS, development tools

目录

第1章 绪论 5

1.1 开发目的和课题背景 5

1.2 概要 5

1.3 开放平台、应用环境及使用技术 5

1.4 可行性分析 6

1.5 工程架构方式 7

第2章 需求分析 7

第3章 系统分析 8

3.1 系统主要成员 8

3.2 系统结构 9

3.3 系统执行流程 10

第4章 详细设计 12

4.1 工程架构方式 12

4.2 使用场景与界面 12

4.3 功能设计细节 16

4.3.1 功能列表： 16

4.3.2 上传与下载 18

第5章 模块介绍 19

5.1 全局模块 19

5.2 自建类 22

5.3 基础模块 24

5.4 功能模块 30

第6章 主要问题 34

第7章 编译环境 36

第8章 总结 36

致谢 37

参考文献 38

附录A GlobalService服务 39

附录B PageService服务方法列表 40

附录C evalInsertPosition方法实现代码 42

绪论

开发目的和课题背景

随着信息技术的不断发展，CSS3和HTML5的不断成熟，越来越多的信息内容被呈现在互联网上，其中不可避免的一个环节便是需要前端人员进行页面设计，然而前端人员仍然需要手动编写网页的代码。

概要

为了让前端WEB页面设计师通过可视化的界面设计网页的工具。不需要编写HTML和CSS代码而是通过该工具的功能加以管理和应用，从而开发了名为Kivi Designer的设计工具，本课题可以自动生成独立交付使用的HTML CSS代码。

开放平台、应用环境及使用技术

• • 1. 开放平台

本课题可以在任何可以安装并且正常运行Chrome浏览器的系统上运行，包括移动平台。

• • 1. Angular.js

AngularJS是Google开发的依靠JavaScript技术开发的WEB框架,用于扩展和增强HTML功能,它专为构建单页WEB应用而设计^[1]。

• • 1. HTML

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 超文本标记语言通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

• • 1. CSS

级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

• • 1. UnderScore.js

Underscore一个JavaScript库，它提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。可以很方便的通过 ‘_’ 对象来调用其方法。

• • 1. Jquery

jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互^[2]。

• • 1. Require.js

RequireJS可以将代码模块化，它使用了不同于传统lt;scriptgt;标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。

可行性分析

可行性研究的目的就是用最小的代价在尽可能短的时间内确定问题是否能够解决、是否值得去解。下面从四个方面分析本系统的可行性：

• • 1. 技术可行性

本课题工具使用Angular.js为前端框架，Apache和PHP为后端运行环境，Mysql为数据库。主要依靠Angular.js强大的双向数据绑定功能，加上Jquery等库的支持在技术上完全可行。

• • 1. 经济可行性

目前在google上能够搜索到的相关软件不足3家，完全拥有经济市场，值得推广，所以经济经济方面也是可行的。

• • 1. 操作可行性

该系统设计清晰，有良好的用户可视化界面，操作简洁，用户只要拥有简单的Css基础就可以得到很好的使用效果，因此操作方面可行。

• • 1. 法律可行性

本系统没有违反国家相关法律规定，法律方面可行。

工程架构方式

本软件使用angularJS前端框架和RequireJS框架进行架构。主体思想为简单易懂：使用公共状态管理软件使用细节，使用公共对象来同步数据，从而实现实时预览效果^[1]。

需求分析

需求分析是对需要解决的问题进行详细分析,弄清楚需要解决的问题。开发人员需要了解顾客的需求,然后体现在软件中。如果说软件开发过程中,开发人员需要了解自己做什么,顾客需要告诉开发人员自己需要什么,而需求分析就是连接开发人员和顾客之间的重要纽带。

需求分析为软件的开发起到了决策的作用，提供了开发的方向，并指明了开发的策略，在软件开发及维护中均起到了举足轻重的作用。

• 1. 使用者分析：

通常情况下使用者为 web页面设计师。其中可以是Html开发人员，可以是web效果图设计人员。

请支付后下载全文，论文总字数：21344字