Код шапка сайта html: Шапка | HTML | CodeBasics

Шапка сайта — Книга по MaxSite CMS

← Каталог модулей StoreШаблоны заголовков →

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

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

Рассмотрим для примера компонент Header2.

Его следует выбрать во вкладке Компоненты. Во вкладке Дизайн выбрать menu2.css.

В Header2 всего одна настройка, которая представляет собой т.н. секционные опции. Они очень похожи на юниты главной, где каждая секция представляет собой пару «ключ = значение». В отличие от юнитов, где используются только секции [unit], в секционных опциях секции могут именоваться произвольно (так как задумал автор компонента).

В данном случае мы видим, что Header2 используются секции:

• site
• block
• social

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

Если бы не секционные опции, то пришлось бы делать очень много «обычных» опций. Кроме того, секционные опции позволяют произвольно менять количество блоков для вывода. Например если нужно оставить только один блок телефона, то второй блок с email достаточно просто удалить. Точно также, если нужно добавить ещё один блок, то всё что нужно сделать, так это вставить ещё одну секцию. С обычными опциями такой вариант реализовать очень сложно.

Секция site управляет первым блоком шапки.

• name — здесь указывается название сайта
• name-class — это css-классы для названия
• description — блок описания
• icon — css-классы иконок
• effect — эффекты меню (0 или 1 — это фиксация меню)

В CSS-классах вы уже немного ориентируетесь.

• t-robotoslab — шрифт Roboto Slab
• t180 — размер шрифта в процентах от базового (16px)
• pad0-phone — установить padding: 0 для экранов телефонов (менее 667px)
• t-center-phone — сделать выравнивание по центру для телефонов
• hover-t-cyan700 — цвет текста cyan700 при наведении курсором (hover)

В качестве иконок в Default шаблоне используется иконочный шрифт FontAwesome 5. В этой библиотеке для того, чтобы задать иконку используется два css-класса — первый это шрифт, а второй — символ. Например fab указывает на шрифт brand, fas — solid, far — regular.

Классы иконок имеют единый префикс «fa-», после чего идет код иконки. Например fa-google-wallet указывает на иконку «google-wallet».

В галерее FontAwesome 5 вы можете подобрать иконку для своего сайта. Выбор там достаточно большой — более 1500 иконок.

Секции block содержат данные для средних блоков шапки. Они выводятся последовательно так, как указаны в опциях.

• name — заголовок блока
• icon — классы иконки
• href — адрес ссылки (можно использовать код [ siteurl], который заменится на адрес сайта)
• link — название/текст ссылки

Секции social выводятся просто как иконки.

• class — классы иконки
• href — адрес ссылки
• title — всплывающая подсказка

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

Когда возможностей компонента недостаточно, то лучшим вариантом будет создание своего компонента, где будут учтены все ваши пожелания. Технически компоненты — это обычный html-код. Если компонент делается «под себя», то можно не создавать для него опции, а сразу прописать все тексты, иконки, ссылки и т.п. в файле. При необходимости его можно поправить прямо в админ-панели. Если же использовать опции, то это потребует создания более сложного php-кода компонента, что делает такие операции недоступными для новичков.

Но в любом случае, следует понимать, что создание компонента потребует хотя бы минимального знания HTML и умения ориентироваться в классах Berry CSS.

Так же вам следует знать, что Default шаблон содержит ещё один css-фреймворк Bootstap 4, который состоит из множества готовых элементов. Для их использования во многих случаях будет достаточно просто скопировать предлагаемый код в файл компонента.

Универсальные компоненты «Any» и «File»

Если вам нужно сделать какой-то несложный компонент, то можно воспользоваться Any1 (и Any2). Например если вам нужно разместить в шапке рекламный баннер, то не обязательно создавать отдельный компонент. Достаточно разместить код в опции Any1.

Компонент File1 (и File2) похожи на Any1, только код размещается в отдельном php-файле и просто указывается его имя. File1 часто используется вебмастерами при создании шаблонов, особенно, если предполагается сразу несколько дизайн-блоков. Здесь вместо того, чтобы заниматься копированием в Any1, достаточно указать имя нужного файла.

Компонент LightSlider

Компонент слайдера больше демонстрационный, поскольку любой слайдер сам по себе должен иметь какое-то целевое назначение, а не быть простой «листалкой» картинок. Настройки слайдера также выполняются через секционные опции. Секция options похожа на то, что мы рассмотрели выше, а вот секции js и slide устроены немного по другому.

В них нет пары «ключ = значение», а используется всё содержимое секции. В js это js-параметры слайдера (то на чём он написан), а в slide указывается полный html-код каждого слайда.

Кроме компонента шапки, LightSlider можно вывести как блоки юнитов. В комплект Default-шаблона входит unit-файл lightslider.php (как и last-pages.php), который подключает необходимый код слайдера. После этого вторым юнитом указывается html-разметка слайдера.

- первый юнит — подключает LightSlider
- здесь же указываются его опции
[unit]
file = lightslider.php
element = .lightslider
js_file = components/lightslider/lightslider.js
loop = 1
pager = 1
auto = 1
rtl = 0
mode = slide
item = 1
speed = 400
pause = 2000
controls = 1
vertical = 0
verticalHeight = 400
adaptiveHeight = 0
slideMargin = 10
[/unit]
- второй юнит, который формирует html-код слайдера
[unit]
html = _START_
<ul>
  <li>
      <h4>First Slide</h4>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h4>Second Slide</h4>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
</ul>
_END_
[/unit]

Опции слайдера вы можете посмотреть на официальном сайте (версия v1.

1.5)

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

- первый юнит подключает js-код слайдера
[unit]
file = lightslider-js.php
[/unit]
- второй — выводит сам компонент
[unit]
component = lightslider
[/unit]

Ключ component указывает на каталог компонента. В данном примере будет выведен LightSlider. Здесь используется два юнита из-за особенностей строения самого слайдера, в других компонентах достаточно будет одного юнита с ключом «component».

← Каталог модулей StoreШаблоны заголовков →

Тег header. Классы, селекторы и свойства в CSS

Начало урока. Разбор файла index.html

В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:

<header>
</header>

Верхнюю часть сайта, называемую «шапка», помещают в специальный тег <header></header>.

На вашем сайте в <header></header> будет вся красная верхушка, как на imdiz.ru/store/:

Цвет фона для header я задал свойством background в style.css. Если Вы еще не открыли файл style.css в SublimeText, то откройте.

Сейчас у Вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:

Разбор файла style.css

Разберем файл style.css и заодно познакомимся с CSS.

Сперва пропустим верхнюю часть кода и перейдем к участку:

.header{
	background: #cb2d41;
	height: 100px;
}

Говоря по-русски, благодаря этому коду браузер будет искать в index.html тег с классом header и задаст этому тегу цвет фона #cb2d41 и высоту 100px.

А теперь по-подробнее.

Этот код задает стили для <header>, который находится в index.html. Здесь задан цвет фона (background) и высота (height). 

Посмотрите на картинку ниже, на ней изображена структура стилей в CSS:

То есть структура следующая. Сперва пишется селектор, в нашем случае это класс .header. Именно по селектору браузер определяет, для какого тега в index.html нужно применить CSS-свойства. В фигурных скобках прописываются нужные CSS-стили для этого селектора: свойство и значение этого свойства.

#cb2d41 — такой формат задания цвета называется HEX. Это наиболее частый формат в верстке сайтов. Цвет можно задать просто английским словом, например, background: red. Но чаще (а точнее, практически всегда) применяется именно формат HEX.

В index.html я задал тегу header класс «header». И в style.css задал стили для этого класса — .header. В CSS точка перед названием селектора означает, что это селектора класса. Есть и другие селекторы, с ними Вы сможете познакомиться в следующих уроках.

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

Кстати, название класса может быть абсолютно любым, хоть abcdef, но все-таки удобнее называть классы по смыслу элемента. У нас таким элементом является тег <header>, и здесь можно не выдумывать велосипед и назвать класс тоже header.

В нашем коде для .header помимо background задана еще и высота height: 100px;. Сейчас эту высоту я задал только для наглядности, чтобы Вы могли увидеть <header></header> в браузере.

Дело в том, что, если блок сайта пустой и внутри него нет никакого контента (текста, изображения, видео), то высота этого блока равна 0, и Вы этот блок не увидите в браузере. В следующих уроках высота у .header будет убрана.

Переопределение стилей браузера. Инструменты разработчика в браузере

Теперь в Вашем style.css вернитесь к участку кода:

html, body{
	margin: 0;
}

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

Этот код равнозначен следующему:

html{
	margin: 0;
}
body{
	margin: 0;
}

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

А теперь о том, для чего нужен этот участок кода. Если Вы удалите этот участок кода и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски). Это потому, что в каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы (в CSS для этого используется свойство margin). Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.

 

С инструментами разработчика удобнее работать, когда окно открыто внизу. Для того, чтобы его перенести вниз, нажмите справа на 3 точки, и в открывшемся окошке выберите нужное расположение. Смотрите видео:

В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-тега. Если Вы нажмете на <body>, то справа в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;.  Задав в style.css margin: 0; я

переопределил стиль margin для тегов html и body.

Комментарии в HTML

Помните в начале урока написано, что новые участки кода находятся между <!— New —><!— End —>. Сами <!— New —> и <!— End —> никак не отобразятся в браузере. С помощью <!—  —> осуществляется комментирование в HTML. Всё, что Вы поместите внутрь данной конструкции не отобразится в браузере, оно будет закомментировано. С помощью комментариев можно помещать какие-то подсказки для себя. Также, комментировать можно некоторые участки кода, чтобы временно их скрыть, при этом не придется их удалять.

 

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

Конец урока. В данном уроке вы узнали:

background — CSS-свойство для задания фона HTML-элемента

height — свойство для задания высоты

margin — внешние отступы

<header></header> — тег для «шапки» сайта.

Блок не отображается на сайте, если он пустой или ему не задана высота.

Стандартные стили браузера нужно переопределять.

В Google Chrome и Yandex Browser есть инструменты разработчика, которые  вызываются клавишей F12.

Стили в CSS задаются через селекторы. В качестве селектора нужно стараться выбирать класс HTML-элемента.

Тег заголовка HTML

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Заголовок для <статьи>:

<статья>
  <заголовок>

Здесь заголовок

   

Автор: Джон Doe

   

Дополнительная информация здесь

 
 

Lorem Ipsum dolor set amet….