Любой инструмент, позволяющий перемещать элементы на веб-странице, чтобы помочь дизайну?

Question

Существуют ли какие-либо инструменты / плагины Firefox, которые позволят вам перетаскивать элементы (элементы div, изображения и т. Д.) По странице и сообщать вам сумму (x, y), которую вы переместили? Это значительно ускорило бы разработку страницы, вместо настройки CSS, перезагрузки страницы, настройки CSS, перезагрузки страницы.

Я нашел расширение Firefox Web Developer , полезное для редактирования css live, но, кажется, при использовании скрывает фоновые изображения.

Answer 1

Вот что я использую в связи с вашим вопросом:

• MeasureIt Расширение Firefox для измерения пикселей в окне просмотра

• Firebug 1.5 и его HTML / правша / / 1015 * Внешний вид .Это полезно, как есть, и это можно редактировать.Очевидно, я также часто использую панель стилей.Нажмите слева от инструкции, чтобы временно отключить ее;щелкните правой кнопкой мыши, чтобы добавить встроенный CSS для этого элемента, выбранного в HTML в левой половине окна;маленький треугольник, близкий к стилю, может показать вам системный CSS (правила по умолчанию)

• Pixel Perfect - дополнение Firebug, которое накладываетсяPNG поверх вашей страницы, для сравнения и выравнивания.
  Не идите по пути pixel-freak , если ваша работа над HTML / CSS на 1px отличается от вашего дизайна:)

• Firediff также является надстройкой Firebug, которая отслеживает изменения, сделанные в Firebug. Она регистрирует все, что вы будете делать на панели HTML (отлично), но также и вашикраткое использование WDT (не так здорово), скажем Shift-Ctrl-F, чтобы получить информацию о размере шрифта в пикселях.
  Это инструмент, который ближе всего к тому, что вы спрашиваете, хотя я не думаю, что этосамый ценный.Скважина YMMV:)

Firediff снимок его отслеживания Firebug http://img715.imageshack.us/img715/6985/fbfirediffexamplenq8.png

• Вы должны использовать несколько мониторов как и St Jeff .
  Это особенно полезно, так как я всегда преобразую sth в что-то другое: смотрю PSD / PNG в программном обеспечении Adobe и пишу HTML-код в редакторе, пишуПравила CSS в редакторе и проверка в браузере, проверка доступности веб-сайта в браузере и запись результатов в OOo Writer и т. Д.

• Reload page(в браузере вместе с сохранением файла в текстовом редакторе и переключением окон) можно нажать ОДНУ клавишу: я заменил Ctrl-S / Alt-Tab в браузере / F5 на макрос AutoHotKey давным-давно (код ниже) и привязал его к стратегически помещенной, но бесполезной клавише на моей французской клавиатуре: клавиша ², которая находится между Tab и Esc.
  Спасла меня от тендинита и / или синдрома запястного канала!
  Я использую Deadkeys и ²сделать то же самое с IE6, IE7 и Safari.

  ---

  # NoEnv;4 строки для начала сценария AHK
  Ввод SendMode
  SetWorkingDir% A_ScriptDir%
  SetTitleMatchMode RegEx

  # IfWinActive, Блокнот
  ² ::
  Отправить ^ s
  IfWinExist, Mozilla Firefox
  WinActivate, Mozilla Firefox
  Отправить ^ r;обновить браузер
  IfWinNotActive, Блокнот
  вернуть

  ---

Итак, вот Firediff и другие мои инструменты повышения производительности

Answer 2

Я использую трюк ...

Сделайте html / css в обычном текстовом редакторе на одном мониторе и используйте setTimeout(function(){ location.reload() }, 30000 ); для автоматического обновления браузера на другом.

Если вы работаете в linux, вы, вероятно, можете настроить скрипт для просмотра всякий раз, когда вы «сохраняете» файл (ы) в каталоге css, поэтому, когда они действительно сохраняются, привязайте его к браузеру и обновите вкладку, хотя я не еще не сделал этого.

Answer 3

Я не уверен, что расширение Firefox "Browser Turns Editor" вполне то, что вы ищете, но это может быть Я полагаю, вам нужно отредактировать страницу в режиме разработки, а затем просмотреть ее части в Firebug, чтобы увидеть соответствующий HTML-код. Или что-то в этом роде.