/BaconPageBuilder

A web builder, helps us to build a web page with simply operations like drag and drop.

Primary LanguageActionScript

五花肉(肉山页面生成器)简介
=============

五花肉帮助用户使用简单的拖放操作快速生成页面,并辅以大头生成器和匹配好的样式,可以很方便的制作网页。  
此工具尤其适用于大型门户网站快速搭建专题模板使用。  
未来我会加入CSS/JS接口,以及远程数据接口,应对更多的应用场景。

命名约定
-------
* 通栏 -- 点击“添加通栏按钮”增加的横通,宽度为整个页面宽,分为单列、多列、有标题、无标题
* 模块 -- 右侧面板中的图片均代表某个同版式的模块
* 元素 -- 同上

前端
-------

操作界面吸收了yoka类似产品的思路。  
大头生成器使用flash开发,加载既有模板,支持修改文字并保存成图片。

### 目录结构

* [css](css) -- `存放各种样式,包括基础样式css.css、系统样式admin.css、特殊样式`
* [js](js) -- `存放js文件,包括主函数main.js、结果页面用templateDIY.js、开源类库`
* [images](images) -- `存放各种图片`
* [swf](swf) -- `存放生成大头的flash文件`
* [element](element) -- `存放各模块的html代码`
* [index.html](index.html) -- `系统功能页`

### 代码托管

* Github -- [https://github.com/meathill/BaconPageBuilder](https://github.com/meathill/BaconPageBuilder)

### 部署及安装

这个产品在浏览器里运行,部署时用FTP上传即可。  
少量进阶功能需要PHP支持。  
远程数据接口可以通过修改Config.js进行设置。 

功能操作及原理
-------

### 搭建模板

1. 添加通栏到页面当中
2. 拖动示意图,可以看到半透明的目标图片跟随鼠标移动
3. 将鼠标移动到页面中的通栏上,可以看到红色虚线的占位符
4. 松开鼠标,模块被添加进通栏当中
5. 重复以上操作,直至模板搭建完成
6. 点击上传,图片会被替换为对应的html代码

### 制作大头

1. 将设计设计好的大头模板按照标准接口制成swf
2. 加载大头,编辑修改文字后点击上传,上传到服务器生成一个图片并返回图片id
3. flash将图片id发给js,js负责更改大头图片地址
4. 编辑大头后,如果没有点“保存”按钮,则在提交模板的时候会提示用户是否要保存大头
    编辑了文字
    上传了图片
    更换了模板

### 地址栏解析

比如 `index.html#/0-z1n1,z2n1/2-z3n1@0,z3n1@1`  
每个“/”为一个横通,里面分别为横通类型和模块名称,“横通类型-模块1,模块2,....”  
@0、@1....表示位于横通第一列还是第二列  
使用SWFAddress将地址栏更新,并跟踪地址栏变化,实现“上一步/下一步”功能