Меню
Бесплатно
Регистрация
Главная  /  Советы  /  Адаптивная вёрстка наHTML5 и CSS3. Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов! Адаптивная верстка на html5 и css3

Адаптивная вёрстка наHTML5 и CSS3. Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов! Адаптивная верстка на html5 и css3

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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

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

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

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

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

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

Связанные посты.

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

Элемент Article

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

XHTML

2010 16apr Sample Post 1 38

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name Tags: coolmodernhype-friendly Continue Reading

2010

16 apr

Sample Post 1

38

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name

Tags: cool modern hype-friendly

Continue Reading

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

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

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

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

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

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

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

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

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

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Без HTML5 и CSS3 далеко не уйти

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

Знаете ли вы что...

Сейчас в поисковой выдаче (в ТОП 10) Яндекса 55% - это сайты с адаптивным дизайном, которые могут подстраиваться под мобильные устройства. Это говорит о том, что Яндекс (и Гугл тоже) отдаёт большее предпочтение сайтам с адаптивным дизайном. Т.е. тем, на которых пользователю удобно.
А HTML5 и CSS3 добавляют для сайта дополнительные возможности, при помощи которых мы можем сделать сайт ещё удобнее.
Как для пользователей, так и для роботов.
Лендинг пейдж (Landing page, посадочная страница) служит для конвертации посетителей в подписчиков или клиентов.
Также иногда используется для сегментации трафика.
Лендинг пейдж может быть как одной отдельной страницей на домене, так и в составе полноценного веб-сайта.
В этом случае сайт продвигается в поиске, а лендинг используется для рекламы в Яндекс.Директ, Google Adwods, Таргета Вконтакте и т.д.
Такая связка позволяет по максимуму использовать множество инструментов интернет маркетинга.
Сейчас есть возможность быстро научиться и применять всё это в своей деятельности.

HTML5 + CSS3 + адаптивность + Landing Page
При помощи этого курса вы сможете:

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

Краткое содержание курса

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

Новые функции в HTML5 и CSS 3, что упрощают и облегчают процесс вёрстки.
Семантическая разметка - её секреты и для чего она нужна.
Вставка медиа объектов - как вставлять аудио и видео без плеера.

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

Поэтапное создание лендинг пейдж.
От планирования макета, вёрстки каждого блока разной сложности, до подключения скриптов и php обработчиков для форм
Карусель/слайдер, плавная прокрутка, кнопки, CSS спрайты, валидация форм и т.д.

Доп. материалы

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

Что вы сможете после прохождения этого курса?

При подготовке

Разбираться в PSD макете при помощи PhotoShop
Вырезать нужные изображения из PSD макета
Находить красивые дизайны лендинг пейдж и сайтов
Проектировать блоки и этапы вёрстки
Объединять иконки в CSS спрайты
Работать с программой PhpDesigner

В плане вёрстки

Подключать красивые шрифты из хранилища Google
Эффективно использовать псевдоклассы
Адаптировать сайт под все мобильные устройства
Использовать 2 и более фона для блока, анимацию, трансформацию, RGBA и т.д.
Работать с @media запросами
Вставлять интерактивные карты Яндекса
Создавать CSS спрайты и ускорять загрузку страницы
Использовать заранее продуманные стили (по аналогии с фреймворками, типа Bootstrap)

В плане улучшения

Создавать hover эффекты ("оживление" при наведении)
Делать плавную прокрутку к блокам и для кнопки "Наверх"
Проводить валидацию форм обратной связи через JQuery
Создавать умные формы обратной связи с передачей UTM меток
Подключать и настраивать цели в Я.Метрике используя события
Облегчать страницы, делая их загрузку быстрее
Проверять и устранять недостатки на страницах

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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

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

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

Вёрстка главной страницы

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

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


Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

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

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип