—»     —»   Разработка адаптивного веб-сайта – часть 5: подвал
  Раздел: Руководства   Комментариев: 2  

Разработка адаптивного веб-сайта – часть 5: подвал

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

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

Но нам кажется, что если на страницах сайта присутствует длинный вертикальный скроллинг, то было бы неплохо разместить уменьшенную версию навигационного меню в подвале сайта. Это позволит посетителю перейти на другую интересующую его страницу сразу, как только он достигнет самого низа текущей страницы. Также, посредством небольшого скрипта jQuery, мы добавим в подвал элемент, отображающий последние записи в социальной сети Twitter, а также не стоит забывать и про контактную информацию. Перед тем, как начать разработку, давайте посмотрим на результат.

Разработка адаптивного веб-сайта – часть 5: подвал

Так же, как и в случае с шапкой сайта, здесь мы предпочитаем использовать отдельный файл подвала, а затем динамически подгружать его посредством php.

Это позволит нам без труда обновлять данные контактов (если их нужно будет поменять) или добавить какую-либо ссылку в меню. Открывайте свой файл index.php, и внедрите в код подвал. В нашем документе мы включили подвал сразу перед закрывающим тэгом body, и получили следующий код:

<footer>
<?php include('footer.php') ?>
</footer>

На этом мы закончили работу с файлом index.php, и теперь нам нужно сохранить его и закрыть. Далее мы займемся созданием файла подвала и заполнением его контентом. Открывайте новый документ и сохраняйте его под именем «footer.php». Первый тэг, который мы впишем в этот документ, будет id контейнера.

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

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

<div id="container">
<div class="footerLeft">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<img src="images/blogger.png" />
<img src="images/linkedin.png" />
<img src="images/facebook_icon.png" />
<img src="images/twitter.png" />
</div><!--end div "footerLeft"-->
</div><!--end div “container”-->

В центральном разделе мы разместим рассылку из Twitter’а посредством всего 3 простых строк кода и изображения, обернутого в класс под названием «twitter». Наш контент уже оборудован jQuery, и определит класс twitter как соответствую область для публикации последних твитов. Об этом мы подробнее расскажем в следующем руководстве.

<div class="twitter">
<img src="images/twitter-preview.png" />
</div><!--end div "twitter"-->

Наконец, нам нужно разместить некоторую контактную информацию, которую мы так и назовем «contact». Здесь мы без труда отобразим информацию посредством абзаца и переноса строки.

<div class="contact">
<p>Developer Drive<br>
123 Fake St.<br>
Cupertino, CA 95014<br>
P: 650-555-1212<br>
F: 650-555-1213</p>
</div><!--end div "contact"-->

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

<div id="container">
<div class="footerLeft">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<img src="images/blogger.png" />
<img src="images/linkedin.png" />
<img src="images/facebook_icon.png" />
<img src="images/twitter.png" />
</div><!--end div "footerLeft"-->

<div class="twitter">
<img src="images/twitter-preview.png" />
</div><!--end div "twitter"-->

<div class="contact">
<p>Developer Drive<br>
123 Fake St.<br>
Cupertino, CA 95014<br>
P: 650-555-1212<br>
F: 650-555-1213</p>
</div><!--end div "contact"-->
</div><!--end div "container"-->

Теперь, когда весь контент расположен там, где должен быть, мы можем приступить к его оформлению. Наш стандартный HTML5-тэг footer позволяет нам выставить высоту, цвет и стиль шрифта, размещенного в подвале. Мы также задали подвалу тоненькую верхнюю границу, чтобы посетители без труда могли отличить его от основного раздела с портфолио.

footer {
height:250px;
background-color:#C15007;
border-top:10px solid #EDEAE5;
color:#fff;
font-weight:bold;
font-weight:.8em;
}

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

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

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

.footerLeft {
color:#fff;
float:left;
width:380px;
height:150px;
border-right:1px solid #fff;
margin-top:5%;
padding-top:2%;
}

.footerLeft ul li{
display:inline;
text-transform:uppercase;
list-style:none;
margin-right:2%;
}

.footerLeft ul li a {
font-size:.8em;
color:#fff;
text-decoration:none;
font-weight:bold;
}

.footerLeft ul li a:hover {
text-decoration:underline;
}

.footerLeft img {
float:right;
margin:5% 2% 5% 0;
}

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

.twitter {
width: 35%;
height:150px;
float:left;
margin-top:5%;
padding:2% 2% 0 2%;
border-right:1px solid #fff;
color:#fff;
font-weight:bold;
font-weight:.8em;
}

.twitter img {
float:left;
margin-bottom:100px;
margin-right:5%;
}

.twitter .tweet a {
text-decoration: none;
color:#6BA5BD;
font-weight:bold;
font-weight:.8em;
}

.twitter .tweet a:hover {
text-decoration: underline;
}

.twitter .tweet .time {
font-size:10px;
font-style:italic;
color:#FFD08C;
}

И наконец, мы добавляем немного пространства в раздел с контактами.

.contact {
float:left;
margin-top:5%;
padding:2% 2% 0 2%;
}

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

Скачать исходный код примера, разработанного в ходе руководства.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, Footer
Опубликовал Design FactoRy   Прочитано (раз): 14656   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 июня 2012 @ 22:45
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Уважаемый админ Design FactoRy, статься очень понравилась...
Просьба только одна, не могли бы Вы в будущем, в таких сборных уроках, которые разбиты на части в самом начале или конце давать ссылки на предыдущие части данной темы fellow (дабы снизит время на переход к статьям более раннего написания)...
Заранее Спасибо!

P.S.: Ваш постоянный читатель winked


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 19 июня 2012 @ 23:47
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
ITS, хорошо. Будет учтено.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031