Как с помощью CSS прижать footer к низу окна браузера. Новые теги Footer html оформление
Этот тег может использоваться, как и предыдущие теги несколько раз на странице. Вы, наверное уже догадались из названия, что он является подвалом страницы. В нём можно располагать счетчики, текст об авторских правах на сайт, контактные данные и т.п. Возможно также вставить панель навигации () в подвал страницы. Никто не запрещает вставлять и такие новые элементы, как aside и section, но я бы на вашем месте все-таки этого не делал.
и
Шапка сайта
Пост №1
Здесь мы будем писать текст первого поста.
Пост №2
Здесь мы будем писать текст второго поста.
В результате должен получиться следующий результат:
Из этого примера следует, что каждая отдельная статья или пост могут иметь свои элементы
Ну вот вы и познакомились с основными структурными элементами HTML5, а следующих уроках мы с вами рассмотрим ещё больше новых элементов, различные формы, которых не было в других спецификациях HTML!
Мы начинаем пятый урок посвященный редактированию шаблонов в CMS Joomla 3, на этот раз мы поговорим о футере для сайта. Разберем возможные варианты оформления футера и некоторые подходы к его созданию.
Что такое футер
Футером или подвалом сайта называют самую нижнюю его часть, в которой, как правило, содержится информация о сайте, об авторских правах и т.д. В стандартном исполнении в шаблоне Protostar , футер не содержит какую либо значимую информацию:
Стандартное содержание футера такое - текущий год, имя сайта и ссылка «Наверх» ведущая в начало страницы. Если честно такой вариант футера совершенно бесполезен посетителям нашего сайта, кроме того ссылка «Наверх» в нашем случае абсолютно не нужна, мы для этих целей уже сделали красивую кнопку .
Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):
А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:
По сути, мы удалили все что можно, оставив лишь возможность вывода модулей в футере, за это отвечает строка:
Сохраняем индексный файл, переходим на сайт и обновляем страницу. Содержимое футера исчезло, этого мы и добивались. Теперь можно добавлять в футер новую информацию по своему усмотрению, но прежде чем её добавить стоит ответить на вопрос - а что может находиться в футере сайта?
Какую информацию отображать в футере сайта
Для того чтобы сделать футер эффективным в нем должна присутствовать информация которая может заинтересовать посетителей сайта. В зависимости от направленности сайта эта информация может отличаться. Вот небольшой пример той самой информации, которая может содержаться в футере:
- Дополнительное меню - это меню может дублировать уже существующее, либо быть уникальным. Дублировать меню в футер полезно, когда на Ваш сайт часто заходят с мобильных устройств, посетитель, пролистав страницу в самый низ, может воспользоваться дополнительной навигацией по сайту.
- Контактная информация - для продающих сайтов, либо для сайтов которые оказывают различные услуги наличие контактной информации просто необходимо, а в футере ей самое место.
- Кнопки социальных сетей - в современном мире социальные сети для многих людей это есть все, поэтому подобная информация лишней никогда не будет.
- Различные ссылки - например, ссылки на карту сайта, ленты новостей и т.д.
- Виджеты - можно вывести в футер информацию отражающую активность на сайте, счетчики посещаемости, последние комментарии и т.п.
- Реклама - наступает момент, когда хочется получить от сайта не только его наличие, но и прибыль, в этом случае футер может быть не плохим контейнером для рекламы.
Не пытайтесь впихнуть в футер своего сайта все вышеперечисленное, переизбыток информации, как и его отсутствие, так же ни к чему хорошему не приведет.
С другой стороны не важно, какая информация будет содержаться в футере вашего сайта, главное чтобы она вписывалась в общий дизайн и была красиво оформлена.
Создание футера для сайта
Теперь давайте отбросим теорию и приступим непосредственно к созданию футера. Способов формирования футера может быть несколько:
- Автоматический - подразумевает использование различных модулей для вывода определенной информации
- Ручной - модули не используются, все изменения вносятся вручную по средствам редактирования файлов шаблона
- Смешанный - в данном случае используются оба вышеперечисленных варианта совместно
Каждый из способов по-своему хорош, например, на первоначальном этапе использование модулей значительно упростит задачу, а метод когда модули не используется, ускорит загрузку страницы. В любом случае выбор остается за Вами.
Для того чтобы рассмотреть все возможные варианты я остановлю свой выбор на третьем варианте. Таким образом, у Вас будет общее представление, что и как редактируется.
В качестве примера я решил разбить футер на три вертикальные части, слева будут выведены ссылки на определенные страницы сайта, в центре будет некое подобие логотипа, справа выведем небольшой текст. За отображение левой и правой части футера будут отвечать модули, а логотип пропишем руками в индексном файле.
Для начала создадим новые позиции для модулей в футере (как это сделать мы говорили на уроке по настройке и редактированию шаблонов) в количестве двух штук. Так как они будут располагаться в левой и правой части футера то и имя у них получилось соответствующее - footer-left и footer-right . Объявляем их в файле templateDetails.xml .
Теперь вносим изменения в индексный файл шаблона, мой код получился таким:
baseurl . "templates/". $this->template . "/images/joom4all.png"?>" />
И для наглядности скриншот:
Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:
На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:
- - начало php кода
- echo - отвечает за вывод строки
- $this->baseurl - данная строка возвращает имя сайта
- templates/ - тут мы указываем, что изображение хранится в папке templates
- $this->template - возвращает имя текущего шаблона
- /images/joom4all.png - путь до изображения внутри корневой папки шаблона и имя файла с изображением
- ?> - конец php кода
В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.
Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.
Теперь создадим несколько модулей, которые выведем в только что созданных новых позициях. Первый модуль будет выводить меню в футере, а второй небольшой текст.
На следующем этапе создаем модули - для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:
Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:
Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:
Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:
Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:
Результат хоть и есть, но не сильно впечатляет. Теперь нам необходимо более адекватно оформить элементы футера при помощи CSS.
Для начала оформим новые блоки футера:
Foot-left, .foot-center{float: left;} /*выравнивание блоков футера*/ .foot-left {width: 20%;} /*ширина левого блока*/ .foot-center {margin-left: -6px;} /*отступ центрального блока*/ .foot-right { /*правый блок*/ float: none; height: 60px; }
Следующий кандидат на оформление это меню, к которому я применил следующие стили:
Ul.nav.menu_footer {margin: 0;} /*нулевые отступы у меню*/ ul.nav.menu_footer li { /*оформление текста меню*/ font-family: "Lobster", cursive; font-size: 16px; line-height: 18px; } ul.nav.menu_footer li.item-179 a { /*пункт меню Карта сайта*/ margin-left: 15px; color: #fc8f30; } ul.nav.menu_footer li.item-180 a { /*Пункт меню О сайте*/ color: #5aa426; border-top: 3px solid #5aa426; } ul.nav.menu_footer li.item-181 a { /*Пункт меню Контакты*/ margin-left: 45px; border-bottom: 3px solid #0f70ad; color: #0f70ad; }
И в завершении отделяем футер от основной части контента:
Footer.footer hr {border-top: 3px solid #fc8f30;} /*отделяем футер от основного контента*/
Сохраняем файл стилей, переходим на сайт и смотрим на результат:
Вот мы и создали футер для нашего сайта, который смотрится гораздо веселее, чем стандартный. На этом данный урок считаю заершенным, а в следующем уроке мы проверим возможные ошибки адаптивного дизайна и исправим некоторые недочёты. Кроме того советую почитать статью о том как создать шаблон Joomla 3 и в частности футер с нуля быстро при помощи Bootstrap.
Часто при установке , кнопок, баннеров и т.п. возникает необходимость вставки html, css и JavaScript кодов
в в тело тегов body и head. Некорректное выполнение этой операции вручную, может повредить сайт и даже полностью нарушить его работоспособность.
Для автоматизации этого процесса создан замечательный плагин , зайдите в настройки в админпанели и с удовольствием работайте. Он легкий в использовании и имеет следующие функции:
Чтобы увеличить картинку щелкните по ней кнопкой мышки. Чтобы уменьшить щелкните ещё раз.
1. Page Head and Footer (Заголовок и подвал страницы) . Добавление кода в главной страницы сайта.
Code to be added on HEAD section of the home (код, который надо вставить в заголовок домашней (главной) страницы). Позволяет вставить мета теги, коды рекламных баннеров, кнопок и т.п. в тело тега
. Чаще это невидимая часть кода для отсутствия на сайте визуального показа. Результат работы видимой части кода появится над шапкой на главной странице.Code to be added on HEAD section of every page (код, который надо вставить в заголовок каждой страницы). Добавление кода в тело тега
в раздел HEAD. Результат работы видимой части кода появится над шапкой на всех страницах, в том числе и на главной.Code to be added before the end of the page (код, который надо вставить в конец (подвал) страницы). Добавление кода в подвал на всех страницах перед закрывающим тегом
