Статичные веб-плакаты

В первом модуле студенты первого курса направления «Дизайн и программирование» работают над созданием одностраничных сайтов. Чтобы их разработать, студенты изучают базовые основы технологий HTML и CSS, а также учатся работать с типографикой и шрифтами в веб-дизайне.

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

Чтобы сверстать веб-страницу, нужно разобраться, как браузер интерпретирует код. Если открыть в браузере HTML без CSS, элементы на странице отобразятся предсказуемо благодаря потоку документа (базовый поток, normal flow) — это порядок, в котором элементы разметки HTML отображаются на веб-странице. Движки любых браузеров применяют к тегам стили «по умолчанию» и делят их на блочные и строчные через свойство display.

Блочные элементы располагаются сверху вниз, строчные — слева направо. Получается, если использовать HTML для разметки, мы сможем сверстать одноколонный макет даже без подключения CSS. Если же макет обладает более сложной структурой, мы можем прибегнуть к нескольким способам расположения элементов на странице.

Во-первых, расположить несколько элементов div в одну строку можно, если задать свойству display значение flex, grid или table.

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

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

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

Свойство float делает элемент «плавающим» для блочных тегов, но видимым для строчных. Например, мы можем сделать картинку обтекаемой текстом или поставить все элементы в одну строку (см. верхнее меню в плакате о Kazimir).

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

position с осторожностью используется в вёрстке. Элементу можно задавать координаты для расположения на странице при помощи свойств top и left. Это хорошее решение для фиксированной или резиновой вёрстки, но скверное для адаптивной и мобильных устройств. Ведь чтобы сделать из горизонтального экрана вертикальный, придётся переписать значения top и left у каждого позиционированного элемента, то есть, фактически заново сверстать страницу. Для лёгкой адаптивной вёрстки используются технологии flex и grid.

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

В проекте о шрифте IBM каждая строка обособлена своим тегом со стилизацией и подключением варианта начертания шрифта.

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

Гарнитуры шрифта подключаются через @font-face. В относительном пути необходимо указать не только название шрифта, но и название папки, в котором он лежит, и путь к нему.

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

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

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