HTML页面可视化快速设计

1、HTML页面可视化快速设计工具：Maqetta

IBM 公司在 IBM Impact 2011 上面发布了 Maqetta，一个创建桌面和移动用户界面的 HTML5 设计编辑工具，并同时宣布将项目捐助给开源机构 Dojo 基金会。

也即Maqetta 是由 Dojo 基金会提出的开源技术 , 提供所见即所得的工具 , 它允许用户体验设计师 (UXD) 用简单的拖拽来创建实时的 UI 原型。用户可以下载源码，并安装在自己的服务器上，并可自定义源码来满足自己的需求，再回馈到开源项目。

2、Maqetta安装与使用

2.1、下载和解压maqetta,目前最新版本：maqetta-release-10.0.2
2.2、在maqetta文件下找到maqetta.server.win.bat并双击，这时会打开命令行窗口，此为maqetta的server端，使用期间不能关闭。
2.3、浏览器中输入http://localhost:50000/maqetta，即可打开maqetta工具登录注册界面，注册登录。
备注：重新下载安装maqetta，需要重新注册，可使用原账号，注册信息存储在安装后是存储在安装包中。

3、Maqetta使用指南

3.1、常用属性功能

3.2、帮助信息

双击组件，左下角点击"help"图标，可展示该组件的功能

3.3、点击按钮跳转设置

方法1：使用window.location.href ，表示重定向跳转到新的url地址，后面跟着完整的url地址

eg: window.location.href=‘http://www.baidu.com’,注意引号一定要英文单引号

在onclick栏直接输入内容：window.location.href=‘http://www.baidu.com’

完整源代码为：
οnclick=“window.location.href=‘http://www.baidu.com’”

方法2：使用window.locaiton.hash，在当前链接里面改变锚链。

如：http://domain/#admin的location.hash=“#admin”

一般通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用

方法3：下拉选择html页面，跳转到新的html页面，如：

4、HTML页面可视化快速设计模板套用：

HTML页面除了自行开发设计外，还可以网上搜索套用模板，如：

源码之家 https://www.mycodes.net/154/4.htm
模板之家：http://www.cssmoban.com/cssthemes/7528.shtml#

本文参考链接：https://blog.csdn.net/baidu_24752135/article/details/123589991