Редизайн сайта без знания css и html

Сегодня сделать сайт для себя может каждый желающий. Но новичкам приходится особенно трудно — ведь нужно столько изучить, понять и применить, что большинство просто забрасывают свои начинания. В особенности, если дело касается дизайна страниц, ведь для начинающего сайтовладельца, такие понятия как html и css — остаются лишь понятиями, до которых ещё нужно дойти.

Редизайн сайта без знаний html и css

Многие утверждают, что без знания кода и разметки страницы, задумка сделать редизайн своего сайта является практически невыполнимой задачей. А так ведь хочется сделать из бесплатного общедоступного шаблона, который зачастую устанавливается новичками на свои интернет-сайты, пусть не конфетку, но значительно его изменить, чтобы хоть маленько выделяться из «конвейера». Благо есть решение.

Изменение дизайна без познаний

Изменить какую-либо форму, размер текста, отступы или другие визуальные параметры на странице, то есть подредактировать дизайн сайта можно с помощью средств, которые имеются на каждом компьютере. Браузер для просмотра интернет-страниц — именно он поможет заняться редизайном сайта без особых знаний html и css.

Рассмотрим подробнее:

  1. Запускаем любой браузер. Это может быть Опера или Гугл Хром, но лучше всего использовать последнюю версию браузера Mozilla Firefox, так как в нём встроены более продвинутые средства для наших целей;
  2. Открываем страницу сайта, над которой мы будем «колдовать»;
  3. Начинаем делать редизайн сайта.

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

Изменяем меню без знаний css и html

 

Появляется «инспектор кода» — специальное окно, разделённое на несколько областей: код в html и разметка css:

inspektor

Если подвести мышку к любой строке с кодом в левой части, на самой странице появляется указатель с всплывающей подсказкой, где указан элемент в css:

ukazatel

В этой подсказке мы видим название элемента Li. Глядя в css, можно увидеть разметку с этим элементом:

li

Теперь, изменяя параметры мы можем изменить внешний вид нужной нам области. Вернёмся к цвету и нажмём на синий маленький квадратик в разделе «полуокна» css:

cvet-css

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

cvet

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

style

Видим запись «style.css?ver=3.9.1:1356» — где style.css — название файла со стилями, а число после двоеточия — строка в этом файле с нужным нам параметром — цветом меню. Понимаете? Открываем админку сайта на Вордпресс, переходим в редактор, открываем файл стилей и ищем в нём нужную строку и заменяем на ту, которую мы получили при помощи простых действий, описанных чуть выше для изменения цвета меню. Сохраняем и любуемся получившимся результатом.

Если вы не знаете, что за что отвечает, то можно воспользоваться сайтом http://htmlbook.ru/. Допустим, вводим «размер шрифта» в поиске на указанном сайте и находим параметр font-size. Найдя этот параметр в разделе css (точно также как мы нашли цвет текста color чуть выше), сначала изменяем его в браузере, затем изменяем в файле.

Таким простым способом можно значительно изменить дизайн сайта, при этом особо не вникая в стили, разметку и прочее. Успехов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *