Браузеры

Руководство для любителя по настройке дизайна сайта с помощью FireBug

Руководство для любителя по настройке дизайна сайта с помощью FireBug

У меня огромная проблема с веб-дизайнерами: я редко доволен тем, что мне предлагают, и не могу выразить словами то, что я на самом деле хочу. Будучи интернет-маркетологом, я вынужден запускать новые сайты довольно часто, поэтому, естественно, я часто сталкиваюсь с этой проблемой.

Так что делать? Я не могу позволить себе время, чтобы изучить веб-дизайн и стать профессиональным веб-разработчиком. Кроме того, я не могу сделать все сам. К счастью, недавно я наткнулся на крутой инструмент веб-разработки, который позволяет мне быстро настраивать CSS и придумывать окончательную версию, с которой я чувствую себя комфортно.

Инструмент представляет собой аддон FireFox под названием FireBug, и он настолько крутой, что многие веб-разработчики используют FireFox только по той причине, что его можно расширить с помощью FireBug. Это идеальное дополнение к Firefox для веб-разработчиков Итак, в этом посте я делюсь хитростями моего любителя по созданию дизайна сайта с помощью FireBug.

Введение:

Перейдите к шаблону сайта, который вы хотите редактировать, и активируйте Firebug: используйте клавишу F12 для быстрого доступа.

Вы увидите инструмент, открытый в нижней части окна браузера с 6 вкладками: «Консоль», «HTML», «CSS», «Скрипт», «Dom» и «Сеть». Я буду говорить о двух вкладках здесь: «HTML» и «CSS».

аддон Firefox для веб-разработчика

Вкладка CSS:

Изменить атрибуты и значения атрибутов

Чтобы изменить атрибут или значение атрибута, просто нажмите на него и отредактируйте его прямо в коде. Эффект от изменения будет сразу же виден в окне браузера выше.

Предварительный просмотр цветов и изображений в CSS

Firebug позволяет любителям, таким как я, лучше понимать CSS, показывая мне предварительный просмотр каждого визуального свойства:

Firebug Color Предварительный просмотр

Легко определить точное расположение, отступы и поля

Инструмент предоставляет прекрасную поддержку для изменения числовых значений . Просто нажмите на числовое значение, которое вы хотите изменить, и измените его цифрами на клавиатуре — посмотрите эффект сразу на странице выше и измените редактирование, если это необходимо.

Пусть инструмент подскажет вам, какое свойство можно использовать

Выделите свойство и используйте клавиши со стрелками вверх / вниз на клавиатуре, чтобы перечислить все разрешенные свойства CSS в алфавитном порядке.

поджигатель-CSS-properties.gif

Вкладка HTML:

Изучите свойства каждого блока «на лету» (поля, границы, отступы и содержимое): откройте вкладку HTML + макет справа и нажмите «Проверить» в верхней панели окна инструмента. Теперь вы можете перемещаться по странице и наблюдать следующее:

  • каждый элемент страницы в синей рамке;
  • соответствующая область в исходном коде выделена синим цветом (вкладка HTML);
  • визуализируются свойства поля (вкладка «Макет»).

Коробки с пожарными

Вкладка «Макет» в Firebug дает визуальную разбивку каждого блока в блочной модели и ширину каждого края. Кроме того, он показывает ширину и высоту самого внутреннего блока, а также смещение x и y элемента относительно его родителя.

Отредактируйте любое свойство прямо на вкладке макета и просмотрите изменения вживую на странице:

расположение ящиков для пожарных

Несколько полезных советов:

  • Используйте Control + F12 (или Command + F12 на Mac), чтобы открыть Firebug в отдельном окне.
  • Ведение черных и белых списков: Firebug позволяет вести список веб-сайтов, для которых он должен или не должен быть включен. Вы можете просматривать в двух режимах — либо включить Firebug для всех сайтов, кроме сайтов, занесенных в «черный список», либо отключить Firebug для всех сайтов, кроме сайтов, внесенных в «белый список».
  • Получить дополнительную помощь здесь: учебник FireFox в простых словах .

Итак, как вы видели с аддоном FireBug Firefox, вы можете создавать и настраивать дизайн сайтов, даже если вы абсолютно не знакомы с веб-дизайном, как я. Конечно, FireBug имеет гораздо более широкие возможности, чем описано выше, поэтому я хотел бы, чтобы вы поделились советами и хитростями этого удивительного инструмента.

Похожие посты
Браузеры

Как запустить Google Chrome в режиме инкогнито по умолчанию

Браузеры

Как обмануть сайты, изменив свой пользовательский агент [Chrome]

Браузеры

Google Chrome теперь может синхронизировать несколько профилей просмотра [Новости]

БраузерыИнтернет

Найдите другие сайты, работающие на вашем хостинг-сервере с YouGetSignal