Теги и атрибуты для подвала в html. Как правильно прижать плавающий футер к низу страницы
Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит «своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно «спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ
Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:
html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }
Для того чтобы приклеить подвал к низу страницы тег
html { height: 100%; } body { height: 100%; }
Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
Строчка кода «height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега
#content { padding: 100px; }
На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые «нейтрализуются » отрицательным значением отступа для футера (margin: -100px ) при установленном для него относительном позиционировании (position: relative ). Таким образом, с помощью отрицательного значения отступа мы «сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.
В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные
Усовершенствованный вариант
Рассмотренный выше способ того, как сделать футер внизу страницы «незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке «наслоения ».
Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна (wrapper ) значение этого свойства все равно меньше.
Вот более совершенный вариант:
CSS — код примера:
html, body { height: 100%; } .header { height:120px; background-color: rgb(0,255,102); } .main { min-height:100%; position: relative; background-color: rgb(100,255,255); } .footer { height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); }
Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0.
Вариант для подвала с нефиксированной высотой
Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?
Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display . Благодаря этому он будет отображаться как строка таблицы.
Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce - завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, креатива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.
Читайте также: 13 маркетинговых трендов в электронной коммерции 2019 года
Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.
Время просмотра (сек.) / Расстояние от верха страницы (пиксели)
Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.
Доля посетителей (%) / Расстояние от верха страницы (пиксели)
Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).
Исследование развеивает миф о том, что пользователи не прокручивают страницу до самого низа и не смотрят весь контент. Футер также важен для современного eCommerce сайта, даже имеет свои преимущества.
Идеи как оформить «подвал» (футер), примеры продающих дизайнов
Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.
1. Необходимая информация
Традиционно, в футере сайта освещаются требуемые организационно-правовые вопросы. Уведомления оформляются менее заметным текстом, что освобождает другие области страниц для более значимых элементов. Вот примерный список для рассмотрения:
- Отметки о копирайте
- Правовые оговорки
- Биллинговая информация
- Уведомление об использовании файлов cookie
Веб-сайту реализующему товар, нужно удовлетворять правовым требованиям и предоставлять информацию о порядке, сроках возврата. Расположение ее в футере, удобно как продающему ресурсу, так и посетителям.
Пример footer’a: Ив Роше
Интернет-магазин торговой марки Ив Роше: футер во весь экран с приятным дизайном из чередующихся слоев. Информирует о компании, инфраструктуре продающего сайта – от отслеживания заказа, до политики персональных данных. Тут же советы по использованию продукта, бонусы, акции
Пример footer’a: Lumity
На торговцев пищевыми добавками возлагается повышенная юр. ответственность. Есть немало вещей о которых они должны/не должны сказать на своем продающем сайте. Ссылки на правовую информацию выделены жирным для лучшей заметности.
Футер с красивым бэкграунд изображением очень органично вписывается в общий дизайн сайта. Нет четкой границы, скорее разделителем служит сам контент
Пример footer’a: Saddleback Leather Co
Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается
2. Негативное пространство – достаточность визуальной дистанции
Ограничивая число футерных линков не поскупитесь на отрицательное пространство – это окажет потрясающий эффект на визуальное восприятие и улучшит читаемость. Общее правило: при соблюдении визуальной иерархии, центральные элементы замечаются быстрее (можно использовать с выгодой!).
Пример footer’a: QUAY AUSTRALIA
С минималистичным стилем и фиксированным выпадающем меню, интернет-магазин может себе позволить просторный футер
Пример footer’a: Incase
О большом количестве микро-негативного пространства (между мелкими элементами) можно сказать так: пока вся необходимая информация присутствует, она разборчива и быстро воспринимаема – все нормально
Пример footer’a: Stumptown Coffee Roasters
Просторный футер кофейного сайта - отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями)
3. Завершающий призыв к действию
Читайте также: 30+ примеров и идей оформления кнопок целевого действия
Стильное оформление футера красноречиво говорит о самом ресурсе. Важно заметить: покупатель задерживается здесь чуть дольше, чем в остальных частях страницы. Удобным случай для еще одного, завершающего призыва к действию . Часто это подписка/рассылка, но можно связать СТА-призыв и с регистрацией аккаунта.
Пример footer’a: Greetabl
У Greetabl скромно оформленная нижняя часть страниц, включает призыв к подписке. При минимуме элементов призыв становится заметным, а гармонируя с бирюзовым фоном превращается в украшение сайта
Пример footer’a: Ecwid
Приятное оформление с призывами к действию в нижней части страниц. Структура конструктора продающих сайтов универсальна. Для миллиона своих клиентов он переведен на 35 языков
4. Плавающая корзина – повышение доступности продающего функционала
Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.
Пример footer’a: Lemonadela
Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя
5. Навигация в футере
Нижняя часть сайта идеально подходит для не часто просматриваемой информации: о компании, условиях предоставления услуг и политики конфиденциальности. В этом случае функция футера – всех спасти. Чувствуя себя потерянным в eCommerce среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…
Негативное пространство необходимо для читабельности контента. Вообще, «подвал» не для навигационных целей, в отличии от меню или карты сайта. Лишь в редких случаях, сайты электронной коммерции размещают в футере отдельные категории товаров (
Здравствуйте, уважаемые читатели блога сайт. Продолжаем тему блочной верстки, которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать как двух- , так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета.
Кроме этого в первых статьях, посвященных верстке сайта (), были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах.
Какие проблемы возникли с нашим макетом сайта
Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.
В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на его середине по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:
Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:
Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:
А в файле Style.css были прописаны следующие CSS свойства:
Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }
Ну, а сам макет выглядел примерно так:
Как видите, футер не прижат к низу и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код. Все тоже самое можно будет проделать и для двухколоночного, и для резинового макета тоже. Метод универсальный.
Как прижать футер к низу макета сайта
Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.
Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:
Body, html { margin:0px; padding:0px; height: 100%; }
На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.
Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:
Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():
Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:
Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:
Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:
Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).
Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).
Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.
Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; }
А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:
Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):
Как видите, теперь полоса прокрутки в браузере не появляется и весь наш трехколоночный макет сайта на основе блочной верстки помещается в одном экране (в случае малого количества информации на странице) и имеет футер, расположенный в самом низу. Что нам, собственно, и требовалось сделать.
Вставляем распорку и боремся с Internet Explorer
Но возникает проблема , которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для него и который помог поднять наш подвал с наездом на основной контейнер макета.
Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.
Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:
А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:
#rasporka { height: 50px; }
В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.
Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.
Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.
Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:
#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }
С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:
Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.
Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:
* html #maket { height: 100%; }
Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.
Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:
Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }
Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
Можете также посмотреть видео «Работа с Html тегом div»:
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
Мы начинаем пятый урок посвященный редактированию шаблонов в 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.