Web前端开发神器(ALLOYDESIGNER)

Web前端开发神器(ALLOYDESIGNER)

更新时间:2018-03-12
  • 软件大小: 47KB
  • 软件类型: 正式版
  • 软件语言:简体中文

软件平台:WinXP/2000/vista/Win7/Win8/Win10

软件介绍

卷 新加卷 的文件夹 PATH 列表

卷序列号为 004F004C F8FF:98F6

E:网站资源打包工具WEB前端开发神器(ALLOYDESIGNER)

alloydesigner.js

西西软件园.txt



没有子文件夹



ALLOYDESIGNER是一款免费的web前端开发工具,它可以直接嵌入你的Web页面中运行,匡助你精准、高效的构建Web页面的UI!使用AlloyDesigner后,你可以把设计稿拖进你的Web页面铺在页面的最底层,然后就可以对着设计稿来构建DOM元素和CSS样式啦,通过AlloyDesigner直观地调剂页面,迅速到达与视觉稿一致的目的。

功能特点:

强大记忆恢复功能

刷新后恢复上次状况,无需从新调剂视觉稿位置

便利的快捷键操作

使用易记的快捷键操作,进一步提高开发效力

稳固的基础功能

固定视觉稿,调理透明度,测试开发等基础功能强壮

丰厚的开发辅助工具

包括测距工具、CSS助手与取色器等快捷工具

安装法子:

1.在Chrome Web Store上安装AlloyDesigner扩大插件

2.点击免费,然后添加,就会添加到Chrome的地址栏的右侧

3.打开需要开发或者测试的页面,然后点击AlloyDesigner的图标,会在页面下呈现AlloyDesigner的工具条,然后打开右侧的加载视觉稿按钮,选择要加载的视觉稿

至此视觉稿就被加载进来了,从新刷新页面也不会丢失视觉稿

手动嵌入代码的方式使用AlloyDesigner(IE7 +)

1.在官网上下载最新的AlloyDesigner代码版alloydesigner.js 
2.在要测试或者开发项目的页面中底部把AlloyDesigner引进来

  <script type="text/javascript" src="alloydesigner.js"></script>

3.将视觉文件保留成home.jpg或者home.png,放在与页面所在同目录下

或者视觉稿为其它文件,手动设置视觉文件路径

  <script type="text/javascript">
    $AD.set("design/design.jpg");
  </script>

4.刷新页面,便可以看到视觉文件被引入进来了

使用法子:

用于调剂页面与测试

1.使用鼠标挪动视觉稿,使视觉稿和页面近似重合

2.使用方向键微调视觉稿,使视觉稿和页面的参考点完整重合,没有重影
3.这时候候页面不规范的部份就会有重影。

4.点击固定按键或按Alt+F键,固定视觉稿

固定后依然可以使用Ctrl + 方向键微调视觉视觉稿的位置
5.在需要调剂的处所,点击右键审查元素,审查元素

6.对样式进行调剂,直到重合

7.记录样式修改。将修改的样式手动写在文件中,或者使用Chrome的Workspace功能自动更改。(查看怎么配置Workspace)

直接用于开发页面(For Chrome)

AlloyDesigner可以直接用于开发页面,这类开发更为便捷与直接,较传统的开发模式,真正拥有即见即所得的能力。
此时Chrome F12工具充当编辑器,AlloyDesigner提供制作底本与其他辅助工具支撑。

1.配置Workspace功能,自动保留F12中的修改。这样,浏览器就充当了部份编辑器的功能
2.加载视觉稿,将视觉稿固定在页面最上面适合的位置
3.点击固定按键固定(Alt + F),视觉稿做为页面的背景,然后可以适量调剂透明度(使用Alt + 上/下键)
4.使用测试工具对页面进行测绘,然后将样式通过F12写入文件中去
5.使用取色工具,取视觉稿色彩
6.完成开发

测试工具的使用

测试工具可以丈量每一个div的像素宽高、距离等
使用快捷键Alt + D进行丈量模式

不透明度调理工具的使用

不透明度调理主要调理视觉稿与body的不透明度,到达一个适合的不透明度,更易于开发
在视觉稿固定前,视觉图片处于body之上,这时候候调理的是视觉图片的不透明度,固定以后,文档处于视觉图片之上,这时候候调理的是body的不透明度。

取色工具

取色工具用于取视觉图片上的色彩
点击取色工具(Alt + X)按钮进入取色模式, 在视觉稿要取色的位置上点击进行取色,然后在右下角面板中的色彩值复制便可

CSS助手

css助手用于快速查看应用于元素上的样式
点击css助手按钮(Alt + C)进入CSS助手模式,鼠标在元素上停留便可看到应用于元素上的样式规则