Как работать с 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. Прежде чем приступить к работе с новым инструментом не забудьте отключить «старый». Если будут включены одновременно два инструмента, они либо будут работать некорректно, либо не будут работать вовсе.
Комментарии
Спасибо автору
RSS лента комментариев этой записи