Инструменты разработчика для начинающих.

Введение для WEB-новичков.

Всем привет. Сегодня хотел бы рассказать и показать пару полезных возможностей обычного браузера, на примере Google Chrome. Речь пойдет о такой возможности как инструменты разработчика, которые можно найти в меню браузера ( иногда данная функция спрятаны во вкладке “дополнительные возможности”).

Для чего это нужно?

Инструменты разработчика — это целый блок функций. Попасть в его меню можно кликнув правой кнопкой мыши и нажав “Просмотреть код”. В появившимся окне, можно увидеть код страницы сайта, значения переменных (если вы тестируете какую-нибудь функцию на php) и стили сайта.

prosmotr koda

Инструмент очень облегчит жизнь тем, кто хочет что-то изменить на сайте. Часто при изменении размера текста, или миниатюры записи может “поехать” вся структура сайта. Что бы не делать слепых изменений в коде, и потом надеется на лучшее.

Можно изменять положение элементов мышкой.

Редактировать цвет зон и размер текста в них непосредственно в браузере.

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

Как применять?

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

Шаг №1
Перейдем в просмотр кода элемента и узнаем какой стиль для него используется.подсветка элемента

Шаг №2
Вернемся к странице и после правого клика выберем просмотреть код страницы

Шаг №3                                                                                                                                                                                                                       В теге <head> найдем строку, отвечающую за подкачку стилей сайта. Обычно она выглядит вот так вот. (пример строки)

<link rel='stylesheet' id='mh-magazine-lite-css' href='https://mylma.ru/wp-content/themes/mh-magazine-lite/style.css?ver=2.5.5' type='text/css' media='all' />

Шаг №4
Откроем css файл в новой вкладке. И при помощи поиска по странице (клавиша F3), найдем выбранный нами стиль и скопируем егопоиск стиля

Шаг №5
Вставим его в свой файл style.css и сохраним изменения.

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

  1. Найти файл шаблона страницы или ее зоны , в котором расположен нужный вам элемент
  2. Заменить стандартный стиль, на кастомный.
  3. Сохранить файл, обновить страницу (shift + F5) и редактировать описание стиля, пока результат не придется вам по душе.

Подписывайтесь на наши новости по Rss или в соц.сетях.

Последние посты

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

Войти с помощью: