×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Делаем разметку шапки и футера 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".

скриншот 31

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


Теперь перейдем ко второй части шапки - навигационному меню, где за основной блок меню возьмем элемент <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