УРОК 2. СОЗДАЕМ ШАБЛОН САЙТА

ОСНОВНЫЕ БЛОКИ

Современные сайты конструируются по принципу блочной верстки.

В HTML5 появились новые элементы, помогающие определять разные части документа и упорядочить его структуру. В HTML5 документ (в отличии от предыдущих версий) делится на несколько основных разделов, и структура сайта практически не зависит от тегов <div> и <table>.

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

Большинство современных сайтов построены по следующему шаблону:

шаблон сайта

Верхняя область сайта (Заголовке), как правило, содержит лого­тип, название организации, контактную информацию и т.п.

Под заголовком находится меню навигации

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

В нижней части шаблона (футере) обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.

С учетом новых элементов HTML5 шаблон будет такой

шаблон сайта в  HTML5

 

<header> — ШАПКА

Один из новых элементов HTML5. В отличии от тега <head>, который предназначен для хранения информации обо всем документе, <header> используется только для тела документа или для его разделов. В блоке находится логотип организации, её наименование, контакты и ряд других элементов. См. пример шапки магазина «Эльдорадо»

шапка сайта эльдорадо

Зададим заголовок сайта

заголовок сайта h1 h1 – заголовок первого уровня

 

<nav> — НАВИГАЦИЯ

 Тег меню сайта <nav> находит после тега <header>. Элемент <nav> предназначен для определения навигацион­ных элементов (главное меню или другие элементы навигации). Используйте его только для этих целей.

навигация сайта МВидеоСформируем код меню

навигация сайта

Внутри <nav> используются 2 тега:

<ul> — тег списка

<li> — тег элементов списка

<section> — ОСНОВНАЯ ИНФОРМАЦИЯ

блок sectionВ этом блоке находится основной контент страницы (текст, фото, видео)

 

 

 

 

<aside> — БО­КОВАЯ ПАНЕЛЬ

Блок <aside> может располагаться справа и слева, содержать дополнительное меню, баннеры или виджеты. См. пример боковой панели

пример боковой панели

боковая панель asideВ нашем случае он будет находиться под блоком <section>.

 

<footer> — ПОДВАЛ

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

подвал сайта ИЭП ННГУ

Тэг подвала   <footer>

подвал сайта

 

 

 

 

 

 

 

 

Основные блоки шаблона мы прописали

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

Войти с помощью: