任何允许在网页上移动元素以帮助设计的工具？ [英] Any tool to allow moving of elements on a webpage to aid design?

问题描述

有什么工具/ Firefox插件可以让你在页面上拖动元素（div，图像等），并告诉你已经移动的数量（x，y）？
这将加快设计一个页面，而不是调整CSS，重新加载页面，调整CSS，重新加载页面。

我发现 Firefox Web Developer扩展对于编辑css live很有用，但似乎隐藏背景图片。

解决方案

以下是我使用的与您的问题相关的内容：

• MeasureIt

Firefox扩展程序可以测量视口上的像素 / 外观。这是有用的，它是可编辑的。
显然，我也使用了很多样式窗格。点击指令左边暂时禁用;右键单击以在左侧半窗口的HTML中选择的此元素添加内联CSS;接近样式的小三角形可以显示系统CSS（默认规则）
• Pixel Perfect 是一个在您的页面上叠加PNG的Firebug插件，用于比较和对齐。
  如果您的HTML / CSS工作在您设计的1px之外，那么不要走 pixel-freak 路径：）
p> Firediff 也是一款Firebug插件它跟踪在Firebug中完成的更改。它会记录您在HTML窗格（很好）中所做的所有操作，还可以简单地使用WDT（不太好），比如Shift-Ctrl-大小信息px。

这是最接近你问的工具，但我不认为这是最有价值的。那么YMMV：）









• 您应该像多个监视器 / 2004/06 / multiple-monitors-and-productivity.htmlrel =nofollow noreferrer> St Jeff 。
  这个特别有用，因为我一直在改变某事：在Adobe软件中查看PSD / PNG，在编辑器中编写HTML代码，在编辑器中编写CSS规则并检查浏览器，在浏览器中审核网站的可访问性以及在OOo Writer等中记录结果。




• 重新载入页面 （在浏览器中，窗口）可以采取一个按键：我将Ctrl-S / Alt-Tab替换为浏览器/ F 5很早以前（下面的代码）使用了一个 AutoHotKey 宏，并将其绑定到我的法语键盘上的一个战略性的无用键：²关键在Tab和Esc之间。
  
  从肌腱炎和/或腕管综合症中拯救了我！
  
  我用死锁和²对IE6，IE7和Safari做同样的事情。 / p>
  
  

  ---

  
  
  

  #NoEnv; 4行开始AHK脚本
  
  SendMode输入
  
  SetWorkingDir％A_ScriptDir％
  
  SetTitleMatchMode RegEx

  
  
  

  #IfWinActive，记事本
  
  ²
  
  
  发送消息
  
  
  IfWinExist，Mozilla Firefox
  
  WinActivate，Mozilla Firefox
  
  发送^ r;刷新浏览器
  
  IfWinNotActive，记事本
  
  返回

  
  
  

  ---







因此，这里是Firediff和我的其他生产力工具




Are there any tools/Firefox plugins that will allow you to drag elements (divs, images etc) about on the page, and tell you the amount (x, y) that you have moved it? It would speed up designing a page a lot, instead of tweak css, reload page, tweak css, reload page.

I've found the Firefox Web Developer extension useful for editing the css live, but it seems to hide background images when used.

解决方案

Here is what I use related to your question:

• MeasureIt Firefox extension to measure pixels on viewport

• Firebug 1.5 and its HTML / right-handed half / Appearance. It's useful as is AND it's editable. Obviously, I also use a lot the Style pane. Click on the left of an instruction to disable it temporarily; right-click to add inline CSS for this element selected in the HTML on the left-hand half window; the small triangle close to style can show you the System CSS (default rules)

• Pixel Perfect is a Firebug add-on that overlays a PNG over your page, for comparison and alignment purposes.
  Don't go the pixel-freak route if your HTML/CSS work is 1px off your design though :)

• Firediff is also a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the WDT (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
  This is the tool that is the closest to what you ask, though I don't think it's the most valuable one. Well YMMV :)

Firediff snapshot of its Firebug tracking http://img715.imageshack.us/img715/6985/fbfirediffexamplenq8.png

• Thou should use multiple monitors as does St Jeff.
  This is especially useful as I'm always transforming sth in sth else: looking at PSD/PNG in Adobe software and writing HTML code in an editor, writing CSS rules in the editor and checking in the browser, auditing accessibility of a website in the browser and writing down the results in OOo Writer, etc

• Reload page (in browser along with saving file in the text editor and switching windows) can take ONE keypress: I replaced Ctrl-S / Alt-Tab to browser / F5 by an AutoHotKey macro a long time ago (code below) and bound it to a strategically placed yet useless key on my french keyboard: the ² key that sits between Tab and Esc.
  Saved me from tendonitis and/or carpal tunnel syndrome!
  I use deadkeys and ² to do the same with IE6, IE7 and Safari.

  ---

  #NoEnv ; 4 lines to begin an AHK script
  SendMode Input
  SetWorkingDir %A_ScriptDir%
  SetTitleMatchMode RegEx

  #IfWinActive, Notepad
  ²::
  Send ^s
  IfWinExist, Mozilla Firefox
  WinActivate, Mozilla Firefox
  Send ^r ; refresh the browser
  IfWinNotActive, Notepad
  return

  ---

So here are Firediff and my other productivity tools

这篇关于任何允许在网页上移动元素以帮助设计的工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！