Как работать с WebDeveloper

Плагин Web Developer предоставляет в помощь вебразработчику большое количество инструментов. Мне бы хотелось вам показать в действии возможности плагина Web Developer. Остановлюсь на группе инструментов плагина «Ошибок CSS нет», так как эта группа инструментов чаще всего используется вебмастерами.

Пример работы с WebDeveloper

Для примера поработаем с сайтом webadvisor.ru, на странице которого вы сейчас находитесь. Обратите внимание, что дизайн сайта выполнен в одной гамме. Допустим, я хочу изменить цвет левого модуля, который отражает меню сайта. Мне нужно подобрать цвет для модуля таким образом, чтобы он гармонично сочетался с цветовой гаммой других элементов шаблона.

Начинаем работать:

1.Открываем группу инструментов «Ошибок CSS нет». В выпадающем списке инструментов включаем инструменты «Посмотреть стиль элемента»

Схема

 

 

 

 

 

 

 

«Посмотреть стиль элемента» - после включения этого инструмента, под панелью инструментов Web Developer появится строка, данные в которой будут изменяться в зависимости от того, как перемещается курсор по странице. Наведите курсор на определённый элемент сайта, и вам будет показана информация об уровне вложенности этого элемента. Если вы щёлкните по элементу, откроется панель инструмента с информацией о стиле элемента.

В первую очередь нам нужно получить информацию о стиле модуля. Для того, чтобы получить эту информацию, последовательно выполните следующие действия:

  • Наведите курсор на модуль. В верхней строке инструмента появятся нужные данные, в нашем случае - «.column_left div.moduletable»;
  • Щёлкните по модулю мышью и в открывшемся окне «Информация о стиле» скопируйте эти данные;
  • Запомните название стилевого файла, в котором прописан стиль данного модуля.

Схема

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.Открываем группу инструментов «Ошибок CSS нет». Отключаем инструмент «Посмотреть стиль элемента»  и включаем инструмент «Редактор CSS»

Схема

 

 

 

 

 

 

 

«Редактор CSS» - по умолчанию панель этого инструмента появляется внизу экрана. Но вы можете перемещать панель влево, вверх, вправо, вниз, щёлкая по кнопке «Позиция», которая находится возле кнопки «Закрыть» на панели этого инструмента. В верхней части панели инструмента показаны вкладки стилевых файлов и встроенных стилей страницы. Плагин является тестовым инструментом и не редактирует оригинальные файлы с возможность сохранения. Все изменения,  внесённые в CSS файлы, запоминаются только браузером и отменяются с закрытием панели.

Теперь нужно найти модуль в стилевом файле и изменить значение background, которое отвечает за фон модуля. Для этого последовательно выполните следующие действия:

  • Вставьте скопированные данные «.column_left div.moduletable» в строку поиска открывшегося окна «Редактор CSS»;
  • Выберите вкладку с нужным стилевым файлом и найдите модуль с помощью информации, скопированной в строку поиска;
  • В найденном файле измените значение background.

В нашем случае значение background #518C8C изменено на значение #518C51. Цвет модуля моментально изменился. Теперь можно поэкспериментировать с цветом, изменяя значение background.

Схема

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Таким образом, можно изменять стили любых элементов и просматривать полученные результаты в браузере. Но учтите, вы не можете пользоваться сразу несколькими инструментами Web Developer. Прежде чем приступить к работе с новым инструментом не забудьте отключить «старый». Если будут включены одновременно два инструмента, они либо будут работать некорректно, либо не будут работать вовсе.

Комментарии   

 
0 #1 Сергей Кондулуков 30.03.2015 06:48
Очень хорошая познавательная статья

Спасибо автору :-)
 

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