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

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

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

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

Вступление:

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

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

Вкладка CSS:

Редактировать атрибуты и значения атрибутов

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

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

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

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

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

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

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

Вкладка HTML:

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

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

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

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

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

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

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