HTML页面可视化快速设计

insus 阅读:153 2022-08-02 17:20:10 评论:0

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
标签:HTML5CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号