Меняем интерфейс сайта самостоятельно

Автор: | 10.04.2016

menyaem-interfejs-sajta-samostoyatelnoПриветствую вас, друзья! :-)

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

Обобщённо все этапы разработки ресурсов «с нуля» изложены в инструкции по созданию сайта.

Причём, процесс разработки веб-проектов рассмотрен не только «в общем», но и для конкретных платформ (на данный момент готовы публикации, описывающие весь цикл создания веб-проекта на базе CMS OpenCart и WordPress).

Этих знаний вам вполне должно хватить для самостоятельного создания ресурса своей мечты.

Итак, сайт готов. Вы смотрите на своё детище с умилением и радуетесь его работе. Но в один прекрасный момент, глядя на него, у вас появляется идея «Хм… а что, если сделать эту кнопочку не квадратной, а овальной» или «Что-то у меня картинки в тексте теряются… как бы их обвести красивенько?»

И, самое главное, — «Как бы мне это сделать самому, а то программисты такие цены заламывают…?» :-)

В сообществе проекта «Сделай Сайт Своими Руками (СССР)» Вконтакте вопросы такого плана публикуются почти каждый день. Если честно, я даже немного подустал на них отвечать, т.к. каждый раз приходится писать одно и то же :-)

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

Уверен, что вам понравится. Начинаем!

Что такое интерфейс сайта?

По-научному интерфейс сайта (веб-интерфейс) – это набор средств для взаимодействия пользователей с ресурсом. Проще говоря, это набор «кнопочек», «картиночек», «ползуночков»,  на которые можно понажимать, посмотреть и поперетаскивать, чтобы произвести требуемое действие.

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

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

Ресурс приобретает свой конечный внешний вид в процессе вёрстки сайта, которая заключается в реализации (верстальщики любят слово «натягивание») макета, подготовленного дизайнером или вами самостоятельно.

С терминологией разобрались.

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

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

Лично меня, как разработчика, по началу очень возмущало, когда заказчики по три раза просили переделывать одну и ту же кнопку. Я постоянно злился и не понимал, что же им никак неймётся.

Но когда дело дошло до разработки своего блога, я стал их понимать намного лучше и данные правки уже не вызывали у меня такую бурю эмоций, как ранее. Финальный вариант интерфейса моего сайта, который вы видите сейчас, появился спустя десятки правок, причём изменениям подвергались зачастую одни и те же элементы :-)

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

Инструменты для самостоятельной вёрстки сайта

Перед тем, как мы приступим к изменению интерфейса сайта, приведу вам список программ, которыми пользуюсь я при вёрстке, а также будут полезны и вам.

Также я кратко расскажу об их предназначении, чтобы вы не задавались вопросом «Зачем мне это нужно?».

  1. Веб-браузер – эта программа установлена у всех вас, т.к. благодаря ней вы попали в Интернет, на мой сайт и читаете эти строки :-) В ней мы будем тестировать наши изменения.
  2. Инструменты разработчика – это плагин веб-браузеров (о том, что такое плагины читайте в соответствующей статье), который является самым главным средством при вёрстке сайтов. Благодаря ему мы будем получать классы и идентификаторы элементов интерфейса для дальнейшего их поиска и изменения в коде, а также текущий список их свойств, которые, мы сможем править прямо в браузере.
  3. Редактор кода – программа, необходимая для редактирования кода сайта. В качестве её может выступать самый банальный текстовый редактор типа «Блокнот». Более подробно о востребованных сегодня среди программистов редакторах кода и их возможностях вы можете прочитать в статье о программах для создания сайта. Также в данных целях можно использовать редакторы кода, встроенные в некоторые из CMS.

Про себя я могу сказать, что при вёрстке сайтов я люблю пользоваться веб-браузером Google Chrome со встроенными средствами разработчика и NotePad++.

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

Также я охотно пользуюсь встроенными в CMS редакторами кода, которые отлично подходят для доработки, если нет возможности развернуть их копию на локальном веб-сервере ввиду различных причин.

Но, несмотря на мои предпочтения, в данном руководстве будет участвовать минималистичная связка Chrome и NotePad++, использование которой избавит вас от установки кучи лишнего ПО.

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

Порядок действий при самостоятельной вёрстке сайтов

Прежде всего запускаем веб-браузер и переходим на свой сайт. В качестве примера я буду использовать свой тестовый ресурс, разработанный в рамках публикации об установке OpenCart на хостинг, — myopencart.com.ua.

interfejs-sajta-na-opencartСайт работает на базе OpenCart 2.0.3.1, но не стоит сильно обращать на это внимание, т.к. сегодняшние советы универсальные и будут касаться абсолютно любого ресурса, независимо от его платформы.

Главное, чтобы ваши проекты использовали в своей работе HTML и CSS, а таких сегодня подавляющее большинство.

Итак, следующим этапом самостоятельного изменения вёрстки сайта будет запуск инструментов разработчика в своём веб-браузере.

Они есть в каждом современном продукте (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer последних версий), но, к сожалению, способ из запуска различен.

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

  • Google Chrome (встроен по умолчанию) – F12,
  • Mozilla Firefox (нужен FireBug) – F12,
  • Internet Explorer (встроен по умолчанию) – F12,
  • Opera и Safari – горячей клавиши по умолчанию нет, запуск инструментов разработчика производится через меню браузера.

Итак, поскольку я пользуюсь Google Chrome, то при нажатии на F12 на клавиатуре в нижней части экрана появляются инструменты разработчика, которые выглядят так:

instrummenty-razrabotchika-google-chrome-dlya-verstki-sajta-i-izmemeniya-web-interfejsaЕсли плагин у вас сбоку экрана, лучше всего его переместить вниз нажатием на кнопку справа от крестика, закрывающего окно (расположена в правом верхнем углу окна).

Как видите, данный плагин незамысловатый и представляет собой окно, в шапке которого расположена панель инструментов, которая состоит из (слева направо):

  • кнопка выделения элемента для получения его свойств;
  • переключатель мобильного режима (позволяет увидеть отображение интерфейса сайтов на мобильных устройствах);
  • перечень инструментов (для изменения вёрстки сайта нас будет интересовать первый из них — «Elements»);
  • настройки внешнего вида плагина, которые расположены в правой части окна (предназначены для удобства работы – для интереса можете потыкать :-) )

Итак, по умолчанию активен инструмент разработчика «Elements», который как раз нам и пригодится. Окно плагина в данном случае разбито на две части:

web-interfejs-instrumentov-razrabotchika-google-chrome-dlya-izmeneniya-verstki-i-interfejsa-sajtaСлева расположена бОльшая половина, в которой отображается html-код страницы вашего ресурса в виде сгруппированных строк, учитывая иерархию (вложенность объектов друг в друга).

При наведении на какую-либо строку в основном окне браузера выбранный элемент интерфейса сайта будет выделяться, а также будет отображаться его текущий размер.

poisk-ehlementa-interfejsa-opencart-na-sajteНажимаем на строку, соответствующую объекту, левой клавишей мышки и в правой части окна данного плагина мы видим список его css-свойств, рассортированных по классам, id и типам элементов.

В данном окне есть вкладки, отображающие различные DOM-свойства и события, но нам они сегодня не пригодятся, поэтому не буду забивать вам голову их детальным описанием :-)

Для работы с вёрсткой сайта нам пригодятся две первые вкладки:

  1. «Styles», которая активна по умолчанию и содержит список свойств с возможностью их редактирования;
  2. «Computed», содержащая список абсолютно всех свойств элемента (бывает полезно, когда свойства классов перекрывают друг друга и нужно найти проблему).

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

К примеру, мне нужно для кнопки корзины на моём сайте myopencart.com.ua поменять цвет фона и шрифта.

Первым делом, мне нужно найти требуемых элемент интерфейса сайта в коде и узнать его css-класс или id.

Для этого я нажимаю на первую слева кнопку на панели инструментов разработчика в виде стрелочки (в зависимости от браузеров и их версий она может иметь разный вид, но расположение её одинаково) и навожу на кнопку корзины:

poisk-ehlementa-interfejsa-sajta-na-opencart-s-pomoschyu-instrumentov-razrabotchikaПосле того, как я нашёл элемент интерфейса сайта и навёл на него курсор, нажимаю левую клавишу мышки, чтобы выбрать и просмотреть его свойства.

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

inspektiruem-ehlement-interfejsa-sajta-na-opencart-cherez-kontekstnoe-menyuВ появившемся меню выбираем «Просмотреть код», после чего у нас открываются инструменты разработчика (если до этого они были неактивны) с выделенным в инспекторе объектов требуемым элементом и списком его свойств в правой части плагина.

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

Мне нужно изменить цвет фона кнопки корзины с чёрного на, допустим, синий. За цвет фона отвечает css-свойство «background» и его составляющие «background-color» или «background-image».

Соответственно, ищем их в правой части инструментов разработчика.

Напомню, что в этом блоке отображаются css-классы выбранного вами элемента интерфейса сайта и их свойства, которые элемент унаследовал от них. Поэтому не забывайте внимательно изучать весь список, а не довольствоваться самым первым классом (требуемого свойства там может не быть).

В моём случае цвет фона кнопка корзины унаследовала от класса btn-inverse, т.к. он содержит требуемые свойства background-color и background-image:

instrumenty-razrabotchika-google-chrome-dlya-raboty-s-ehlementami-interfejsa-sajtaСоответственно, меняем их. Инструменты разработчика позволяют производить изменения интерфейса сайта прямо в браузере, благодаря чему можно сразу просмотреть результат, не тратя время на скачивание, правку и обратный перенос файлов.

Для этого нажимаем два раза левой кнопкой мыши на названии свойства (если нужно его поменять) или его значении (разделяются двоеточием) и вносим требуемые правки.

Мне нужно поменять значение свойства «background-color», которое представляет собой html-код цвета (узнать его поможет любой графический редактор или таблицы цветов в Интернете).

Поэтому я ввожу вместо #363636, который соответствует чёрному цвету, #00f, что является сокращённой записью синего.

menyaem-svojstvo-css-background-color-ehlementa-interfejsa-sajta-na-opencartНо… как видите, необходимые изменения интерфейса сайта не произвелись. Виной тому свойство «background-image», содержащее градиент чёрного цвета, которое присутствует наряду с «background-color» и является более приоритетным, соответственно, к элементу будет применяться оно.

Чтобы сделать фон кнопки синим нужно либо изменить значение свойства «background-image» на «#00f», либо вообще от него избавиться.

Я лично предпочитаю второй вариант, т.к. это позволяет очистить код от лишних свойств, что при больших масштабах может существенно увеличить производительность ресурса и убрать путаницу, возникающую при правках интерфейса сайта.

Так мы и делаем, снимая галочку возле «background-image», что означает его отключение. И, вуаля! :-)

udalyaem-svojstvo-css-background-image-ehlementa-interfejsa-sajta-na-opencartВсё отлично. Только, как мы видим, у нашей синей кнопки чёрное окаймление, что не есть хорошо.

Цвет границы элемента задаётся составным свойством border или border-color, которое входит в его состав (о свойствах и базовых понятиях css я обязательно поговорю с вами в будущих публикациях).

Соответственно, чтобы убрать рамку, нам нужно отключить свойство «border-color» для кнопки корзины, как мы это делали ранее с «background-image», или задать ему значение цвета фона.

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

Поэтому я задаю границе кнопки синий цвета фона с помощью «background-color: #00f;»:

menyaem-svojstvo-css-border-color-ehlementa-interfejsa-sajta-na-opencartВторая часть задания – поменять цвет текста кнопки корзины. Например, сделаем его жёлтым, чтобы текст хорошо выделялся на синем фоне.

Действуем аналогично. Теперь нас будет интересовать свойство «color», которое отвечает за цвет текста html-элементов. Соответственно, ищем его в свойствах класса нашего элемента.

При поиске обнаруживается, что данное свойство имеется в нескольких классах: btn и btn-inverse, но в последнем оно не воспринимается.

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

Я не буду сейчас полностью раскрывать тему приоритетности css-свойств, оставив её для будущих статей. На данном этапе ограничусь советом.

Если вы столкнётесь с ситуацией, когда задаёте элементу интерфейса сайта css-свойство, а оно не воспринимается (является перечёркнутым в списке свойств инструментов разработчика), то его нужно прописать в формате «свойство: значение !important» или в открывающем html-теге вашего элемента дописать «style=”свойство: значение;”».

Извините, но не удержался, т.к. слишком уж данная ситуация распространена и вызывает массу непонимания со стороны начинающих.

Итак, возвращаемся к изменению цвета надписи на кнопке корзины. Для этого меняем значение свойства «color» у класса btn с «#fff» (белый цвет) на «#ff0» (жёлтый):

menyaem-svojstvo-css-color-ehlementa-interfejsa-sajta-na-opencartВеликолепно! Все необходимые правки мы внесли.

Но не спешите радоваться и перезагружаться :-) Мы производили коррективы страницы сайта, загруженной браузером, но на самом ресурсе их по-прежнему нет. Поэтому при перезагрузке страницы они исчезнут.

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

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

Поэтому я предпочитаю производить правки интерфейса сайта через инструменты разработчика в браузере, т.к. это быстро и наглядно, а потом уже применять их к файлам ресурса. Чего и вам советую :-)

Итак, если у вас есть локальная копия проекта, то открываем редактор кода, NotePad++ в моём случае, и ищем объявление изменяемого нами css-класса по файлам проекта. Нужно искать полное название класса, скопировав его из инструментов разработчика.

Например, если для изменения цвета текста кнопки я правил класс с названием «#cart > .btn», то его мне и нужно искать:

poisk-css-klassa-ehlementa-interfejsa-sajta-na-opencart-v-notepad++Если же ваш ресурс расположен на хостинге, и вы не обладаете локальной копией (что большая редкость), то вам необходимо будет удалённо подключиться к ресурсу с помощью какого-либо SSH-клиента и сделать поиск элемента интерфейса сайта в файлах на удалённом сервере через данную программу.

Но всё же, рекомендую скачать файлы сайта на компьютер и произвести поиск вышеописанным способом.

Итак, объявление класса изменяемого элемента веб-интерфейса мы нашли:

rezultat-poiska-css-klassa-ehlementa-interfejsa-sajta-na-opencart-v-notepad++Открываем его описание двойным кликом на левую кнопку мыши на имени класса в результатах поиска, и теперь нам нужно внести правки интерфейса сайта, которые мы производили в браузере.

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

Поочерёдно изменяем все классы, сохраняем файлы и копируем их на хостинг в соответствующие директории с помощью любого FTP-клиента, например, FileZilla (путь к файлу можно узнать в редакторе кода при его открытии через результаты поиска), подтверждая замену существующих.

Если ваш интерфейс сайта находится только в разработке и ресурс ещё расположен на локальном веб-сервере, то данный шаг производить, естественно, не стоит. Просто вводим адрес ресурса в веб-браузере и наслаждаемся результатом :-)

Меняем интерфейс сайта самостоятельно — эпилог

Вот и всё, что я хотел вам рассказать о том, как можно изменить интерфейс сайта самостоятельно.

Стоит признать, что я выбрал достаточно сложный пример для ознакомления с основами вёрстки сайта.

Но, как говорил великий А.Суворов, «Тяжело в учении – легко в бою!». Поэтому в дальнейшем, при внесении более простых изменений в интерфейс сайта, вы не будете испытывать каких-то сложностей, т.к. они будут вам даваться намного легче.

Напоследок я хочу поделиться с вами ещё одним лайфхаком, касающимся поиска css-свойств элементов интерфейса сайта с помощью инструментов разработчика.

Иногда, при инспектировании требуемого объекта никак не удаётся найти требуемое свойство. Возникает ощущение, что программа издевается над нами: результат действия есть, а его описания нет :-)

Но не стоит отчаиваться — изучите в инспекторе объектов (левая часть инструментов разработчика) элементы интерфейса сайта, которые вложены в найденный вами или в которых он находится.

Скорее всего, искомое свойство наследуется или принадлежит каким-то вложенным элементам, поэтому внимательно изучайте их свойства — и вы обязательно найдёте искомое.

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

Главное, чтобы после ваших изменений интерфейс сайта продолжал оставаться:

  • универсальным — одинаково отображаться и выполнять одни и те же функции в разных веб-браузерах;
  • простым — не должно быть лишних элементов;
  • удобным — пользователю не нужно производить дополнительные, ненужные шаги;
  • понятным пользователю — у него не должны возникать вопросы по поводу назначения элементов.

Единственное, что я сегодня не рассмотрел, но будет вам несомненно полезно при самостоятельных правках интерфейса сайта – это список самых распространённых css-свойств элементов, манипуляции с которыми позволят вам довести их внешний вид до требуемой степени.

Поэтому я их обязательно приведу в своих ближайших публикациях. Всё, что вам нужно сделать, чтобы не пропустить их, — это подписаться на обновления проекта для получения уведомлений на email о выходе новых статей.

На этом всё. Ставьте свои оценки, оставляйте отзывы в комментариях и не забывайте делиться записью с друзьями в социальных сетях, чтобы помочь изменять интерфейс сайта своими руками и им.

Всем удачи и до новых встреч! :-)

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
9 голосов, в среднем: 4.9 из 5

2 комментария к статье "Меняем интерфейс сайта самостоятельно"

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

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