Урок 8. Теория и практика адаптивной верстки. Адаптация двух колоночного макета

Адаптированный под мобильные шаблон 2 колоночного сайта.

После того, как мы рассмотрели как можно сделать простейший одноколоночный макет адаптированный под мобильные устройства, давайте рассмотрим более сложный пример верстки 2 колоночного макета.

Добавим к исходному макету сайта боковую колонку.

Как адаптировать подобный шаблон под мобильные устройства?

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

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

Давайте посмотрим, как этого можно добиться.

Шаг 1. Располагаем элементы по горизонтали для отображения на больших мониторах.

Для решения этой проблемы, добавляем на веб-страницу следующий код.

CSS:

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

Подробнее об этом здесь.

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

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

Было бы намного лучше, если бы правая колонка «выпала» вниз и стала занимать большую часть экрана и левая колонка также заняла бы то оставшееся пространство, которое занимала правая колонка.

Давайте посмотрим, как это можно сделать.

Шаг 2. Адаптируем макет под мобильные устройства.

Добиться подобного эффекта позволяет правило CSS @media. Подробнее о нем разбиралось здесь.

Давайте посмотрим, каким образом веб-страница будет отображаться теперь при сужении ширины окна браузера.

Блоки, которые располагались в несколько колонок теперь подстраиваются под новую ширину экрана браузера и выстраиваются в столбик.

Теория адаптивной верстки

Адаптивная верстка сайта

Теоретическая часть

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

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

Термин адаптивный веб-дизайн был придуман Итаном Маркоттом. Итан объеденил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его адаптивным веб-дизайном.

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

Рисунок 2 – Внешний вид сайта web-grafika.pro на экранах с разным разрешением

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

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

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

Приемы адаптивной верстки

Гибкий «резиновый» макет

Для создания адаптивного веб-дизайна необходимы три составляющие: гибкий макет, гибкие изображения и медиазапросы.

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

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

Ширину главного контейнера тоже необходимо перевести в проценты, обычно это 100%.

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

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

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

1em=16px, em определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.

Гибкие изображения

Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:

В результате все изображения будут масштабироваться вплоть до 100% ширины их элемента-контейнера.

Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

Медиазапросы

Без такого CSS-модуля, как медиазапросы, мы не смогли бы нацеливать отдельные CSS-стили на определенные характеристики устройств, например ширину области просмотра.

При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов (device-width).

В CSS-коде ниже показано как меняется цвет фона страницы при различных размерах окна браузера.

Можно задавать тип устройства в атрибуте media тега
. Для этого необходимо указать ссылку в тегах в HTML-коде:

В данном коде используется устройство с экраном (screen).

Можно задать ориентацию экрана устройства:

В данном коде выражение медиазапроса сначала спрашивает о типе устройства (с экраном), а затем – о характеристике (в книжной ориентации). Таблица стилей portrait-screen.css станет загружаться, если речь будет идти о любом устройстве с экраном в книжной ориентации.

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

В данном коде мы указали значение initial-scale 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер равной 100% от величины своей области просмотра.

В медиазапросы включают стили, которые изменяются при определенных размерах экрана. Те стили, которые не изменяются не указывают:

Использование фреймворков

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

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

На сегодняшний день существует множество таких фреймворков:

• Bootstrap
• Skeleton
• Foundation
• Semantic UI
• и другие.

Адаптивная верстка: что это и как использовать

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

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Регулировка разрешения экрана

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

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

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

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

4 октября 2020 – 1 марта 2020, Москва и онлайн, беcплатно

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

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

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Еще один способ: отзывчивые изображения

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

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta :

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

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

Медиазапросы CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

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

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

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

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

display: none используется для объектов, которые нужно спрятать.

Вот наша разметка:

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

Теперь прячем колонки и показываем ссылки:

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

Адаптивный одно- дву- трехколоночный макет на CSS (используем соседние селекторы)

Часто встречаются сайты у которых структура страниц «бегает» от 1й до 3х колонок. В большинстве случаев разметка колонок задается индивидуальными классами под каждую структуру, в лучшем случае добавлением еще одного класса в зависимости от их количества.

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

HTML

Размеры взяты в процентах для наглядности.

Суть в изменении размеров ширины и отступов центрального блока в зависимости от соседнего сайд блока. Решение подходит как для плавающей, так и для абсолютно спозицонированой структуры. Так же оно может быть расширено на большее количество колонок.
Из минусов: постоянная структура HTML, в которой центральный блок идет всегда последним.

Сотрем пыль с соседних селекторов.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

8 уроков по адаптивной верстке

В этой статье, мы собрали отличные и полезные уроки по адаптивной верстке.

Кому будет полезно : верстальщикам, программистам

Язык : русский

Что вы получите от просмотра :

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

Мы рекомендуем :

Про автора

Приветствую Вас, меня зовут Владимир. Я cо-основатель интернет издания Say-Hi и диджитал агентства Dizz Agency.

Вёрстка адаптивного макета

Вы собрались верстать макет сайта. Но вот первый вопрос: какую выбрать ширину макета? Несколько лет назад популярны были резиновые макеты, занимающие всю ширину экрана. Но в современном Вебе применение исключительно «резины» в 40% случаев приведёт к неприятному эффекту: на телефонах с шириной экрана 400px всё «слипнется», а на широких мониторах (свыше 1300px) будет трудно находить начало новой строки текста после окончания предыдущей.

В Метрике для одного из сайтов сконструировал отчёт на выборке в 400 000 посетителей (Рунет). Только 60% визитов отличились тем, что их ширина окна браузера была в диапазоне 400px — 1300px. У вас могут быть другие значения.

«Резину» использовать можно, но в установленных границах (CSS-свойства min-width и max-width понимают все современные браузеры). В условиях такого широкого диапазона клиентской ширины окна браузера хорошим тоном является вёрстка адаптивного макета.

В идеале, адаптивный макет должен иметь 4 варианта отображения, соответствующие 4-м типам устройств веб-сёрфинга:

• маленькие экраны: телефоны (до 767px);
• небольшие экраны: планшеты (от 768px до 991px);
• нормальные экраны: ноутбуки, домашние компьютеры (от 992px до 1199px);
• широкие экраны: компьютеры, телевизоры (от 1200px).

Числа не являются каноническими и всего лишь соответствуют техническим тенденциям на данный момент. Стандартов адаптивной вёрстки я не нашёл. Значения взяты с сайта Bootstrap — движка адаптивного макета на базе HTML5 и CSS3 (оригинал — английский).

Эти ориентировочные цифры позволят нам ответить на вопрос, заданный вначале.

Какую выбрать ширину макета?

Но ответ будет не один, а четыре:

• маленькие экраны — 95% ширины;
• небольшие экраны: — 750px;
• нормальные экраны: — 970px;
• широкие экраны: — 1170px.

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

Исходя из этих значений делаем выводы о ширине колонок. На маленьких экранах колонка будет одна, расположится по центру экрана и займёт 95% его ширины. На небольших экранах вы сами решаете насчёт целесообразности дополнительной колонки. Я бы сделал узкий сайдбар (не больше 250px). На нормальных и широких экранах можно сделать широкий сайдбар (300px и более). Если зарабатываете на Adsense, в такой сайдбар хорошо поместится «вкусный» вертикальный блок 300×600. На широких экранах можно сделать 2 сайдбрара.

Как выполнить адаптивную вёрстку?

Адаптивный веб-дизайн (англ.: responsive Web design) обеспечивает смотрибельность и удобочитаемость сайта на любых устройствах. В двух словах, улучшает юзабилити. Ключевое слово «адаптивный» значит, что дизайн «приспосабливается» под устройство, на котором отображается. Т.е. сайт выглядит по-разному, но наиболее подходящим образом для того устройства, на котором отображается.

HTML5 & CSS3 & JS фреймворки для адаптивной вёрстки

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

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

CSS @media queries

Я считаю, что лучшее решение — самое простое. Потому я воспользовался CSS-возможностью media queries , поддержку которой обеспечивают все современные браузеры. А для поддержки браузерами IE младше 9-й версии можно воспользоваться такой хитростью (добавить в ):

Скрипт загрузят только браузеры IE младше 9-й версии, для остальных браузеров это просто комментарий в HTML-коде.

Media queries в действии

Для примера я указал правила только для #layout . Это контейнер

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

Принцип заключается в следующем. Сначала браузер учитывает те стили, которые указаны в верхнем разделе CSS-файла, названном мной «CSS-правила по-умолчанию». Затем идут конструкции @media screen and (. ) < . >, которые заставят браузер учесть новые стили, если выполнится условие вхождения ширины экрана в указанный диапазон. Если же используется какой-то браузер без поддержки media queries (редкий случай) — он просто проигнорирует эти инструкции, отобразив «CSS-правила по-умолчанию» (так решается отсутствие кроссбраузерной поддержки). Потому по-умолчанию я указал правило, соответствующее ширине обычных экранов: ширина макета 970px.

Для телефонов (имеются ввиду любые устройства с шириной экрана до 767px) браузер применит CSS-правило, согласно которому ширина макета станет 95% (от ширины экрана). А назначенное ранее для #layout правило margin: 0 auto; послужит тому, чтобы макет выровнялся посередине окна, оставив по краям отступы. Для планшетов ширина макета будет 750px, а для широких экранов — 1170px.

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

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

Хитрости и тонкости адаптивной вёрстки

Браузеры мобильных устройств обычно стараются подогнать ширину сайта под ширину экрана. Даже если у вашего макета ширина 1500px, браузер Android или Chrome подгонит размер сайта под размер экрана. Конечно, при использовании media queries тут можно получить неожиданный результат. Чтобы запретить браузеру масштабировать сайт, если мы сами управляем размером сайта, нужно прописать в инструкцию:

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

Достаточно в общих правилах написать:

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

Разные рекламные блоки в зависимости от ширины контента

Одним из минусов адаптивного макета считают то, что один и тот же HTML-код страницы отправляется всем посетителям. Точнее, минусом это является лишь в некоторых аспектах — например, в вопросе размещения рекламы. К счастью, JS-код позволяет обходить это ограничение. Решению посвящена отдельная статья: Рекламный блок в зависимости от разрешения экрана в адаптивном дизайне

Обнуление и нормализация предустановленных стилей

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

Эти файлы подключаю в начале основного style.css таким образом:

Import необходимо реализовать до любых CSS-инструкций. В дальнейшем, чтобы немного ускорить загрузку работающего сайта, все файлы CSS можно объединить в один и сжать. Сервис csscompressor.com сжал normalize.css в 4 раза, потому что в этом файле много комментариев.

Преобразование меню в список на маленьких экранах

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

Затем в CSS просто отображаем один из вариантов в зависимости от ширины экрана:

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

Преобразование двухколоночного макета в одноколоночный на маленьких экранах

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

Выше я уже показывал адаптивные CSS-правила для #layout — слоя, в который обёрнут контент. Не буду усложнять код повторением. Просто имейте ввиду, что описанный ниже код обёрнут в слой layout, и для layout описаны CCS-правила.

Назовём основную колонку #content , а боковую колонку #sidebar . HTML:

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

Макет в этом примере представляет собой левую колонку 70% ширины и сайдбар справа 27% ширины. Между ними расстояние в 3% достаточно, чтобы визуально не «слипались». Кстати, если думаете, что указаны проценты ширины окна — это не совсем так. На самом деле, это проценты ширины родительского слоя. Как уже писал, на практике всё содержимое обёрнуто в слой layout. Т.о. если задам для layout ширину 1000px, то content будет размером 700px, а sidebar — 270px.

Как вы уже догадались, магия смещения сайдбара под контент на телефонах заложена в конструкции @media . При ширине окна меньше 768px контент и сайдбар прекращают располагаться слева и справа и занимают 95% ширины с расположением по центру (за это отвечает правило margin: 0 auto ).

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

Урок 8. Теория и практика адаптивной верстки. Адаптация двух колоночного макета

Как Вы знаете, 22 октября в 9.00 по Москве мы запускаем новый курс «Python. Полное руководство». Первых 36 часов данный курс мы будем отдавать с 40% дисконтом в честь релиза – для раннего списка.

Кликните сюда, чтобы ознакомиться с курсом и записаться в ранний список

Кому подойдет курс?

Новички в программировании.

Если вы хотите освоить профессию программиста, тогда Python – ваш выбор.

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

Python – язык программирования с достаточно низким порогом вхождения и простым синтаксисом.

Кликните сюда, чтобы записаться в ранний список

Желающие освоить востребованный язык программирования.

Курс будет представлять интерес и для программистов, знакомых с другими языками программирования, что будет безусловным плюсом при изучении Python и сделает куда проще усвоение нового материала.

Python входит в топ-5 самых популярных и является одним из наиболее высокооплачиваемых языков программирования.

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

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

Как Вы знаете, 22 октября в 9.00 по Москве мы запускаем новый курс «Python. Полное руководство». Первых 36 часов данный курс мы будем отдавать с 40% дисконтом в честь релиза – для раннего списка.

Кликните сюда, чтобы записаться в ранний список

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

Просто после оплаты, напишите нам в поддержку и сообщите, какой курс в подарок Вы хотите.

Таким образом, в релиз ранний список сможет с дисконтом 40% забрать курс по Python и любой курс из нашей линейки в подарок.

Кликните сюда, чтобы записаться в ранний список для участия в акции

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

Как итог, курс «Python. Полное руководство» — это не только всеобъемлющая теория, но и добротная практика.

Готовы присоединиться к рядам профессиональных высокооплачиваемых разработчиков?

Уверены, что да. Тем более, что мы объявили стоимость на нашу новинку – курс «Python. Полное руководство».

Кликните сюда и узнайте подробнее о цене

Стоимость курса «Python. Полное руководство» с учетом 40% дисконта для раннего списка (в релиз первых 36 часов) составит 4782 руб.

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

На сегодняшний день на сайте hh.ru есть более 2700 вакансий для Питон-разработчиков, что почти в 2 раза больше, чем по тому же PHP.

Кликните сюда и запишитесь в ранний список для получения дисконта

Зарплаты Python-разработчиков в среднем составляют 120 000 рублей. Нередки вакансии с зарплатами от 150 000 до 250 000 рублей и даже от 300 000 и более.

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

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

Урок 8. Теория и практика адаптивной верстки. Адаптация двух колоночного макета

Коллеги, возник вопрос по вёрстке. Во вложении условный макет (реальный прототип).

Макет статичный, не-резина, под 1024, адаптируется под 768 и 320. Сейчас на больших разрешениях по бокам просто добавляются свободные поля, но в планах есть внедрение версии под 1360 пикселей.

Цветом разукрасил одинаковые блоки на разных разрешениях.

Вопрос в следующем: сейчас вёрстка реализована последовательно:

Блочная верстка — Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Тут мы начали рассматривать поэтапное создание двухколоночного макета на основе блоков. Мне кажется, что начинать изучать верстку сайта, которая основывается на использовании каскадных стилей (CSS), лучше всего именно на конкретном примере, а не со скучного рассмотрения теории.

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

Верстание двухколоночного макета для сайта

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

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

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

Итак, мы прописали в нашем еще пустом файле Index.html базовые элементы (body, мета теги и т.п.), а так же код всех нужных нам блоков, которые будут формировать макет сайта.

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

Мы так же учли возможность использования старых версий браузеров, например, в Internet Explorer 5. Затем мы раскрасили для наглядности в разные цвета все v блоки, из которых состоит наш двухколоночный макет, а так же ограничили ширину левой колонки (в ней обычно располагается меню).

Ну, и в конце предыдущей статьи мы задали в файле CSS обтекание блока левой колонки другими контейнерами, расположенными ниже в HTML коде файла Index.html (в нашем случае это «Содержимое страниц (контент)» и «Подвал (футер)»).

После всех этих действий мы получили:

При этом файл Index.html содержал:

А в файл Style.css было прописано:

Давайте сравним полученный результат с тем, что должно было получиться:

Некоторые доработки

Вроде бы макеты похожи, но есть одна неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину. Это одна проблема.

Но кроме этого существует и другая проблема. Если мы добавим текста в Div Content (содержимое статьи):

То может возникнуть такая ситуация с макетом:

Т.е. содержимое контейнера Content занимает все свободное место под закончившимся Left. Это происходит из-за того, что включено обтекание Div Left всеми другими блоками, расположенными ниже его в HTML коде, но после того, как Left заканчивается, все последующие контейнеры начинают уже прижиматься к левому краю.

Нас такая ситуация с Content не устраивает, поэтому во избежании этого мы зададим для этого контейнера фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).

Таким образом мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих контейнеров. Для этого нам нужно будет дописать для Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left — тут про отступы и рамки в CSS читайте подробнее):

Т.к. ширину левой колонки (Left) мы ранее задали в 200px, то и отступ слева для Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние.

Весь код файла Style.css теперь будет выглядеть так:

А наш макет на Div верстке примет вид:

Теперь давайте смоделируем ситуацию с существенным увеличением высоты блока Left (левой колонки):

Из рисунка видно, что при увеличении высоты левой колонки, подвал (Footer) начинает ее обтекать, т.к. в Style.css для блока Left задано обтекание с помощью свойства float:left.

В следствии этого все Div контейнеры, расположенные в HTML коде ниже Left, начинают его обтекать и наш Footer не является исключением. А это нас совсем не устраивает, ибо он должен всегда располагаться ниже всех других блоков нашего двухколоночного макета. Надо это исправить.

Для этого мы отменим обтекание блоком Footer контейнера Left. Как это сделать? Нужно дописать специальное свойство для Footer в Style.css: clear:both (здесь читайте про обтекание в CSS).

Это свойство позволит расположить Footer ниже всех плавающих блоков, т.е. тех, которым задано свойство Float (обтекание справа или слева). Тем самым мы опустим подвал в самый низ нашего макета.

Style.css теперь будет выглядеть так:

А сам двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:

Если нужно будет расположить Left (колонку с меню) не с левой стороны макета, а с правой, то сделать это можно, внеся лишь несколько изменений в Style.css. Для Left там нужно заменить свойство float:left; на float:right; , а для блока Content — убрать отступ слева на ширину контейнера Left и добавить точно такой же отступ справа.

Т.е. для Content нужно CSS свойство margin-left:202px; заменить на margin-right:202px; . В результате Style.css примет вид:

А наш макет с колонкой меню, расположенной справа, будет выглядеть так:

Создаем трехколоночный макет на основе 2-х колоночного

Вернем все к виду, когда блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно лишь добавить один дополнительный Div-контейнер в файл Index.html после кода, описывающего Left.

Назовем его незамысловато — Right. C учетом этого нового Div, код примет вид:

В содержимое контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с Left и Content размер по высоте. Теперь нужно написать отдельное правило в файле каскадных таблиц стилей Style.css для четкого позиционирования Right, относительно других контейнеров нашего трехколоночного макета сайта:

Свойством width:200px (тут читайте про задание ширины и высоты в CSS) мы задает ширину блока Right равной 200 пикселей, а свойством background-color:#FFFF00 (читайте про задание фона в CSS, а тут про коды цвета в Html ) подцвечиваем фон контейнера Right для большей наглядности.

Ну, а свойство float:right позволяет прижать Right к правой стороне и при этом все следующие за ним в коде Div будут обтекать его слева (обтекать его будет только Content, т.к. Footer у нас настроен так, что он лежит ниже всех плавающий блоков).

Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с Right, мы зададим в CSS для Content не только отступ слева на ширину Left, но и отступ справа на ширину Right:

Окончательный вариант нашего Style.css для трехколоночного макета будет такой:

А сам макет сайта, сверстанный на Div, будет выглядеть так:

Преобразуем фиксированный макет в резиновый

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

Если разрешение экрана у него будет по ширине 800 пикселей, то и макет резинового сайта будет равен по ширине 800 пикселей, а если разрешение будет 1920 пикселей, то и шаблон растянется на всю ширину такого экрана.

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

Нужно лишь для Div контейнера, в котором заключен весь макет (в нашем случае это MAKET), задать в файле каскадных таблиц стилей не фиксированный размер с помощью свойства width:800px; , а относительный размер по ширине, с помощью свойства width:100%; :

Резиновый вариант будет выглядеть примерно так:

Решение проблем для старых браузеров

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

Но эту неприятность тоже довольно легко можно нейтрализовать. Достаточно лишь задать для контейнера, в котором находится резиновый макет (в нашем случае это Maket), с помощью специального CSS свойства минимально возможную ширину, до которой можно уменьшать его размер.

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

Это свойство выглядит так:

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

Теперь ваш задача сводиться к тому, чтобы при ширине в 600 пикселей ваш сайт не перекосило, ну а при больших разрешениях этого уж точно не произойдет. Но опять же имеется одно «но», и опять это «но» связано с всеми нами любимым браузером Internet Explorer 6.

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

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

Я приведу здесь один из самых стабильных хаков, который не вызывает подвисания браузеров и прочих неприятностей. Он заключается в том, что CSS свойство width:100% для блока Maket мы заменим специальным кодом:

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

Читайте окончание эпопеи в следующей статье. Можете также посмотреть видео «Верстка резинового сайта на div-ах»:

Видеокурс «Технология CSS Gr >

Автор: Денис Булыга — Webformyself

В видеокурсе находится вся необходимая информация, как для новичков, так и более продвинутых разработчиков, изучив которую, можно начать самостоятельно заниматься версткой сайтов c нуля на достаточно продвинутом уровне. Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты. В этом пособии на практике используются самые актуальные в 2020 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

Смотреть видео:

Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга — Webformyself)

• Блок №1. Верстка макета Landing Page

В первой части курса вы познакомитесь с макетом Landing Page. Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов. Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки. Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах. В итоге Вы увидите полноценную верстку Landing Page.

• Урок 1. Обзор PSD-макета и готовой верстки Landing Page

В этом уроке будет показана готовая верстка страницы Landing Page и разобраны все блоки и элементы из которых состоит данная страница.

• Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2020

В данном уроке будет рассмотрено два способа экспорта изображений из графического редактора Photoshop CC 2020, а также создание иконок при помощи копирования SVG.

• Урок 3. Установка Node Js, Gulp CLI и инициализация проекта

В текущем уроке Вы узнаете, как установить утилиты Node.js и Gulp CLI глобально на ваш компьютер. Вкратце рассмотрена структура файлов и папок, инициализация проекта, и установка всех необходимых модулей для дальнейшей работы.

• Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4

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

• Урок 5. Создание дополнительных задач по автоматизации

В данном видео сборка будет дополнена следующими задачами: минификация изображений, создание SVG-спрайтов, генерация изображений формата Web, установка слежения за изменением различных файлов и запуск сервера и автоматическая перезагрузка при помощи Browsersync.

• Урок 6. Подготовка к верстке и детальный обзор проекта

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

• Урок 7. Создание HTML-разметки для шапки сайта

В данном видеоуроке увидите написание HTML-разметки шапки сайта, логотипа и блока меню.

• Урок 8. Полная стилизация шапки сайта

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

• Урок 9. Создание разметки для блока баннера

В этом видео начнется работа над блоком баннера и создание для него всей необходимой структуру.

• Урок 10. Стилизация баннера и написание собственного миксина

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

• Урок 11. HTML-структура блока с преимуществами

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

• Урок 12. Полная стилизация преимуществ

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

• Урок 13. HTML-разметка блока с работами

В этом видеоуроке Вы узнаете о реализации блока Works.

• Урок 14. Написание стилей для блока работ

В этом уроке создается необходимая сетка для блока при помощи CSS Grid и верстка элементов согласно макету.

• Урок 15. Доступность интерактивных элементов и адаптация блока работ

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

• Урок 16. Написание структуры для информационного блока

В данном видео увидите написание HTML-разметки для блока Responsive.

• Урок 17. Полная стилизация информационного блока

В этом видео увидите стилизацию и адаптацию при помощи медиа запросов блок Responsive.

• Урок 18. Создание разметки для блока скиллов

В этом уроке увидите написание HTML-структуры блока со скиллами.

• Урок 19. Стилизация блока со скиллами

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

• Урок 20. Анимация линий блока прогресса

В этом видеоуроке создается JavaScript-функция, при помощи которой будет реализована плавная анимация линий прогресса элементов при прокрутке страницы.

• Урок 21. HTML-структура блока новостей

В данном видео создается HTML-разметка для блока новостей.

• Урок 22. Полная стилизация блока с новостями

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

• Урок 23. HTML-разметка блока карусели

В этом уроке увидите создание HTML-структуры для блока с каруселью.

• Урок 24. Стилизация карусели и подключение плагина OwlCarousel

В данном видеоуроке увидите стилизацию блока карусели, установку и подключение плагина OwlCarousel, а при помощи медиа запросов и настроек карусели адаптацию ее под различные разрешения.

• Урок 25. HTML-разметка блока контактов

В этом видеоуроке увидите создание структуры блока контактов и подключения Яндекс карты при помощи конструктора карт Яндекса.

• Урок 26. Полная стилизация блока контактов

В этом уроке увидите стилизацию и адаптацию под различные разрешения блок контактов.

• Урок 27. Полная реализация подвала

В этом уроке завершается верстка страницы Landing Page.

• Блок №2. Верстка главной страницы сайта студии

Во второй части курса показана верстка главной страницы сайта студии. Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов. Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке. Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков. В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.

• Урок 1. Обзор макета

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

• Урок2.ЭкспортSVGизAdobe Illustrator

В этом видео увидите еще один способ сохранения векторных изображений при помощи графического редактора Adobe Illustrator.

• Урок 3. Подготовка к верстке

В данном видеоуроке Вы познакомитесь со структурой проекта.

• Урок 4. HTML-разметка шапки сайта

В этом видеоуроке увидите написание HTML-структуры шапки сайта.

• Урок 5. Стилизация шапки сайта

В этом видеоуроке увидите, как создается Grid-сетка для шапки сайта, а также ее стилизация.

• Урок 6. Адаптив шапки сайта

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

• Урок 7. Улучшение типографики

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

• Урок 8. Создание разметки для блока меню

В этом видеоуроке увидите создание HTML-разметки для блока меню.

• Урок 9. Стилизация блока меню

В данном уроке увидите написание CSS-стилей для блока меню и кнопки гамбургера.

• Урок 10. Доработка меню

В этом уроке увидите завершение реализации блока меню с добавлением JavaScript-кода.

• Урок 11. HTML-разметка блока проектов

В этом видеоуроке увидите создание HTML-разметки для блока проектов.

• Урок 12. Стилизация блока проектов. Часть 1

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

• Урок 13. Стилизация блока проектов. Часть 2

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

• Урок 14. Стилизация блока проектов. Часть 3

В этом видео размещается информация внутри элементов на свои места согласно дизайн макета.

• Урок 15. Адаптация блока проектов

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

• Урок 16. HTML-разметка блока студио

В данном видео добавляется разметка для блока студио.

• Урок 17. Стилизация блока студио. Часть 1

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

• Урок 18. Стилизация блока студио. Часть 2

В этом видео увидите написание CSS-стилей для блока с работниками.

• Урок 19. Адаптация блока студио

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

• Урок 20. HTML-разметка блока с новостями

В данном видео увидите начало работы над блоком новостей и создание необходимой HTML-разметки данного блока.

• Урок 21. Стилизация блока новостей

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

• Урок 22. Адаптация блока новостей

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

• Урок 23. Разметка подвала

В данном видеоуроке увидите написание HTML-структуры подвала страницы сайта.

• Урок 24. Полная стилизация подвала сайта

В этом видео увидите полную стилизацию и адаптацию подвала сайта под различные разрешения.

• Урок 25. Подключение Google maps

В данном видео познакомитесь с API Google Maps, при помощи которого будет подключена и настроена Google-карта для страницы сайта.

БОНУСЫ

• Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Андрей Бернацкий

Учебник призван заложить фундамент и дать базовые основы языка гипертекстовой разметки текста HTML всем новичкам, включая наиболее востребованные в верстке теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями. Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике. В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

• Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Андрей Бернацкий

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

• Бонус 3. Премиум-курс «Верстка сайта для начинающих»

Автор: Андрей Бернацкий

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

• Бонус 4. Премиум-курс «HTML5. Основы»

Автор: Андрей Бернацкий

В данном премиум-курсе рассматриваются основы HTML5, наиболее востребованные и актуальные в процессе верстки. HTML5 — это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, о чем детально рассказано в самом курсе. HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками. В уроках курса продемонстрированы важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

• Бонус 5. Премиум-курс «CSS3. Основы»

Автор: Денис Булыга

В данном премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки. Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов. Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Данный видеокурс от команды Webformyself поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

• Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»

Автор: Денис Булыга

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

Бонус 7. Премиум-курс «CSS Gr >Автор: Денис Булыга

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

• Бонус 8. Премиум-курс «Flexbox»

Автор: Денис Булыга

В новом премиальном видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block. Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию с нуля. На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля. В каждом уроке разбирается не только теория, но и приводятся примеры, касающиеся изучаемых CSS-свойств Flexbox. В практической части курса показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.

• Бонус 9. Премиум-курс «Препроцессор Sass»

Автор: Денис Булыга

CSS-препроцессор Sass — это профессиональный инструмент, который должен освоить каждый web-разработчик. Написание кода с его использованием становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора. Первое и, наверное, самое главное преимущество препроцессоров в том, что ваша разработка ускоряется в несколько раз, при этом множество однотипных операций можно выполнить всего лишь одной строкой кода. Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.

• Бонус 10. Мини-курс «Построение сеток при помощи Masonry»

Автор: Денис Булыга

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