Компоненты HTML5 и CSS3

Материалы к модулю Вы можете скачать здесь.

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark и Silverlight являются зарегистрированными товарными знаками или товарными знаками Microsoft Corporation в США и / или других странах. Другие названия продуктов и компаний, упомянутые здесь, также могут быть торговыми марками их соответствующих владельцев.

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

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

Создан для Microsoft компанией Avlade:

Copyright 2012 Microsoft Corporation.

Цель модуля

В этом модуле вы узнаете, как используются основные принципы HTML5 и CSS3 в WinRT-приложениях, в частности, в моделях компоновки (layout models), медиа-запросах (media queries), стилях и анимации. Вы увидите, как управлять компоновкой элементов на странице, используя области, раскладку с использованием сетки, гибкую блочную верстку, верстку в несколько колонок, обтекание текстом и медиа-запросы. Кроме того, мы поговорим о 2D и 3D-трансформациях, переходах, анимациях, градиентах, тенях, об использовании элементов со скругленными углами, встраиваемых SVG-изображениях и рабочей области приложения (полотне).

Введение

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

Приложения для Магазина Windows позаимствовали понятие страницы из спецификаций HTML5 и CSS3

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

Перед тем, как углубляться в разработку WinRT-приложений, вы потратите немного времени "в мире интернета". При разработке этих приложений используются те же самые принципы (а иногда и код), что и при разработке самых современных веб-страниц; вам не нужно непременно знать HTML и CSS для того, чтобы заниматься разработкой приложений для Магазина Windows , но эти умения облегчат вам задачу.

То, что обычно называют HTML5, на самом деле является комбинацией HTML5, CSS3 и JavaScript

HTML5 – это комбинация новых тегов HTML, параметров CSS3, JavaScript и нескольких связанных с HTML5 технологий, фактически не привязанных к спецификации HTML5. Именно поэтому мы разделяем понятие "семейство" HTML5 и "ядро" HTML5.

"Ядро" HTML5 можно определить как спецификацию, определяющую новые элементы разметки или синтаксис, и теги, используемые дизайнерами при создании веб-страниц – в совокупности с уже используемыми тегами. Многие из этих новых элементов знакомы дизайнерам, работавшим со стандартными тегами HTML, например, <p>, <ul> и <div>. Эти новые теги предоставляют дизайнерам и разработчикам улучшенные инструменты разработки и создают улучшенные возможности для пользователей. Это упрощает ситуацию и относится к "ядру" HTML, о чем вы скоро узнаете.

"Семейство" HTML5 включает в себя новые теги и такие технологии или спецификации, как CSS3, Geolocation, Web Storage, Web Workers, и Web Sockets, многие из которых очень зависят от JavaScript. Эти технологии позволяют создать более мощный набор технических средств и, как результат, — более функциональные и современные веб-страницы. Поддержка этих функций зависит только от браузера. Одной из причин, почему стоит использовать эти технологии, состоит в том, что Internet Explorer 10 и фреймворк приложений для Windows 8 – это, во многом, одно и то же. Но это не значит, что приложения для Магазина Windows можно запустить в браузере. Просто в основе этих приложений и приложений и Internet Explorer 10 лежат практически одинаковые технологии.

Спецификации HTML5 доступны по ссылке:

http://developers.whatwg.org/

HTML5 и WinRT-приложения

WinRT-приложения построены с использованием синтаксиса (разметки) HTML и JavaScript, определенных в спецификациях HTML5. Разметка HTML5 вводит несколько новых элементов, разработанных для того, чтобы сделать структуру документа более логичной и функциональной. В предыдущей версии HTML (HTML 4.0.1) страница зависела от тега <div>, который часто был связан с CSS-классом или ID.

Пример 1

В HTML 4.0.1 обычно определяют заголовок страницы следующим образом:

<div id="header" > Это мой заголовок </div>

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

#header {
  width:960px;
  height:100px;
  background-color:gray;
}

Имя ID задается произвольно. Некоторые дизайнеры используют имена "masthead", "topsection" или "box". В HTML5 есть уникальный тег с именем <header>, который замещает собой <div>, - таким образом синтаксис становится более логичным и последовательным.

<header> Это мой заголовок </header>

Пример 2

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

header {
  width:960px;
  height:100px;
  background-color:gray;
}

Разница между первым и вторым примерами может быть непонятной, если вы не знакомы с CSS. В первом примере используется селектор (#header), который относится к идентификатору CSS или CSS ID. В примере втором используется новый селектор (header), позволяющий редактировать стиль элемента напрямую. В HTML5 есть несколько новых элементов, например, <footer>, <nav>, <section>, <aside>, и <article>. Их имена основаны на самых распространенных, используемых при верстке современных веб-страниц тегах (div id="footer", div id="nav" и так далее). Задача новых элементов HTML5 заключается в уменьшении сегодняшней зависимости от тегов <div>, в замене их более последовательной и читабельной структурой страницы.

Полный список элементов JavaScript, поддерживаемых WinRT-приложениями, можно найти по ссылке:

http://msdn.microsoft.com/en-us/library/windows/apps/hh767345.aspx

Поддержка HTML5 в WinRT-приложениях включает в себя не только элементы

Поддержка HTML5 в приложениях для Магазина Windows включает в себя не только элементы, но и другие компоненты:

CSS3 и WinRT

CSS или каскадные таблицы стилей – это отдельный от HTML язык программирования. И спецификация W3C, определяющая функции и правила CSS, также развивалась независимо. В 1996 г. спецификация CSS1 получила статус рекомендации W3C. В 1998 г. то же самое произошло с CSS2. CSS2.1 сейчас уже почти дошла до стадии рекомендации.

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

Зависящие от поставщика префиксы в CSS

Вы должны знать зависящие от поставщика префиксы в CSS. В веб-разработке такие префиксы появились после 2007 г. Они позволяют производителям браузеров испытывать и тестировать новые параметры CSS, отбрасывая префиксы и сохраняя параметры CSS3.

Например, представьте себе параметр, который позволяет создавать скругленные углы у прямоугольных CSS-элементов. В CSS3 синтаксис следующий:

border-radius: 24px;

Проблема в том, что когда такой параметр появился, производители браузеров не знали, как он будет работать, и хотели предоставить возможность проверить это в реальных условиях веб-дизайнерам и разработчикам. Вместо того, чтобы делать этот параметр "экспериментальным", производители браузеров придумали префиксы: код, добавляемый к параметру CSS, работающий только в поддерживаемых версиях браузеров. Например: префикс для параметра border-radius в Apple Safari и Google Chrome — "-webkit". Браузеры, работающие на платформе Gecko, используют префикс -moz.

-webkit-border-radius: 24px; (этот параметр работает только с браузерами, использующими платформу Webkit);

-moz-border-radius: 24px; (это работает только с браузерами, построенными на платформе Gecko).

У Microsoft есть свой собственный префикс "-ms", и если нужно будет описать скругление углов с использованием этого префикса, это может выглядеть следующим образом:

-ms-border-radius: 24px;

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

border-radius: 24px;

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

Internet Explorer 10 и WinRT-приложения

Почему вам необходимо обращать внимание на веб-стандарты и браузеры при разработке или создании дизайна приложений для Windows 8? Процесс, запускающий и поддерживающий приложения с использованием JavaScript, называется WWAHost.exe. Этот процесс включает в себя всю функциональность, предоставляемую браузером Internet Explorer 10. Соответственно, чтобы узнать, как работают те или иные механизмы WinRT-приложений, можно обратиться к документации по IE 10.

Поддержка CSS в WinRT-приложениях, использующих JavaScript

Поддерживаемый синтаксис CSS в WinRT-приложениях, использующих JavaScript – это комбинация из широко используемых свойств (таких, как свойство border) и синтаксиса поставщика (такого, как свойство –ms-content-zooming). Синтаксис, специфичный для –ms, группируют в следующие категории.

Значение Windows Library для JavaScript (WinJS) в WinRT-приложениях

JavaScript – это объектно-ориентированный язык программирования, разработанный для того, чтобы добавить интерактивность в веб-страницы. JavaScript позволяет расширить функциональность и внешний вид веб-страниц с помощью набора методов, от простых – таких, как проверка формы, до сложных – таких, как анимированный показ слайдов. JavaScript – это скриптовый язык, и изучить его сложнее, чем HTML и CSS. Современные дизайнеры и разработчики используют этот язык, применяя библиотеки или фреймворки JavaScript. Библиотеки JavaScript имеют расширение .js, они включают в себя набор функций, которые без труда можно добавить к HTML-страницам.

В веб-разработке доступно несколько библиотек JavaScript. Одна из самых распространенных – jQuery. Библиотека Windows для JavaScript – это библиотека файлов CSS и файлов JavaScript. Она включает в себя объекты JavaScript, организованные в пространства имен для того, чтобы разработка приложений была легче. Библиотека Windows для JavaScript (WinJS) включает объекты, которые помогают работать с активацией и доступом к хранилищам, определять свои собственные классы и библиотеки имен. Также она включает набор элементов управления.

Заметьте, что применение библиотеки WinJs не является обязательным. Если вы можете создать приложение, которое будет отображено корректно и будет работать в Internet Explorer 10, то оно, возможно, будет использовать обычный JavaScript или такие библиотеки, как jQuery, в качестве замены (или дополнения) к WinJS. Тем не менее, обращение к библиотеке WinJS будет только плюсом – с ее использованием гораздо легче выполнять такие задачи, как добавление элемента управления в пользовательский интерфейс или доступ к хранилищу данных.

Перенос веб-приложений на платформу Windows

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

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

http://msdn.microsoft.com/en-us/library/windows/apps/hh465143.aspx

Функции CSS3, доступные в WinRT-приложениях

Базовый процесс, поддерживающий WinRT-приложения с использованием JavaScript, называется WWAHost.exe. Этот процесс включает в себя всю функциональность, предоставляемую браузером Internet Explorer 10. Вы можете ознакомиться с функциями, поддерживаемыми в IE 10, чтобы понять, какие функции доступны в WinRT-приложениях Metro. В примере мы будем использовать решение Test Drive на сайте Microsoft, чтобы продемонстрировать функции CSS.

Раздел "Hands On: Windows 8 HTML5 Platform" (Практика: платформа HTML5 в Windows 8) на сайте Microsoft поможет вам лучше понять графические параметры CSS3. Чтобы получить наиболее полную информацию, вам необходимо использовать Internet Explorer 10. Все эффекты, что есть в браузере, применяются в приложениях.

Вот главная страница описываемой демонстрации:

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

Границы, цвета RGBa, градиент и тени

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

Почему все это подходит для WinRT-приложений?

Использование CSS-стилей, таких, как границы, цвета, градиенты, тени, интегрировано в различные аспекты дизайна WinRT-приложений. Обычно такие эффекты создают в программе обработки изображений и сохраняют в графическом формате. Возможность сделать то же самое в коде означает, что производительность приложений оптимизирована, а эффекты легче модифицировать. Тем более, некоторые из этих параметров (такие, как прозрачность) могут быть полезнее, если они анимированы.

Пройдя по ссылке, вы можете получить больше информации о параметре text-shadow, добавляющем тени.

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_text-shadow.htm

CSS 2D- и 3D-трансформации

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

Почему все это подходит для WinRT-приложений?

И 2D-, и 3D-трансформации являются важными элементами приложений для Магазина Windows. В комбинации с анимацией (или переходами) мы получаем трансформации, которые органично вписываются в поведение приложений. Например, когда вы щелкаете на плитке, которая находится на начальном экране Windows 8, ее верхняя часть слегка наклоняется в результате вертикальной 3D-трансформации. Так как эти трансформации реализованы средствами CSS, а не JavaScript, можно оптимизировать производительность приложений и, дополнительно, настраивать или создавать анимации – такие, как перелистывание страниц.

Вы можете найти практические примеры использования 2D- и 3D-трансформаций по следующим адресам:

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_2d-transforms.htm

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm

CSS-переходы

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

Почему все это подходит для WinRT-приложений?

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

Вы можете найти практические примеры использования CSS-переходов по следующим адресам:

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_2d-transforms.htm

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm

Анимации CSS

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

Почему все это подходит для WinRT-приложений?

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

Многоколоночная верстка

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

Почему все это подходит для WinRT-приложений?

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

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

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_multi-column.htm

Верстка по сетке

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

Почему все это подходит для WinRT-приложений?

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

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

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm

Гибкая блочная верстка

Обычно такую верстку называют "flexbox" ("резиновая" верстка). Этот способ раскладки используется для создания как простых, так и сложных структур страниц, адаптированных для различных экранов. Преимущество такой верстки в том, что относительное расположение содержимого остается неизменным, даже если размер экрана меняется. Используя данную структуру и равномерно распределив пустое пространство, можно сделать так, чтобы объект всегда находился в центре страницы или другого контейнера.

Почему все это подходит для WinRT-приложений?

"Резиновая" верстка полезна, когда используется с элементом управления ViewBox. Два этих компонента комбинируются при создании Приложения с фиксированным макетом (Fixed Layout App) в Blend или Visual Studio. Приложение с фиксированным макетом делает возможным создание фиксированной области просмотра для содержимого, что подразумевает неизменность размеров – в противоположность приложению, использующему макет на основе сетки. Подобная раскладка может пригодиться вам при создании JavaScript-игр, где необходимо, чтобы игровое поле имело определенную ширину и высоту вне зависимости от размеров экрана.

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

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm

Области CSS

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

Почему все это подходит для WinRT-приложений?

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

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

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_regions.htm

Два стандартных графических формата: Canvas и SVG

В WinRT-приложениях по умолчанию поддерживается два исходных графических формата: Canvas (холст) и SVG (Scalable Vector Graphics – масштабируемая векторная графика). Так как это встроенные форматы, мы можем создавать графику, используя код – вместо традиционного подхода с применением заранее подготовленных графических файлов форматов .png или .jpg. И canvas, и SVG имеют сильные и слабые стороны, но, в общем случае, вы можете видеть их в качестве элементов пользовательского интерфейса – таких, как кнопки управления проигрывателем; они представляют собой иллюстрации, которые могут быть анимированы, они используются для целей визуализации данных – в виде графиков и диаграмм.

Canvas – это элемент управления, который представляет собой поверхность для рисования на странице. Внутри этой поверхности вы можете создавать фигуры, используя цвета, градиенты, заполнение по шаблонам. Вы можете манипулировать пикселями на экране, интерактивно, выводить текст и экспортировать полученный контент в виде статических файлов изображений – таких, как .png. Также вы можете добавлять JavaScript или CSS-анимацию, чтобы заставить созданные вами объекты перемещаться, исчезать, чтобы менять их размеры и так далее. Хотя тег <canvas> добавляется в HTML-документ, это лишь поверхность для рисования. Все, что к ней относится, создается с помощью JavaScript. Кроме того, после вывода содержимое холста представляет собой пиксельное изображение, в то время как SVG – это векторная графика.

SVG использует объектную модель элементов, атрибуты и стили, в этом смысле он больше похож на синтаксис HTML. Когда в HTML появляется элемент <svg>, он ведет себя как часть HTML.

Почему все это подходит для WinRT-приложений?

Хотя поддерживаются оба формата, SVG-элементы используются в WinRT-приложениях для непосредственного отображения изображений. Программы для редактирования изображения, такие, как Adobe Illustrator, позволяют вам экспортировать векторные изображения в формат .svg. Иллюстрации и значки могут быть созданы и очень легко использованы внутри приложения. Так как векторные изображения не зависят от разрешения, вы можете использовать эти элементы в проектах и они будут менять размеры без потери качества даже на больших экранах. Кроме того, поддерживаются SVG-фильтры, которые позволяют применять основные эффекты – такие, как размытие или тонирование в сепию.

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

Итоги

В модуле вы узнали о том, как используются основные принципы HTML5 и CSS3 в приложениях, и поэкспериментировали с практическими примерами их применения. Вы узнали о моделях компоновки, медиа-запросах, анимациях. В частности, вы узнали, как создается раскладка с помощью областей, сетки, как делается "резиновая" верстка, верстка в несколько колонок, как применяются медиа-запросы. Вы ознакомились с 2D- и 3D-трансформациями, переходами, анимациями, градиентами, тенями, техникой скругления углов, встроенными SVG-изображениями и с использованием элемента управления canvas.

Самостоятельная работа

Перейдите на сайт ознакомления с IE (IE Hands On) и попрактикуйтесь с разными элементами управления. Обратите особое внимание на те возможности, которые вы будете использовать чаще других, а именно – на 2D- и 3D-эффекты, верстку на основе сетки и гибкую блочную верстку.

Вопросы

Дополнительные ресурсы

Ответы