Контакты

Адаптивная вёрстка на HTML5 и CSS3 (На примере создания Landing page) (2016) Видеокурс


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

0. Вводное видео
О курсе и как его использовать

1. HTML5. Семантическая разметка
О новых тегах: header, nav, section, aside, article и т.д.

2. HTML5. Медиа объекты
Вставка видео и аудио без дополнительных плееров + атрибуты.

3. HTML5. Формы
Работа с формами в HTML5 + новые типы полей.

4. HTML5. Другие возможности
Примеры реализации других возможностей на HTML5

5. CSS3. Новые свойства в CSS3
Линейные градиенты, раудисы, прозрачность, тени, трансформация, анимация.

Практическая часть

1. Макет и PSD исходник
Знакомство с PSD исходником и набросок будущего макета

2. Вёрстка шапки
Расчёт адпаптивных размеров и вёрстка шапки + формула расчёта EM и %

3. Вёрстка блока "Услуги"
Планирование этапа, подготовка изображений и вёрстка блока.

4. Вёрстка блока "Портфолио"
Планирование, двойные классы и вёрстка.

5. Блок "Портфолио": hover эффекты
Создание hover эффекта при наведении на элементы на CSS3.

6. Вёрстка блока "О нас"
Вёрстка хитрого блока с позиционированием и псевдо-классами.

7. Вёрстка блока "Наша команда"
Подготовка и вёрстка блока + создание CSS спрайтов

8. Вёрстка блока "Партнёры"
Вёрстка блока и вставка карусели изображений на JQuery

9. Вставка карты Яндекса
Вставка интерактивной карты Яндекса во всю ширину.

10. Вёрстка формы обратной связи
Планирование этапа, создание формы с новыми типами полей.

11. Блок с копирайтами
Вёрстка блока копирайтов, расширение CSS спрайта, вставка даты на PHP

12. Улучшение и доработка
Добавление функции плавной прокрутки к блокам и кнопки "Наверх" (3 варианта)

13. Улучшение и доработка ч.2
Валидация полей в форме обратной связи (через JS) + защита от СПАМ ботов

14. Адаптация под мобильные устройства
Адаптация под экраны планшетов и мобильников + работа с FireBug

15. Адаптация под мобильные устройства ч.2
Вторая часть видео по адаптации.

16. PHP обработчик формы
Создание скрипта-обработчика на PHP, для формы обратной связи.

17. Умная форма обратной связи
Подключение скрипта для формы обратной связи с передачей UTM меток и записью в CSV файл.

18. Перенос на хостинг и валидация
Перенос лендинга на хостинг по FTP, проверка, ускорение и установка цели в Яндекс.Метрике.

Информация о видео
Название: Адаптивная вёрстка на HTML5 и CSS3
Автор : Олег Касьянов
Год выхода: 2016
Жанр: Видеокурс
Язык: Русский

Файл
Формат: MP4 (+ доп.материалы)
Видео: AVC, 1280x720, ~392 Kbps
Аудио: AAC, 126 Kbps, 48.0 KHz
Продолжительность: ~5 часов
Размер файла: 2.27 Gb

Современные сайты и веб-разработку уже невозможно представить без HTML5 и CSS3, как ни крути.

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

Если вы будете уметь верстать на HTML5 и CSS3 и адаптировать проект под мобильные устройства, то можно смело поднимать стоимость часа своей работы.

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

одержание:

Вводная часть

0. Вводное видео
О курсе и как его использовать

1. HTML5. Семантическая разметка
О новых тегах: header, nav, section, aside, article и т.д.

2. HTML5. Медиа объекты
Вставка видео и аудио без дополнительных плееров + атрибуты.

3. HTML5. Формы
Работа с формами в HTML5 + новые типы полей.

4. HTML5. Другие возможности
Примеры реализации других возможностей на HTML5

5. CSS3. Новые свойства в CSS3
Линейные градиенты, раудисы, прозрачность, тени, трансформация, анимация.

Практическая часть

1. Макет и PSD исходник
Знакомство с PSD исходником и набросок будущего макета

2. Вёрстка шапки
Расчёт адпаптивных размеров и вёрстка шапки + формула расчёта EM и %

3. Вёрстка блока "Услуги"
Планирование этапа, подготовка изображений и вёрстка блока.

4. Вёрстка блока "Портфолио"
Планирование, двойные классы и вёрстка.

5. Блок "Портфолио": hover эффекты
Создание hover эффекта при наведении на элементы на CSS3.

6. Вёрстка блока "О нас"
Вёрстка хитрого блока с позиционированием и псевдо-классами.

7. Вёрстка блока "Наша команда"
Подготовка и вёрстка блока + создание CSS спрайтов

8. Вёрстка блока "Партнёры"
Вёрстка блока и вставка карусели изображений на JQuery

9. Вставка карты Яндекса
Вставка интерактивной карты Яндекса во всю ширину.

10. Вёрстка формы обратной связи
Планирование этапа, создание формы с новыми типами полей.

11. Блок с копирайтами
Вёрстка блока копирайтов, расширение CSS спрайта, вставка даты на PHP

12. Улучшение и доработка
Добавление функции плавной прокрутки к блокам и кнопки "Наверх" (3 варианта)

13. Улучшение и доработка ч.2
Валидация полей в форме обратной связи (через JS) + защита от СПАМ ботов

14. Адаптация под мобильные устройства
Адаптация под экраны планшетов и мобильников + работа с FireBug

15. Адаптация под мобильные устройства ч.2
Вторая часть видео по адаптации.

16. PHP обработчик формы
Создание скрипта-обработчика на PHP, для формы обратной связи.

17. Умная форма обратной связи
Подключение скрипта для формы обратной связи с передачей UTM меток и записью в CSV файл.

18. Перенос на хостинг и валидация
Перенос лендинга на хостинг по FTP, проверка, ускорение и установка цели в Яндекс.Метрике.

Информация о видео
Название: Адаптивная вёрстка на HTML5 и CSS3 (На примере создания Landing page)
Олег Касьянов
Год выхода: 2016
Жанр: Видеокурс
Язык: Русский
Выпущено: Россия
Продолжительность: ~5 часов

Файл
Формат: MP4 (+ доп.материалы)
Видео: AVC, 1280x720, ~392 Kbps
Аудио: AAC, 126 Kbps, 48.0 KHz
Размер файла: 2.27 Gb

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

Capture – бесплатный Bootstrap HTML-шаблон

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

Демо-версия | Скачать


La Casa – HTML-шаблон для сайта недвижимости

Готовый сайт недвижимости на HTML5 с шаблоном домашней страницы может быть полезен для создания простого индивидуального дизайна.

Демо-версия | Скачать


Modex – Bootstrap тема для портфолио

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

Демо-версия | Скачать


Drifolio – HTML-шаблон для портфолио

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

Демо-версия | Скачать


Pluton – одностраничный Bootstrap шаблон

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

Демо-версия | Скачать


SquadFree – бесплатный Bootstrap HTML-шаблон

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

Демо-версия | Скачать


Sublime – потрясающий HTML5/CSS3 шаблон

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

Демо-версия | Скачать


Timber – бесплатный одностраничный Bootstrap шаблон

Подойдет для создания бизнес-сайта с портфолио, галереей, картой и страницей с контактами.

Демо-версия | Скачать

E-Shopper – лучший бесплатный HTML-шаблон для электронной коммерции

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

Демо-версия

AdminLTE – шаблон личного кабинета и панели управления

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

Демо-версия | Скачать


Magnetic – бесплатный шаблон для сайта фотографа

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

Демо-версия | Скачать


Modern – Bootstrap HTML-шаблон

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

Демо-версия


Crafty – корпоративный HTML-шаблон

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

Демо-версия | Скачать


Twenty – HTML5-шаблон с параллакс-эффектом

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

Демо-версия | Скачать

Urbanic – Bootstrap шаблон

Bootstrap шаблон на HTML5 и СSS3 с такими страницами, как «контакты», «блог». Этот мобильный, готовый к использованию на планшетах шаблон.

Демо-версия | Скачать


Design Showcase – HTML-шаблон для портфолио

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

Демо-версия

Бесплатный HTML-шаблон сайта фотографа

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

Демо-версия


Brushed – отзывчивый одностраничный шаблон

Brushed - это бесплатный одностраничный HTML-шаблон , основанный на платформе Twitter Bootstrap . Он оптимизирован для дисплеев Retina (iPhone, iPad, iPod Touch и MacBook Pro Retina ).

Демо-версия | Скачать

Big Picture – шаблон на основе HTML5

Это отзывчивый шаблон сайта, выпущенный для свободного использования на основе лицензии Creative Commons Attribution 3.0 .

Скачать


Tesselatte – бесплатный адаптивный шаблон сайта

Простой, но полностью адаптивный шаблон интернет магазина HTML .

Скачать


OVERFLOW

Шаблон на HTML5 , CSS3 для креативного сайта.

Скачать


Runkeeper – адаптивный шаблон сайта для мобильных приложений

Бесплатный адаптивный шаблон, ориентированный на продукт.

Демо-версия | Скачать

Pinball – отзывчивый плоский шаблон для ведения блога

Webworld v2 – профессиональный корпоративный плоский шаблон с отзывчивым веб-дизайном.

Демо-версия | Скачать


Бесплатный шаблон Produkta: четыре HTML-шаблона в одном

Еще один отзывчивый HTML-шаблон , построенный на платформе Twitter Bootstrap . Он идеально подходит для запуска нового продукта или услуги.

Демо-версия | Скачать


Website – HTML5, CSS3, jQuery

Шаблон на HTML5 , CSS3 с несколькими полезными плагинами jQuery и на Skeleton .

Демо-версия | Скачать

Prologue | HTML5

Одностраничный отзывчивый шаблон простого интернет магазина HTML . Он отличается простым минималистичным дизайном и прилипающей боковой панелью навигации.

Скачать


HELIOS

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

Скачать


Telephasic | HTML5-шаблон

Бесплатный отзывчивый шаблон сайта с ярким современным дизайном.

Appz – одностраничный отзывчивый шаблон сайта

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

Демо-версия | Скачать

Это все на сегодня. Хорошего дня!

Перевод статьи “FREE RESPONSIVE HTML5 CSS3 WEBSITE TEMPLATES ” был подготовлен дружной командой проекта .

Когда начали появляться первые смартфоны и планшеты, многие веб-мастера начали разрабатывать под эти устройства отдельные сайты. Чуть позже начали появляться методы по внедрению на сайте адаптивного дизайна. И тогда большинство веб-мастеров подхватило эту идею, тем самым реализуя принцип DRY (Do not repeat yourself – не повторяй себя), которая заключается в том, что информация любого вида не должна дублироваться.

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

Итак, давайте рассмотрим, за счет чего на сайте создается адаптивность.

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

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

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

Пример соответствующего медиа-запроса:

/* Основной стиль от маленьких устройств и до самых больших */ .text { font-size: 22px; } /* Стиль для устройств с шириной от 768px и выше */ @media only screen and (min-width: 768px) { .text { font-size: 35px; } }

Популярные фреймворки, такие как Bootstrap и Foundation, широко используют медиа-запросы для создания своих мощных систем сеток (grid ).

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

Сетки и контрольные точки

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

Сетки состоят из строк (row ), которые разделены на столбцы. Столбцы не являются физическими колонками, а представляют собой абстрактную единицу измерения для ширины элемента. Строки, как правило, разделены на 12 столбцов, поскольку 12 легко разделить поровну на целые части. Классы столбцов коррелируют со статическими значениями в процентах, как, например, .col-xs-5 { width: 41.66666667%; } .

Синтаксис может отличаться в отдельных фреймворках, но общая концепция такая же. Каждый размер устройства имеет соответствующие медиа-запросы и свойства стилей, которые строят нужный макет страницы. Эти медиа-запросы называются контрольными точками (breakpoints ). В Bootstrap контрольные точки таковы: xs (маленькие устройства), sm (небольшие), md (средние), lg (большие). Эти контрольные точки позволяют вызвать стили CSS в соответствии с разными размерами устройств.

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

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


Например, для больших устройств (шириной от 1200px), по соответствующему медиа-запросу, вступают в действие стили для класса.col-lg- .

Пример кода:

@media (min-width: 768px) { .col-sm-12 { width: 100% }; } @media (min-width: 992px) { .col-md-6 { width: 50% }; } @media (min-width: 1200px) { .col-lg-8 { width: 68.66666666666666%; } }

Некоторые сетки выступают в роли контейнера. Элемент контейнера (container ) является внешним элементом макета. Его задача состоит в том, чтобы создать пустое пространство между макетом и краем окна браузера. Для этого блока заданные отступы (padding ) справа и слева. А также, в медиа-запросах прописаны максимальная ширина, в соответствии с размером устройства. Строка сеток (row ) – это дочерний элемент относительно контейнера. Для строки заданы отступы (margin ) справа и слева с отрицательным значением. А блоки col-lg- , соответственно, — это дочерние элементы относительно строки. На странице может быть неограниченное количество контейнеров.

Пример кода с использованием метода контейнера в Bootstrap.

RWD (responsive web design ) фреймворки, такие как Bootstrap или Foundation – это прекрасная отправная точка при разработке адаптивного макета, и они включают в себя основные компоненты пользовательского интерфейса и основные функции для создания прототипов.

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

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

Последнее обновление: 03.05.2016

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

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

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

Простейшая страница на языке WML.

Визуально она выглядела так:

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

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

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

Хотя нередко до сих пор можно встретить ситуацию, когда для сайта создается отдельная мобильная версия, часто с префиксом m , например, m.vk.com . Однако концепция адаптивного становится все более распространенной и доминирующей.

Тестирование адаптивного дизайна

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

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

В данном случае отображается веб-страница как она бы выглядела на устройстве Samsung Galaxy S III. Но при желании можно выбрать другое устройство, либо даже создать эмуляцию какого-то нового устройства, которого нет во встроенном списке.

Подобные инструменты есть и в других современных веб-браузерах. Например, в Mozilla Firefox для их открытия надо перейти в меню Разработка -> Адаптивный дизайн

Еще одно решение заключается в использовании эмуляторы мобильных устройств. Небольшой список подобных эмуляторов можно найти по следующему адресу: http://www.mobilexweb.com/emulators .

Наиболее популярным является эмулятор браузера Opera Mobile, который можно найти по адресу

Понравилась статья? Поделитесь ей