SEO Маяк

Всем привет! Сегодня на seo-mayak.com я познакомлю Вас с незаменимым помощником для каждого веб-мастера. Работа со стилями, с таким инструментом, упрощается в несколько раз.

Расширение Firebug, как любое расширение служит для увеличения возможностей браузера. В данной статье я расскажу: где скачать Firebug для популярных браузеров Mozilla Firefox, Google Chrome и Opera, как его установить, а также постараюсь подробно описать, как пользоваться Firebug.

Изначально, плагин или расширение Firebug было создано группой разработчиком для Mozilla Firefox, поэтому в данном браузере расширение имеет самый мощный функционал.

Для остальных популярных интернет браузеров, таких как: Google Chrome, Opera и Internet Explorer, была разработана упрощенная версия — Firebug Lite, которая существенно уступает оригиналу, но тем не менее является вполне работоспособной.

Хочу подчеркнуть, что в этой статье я не стану описывать все возможности Firebug, а затрону лишь работу с HTML и CSS, так как основные читатели моего блога — это начинающие веб-мастера и для них будет сложно усвоить такие функции, как «JavaScript отладчик» или «DOM исследование».

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

С использованием дополнения, отпадает необходимость копаться в файлах шаблона, пытаясь определить какой class или id задан для определенного участка страницы.

В общем, работа с внешним видом сайта становится гораздо легче, быстрее и приятней. Поехали!

Где скачать и как установить расширение Firebug

Чтобы скачать расширение Firebug для Mozilla Firefox, необходимо открыть данный браузер и перейти по этой ссылке. Попадаем мы на страничку, где надо нажать на кнопку — «Добавить в Firefox»:

Затем откроется такое окошко:

Нажимаем на кнопку — «Установить сейчас» и начнется недолгий процесс установки. Если после перезагрузки браузера в верхнем правом углу появится значок с изображением жука, то значит Firebug успешно установился.

Установка на Chrome и Opera очень схожа и я думаю Вы разберетесь. Вот ссылочки на страницы для скачивания

Скачать Firebug для Chrome

Скачать Firebug для Opera

Выше я уже писал, что в браузерах Google Chrome и Opera, расширение представлено в сокращенном виде и чтобы более полно описать функционал Firebug, я запущу его в браузере Mozilla Firefox.

Работа со стилями. Как пользоваться Firebug

Начнем с самого простого примера. Допустим, нам надо поправить форму подписки от feedburner. У новичков очень часто с этим бывают большие сложности.

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

Вот как на данный момент выглядит форма на блоге автора письма:

Просто человек захотел разместить форму подписки непосредственно в статье и она растянулась у него на ширину всей страницы. Теперь я попробую исправить ситуацию средствами «волшебного» дополнения Firebug.

В браузере я нажимаю на значок жука и внизу страницы откроется «рабочая зона» расширения:

Далее, на панели управления выбираю иконку с изображением стрелочки (на скриншоте я ее обвел красным). C помощью этой функции можно выделить любой объект на странице и его код отобразится во вкладке — «HTML».

После нажатия на иконку, отвечающую за выделения, передвигаю курсор на край формы подписки и границы зоны очерчивается рамкой:

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

Теперь я буду править форму подписки, так сказать, в реальном времени.

Итак, в любом шаблоне есть файл style.css и как правило все стили прописываются именно в этом файле, но бывают и исключения. В форме подписки от feedburner стили заложены в сам код и мне надо найти слово style (с англ — стиль), после которого прописаны селекторы и их значения, отвечающие за различные параметры:

Давайте разберем, что за селекторы заданы для данной формы.

border: 2px solid #00B344;

Селектор border (с англ. — граница) выводит рамку вокруг формы, толщиной в 2px (два пикселя).

Значение solid (можно перевести, как сплошная линия) задает вид рамки, т.е. если задать другое значение, например: dashed (пунктирная линия), то рамка станет пунктирной.

И последнее значение #00B344 — это цвет рамки.

padding: 3px;

Селектор padding (с англ. — набивка) отвечает за внутренние отступы, т.е. в данном случаи селектор задает расстояния в пикселях от самой формы до рамки.

text-align: center;

Селектор text-align (с англ. — выравнивание текста) выравнивает текст, относительно страницы. Значение center (с англ. — центр) дает команду браузеру выравнивать данные элемент по центру страницы.

Конечно я не буду перечислять все селекторы, которые используются в CSS. Делаю я это, так сказать, для наглядности и облегчения восприятия. В будущем я обязательно выпущу бесплатный, для своих подписчиков, видеокурс по основам HTML и CSS.

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

Для этого я применю еще один селектор margin (с англ. — край), который отвечает за внешние отступы, т.е. расстояния от рамки до краев расположенных рядом элементов.

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

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

В самый конец кода формы подписки я добавляю селектор margin и задам для него следующие значения:

margin: 0 180px 0 180px;

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

Если есть одинаковые значения, то их можно «склеить», тем самым немного сократив код:

margin: 0 180px;

Вот что в итоге должно получится:

И вот оно чудо! Форма подписки моментально приняла другой вид.

Если навести курсор на синий фон кода, то на странице подсветятся: внешние отступы — желтым цветом, внутренние — фиолетовым.

Другое дело! Только вот кнопочка «Подпишитесь» уж как-то сильно прижалась к полю ввода e-mail, надо ее немного опустить. Выделяю кнопку с помощью вышеописанных действий и вот ее код:

Но теперь, для наглядности, я пойду другим путем и воспользуюсь вкладкой «Редактировать», где задам следующие отступы для кнопки:

margin: 7px 0 3px 0;

У меня получились одинаковые значения для правого и левого отступа и надо «склеить» нули:

margin: 7px 0 3px;

Смотрим на результат:

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

Но что же делать, если стили прописаны в отдельном файле? Давайте разберем и эту ситуацию.

Теперь для примера я выбрал блок с хлебными крошками со своего блога. Выделяю его, и в правом окне рабочей зоны отобразятся стили, которые прописаны в файле style.css:

Итак, что мы видим. Мне открылись все стили, прописанные в файле style.css, для идентификатора breadcrumbs.

Допустим, я хочу изменить цвет текста, и размер шрифта. Для этого мне понадобиться внести изменения в значения для селекторов: color (с англ. — цвет) и font-size (с англ. — размер шрифта).

Делаю двойной клик по значению селектора и появляется поле для правки:

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

Теперь мне не нравиться тени шрифта, надо их убрать. За тени отвечает селектор text-shadow (с англ. — тень текста). Навожу курсор на селектор и слева от него появляется красный значок:

Если кликнуть на этот значок, то селектор исчезнет и отменяться все его значения. Смотрим:

Тени, как не бывало! Следуя своим внезапным капризам, я решил сделать текст немного жирнее. Ага, а такого селектора здесь нет. Ну что же, придется его добавить.

За «жирность» текста в CSS отвечает селектор font-weight (с англ. — начертание шрифта).

Делаю двойной по символу «;» (можно кликать по любой строчке), который находится в конце каждой строки или по символу «}» и появится поле для ввода нового селектора и его значений:

Сначала, в появившемся поле, я прописываю сам селектор, потом нажимаю клавишу Tab и вписываю значение bold (с англ. — отчетливый):

Наверное Вы заметили, что Firebug показывает порядковый номер строки, начиная с которой в файле style.css прописаны стили для выделенного идентификатора или класса:

И если кликнуть по номеру, то в правом окне рабочей зоны, откроется файл style.css и стили для идентификатора, с которыми я работал, подсветятся голубоватым фоном.

Также для правки стилей можно пользоваться вкладкой CSS, где будет отображаться файл style.css целиком:

Если выделить объект и воспользоваться вкладкой «Маркет», расположенной в правом окне рабочей зоны, то мы увидим следующую картину:

Как Вы уже догадались, в этой вкладке наглядно демонстрируется размеры самого выделенного элемента (690х41 пикселей), а также: внутренние отступы (padding), рамка (border) и внешние отступы (margin).

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

P.S. Как видите, если немного знать английский язык, то изменение стилей окажется не таким уж и сложным занятием.

На сегодня у меня все! Как вам статья?

С уважением, Виталий Кириллов