ГлавнаяОптимизация блога › Вёрстка сайта при помощи — Firebug!


Вёрстка сайта при помощи — Firebug!


как пользоваться  Firebug

Приветствую, всех читателей — Sozdaiblog.ru!

Сегодня, я покажу, как пользоваться Firebug.

Firebug – это специальная программа, которая помогает при вёрстки сайта. Знаю, что «Вёрстка сайта», у многих вызывает не только негативные мысли, но и даже страх. Думаю, что Вы сами понимаете, если мы хотим заниматься сайтостроением или просто желаем приукрасить наш блог, то учиться этому всё равно придётся.

Если Вы, как и я ведёте свой блог то думаю, давно столкнулись со словом – «Вёрстка». И всегда, делая эту злополучную вёрстку, сталкиваетесь с кучей проблем.

Одна из этих проблем – постоянный поиск нужного кода, отвечающего за элементы страницы. Решить данную проблему, нам поможет плагин – «Firebug (фаербаг) ».

 

Как установить программу для вёрстки сайта – Firebug (Фаербаг).

Для того чтобы установить плагин firebug, нужно перейти по ссылке, на официальный сайт. Здесь, в правом верхнем углу нажать на большую красную кнопку:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

В открывшемся окне, выбираем рекомендуемую версию фаербага и нажимаем кнопку – «Download»:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

Вас, тут же перебрасывают в новое окно, где нужно нажать на большую зелёную кнопку с надписью – «+ Add too Firefox»:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

После этого начнётся загрузка фаербага. Вам будет нужно разрешить его установку и по завершению перезагрузить браузер.

Теперь в одном из углов Вашего браузера должен появиться маленький значок с изображением жука:

 

Вёрстка сайта.

 

Ну а дальше, нужно разобраться, как пользоваться фаербагом.

 

Вёрстка сайта — как пользоваться Firebug (Фаербаг).

Для того чтобы начать использовать Firebug, нужно перейти на ту страницу Вашего сайта, где Вы хотите производить изменения. Затем, просто нажать на описанный выше значок с изображением жука.

После этих действий, внизу браузера появится рабочее окно данного дополнения:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

Далее, в левом верхнем углу этого окна, нажимаем на иконку в виде прямоугольника со стрелочкой:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

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

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

Теперь, в окне Firebug, в правой его части, будут отображаться – CSS свойства выделенного объекта, а в левой, можно посмотреть HTML-код и его местонахождение:

 

Вёрстка сайта. Как пользоваться Firebug(фаербаг).

 

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

В окне фаербага, Вы смело можете менять и тестировать различный код, не боясь, что-то испортить. Всё происходит, в режиме реального времени и Firebug сразу будет показывать Ваши изменения. Во время изменений можете не пугаться, всё происходящее никоим образом, не повлияет на Ваш ресурс.

Надеюсь Вы поняли, как пользоваться Firebug (фаербаг) и страшные слова – «Вёрстка сайтов», больше Вас не пугают.

Перед тем, как делать вёрстку в обязательном порядке прочитайте – «Как сделать бэкап базы данных».

Так же можете почитать:

 

 

Если понравилась статья, то подписывайтесь на блог и будьте в курсе последних обновлений.

А Вы, самостоятельно верстаете свои сайты или обращаетесь к специалистам?

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




17 комментариевА что думаете Вы?

  1. bmgksn

    Отличный материал, для новичков которые только знакомятся с версткой и имеют желание разбираться, править верстку самим.

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

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

    Например, вкладка «Сеть» позволит, в наглядной форме увидеть сколько и какие файлы загружаются во время загрузки сайта, с помощью этого инструмента можно отследить время загрузки файлов, со своего сайта и с внешних сайтов, определить общее время загрузки сайта и отдельно каждого сайта, тем самым определив узкие места в вашем сайте. Для опытных пользователей, просмотреть какие запросы и ответы получает браузер от сайта с этим плагином легче простого.

    С помощью Консоли можно отследить ошибки и замечания, как на странице, так и исполняемом коде javascript. Выполнить различные команды, которые будут полезны для веб-разработчиков и программистов.

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

    На конкурс.

    [Ответить]

  2. Lolita

    Хороший материал, буду использовать, спасибо

    [Ответить]

    Денис Черников ответил:

    Спасибо! Пожалуйста используйте, он для Вас!

    [Ответить]

  3. rafterss

    Очень нужное приложение. Сам в дизайне пока слаб, может хоть поможет разобраться.

    [Ответить]

    Денис Черников ответил:

    Да тут все через это приложение разбираются, как что ставьте и вперёд!

    [Ответить]

  4. Андрей

    Скажите, а как определить какой файл выводит данную страницу? например нашел с помощью этой проги место которое надо подредактировать, как определить имя файла где надо изменить? но только не стили

    [Ответить]

    Денис Черников ответил:

    Вот здесь, всё сложно, нужно проявить смекалку и по похожим тегам догадываться, иногда в панели путь правильный показывается, чуть выше окошка.

    [Ответить]

  5. Ильяс

    Непонятно как определять местонахождения файлов...

    [Ответить]

    Денис Черников ответил:

    Да, немного тяжеловато сначала, здесь нужно немного смекалки включать! Со временем, Вы всё поймёте и разберётесь!

    [Ответить]

    Андрей ответил:

    а ответить слабо? если не знаете, то так и скажите. я уже пятый сайт просматриваю по этой теме, везде один и тот же вопрос: как найти файл, но никто не может ответить ((

    [Ответить]

    Денис Черников ответил:

    Не могут ответить, это потому-что нет прямого ответа. Дополнение работает хорошо, но оно не указывает прямой путь к файлам. Вам придётся включать логику и учить html для понимания. К примеру, для css всё понятно там номера строк есть.

    [Ответить]

  6. Андрей

    опять включить логику))) Люди и спрашивают хоть какой-то алгоритм. Дополнение суперское. я им давно пользуюсь. я знаю HTML и CSS. Но бывает, что не знаешь в каком файле данный код лежит. Просто иногда лучше ничего не отвечать или писать честно: не знаю!! А то включите логику))

    [Ответить]

    Денис Черников ответил:

    Не знаю, это не ответ на этот вопрос, вот если «Не могу уточнить, как именно Вам включить логику» так будет более точно!

    [Ответить]

  7. валентин

    ставил я этот плагин, но не понравился он мне. Как мне кажется лучше всего через стандартный «просмотр кода элемента» на хроме, намного проще и удобнее

    [Ответить]

    Денис Черников ответил:

    Это не совсем верно, Валентин! С багером проще элемент выделить и по строчкам понять, что за код за него отвечает.

    [Ответить]

  8. Svetlana

    Хм, Денис, а этот «жучок» работает только на «мозилле»? У меня «хром»...

    [Ответить]

    Денис Черников ответил:

    Светлана, честно не помню, по-моему там есть своё приложение!

    [Ответить]

Оставить комментарий!

Вверх