Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Создаем фильтрующееся портфолио с даптивным веб-дизайном

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Сегодня мы будем использовать макет Портфолио в формате PSD (* PhotoShop Drawing/PhotoShop Document  – формат графического файла в Adobe Photoshop (расширение файла), документ Photoshop. Здесь и далее примеч. пер.) c ThemeForest, верстая его только при помощи HTML и CSS и делая его дизайн адаптивным. Затем мы пойдем еще дальше и добавим плагин jQuery Isotope для того, чтобы сделать наш макет полнофункциональным фильтрующимся портфолио.


Шаг 1: Задаем организацию проекта

Мы начнем с создания простой структуры проекта, чтобы все было на своих местах. Мы создадим три папки:

  • css - для размещения файлов CSS
  • images - для размещения всех изображений
  • js - для размещения плагинов jQuery и наших собственных скриптов


Шаг 2: Документ

Перед тем как приступить к написанию кода, мы создадим файл index.html, который можно разместить в корне вашего проекта. Мы добавим базовый шаблон HTML5, в заголовке которого  подключим файл CSS. Также нам необходимо будет подключить еще некоторые файлы:

  • jQuery Library – нам необходима будет подключенная библиотека jQuery позже, когда будем использовать плагин Isotope; мы же добавим ее сейчас. Я подключил библиотеку, располагающуюся на серверах Google (очень рекомендую).
  • HTML5 Shiv – поскольку мы будем использовать элементы HTML5, то нам необходимо будет убедиться, что мы подключили прокладку (* добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными) HTML5 Shiv, которая позволяет ранним версиям Internet Explorer распознавать теги HTML5.
  • Google Web Fonts – если вы взглянете на файл PSD, то заметите, что в нем используется шрифт PT Sans. Поскольку этот шрифт не будет доступен локально для многих пользователей, то мы подключим его с сервиса Google Web Fonts.

Шаг 3: Добавляем общее стилевое оформление

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


Шаг 4: Начинаем с добавления Шапки

Теперь мы приступаем к созданию структуры сайта! Мы начнем с заголовка и добавим его при помощи элемента HTML5 header.

Далее мы добавим некоторые стилевые правила для нашего заголовка. Мы добавим здесь некоторые основные стили, однако главное, на что вам следует обратить внимание, – позиционирование. Здесь мы используем фиксированное позиционирование и затем задаем 0 в качестве значения свойств top, left и right. Благодаря этому будет гарантировано, что наш заголовок располагается поверх других элементов окна при прокручивании и находится в самом верху окна просмотра.


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

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

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

В итоге должно получиться нечто вроде следующего:



Шаг 6: Боковая панель

Снова мы воспользуемся возможностями разметки HTML5 и создадим нашу боковую панель при помощи элемента aside.

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


Шаг 7: Фон боковой панели!

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

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

Теперь у нас имеется основа нашей боковой панели!



Шаг 8: Приступаем к реализации навигационного меню

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

Теперь добавляем некоторое стилевое оформление для навигационного меню, фон, стилевое правила для шрифта и семейство шрифта с Google Web Fonts – PT Sans.


Шаг 9: Создаем область с основным контентом

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

Учитывая, что заголовок в высоту занимает 70px, то нам необходимо будет задать отступ сверху величиной 70px. Ширина боковой панели составляет 150px, так что мы установим отступ слева величиной 150px. Под конец мы добавляем поля от верхнего и левого края величиной 20px, чтобы сдвинуть проекты от заголовка и боковой панели.


Шаг 10: Добавляем проект портфолио

Пришло время приступить к проектам портфолио. Вперед, создайте элемент div с классом portfolio внутри нашей главной области; при помощи него будут объединены записи портфолио. Запись нашего портфолио реализуется при помощи figure (опять-таки элемента HTML5), который используется для указания того, что элемент является контейнером для какой-то информации.

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


Шаг 11: Добавляем стилевое оформление для записи портфолио

Стилевое оформление для проекта портфолио не представляет из себя ничего особенного. Мы зададим выравнивание для элемента по левому краю и установим отступ справа и снизу величиной 20px. Для добавления белой границы мы просто добавим некоторые поля и затем фон, которые буду скруглены при помощи свойства border-radius, значение которого составляет 5px (при этом учитывая префиксы для браузеров). Наконец, к элементу будет добавлена тень.

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


Шаг 12: Добавляем ленточку для записи портфолио

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


Шаг 13: Добавляем стилевое оформление, которое применяется при наведении курсора поверх записи портфолио

Последнее, что нам теперь необходимо сделать для нашего портфолио, – добавить стилевое оформление, которое применяется при наведении курсора поверх записи портфолио. Это будет реализовано при помощи уже созданного нами строчного элемента; все, что нам теперь необходимо, – добавить для него стилевое оформление. Мы будем использовать изображение и фон черного цвета, в качестве значения компонента цвета альфа (* в компьютерной графике - четвёртый компонент цвета, используемый для контроля смешивания цветов с фоном или нижележащим объектом. При этом его значение 1,0 означает полную непрозрачность, а 0,0 - полную прозрачность объекта) которого задано 70%. Также мы добавили некоторые переходы CSS3, чтобы стили, используемые при наведении курсора поверх элемента, применялись плавно. Последнее, что необходимо выполнить, – добавить opacity:1; для того случая, когда курсор располагается поверх записи портфолио, благодаря чему постепенно проявится элемент с применяемым при этом стилевым оформлением.

Теперь запись нашего портфолио готова, вы свободно можете добавлять свои собственные изображения и менять их!



Шаг 14: Делаем дизайн портфолио адаптивным

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

Перед тем как приступить к редактированию макета нам необходимо выполнить два момента. Для начала нам нужно будет добавить мета-тег viewport, благодаря которому наш веб-сайт будет корректно отображаться на мобильных устройствах и планшетах; если вы хотите узнать больше по этому вопросу, то обязательно ознакомьтесь с этой статьей, написанной Ian Yates. Затем необходимо добавить немного кода CSS, чтобы наши изображения стали отзывчивыми:


Шаг 15: Задаем стилевое оформление для планшетов с портретной ориентацией экрана

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


Шаг 16: Задаем стилевое оформление для планшетов с альбомной ориентацией экрана

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


Шаг 17: Добавляем стилевое оформление для мобильных устройств с книжной ориентацией экрана

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

Также из-за большого размера заголовка, под которым располагается боковая панель/навигационное меню, вы не сможете увидеть такое же количество проектов, как и ранее. Мы уберем position: fixed и вместо него применим absolute, благодаря чему заголовок теперь будет прокручиваться, а не оставаться наверху страницы.


Шаг 18: Разрешаем некоторые проблемы с позиционированием

Что ж, теперь у нас возникли некоторые проблемы. Боковая панель подстроилась замечательно под размер экрана, однако проекты портфолио располагаются некорректно. Нам необходимо будет вернуться к макету и добавить два дополнительных элемента div, один с id (* identifier – идентификатор) wrapper, который обернет все элементы, за исключением заголовка, и другой с классом page, который обернет область с основным контентом.

После добавление необходимой разметки нам нужно будет добавить некоторое стилевое оформление. Прокрутите кверху код CSS-файла и добавьте следующий:


Шаг 19: Добавляем стилевое оформление для мобильных устройств с альбомной ориентацией экрана

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



Шаг 20: Знакомимся с Isotope

Теперь, когда мы рассмотрели создание дизайна, то можем перейти к добавлению некоторого функционала! Мы будем использоваться потрясающий плагин Isotope, разработанный David DeSandro. Isotope используется для добавления макетов, возможности фильтрации и сортировки. Он часто используется в портфолио для фильтрации работ по разным категориям, например Веб-дизайн, Фотография, Иллюстрации. А теперь давайте приступим!

Перед такм как добавить плагин в наш документ нам необходимо скачать его. Перейдите по http://isotope.metafizzy.co/jquery.isotope.min.js. Теперь вы увидите JavaScript-файл Isotope; просто выберите  File > Save и сохраните его в папке js, которую создали вначале. Далее нам нужно будет подключить скрипт в нашем HTML-файле.


Шаг 21: Фильтрация

Для того чтобы добавить для записей нашего портфолио возможность фильтрации, нам необходимо снова изменить нашу разметку. Мы начнем с навигационного меню, которое будем использоваться для фильтрации. в Isotope используются собственные атрибуты HTML5 Data, а именно data-filter="". Мы устанавливаем значение в зависимости от категории; например для категории Web Design используется .web (обратите внимание, что нам необходимо добавить точку перед значением категории). Тем не менне в якорном элементе для категории All используется не .all, а звездочка.


Шаг 22: Добавляем возможность фильтрации записей

Последнее, что нужно выполнить для добавления возможности фильтрации, – отредактировать записи портфолио. После добавления значений атрибутов data-filter вам необходимо будет добавить соотетствующие значения для каждой записи. Если работа принадлежит к категории Video, то вам будет необходимо добавить класс video. Обязательно обратите внимание на то, что если значения атрибута data-filter указаны в нижнм регитстре, то вы должны использовать нижний регистр и при указании классов записей.


Шаг 23: Активируем плагин

Пришло время активировать Isotope, что мы сдалем в два этапа. Для начала нам нужно активировать часть, при помощи которой будет происходить фильтрация записей нашего портфолио. Начните с создания нового файла под названием "custom.js" и добавьте его в вашу папку js.


Шаг 24: Добавляем обработчик события Click

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


Шаг 25: Добавляем стилевое оформление для пунктов меню, находящихся в активном состоянии

В PSD показано стилевое оформление для текущего выбранного якорного элемента навигационного меню, который находится в активном состоянии. Нам будет необходимо добавить некоторую дополнительную разметку, некоторый код CSS и, наконец, некоторый дополнительный код jQuery. Для начала перейдите в ваш HTML-файл и добавьте class="selected" к первому якорному элементу.

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

Наконец, необходимо добавить некоторый код jQuery, при помощи которого будут добавляться классы при выборе пунктов меню для отображения активной кнопки/категории.


Шаг 26: Мы что-то забыли, не так ли?

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


Заключение

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


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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.