5119下载站

您的位置：5119下载>下载分类>编程软件>编程工具>

Web前端开发神器(ALLOYDESIGNER)

Web前端开发神器(ALLOYDESIGNER) 绿色版

版　　本：绿色版
软件授权：免费软件
软件大小：0.05M
软件语言：简体中文
应用平台：Win All
更新时间：2018-04-10

立即下载

安全无毒无插件

精品杀毒软件

用户好评软件

下载Web前端开发神器(ALLOYDESIGNER)的还下载了

: 重启：铁三角下地宫九死一生

: 二十不惑：红楼四子肆意青春

: 河神2：津门天团遇危机

爱奇艺下载

基本简介

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

功能特色：

强大记忆恢复功能

刷新后恢复上次状态，无需重新调整视觉稿位置

便利的快捷键操作

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

稳固的基础功能

固定视觉稿，调节透明度，测试开发等基础功能强健

丰富的开发辅助工具

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

安装方法：

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

Web前端开发神器(ALLOYDESIGNER)

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

Web前端开发神器(ALLOYDESIGNER)

3.打开需要开发或者测试的页面，然后点击AlloyDesigner的图标，会在页面下出现AlloyDesigner的工具条，然后打开右边的加载视觉稿按钮，选择要加载的视觉稿 Web前端开发神器(ALLOYDESIGNER)

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

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

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

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

Web前端开发神器(ALLOYDESIGNER)

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

  
    $AD.set("design/design.jpg");

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

使用方法：

用于调整页面与测试

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

Web前端开发神器(ALLOYDESIGNER)

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

Web前端开发神器(ALLOYDESIGNER)

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

Web前端开发神器(ALLOYDESIGNER)

固定后仍然可以使用Ctrl + 方向键微调视觉视觉稿的位置
5.在需要调整的地方，点击右键审查元素，审查元素

Web前端开发神器(ALLOYDESIGNER)

6.对样式进行调整，直到重合

Web前端开发神器(ALLOYDESIGNER)

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

Web前端开发神器(ALLOYDESIGNER)

或

Web前端开发神器(ALLOYDESIGNER)

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

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

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

测试工具的使用

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

Web前端开发神器(ALLOYDESIGNER)

不透明度调节工具的使用

不透明度调节主要调节视觉稿与body的不透明度，达到一个合适的不透明度，更易于开发
在视觉稿固定前，视觉图片处于body之上，这时调节的是视觉图片的不透明度，固定之后，文档处于视觉图片之上，这时调节的是body的不透明度。 Web前端开发神器(ALLOYDESIGNER)

取色工具

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

CSS助手

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

Web前端开发神器(ALLOYDESIGNER)

相关热搜： extract SolidCAM PHPCMS代码生成器 HID调试助手

相关下载

软件截图

Web前端开发神器(ALLOYDESIGNER)下载地址

普通下载地址

通用网络下载电信网络下载联通网络下载移动网络下载

网友评论

网名：

(您的评论需要经过审核才能显示)

置顶 51网友 16-10-20 11:52:17

超级喜欢使用Web前端开发神器(ALLOYDESIGNER)，这次下载Web前端开发神器(ALLOYDESIGNER)绿色版非常快速，还是最新版本，大力推荐
置顶 51网友 17-05-06 16:23:54

下载Web前端开发神器(ALLOYDESIGNER)中，希望可以正常使用，别遇到BUG就好了
置顶 51网友 16-03-01 10:05:11

请问各位把Web前端开发神器(ALLOYDESIGNER)下载到电脑使用该怎么下啊。请帮忙,谢谢
置顶 51网友 16-07-03 21:12:44

还是5119下载站靠谱，其它网站的Web前端开发神器(ALLOYDESIGNER)要么是版本旧，要么是下载不了
置顶 51网友 17-04-26 17:18:55

是中文版的吗
置顶 51网友 16-08-10 08:54:35

下载了怎样安装
7楼 51网友 17-02-13 19:16:41

怎样下载搜狗五笔输入
8楼 51网友 16-03-27 14:39:43

Web前端开发神器(ALLOYDESIGNER)非常好用，速度快，功能强，用起来就是爽，本人极力推荐
9楼 51网友 16-04-23 18:01:54

Web前端开发神器(ALLOYDESIGNER)特别难用，操作不方便，大家千万别下。
10楼 51网友 15-10-20 14:35:14

Web前端开发神器(ALLOYDESIGNER)非常的好谁用谁知道建议下载