—»     —»   Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1
  Раздел: Образование и Изучение, Руководства   Комментариев: 18  

Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1



Сейчас в интернете появляется достаточно много различных статей с информацией о разработках в области HTML5 и CSS3. Мы же решили попробовать разработать шаблон веб-сайта без использования изображений. Используя преимущества HTML5/CSS3 (в сравнении с прошлыми версиями), нам будет не так и сложно разработать привлекательный веб-сайт, в вёрстке которого мы не используем ни единого изображения.

Посмотрите на шаблон, который мы будем разрабатывать:

Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1

Смотреть демо | Скачать архивом

Содержимое папки с демо-версией

Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1

Вышеприведенное изображение отображает вам содержимое папки, которая содержит все файлы нашей демо-версии шаблона. Как и обещали – ни единого изображения. У нас есть HTML-страница с «продвинутой» вёрсткой, CSS-файл, содержащий в себе каскадные таблицы стилей, а также папка со шрифтами, которые мы будем встраивать в шаблон посредством параметра @font-face.

Как обычно, мы рекомендуем вам разместить всё содержимое страницы index.html, а уже потом приступать к CSS. Итак, давайте приступим.

HTML5 – Делаем код чище и продуктивнее

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

Объявление типа документа (doctype) и заглавия документа

Давайте рассмотрим процесс объявления типа документа, а также заглавия документа в коде HTML:

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=UTF-8>
    <title>Fictive Company Blog | a blog showcasing the &#252;bercoolness of HTML5 &amp; CSS3</title>
    <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
    <link href=styles.css rel=stylesheet />
</head>

Очевидно, этот код гораздо чище, чем если бы мы писали то же самое, но прибегая к технологии HTML4 или XHTML. Объявление типа документа представляет собой всего 4 символа.

Вот так было раньше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Не правда ли, вариант с HTML5 гораздо лучше? Далее, мы открываем HTML-тэг и указываем язык документа (вы можете найти под-тэг языка своей страны в регистре IANA Language Subtag Registry). Ещё одно изменение, которое стоит учесть – это отсутствие кавычек, которые ранее стояли по обе стороны EN. Ранее в XHTML приходилось использовать кавычки, чтобы код был валидным, но в случае с HTML5 это более не востребовано.

Это может вызывать некоторые подозрения: сколько килобайт можно сэкономить на паре кавычек? Но стоит всегда помнить о том, что вряд ли эта страница будет открыта всего раз. Она постоянно будет мелькать и мелькать, что может привести к значительному объему переданной информации. Здесь может быть другая проблема – вы можете подсознательно по привычке всегда добавлять кавычки. Если вы используете замечательный плагин Zen Coding для вашего любимого текстового редактора, то помните, что он автоматически добавляет кавычки. Единственным решением здесь будет – найти самостоятельно кавычки, и удалить их. Но уже после того, как вы закончили разработку документа в редакторе.

Вместо элемента «head», мы сначала определяем кодировку и заголовок. И здесь тоже нет кавычек. Продвигаясь далее, мы добавляем условные комментарии посредством которых загружаем файл javascript, который поможет нам сладить с браузером IE версии 8 и ниже.
Условный комментарий – это некий тип HTML-указателя, который компания Microsoft использует для указания определённых правил в коде для определённых версий браузера (либо для всех версий сразу).

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

Причиной важности использования скрипта HTML5Shiv От Рэмми Шарпа (Remy Sharp) является отсутствие поддержки в Internet Explorer технологии HTML5. Проблема в работе c IE заключается в том, что он просто не распознаёт новые таблицы стилей (CSS3). Итак, для того чтобы заставить более ранние версии IE генерировать код HTML5-элементов корректно, нам нужно создавать неизвестные элементы посредством javascript. Если вам слабо верится в то, что это помогает, и вы хотите узнать об этом побольше, то ознакомьтесь с этой записью относительно HTML5 Shiv от Джона Ресига (John Resig).

Продвигаясь по телу документа (body), мы переходим к головной секции документа, и вся она будет реализована посредством элементов HTML5:

<body>
<header>
    <hgroup>
        <h1>Fictive Company Blog</h1>
        <h2>a blog showcasing the &#252;bercoolness of HTML5 &amp; CSS3</h2>
    </hgroup>
    <nav id=global>
        <ul>
            <li><a href=#>Home</a></li>
            <li><a href=#>About</a></li>
            <li id=services>
                <a href=#>Services</a>
                <ul id=subMenu>
                    <li><a href=#>Whatever</a></li>
                    <li><a href=#>Your Heart</a></li>
                    <li><a href=#>Desires</a></li>
                </ul>
            </li>
            <li><a href=#>Portfolio</a></li>
            <li><a href=#>Contact</a></li>
        </ul>
    </nav>
</header>

Элемент «header» ("шапка" документа)

Сразу после открытия тэга «body», мы применяем новый элемент технологии HTML5 – тэг «header». Таким образом Консорциум Всемирной Паутины (W3C) определяет головную часть документа:

Элемент «header» отображает группу информационно-вступительных блоков, и блоков, предназначенных под навигационные нужды

Следуя данному регламенту, наш элемент header будет содержать логотип, линию тэгов и основное меню навигации. Т.е. наше отделение header будет содержать, как раз, всё то, что мы интуитивно можем назвать «шапкой» страницы веб-сайта (а с технической стороны, наш отдел header будет содержать все элементы, которые могут быть обозначены div’ами с присвоенным id «header»). Элемент «header» может быть использован несколько раз в коде страницы, и мы, конечно же, позже используем его ещё раз (в элементах «article», которые зачастую содержат в себе содержимое записей на странице).

Элемент «hgroup»

Первым в головном отделе страницы идёт ещё один новый тэг – «hgroup». Мы используем этот элемент для отображения логотипа нашего веб-сайта и строки тэгов с тэгами h1 и h2.

Элемент Hgroup используется для группирования набора элементов от h1 до h6 в тех случаях, когда у шапки страницы есть множество уровней (например, подзаголовки, альтернативные варианты названия или строки тэгов)

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

Теперь мы сталкиваемся с другой проблемой: структурный алгоритм пока что не идеален или не завершен. Например, следующий элемент, который мы обсудим, это элемент «nav», и в структуре он определяется как «безымянная секция». Уже было несколько запросов к разработчикам структурного алгоритма о том, чтобы появилась возможность распознания элемента «nav» как «Navigation». В любом случае, элемент hgroup предлагает вам возможность группирования заголовков, что позволяет держать их в более организованном виде как структурно, так и семантически.

Элемент «nav»

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

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

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

- Содержание в длинном текстовом документе;
- Навигация по объемной странице;
- Ссылки постраничного вывода данных (ссылка на следующую/предыдущую страницы);
- Список тематических записей.

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

Элемент «article»

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

<article>
    <header>
        <div class=time>
            <div class=year>2010</div>
            <div class=date>16<span>apr</span></div>
        </div>
        <h1>Sample Post 1</h1>
        <div class=comments>38</div>
    </header>
    <p>Curabitur ut congue hac, diam turpis[…]</p>
    <footer>
        <em>Written by:</em> <strong>Author Name</strong>
        <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
        <a class=button href=#>Continue Reading</a>
    </footer>
</article>

Вот определение элемента от команды W3C:

Элемент article представляет собой наполнение документа […], которое может быть использовано индивидуально или повторяться

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

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

Элемент «footer»

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

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

Здесь у нас с подвалом есть 4 неясности: по одной на каждую из трёх записей и 1 на подвал. Подвал в элементе article содержит имя автора сообщения, тэги и кнопку, ведущую на полную версию записи.

Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1

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

Элемент «section»

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

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

Элемент section немного причудлив, так как в спецификации всё описано так, будто это тот же элемент, что и div. Мы тоже попались в эту ловушку, когда начали писать код для демо-страницы. Мы разветвили 3 элемента article внутри section. Очень скоро мы поняли, в чём ошибка. Одним способом определения, использовать ли section, является – убедиться, что раздел, который вы хотите обернуть в элемент section, нуждается в заголовке. Как вы видите в определении, элемент section имеет заголовок.

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

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

Элемент «aside»

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

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

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

Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 1

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Заключительные слова

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

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

Как и всегда, надеемся на взаимодействие с вами, мы готовы ответить на ваши вопросы. Пожалуйста, не стесняйтесь спрашивать и пробовать применять новые элементы, а затем рассказывать нам и остальным читателям о полученном результате!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 13819   |   Оставлено комментариев: 18
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 июня 2011 @ 08:32
Написал: twojoker — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Просто замечательная статья! Скажите, а как будет решаться вопрос с поддержкой HTML5 и CSS3 в браузерах, что касается верстки и что касается поддержки свойств?
Комментарий #2: 25 июня 2011 @ 13:41
Написал: SunChase — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень полезная статейка. Многое узнал. Автору спасибо
Комментарий #3: 25 июня 2011 @ 14:38
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
SunChase, пожалуйста. Продолжение следует ..
Комментарий #4: 30 июня 2011 @ 22:33
Написал: melomaniac — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо, даже и недумал что такое можно сотворить без использования изображений winked
Комментарий #5: 30 июня 2011 @ 22:40
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
melomaniac, пожалуйста! Скоро будет вторая часть - там еще интереснее будет smile
Комментарий #6: 2 июля 2011 @ 04:11
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
К стати, у меня в опере (11.50) глючит открывающаяся менюшка :(


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #7: 4 июля 2011 @ 05:06
Написал: Valekas — группа: Читатели  
На сайте с: 21.08.2009   |   Публикаций: 0   |   Комментариев: 70
ICQ: 572686
Вторая часть вот-вот на подходе уже :)


--------------------
Кто говорит, не думая, тот умрет, не болея.
Комментарий #8: 4 июля 2011 @ 15:47
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
Вторая часть опубликована.
Комментарий #9: 13 октября 2011 @ 21:44
Написал: Артиом — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Есть вопросик:
На вашем демо сайте вёрстка только главной страницы, а если зайти на любую статью как будет выглядеть вёрстка там где контент?
После /header дo aside?
Заранее спасибо.
Комментарий #10: 13 октября 2011 @ 21:56
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Артиом, ну это надо уже самому дорабатывать под себя. Тут предоставлен общий подход к построению, т.с., азы и структура...
Комментарий #11: 13 октября 2011 @ 22:36
Написал: Артиом — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ладно) есть ещё один вопросик:
aside же не только сделан для сайтбаров, можно ли его использовать внутри статьи для дополнительной инфы? Например:

бла блаблаблабла
блаблаблаблабла
блаблаблаблабла
aside
также про блаблабла можно почитать на вики...
/aside
блаблабалаблабалб
Комментарий #12: 13 октября 2011 @ 23:38
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Артиом, aside лучше все же использовать именно для сайдбаров. Для правого или левого можно задавать классы. А для всех прочих кусков кода я рекомендую использовать новый тэг "section".
Комментарий #13: 14 октября 2011 @ 17:48
Написал: Артиом — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В шапке сайта обычно есть горизонатльное меню. Его включать в теги header? Например:

включать
Внимание! У вас нет прав для просмотра скрытого текста.
Комментарий #14: 14 октября 2011 @ 18:35
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Если это меню визуально находится в шапке сайта, не под ней, а именно в ней, то правильно будет включить его в хидер. Так же само и в случае футера (подвала).
Комментарий #15: 14 октября 2011 @ 20:59
Написал: Артиом — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо)
Комментарий #16: 14 октября 2011 @ 21:03
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Артиом, пожалуйста. Спрашивайте, если что ... сможем - поможем.
Комментарий #17: 5 ноября 2011 @ 00:22
Написал: Антон — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А как научить русскому это чудо?
Когда пишу там рускими буквами он выбивает на арабском
Комментарий #18: 5 ноября 2011 @ 11:53
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: Антон
charset
charset поменяйте.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31