Html скелет сайта: Cкелет HTML. Основы HTML для начинающих. Урок №1 – Готовые макеты блоков для веб-страниц на HTML и CSS

Cкелет HTML. Основы HTML для начинающих. Урок №1


Cкелет HTML. Основы HTML для начинающих. Урок №1

Всем привет! Я рад, что вы посетили мой блог stepkinblog.ru.
При создании веб-страниц и сайтов приходится работать с HTML . Поэтому, вы сделали очень правильное решение изучить основы HTML.
Предлагаю вам пройти изучение именно моих уроков. Почему именно моих? Во-первых, потому что они поданы в легкой и доступной форме для новичков, во-вторых, потому что каждый урок будет иметь практическое занятие, а как известно практика играет важную роль.
Итак, урок №1. В нем я расскажу, что такое HTML и схематически отображу скелет HTML документа.
Что такое HTML?
HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанным британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.

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

Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница.

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

Язык – набор тегов, с помощью которых осуществляется разметка в HTML.

На данном этапе логично было бы объяснить еще значение слова тег, но об этом чуть позже.

Теперь рассмотрим, из чего состоит скелет HTML документа. Разберем скелет по косточкам.

Скелет HTML

Для лучшего понимания из чего состоит HTML документ, я подготовил  схему:

Разъяснение схемы:

1). <HTML> и </HTML> - это начало и конец HTML документа.

2). <HEAD> и </HEAD> - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги). Со служебными тегами мы обязательно столкнемся в дальнейших уроках и все подробно разберем.

3). <title> и </title> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между тегами <HEAD> и </HEAD>.
Давайте посмотрим, где будет отображаться заголовок документа в браузере:

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

4). <BODY> и </BODY> - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.

Вот теперь пришло время выяснить, что такое ТЕГ

Тегом называется все то, что находится между скобками < >. Собственно, совокупность всех тегов и составляет язык разметки HTML.

Для примера я пропишу парочку тегов: <html></html>, <head></head>, <title></title>, <br>, <p></p> и др.

Также хочу упомянуть, что есть теги, которые нужно закрывать. Например:
<html> - открываем тег.
</html> - закрываем тег.

Есть теги одиночки, которые не нуждаются в паре или в закрытии. Например:
<br> - тег для переноса строки.

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

Следующая запись
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Осваиваем HTML Основной скелет HTML-документа.

Осваиваем HTML Занятие 1

Скелет HTML-документа

Планирую написать большую серию статей по HTML от основ до мелких нюансов работы, а затем перейти к сериям статей по PHP и JavaScript. Это первая статья серии осваиваем HTML.

Прежде чем начать работу с html, давайте рассмотрим, что это понятие означает.
Итак, HTML (англ. HyperText Markup Language – Язык разметки гипертекста), это не язык программирования, а именно стандартизованный язык разметки текста (документов) во Всемирной паутине Интернета.
Каждая вещь имеет свою структуру, строение, так же, как и HTML-страница. Эта страница содержит в себе шапку, название, дальше текст, «тело» документа, и напоследок – подписи, например. Документ содержит теги, которые нужны не для того, чтобы нас запутать, или просто для красоты, они говорят браузеру, как нужно интерпретировать текст, служебные слова, символы, которые он увидит на странице HTML документа. Код html содержит много элементов, которые могут обозначать цвет, шрифт, выделения, абзац, списки, различные таблицы, ссылки, картинки…

Для создания своих веб-страниц вам понадобится минимум – программа «блокнот», ёё можно легко найти, так как она идет в комплекте windows в панели «пуск» – «все программы» – «стандартные» – «блокнот».

Итак, давайте начнем!
Откройте блокнот и впишите туда следующее:
<html>
</html>
Возникают различные вопросы – «Что это? Почему они в таких скобках? Что такое тег? .. »
Тег – это команда браузеру выполнить действия.
Если мы напишем, эти теги без скобок, браузер расценит это, как обычный текст и сделает его видимым. А нам нужно, чтобы это было для браузера как команда, приказ.
Данный тег, что вы написали означает, что наш документ написан на языке HTML. Обязательно не забывайте теги закрывать, значком «/», поскольку не будет выполнена операция, будет считаться незавершенной и может быть выполнена не корректно.

Далее впишите туда теги, они и получим основной скелет HTML-документа
<head>
</head>, чтобы получилось так:

<html>
<head>
</head>
<body>
</body>
</html>
Так выглядит основной скелет HTML-документа.

Но давайте разберемся и с этими тегами. Как вы знаете, слово «head» на английском означает «голова», а слово «body» – тело. Такое же значение эти слова имеют здесь.
HEAD – «голова» документа. Тут прописываются название страницы и сайта, коды текста.
Тег BODY – «тело»: в нем содержится вся основная информация страницы, то, что мы видим, читаем, смотрим …

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

Существует тег <title>, отвечающий за имя (название). Давайте впишем следующее:
<html>
<head>
<title> Осваиваем HTML, моя веб-страница. </title>

</head>
<body>
</body>
</html>
Если данный документ снова сохранить и открыть в браузере, то увидим сверху наше название страницы. Если вы не закрывали страницу в браузере с первого раза, то просто обновите страницу через меню браузера или нажав функциональную клавишу F5.
Но давайте не останавливаться на начальной стадии, а впишем следующее между тегами BODY:
<h2> Заголовок на веб-странице </h2>

Таким образом, у нас получится:
<html>
<head>
<title> Осваиваем HTML, моя веб-страница. </title>
</head>
<body>
<h2> Заголовок на веб-странице </h2>
</body>
</html>
В результате вы должны получить

Тег h2 означает заголовок нашего будущего текста.
А теперь мы можем это сохранить, для этого достаточно нажать Cntr+S или воспользоваться меню текстового редактора. Открыть html документ в браузере (обновляем) и увидим наш первый результат.
Существует очень много интересных и полезных тегов, которые стоят того, чтобы их рассмотреть, мы рассмотрели пока только начальные, формирующих наш документ.


 
Автор: Алекс
по заказу http://wmr1000.ru/ Запрещено копировать без ссылки на сайт

 
Сделать закладку:

html - Хороший HTML скелет

ТЛ; др

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h2>Example <!-- site name --></h2>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

HTML5 скелет может выглядеть следующим образом :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

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

Если вы используете другую кодировку , чем UTF-8, изменить значение свойства meta-charset соответственно.

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

Если вы хотите явно указать направление текста, используйте dirатрибут на htmlэлементе, например:<html dir="ltr" lang="en">

Общие link/ metaэлементы для добавления кhead

  • Связывание с таблицей стилей ( text/cssпредполагается по умолчанию):

    <link rel="stylesheet" href="/default.css">
    
  • Связывание с фавиконки :

    <link rel="icon" href="/favicon.png" type="image/png">
    
  • Определение канонического URL документа:

    <link rel="canonical" href="http://example.com/">
    
  • Обеспечивая описание содержимого этой страницы:

    <meta name="description" content="…">
    

Элементы для body

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

Тем не менее, большинство страниц , вероятно , являются частью веб - сайта, и большинство веб - сайтов , вероятно , имеют общесистемный заголовок (→ header) с именем сайта (→ h2), сноска (→ footer) и меню навигации (→ nav). Они должны принадлежать к bodyкорню секционирования (то есть, не имеют никакого другого секционирования элемента содержимого в качестве родителя). navМожет или не может быть частью header.
Основное содержание (→ main) может или не может состоять из секционирования элемента ( как правило , articleили section, или несколько из них).

<header>
  <!-- site-wide header -->
  <h2>Example <!-- site name --></h2>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>

Знакомство со Skeleton, простым стартовым CSS шаблоном

Знакомство со Skeleton, простым стартовым CSS шаблоном

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

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

Что такое Skeleton?

Как уже было сказано, Skeleton – это легкий CSS фреймворк (или стартовый шаблон (boilerplate), если вы предпочитаете это название), созданный Дэйвом Гаманшем (Dave Gamache). А точнее это два CSS файла: популярный файл normalize.css и сам файл skeleton.css. В последнем файле содержатся стили фреймворка, около 400 строчек кода в несжатом виде.

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

Чтобы скачать последнюю версию Skeleton, вы можете посетить официальный сайт и загрузить zip-архив. В качестве альтернативного варианта можно сделать «форк» репозитория на GitHub. После скачивания и распаковки архива у вас будет следующая файловая структура:

Знакомство со Skeleton, простым стартовым CSS шаблоном

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Знакомство со Skeleton, простым стартовым CSS шаблоном

Также, как и в фреймворках Bootstrap и Foundation, Skeleton использует подход «сначала мобильные» (mobile-first). Однако, как уже говорилось, он не включает огромного количества компонентов, которые предлагают другие фреймворки; он содержит только некоторые, самые основные, CSS правила, которые позволят вам быстро начать процесс разработки.

Стоит отметить, что Skeleton работает во всех современных браузерах (включая IE9+) без каких-либо ограничений. Наконец, вы также можете использовать Sass или Less расширения для Skeleton.

Версии: последняя и предыдущая

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

Знакомство со Skeleton, простым стартовым CSS шаблоном

Сетка

В последней версии Skeleton, на основании подхода «сначала мобильные», создана 12-колоночная резиновая сетка, состоящая из строк и колонок (как и во всех CSS сетках).

Знакомство со Skeleton, простым стартовым CSS шаблоном

Строки должны располагаться внутри обертки, максимальная ширина (свойство max-width) которой может быть 960px. Чтобы создать обертку, вы определяете элемент div и присваиваете ему класс container. Если вы знакомы с сеточной системой Bootstrap, вы наверняка знаете, что в Bootstrap используется тот же класс для определения обертки.

Ширина элемента-обертки в Skeleton варьируется в зависимости от размера экрана. В любом случае, как уже было сказано, она не может превышать 960px. В следующей таблице приведены возможные значения:

Знакомство со Skeleton, простым стартовым CSS шаблоном

Колонки вложены в строку. В одной строке может быть максимум 12 колонок. Чтобы создать колонку, вам нужно определить элемент div и присвоить ему два класса. Сначала вы назначаете класс, который отвечает за расчет ширины у колонок. Для этого вы можете использовать любые классы, начиная с one и заканчивая twelve, или использовать классы one-third, two-thirds, а также one-half.

Затем вы назначаете класс, который отвечает за внешние отступы (margin) у колонок. Возможными классами являются columns и column. Если вы определили ширину колонок с помощью классов типа two и других, то вам следует использовать класс columns (вместо column) в качестве второго класса. Исключением является класс one, который можно одинаково сочетать с классом columns или column.

В то время как другие фреймворки поддерживают вложенные строки, Skeleton не рекомендует вкладывать строки внутри колонок. Более того, сеточная система Skeleton предоставляет дополнительные классы, отвечающие за смещение колонок. Данные классы (например, offset-by-two) позволяют вам увеличить пространство между колонками, добавив к ним свойство margin-left.

Утилиты

Как уже упоминалось, помимо хорошо структурированной сетки, в Skeleton имеются дополнительные предопределенные стили. Например, класс button, который позволяет вам стилизовать элемент a, как кнопку. Также есть возможность задать для кнопки светло-синий фоновый цвет (свойство background-color), используя класс button-primary.

Другим примером может послужить использование обтекания (слева или справа благодаря свойству float). Для этого можно использовать класс u-pull-left или u-pull-right. Также для очистки обтекания существует класс u-cf. И это всего лишь пара примеров вспомогательных классов, имеющихся в Skeleton.

Использование Skeleton

Теперь настало время использовать мощные возможности Skeleton в демо-проекте. Мы будем рассматривать три разных примера.

На следующем изображении показано, как должен выглядеть наш элемент header на маленьких экранах и не только (≥ 550px). Обратите внимание на то, что мы разделили строку на 2 равнозначные колонки. Однако, для очень маленьких экранов (

Знакомство со Skeleton, простым стартовым CSS шаблоном

Вот HTML:

Знакомство со Skeleton, простым стартовым CSS шаблоном

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<header> <div> ... <section> ... <div> <div> ... </div> <div> ... </div> </div> </section> </div> </header>

<header>

  <div>

    ...

    <section>

        ...

      <div>

        <div>

          ...

        </div>

        <div>

          ...

        </div>

      </div>

    </section>

  </div>

</header>

На данном этапе нам нужно вспомнить, что Skeleton поддерживает подход «сначала мобильные». Это означает, что когда ширина (свойство width) будет меньше, чем 550px, будет выполняться следующий кусок кода:

.column, .columns { width: 100%; }

.column,

.columns {

    width: 100%;

}

Это гарантирует нам то, что колонки будут расположены друг под другом. Затем, когда ширина окна браузера будет шире, чем 549px, сработает сетка Skeleton, и наши колонки будут занимать по 50% от доступной ширины строки (поскольку им задан класс one-half). Конечно, наша разметка основывается на значениях, заложенных в Skeleton по умолчанию. Однако, у нас есть возможность их поменять.

Примечание: вместо использования пары классов one-half и column, мы могли бы использовать классы six и columns, и получили бы такой же результат.

Давайте посмотрим на наш второй пример. На следующем изображении показана наша разметка для блока section.about, когда область просмотра становится шире, чем 549px.

Знакомство со Skeleton, простым стартовым CSS шаблоном

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

<section> <div> ... <div> <div> ... </div> <div> ... </div> </div> ... </div> </section>

<section>

  <div>

    ...

    <div>

        <div>

          ...

        </div>

        <div>

          ...

        </div>    

    </div>

    ...

  </div>

</section>

Примечание: вместо использования пар классов two-thirds, column и one-third, column, мы могли бы использовать пары классов eight, columns и four, columns для получения равнозначного результата.

Давайте посмотрим на наш последний пример. Вот каким мы бы хотели видеть наш элемент footer:

Знакомство со Skeleton, простым стартовым CSS шаблоном

В этом случае нужная нам строка состоит всего из одной колонки. Она занимает 65.33% от ширины строки. Нам также нужно отцентрировать ее. Для этой цели мы используем вспомогательный класс offset-by-two. А вот и соответствующая разметка:

<section> <div> ... <div> <div> <ul> <!—здесь расположен список... --> </ul> </div> </div> ... </div> </section>

<section>

  <div>

    ...

    <div>

      <div>

        <ul>

            <!—здесь расположен список... -->

        </ul>

      </div>                  

    </div>

    ...

  </div>

</section>

Посмотрите на пример на сайте CodePen.

Заключение

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

Доводилось ли вам использовать Skeleton в ваших проектах? Нравится ли вам его простота или вы предпочитаете работать с более сложными фреймворками (Bootstrap или Foundation)?

Автор: George Martsoukos

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Знакомство со Skeleton, простым стартовым CSS шаблоном

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Знакомство со Skeleton, простым стартовым CSS шаблоном

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

CSS&JS фреймворк Skeleton / Habr


В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Что такое Skeleton?

Skeleton это фреймворк, основанный на CSS и JavaScript. Он позволяет верстать сайты таким образом, чтобы они одинаково удобно и красиво выглядели как на мониторе 17 дюймов, так и на дисплее смартфонов и планшетах.

В Skeleton есть несколько базовых принципов:

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

Сетка данного фреймворка основана на всем нам знакомой 960-пиксельной сетке, однако она легко адаптируется под размер браузера и дисплея.
Простота использования

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

Skeleton это не UI фреймворк. Он не заставляет Вас приспосабливаться под свой дизайн, его наоборот легко приспособить к любому дизайну и пользовательскому интерфейсу.
Сетка фреймворка

Skeleton основан на 960-пиксельной сетке, но синтаксис прост и блоки легко подстраиваются под размер браузера. Сетка имеет 12-ти блоковую систему.

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

Ниже приведен синтаксис разметки:

<!-- The container is a centered 960px -->
<div>
  
  <!-- Give column value in word form (one, two..., twelve) -->
  <div>
    <h2>Full Width Column</h2>
  </div>
  
  <!-- Sweet nested columns cleared with a clearfix class -->
  <div>
    <!-- In nested columns give the first column a class of alpha
    and the second a class of omega -->
    <div>...</div>
    <div>...</div>
  </div>

  <!-- Sweet nested columns cleared by wrapping a .row -->
  <div>
    <div>
      <div>...</div>
      <div>...</div>
    </div>
  </div>

  <!-- Sweet nested columns cleared by <br> -->
  <div>
    <div>...</div>
    <div>...</div>
    <br />
  </div>

  <!-- Can push over by columns -->
  <div></div>

</div>

Типографика

Типографика в Skeleton основана на строгой иерархии. Основной шрифт — Helvetica Neue, но его, конечно-же, легко изменить. Параграфы «p» заданы 14-ти пиксельным шрифтом и межстрочным расстоянием в 21 пиксель.

Также в Skeleton встроен «инструмент» цитаты. Он задается тегом «blockquote».
Кнопки

Кнопки также имеют свой стиль и анимацию. Более того, помимо тега «button» можно определить кнопки при помощи стилей.
<!-- Just add .button to an anchor -->
<a href="#">Click Me</a>

<!-- Also works on plain button elements -->
<button>Click Me</button>

<!-- To take up full-width of a container? -->
<a href="#">Click Me</a>

Вкладки (табы)

В Skeleton по умолчанию включены также вкладки. Они реализованы при помощи jQuery. Их можно легко задать при помощи обычного списка «ul», обозначив его классом «tabs», а их содержимое классом «tabs-content».
<!-- Standard <ul> with class of "tabs" -->
<ul>
  <!-- Give href an ID value of corresponding "tabs-content" <li>'s -->
  <li><a href="#simple">Simple</a></li>
  <li><a href="#lightweight">Lightweight</a></li>
  <li><a href="#mobileFriendly">Mobile</a></li>
</ul>

<!-- Standard <ul> with class of "tabs-content" -->
<ul>
  <!-- Give ID that matches HREF of above anchors -->
  <li>The tabs are clean and simple unordered-list markup and basic CSS.</li>
  <li>The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
  <li>The tabs work like a charm even on mobile devices.</li>
</ul>
Формы

Формы в Skeleton особо ничем не выделаются, они просто выровнены по сетке.
Жесткие рамки

Skeleton ориентирован на универсальные дизайны, однако, творческая мысль может пойти дальше, и, возможно, Вам захочется менять фон, или другие элементы в зависимости от положения планшета, телефона или их разрешения. И тут Вам на помощь придут мини-хаки:
  • Меньше чем 960 пикселей: Меньше чем стандартная сетка.
  • Если планшет повернут в портретное положение: Между 768px и 959px.
  • Показ элементов предназначенных для мобильных версий: Если разрешение ниже 767px.
  • Только для планшетов в горизонтальном положении: От 480px до 767px.
  • Только для мобильных устройств в вертикальном положении: Менее 479px.
/* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

Кроссбраузерность

Скелетон поддерживает следующие браузеры:
  • Google Chrome (Mac/PC)
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Safari
  • IE9, IE8, IE7
  • iPhone (Retina)
  • Droid (Charge/Original)
  • iPad

Скачать и ознакомиться в оригинале можно на официальном сайте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *