Сегодня мы займемся разработкой подвала нашего сайта. Нам всегда нравились веб-сайты, в подвале которых размещаются очень полезные и интересные вещи. Конечно же, бывают случаи, когда кроме информации об авторском праве и контактных данных вряд ли следует размещать ещё что-либо.
Но нам кажется, что если на страницах сайта присутствует длинный вертикальный скроллинг, то было бы неплохо разместить уменьшенную версию навигационного меню в подвале сайта. Это позволит посетителю перейти на другую интересующую его страницу сразу, как только он достигнет самого низа текущей страницы. Также, посредством небольшого скрипта jQuery, мы добавим в подвал элемент, отображающий последние записи в социальной сети Twitter, а также не стоит забывать и про контактную информацию. Перед тем, как начать разработку, давайте посмотрим на результат.
Так же, как и в случае с шапкой сайта, здесь мы предпочитаем использовать отдельный файл подвала, а затем динамически подгружать его посредством 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’а. А пока что, вы и сами можете попробовать свой навык в разработке адаптивных сайтов, и самостоятельно сделать подвал адаптивным.
Скачать исходный код примера, разработанного в ходе руководства.