f12-140x140Всем привет! Рано или поздно перед каждым владельцем веб ресурса встает задача по изменению внешнего вида сайта, внесения дополнительных блоков или иных элементов на веб страницу. И тут, как правило, два пути делать все самому или обратиться к знающим и понимающим людям верстальщикам. В этой статье мы рассмотрим первый вариант, и он не так страшен, как кажется. А помогут нам в этом средства разработчиков, которые есть во всех современных браузерах.
Для чего они вообще созданы, спросите вы меня? А они как раз и позволяют внести те самые корректировки в верстке HTML и CSS файлах без внесения правок в основной код, чтоб было можно наглядно посмотреть, как все будет выглядеть на веб странице.

Где взять эти средства разработчиков?

Как ни странно в самом браузере. В большинстве браузеров средства разработчиков вызываются по клавише F12, в некоторых через меню браузера. А есть еще плагины для браузеров которые улучшают функционал средств разработчиков, давая тем самым еще больший комфорт в работе при верстке страниц. Не буду забегать в перед, и рассмотрим все по порядку.

Интернет Эксплоер

Многие недолюбливают этот браузер, много он нервов извел вебмастерам так как отображал страницы не так как планировал верстальщик. Что то я не в ту степь немного разговор повел. Рассмотрим средства разработчиков на примере Интерент Эксплоера 10 версии. Вызвать это чудо средство можно нажав функциональную клавишу на клавиатуре F12 или нажав на меню – зубчатый колесик в правом верхнем углу, и выбрав пункт в меню.menu_IE
Активировав средства разработчиков в низу браузера можно будет увидеть вот такое окно, в котором будет отображаться HTML структура и CSS стили для каждого элемента страницы.sr_IE Как правило окно поделено на две части – с лева у нас код страницы а с права стили. Такая компоновка средств разработчика присутствует во всех браузерах. Есть интересный момент в десятой версии как режим браузера.rejim_brauzera Если нажать на эту вкладку то появится меню в котором можно выбрать версию браузера для просмотра.
Объясню для чего это нужно.С каждой новой версией браузера производители вносили все новые изменения для улучшения отображения страниц. И если в десятой версии сайты смотрятся боле менее прилично то если тот же сайт открыть в более старой версии этого браузера то сайт может рассыпаться на глазах. Раньше для этого ставили на персональный компьютер эмуляторы браузера ИЕ чтоб посмотреть как будет смотреться сайт в разных версиях браузера. С приходом десятой версии нужда в эмуляторах отпала.

Chrome

Или как еще его называют Гуглхром. Детище компании google. Пожалуй самый любимый многими браузер. В нем так же по кнопке F12 вызываются средства разработчиков.hrom Внешне они так же похожи на предыдущий браузер.
На базе этого браузера многие поисковые службы создали свои браузеры такие как например Яндексбраузер,Майл.ру. Каждый из них зашил в свой браузер свои штатные фишки как поиск, почта и прочие элементы.

Opera

opera_vklКода то самый популярный браузер был. В нем инструменты разработчика включаются совсем по другому. Изначально они вообще выключены, для этого мы их включим. Вызываем меню нажав в левом верхнем углу на значек Опера, выбераем пункт другие инструменты и отмечаем включить инструменты разработчика. После этого в меню появится пункт инструменты разработчика, нажав на который откроется вкладка на которой нужно выбрать пункт веб инспектор.webinspektor После появится панель. operaПо клавише F12 она в браузере Опера не вызывается. Может кто знает как в этом браузере так сделать?

Mozilla

Мой самый любимый браузер. Думаю и многие веб мастера тоже любят им пользоваться. Тут все стандартно F12 работает, панель выглядит вот такmozilla
Плюсом этого браузера является плагин расширение Firebug который и вносит тот самый комфорт при работе с панелью инструментов. Кстати такой же плагин есть и для хрома но мне он там не очень понравился.

Как пользоваться инструментами разработчика?

Для этого возьму подопытный сайт. К примеру блог великого и ужасного Александра Борисова, многие в блогосфере с ним знакомы по его курсам. Вот на его блоге мы и поучимся пользоваться средствами разработчика. Например хотим мы в шапке поставить баннер.1

Для этого выделяем блок шапки хедер в инструментах разработчика2 и видим что в месте с кодом выделилась сама шапка. Теперь нам нужно прописать в шапку баннер. Выделив блок шапки нажимаем комбинацию Ctrl+E и у нас отроется выделенный участок кода для редактирования.3 Вставим туда блок с баннером, а чтоб завершить редактирование нажимаем вкладку редактировать.4 Видим что баннер в шапке появился, но появился он не там где бы нам хотелось.Безимени-2

Нам его нужно сместить в право. Значит нужно для него прописать стили. Для блока с рекламой мы задали класс rec вот для этого класса и будем делать стили. На стороне таблицы стилей в правой части правой кнопкой мыши вызываем контекстное меню и выбираем добавить правило,opera_vkl и видим что у нас появился класс rec в таблице CSS. Пропишем ему обтекание с права и внешний отступ с верху чтоб выравнять его на уровне логотипа.6

6.2И вуаля баннер встал куда надо, значит теперь мы можем прописать код баннера и стили в основные файлы шаблона.
Конечно на таком маленьком примере тяжело понять всю суть, но как основа для работы с панелью разработчика сойдет. А вы пользуетесь средствами разработчика при правке шаблонов своих блогов?