五花肉(肉山页面生成器)简介 ============= 五花肉帮助用户使用简单的拖放操作快速生成页面,并辅以大头生成器和匹配好的样式,可以很方便的制作网页。 此工具尤其适用于大型门户网站快速搭建专题模板使用。 未来我会加入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将地址栏更新,并跟踪地址栏变化,实现“上一步/下一步”功能
echalkpad/BaconPageBuilder
A web builder, helps us to build a web page with simply operations like drag and drop.
ActionScript