Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

922

HTML базовый курс

БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

Бесплатные видеокурсы!

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

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

Вы здесь: Главная → Как сделать сайт → Верстка → Делаем разметку шапки и футера HTML-страницы

Текущее состояние создаваемого сайта

Свернуть

Все статьи рубрики "Как сделать сайт"


Автор: / Дата:

Делаем разметку шапки и футера HTML-страницы

Здравствуйте уважаемый посетитель!

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

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

Содержание


  • Разметка шапки
  • Разметка меню шапки
  • Разметка футера
  • Что такое фавикон и для чего он нужен
  • Исходные файлы сайта

Разметка шапки


Верстку нашего сайта будем делать в соответствии с ранее созданным дизайн-макетом.

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

Для удобства, здесь в начале статьи эти картинки размещены повторно, так как в дальнейшей работе понадобится периодически к ним обращаться.

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 1

Рис.1 Дизайн-макет главной страницы

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 2

Рис.2 Прототип сайта

Теперь перейдем непосредственно к написанию разметки главной страницы сайта. И начнем мы с шапки, где пропишем все, что касается фавикона, названия сайта и ключевой фразы.

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

Исходя из такого расположения элементов, разобьем описываемую часть шапки на три блока: фавикон и название сайта объединим в блок <div> с атрибутом класса "hdr-block", а два фрагмента ключевой фразы разместим в блоки <p>.

Класс "hdr-block" здесь назван, как сокращенное от "header block", обозначающее блок заголовка. В дальнейшем, при присвоении атрибутов, всегда будут прописываться названия на английском языке (включая сокращенные) с учетом смыслового значения.

Для того, чтобы различать блоки <p> между собой (это необходимо для возможности в дальнейшим определить им разные смещения по горизонтали с левой стороны), присвоим им разные классы, соответственно "hdr-p1" и "hdr-p2".

И все эти элементы, в свою очередь, объединим в общий блок <div> с атрибутом класса "hdr-title", который будет являться составной частью шапки, наряду с блоком "меню."

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

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

  6. <meta name="Description" content="Краткое описание содержания страницы">

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. <div class="hdr-title">

  12. <div class="hdr-block">

  13. <img src="images/logo.gif" alt="Фавикон"/>

  14. <Η1>Название сайта</Η1>

  15. </div>

  16. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  17. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  18. </div>

  19. </header>

  20. <section>Ротатор</section>

  21. <main>Основное содержание</main>

  22. <aside">Сайдбар</aside>

  23. <footer>Подвал</footer>

  24. </div>

  25. </body>

  26. </html>

Рис.3

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

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 3

Рис.4

Что касается большого шрифта названия сайта, то это произошло от того, что данное словосочетание размещено в блоке <Η1>, являющимся заголовком 1-ого уровня. Поэтому, и увеличился размер шрифта в соответствии с установками браузера по умолчанию.

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

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

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

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

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

Это обусловлено тем, что на данный момент в каталоге сайта "www" пока еще нет папки "images" с картинкой "logo.jpg", которые прописаны в атрибуте тега <img> в строке 13. И поэтому, вместо изображения можно увидеть только знак картинки с ее названием, присвоенным в атрибуте "alt" этого же тега.

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

Что касается адреса, указанного в атрибуте "src" тега <img>, то здесь указанный путь отчисляется от того же каталога, в котором находится и страница. В данном случае наша главная страница находится в корневом каталоге "www".

Если бы эта страница находилась бы в каком-нибудь дочернем каталоге, то для того, чтобы указать путь для этой картинки, в самом начале адреса нужно было бы добавить слеш "/" или использовать для этого другую символику. Более подробно о том как указывать относительные адреса в HTML-коде, можно посмотреть в разделе "HTML: Абсолютные и относительные ссылки" справочника "Puzzleweb" по адресу "http://www.puzzleweb.ru/html/8_links2.php".

Разметка меню


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

Ниже показана страница, дополненная фрагментом HTML-кода, в части касающейся меню.

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

  6. <meta name="Description" content="Краткое описание содержания страницы">

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. <div class="hdr-title">

  12. <div class="hdr-block">

  13. <img src="images/logo.gif" alt="Фавикон"/>

  14. <Η1>Название сайта</Η1>

  15. </div>

  16. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  17. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  18. </div>

  19. <nav class="menu">

  20. <ul>

  21. <li class="activ"><a href="index.html">Главная</a></li>

  22. <li><a href="article.html">О маркировке стекол</a></li>

  23. <li><a href="action.html">Акция</a></li>

  24. <li><a href="righting.html">Запись на маркировку</a></li>

  25. <li><a href="contacts.html">Контакты</a></li>

  26. </ul>

  27. </nav>

  28. </header>

  29. <section>Ротатор</section>

  30. <main>Основное содержание</main>

  31. <aside">Сайдбар</aside>

  32. <footer>Подвал</footer>

  33. </div>

  34. </body>

  35. </html>

Рис.5

Элементу <nav> здесь присвоен атрибут класса "menu", для того, чтобы этот тег в дальнейшем можно было отличить от аналогичного тега, который будет размещен в футере сайта.

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

Само меню построено на элементе маркированного списка <ul>. В принципе, его можно сделать и на других элементах, например на теге <table>, прописав одну строку с необходимым количеством ячеек. Но, в любом случае, самым оптимальным вариантом построения меню являются списки, отличающиеся легкостью построения и простым HTML-кодом.

На рис.5 видно, что список меню обозначен парным тегом <ul> с вложенными в него отдельными пунктами списка, обозначенными тегами <li>. При этом, можно заметить, что одному элементу <li> присвоен класс "activ". Это сделано для того, чтобы в дальнейшем при назначении стилей CSS иметь возможность изменять внешний вид кнопок меню в зависимости от их активности.

В данном случае, первый элемент <li> имеет класс "activ", поэтому первая кнопка меню будет в нажатом состоянии. Остальные кнопки будут находиться в неактивном состоянии.

И последнее, что можно сказать о фрагменте этого кода, это об особенностях использования элемента <a>, который является одним из важнейших в HTML и предназначен для создания ссылок. В каждом пункте списка можно увидеть элемент <a> с атрибутом "href", в котором прописаны относительные адреса ссылок.

В данном случае, адреса ссылок у всех элементов одинаковы, так как у нас создана пока только одна главная страница, размещенная в файле "index.html". В дальнейшем, когда будут появляться и другие страницы, в элементы <a> будут прописываться соответствующие им адреса.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 4

Рис.6

Разметка футера


Ну, и последняя часть разметки, которую мы сегодня сделаем - это "Подвал", или футер, как часто еще его называют.

В футере в соответствии с макетом предусмотрено три элемента, это меню, копирайт и блок виджетов.

Что касается меню, то, как говорилось ранее, оно повторяет меню шапки. При этом, атрибуты классов здесь заменены на значения "ftr-menu" для класса тега <nav> и "ftr-activ" для пунктов списка <li>. В данном случае добавление "ftr" означает, что это меню относится к футеру (сокращенное от footer).

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

Далее, в соответствии с дизайн-макетом необходимо сформировать в левой части футера виджеты для вывода информации сторонних сервисов (обычно они используются для статистической информации счетчиков посещений).

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

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

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

  6. <meta name="Description" content="Краткое описание содержания страницы">

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. <div class="hdr-title">

  12. <div class="hdr-block">

  13. <img src="images/logo.gif" alt="Фавикон"/>

  14. <Η1>Название сайта</Η1>

  15. </div>

  16. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  17. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  18. </div>

  19. <nav class="menu">

  20. <ul>

  21. <liclass="activ"><a href="index.html">Главная</a></li>

  22. <li><a href="index.html">О маркировке стекол</a></li>

  23. <li><a href="index.html">Акция</a></li>

  24. <li><a href="index.html">Запись на маркировку</a></li>

  25. <li><a href="index.html">Контакты</a></li>

  26. </ul>

  27. </nav>

  28. </header>

  29. <section>Ротатор</section>

  30. <main>Основное содержание</main>

  31. <aside">Сайдбар</aside>

  32. <footer>

  33. <nav class="ftr-menu">

  34. <ul>

  35. <liclass="ftr-activ"><a href="index.html">Главная</a></li>

  36. <li><a href="article.html">О маркировке стекол</a></li>

  37. <li><a href="action.html">Акция</a></li>

  38. <li><a href="righting.html">Запись на маркировку</a></li>

  39. <li><a href="contacts.html">Контакты</a></li>

  40. </ul>

  41. </nav>

  42. <p><small>Copyright©2016 ”Название сайта”. Все права защищены</small></p>

  43. </footer>

  44. </div>

  45. </body>

  46. </html>

Рис.7

Что такое фавикон и для чего он нужен


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

Наверное, может возникнуть вопрос, а что такое фавикон и для чего он нужен?

Фавикон (favicon), или еще часто его называют просто фавиконкой - это небольшая картинка, представляющая собой значок, который предназначен для формирования бренда сайта и для лучшей его узнаваемости посетителями.

Этот значок постоянно сопровождает сайт и ссылки на него во многих местах, например, в адресной строке браузеров, в "Закладках" и "Избранном" браузеров, в результатах поиска поисковой системы Яндекс. Поэтому, наличие его является необходимым условием для качественного сайта.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 5

Рис.8

Далее, разместим во вновь созданной папке "images" файл картинки фавикона.

Так как у нас пока нет фавикона, сейчас для шапки сайта воспользуемся картинкой, которую возьмем из дополнительных материалов по ссылке в конце статьи. Этот файл там находится в папке "images" под наименованием "logo.gif"

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

Для увеличения / уменьшения размера изображения кликните по картинке
Делаем разметку шапки веб-страницы, картинка 6

Рис.9

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

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

Исходные файлы сайта


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

С уважением, Николай Гришин

Читать дальше


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments