Пришло время заняться непосредственно контентом нашего сайта.
Давайте начнем с шапки сайта. Нам нравится использовать отдельный файл для всего, что будет оставаться одинаковым на всем сайте: шапка, логотип, навигационное меню и т.д. Таким образом, если нам понадобится внести какие-либо изменения в эти элементы, у нас будет возможность отредактировать один файл, и все элементы на всех страницах будут изменены.
Для начала, давайте создадим новый PHP-файл под названием header.php (дабы не усложнять ничего). В нашем файле header.php мы разместили шапку сайту, которая содержит логотип (для данного руководства мы воспользовались логотипом Developer Drive). После лого следует навигационное меню – простого списка будет достаточно. Мы предпочли использовать несколько простых ссылок, которые вероятно каждый будет использовать на своем сайте, но вы можете использовать любые необходимые вам ссылки. Код нашего файла header.php выглядит следующим образом:
<div id="logo">
<img src="images/logo.png" alt="Developer Drive" />
</div>
<nav>
<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><a href="#">Contact</a></li>
</ul>
</nav>Теперь, сохранив файл, давайте продолжим. Закрывайте файл, так как с ним мы уже закончили.
Открывайте ваш файл index.php, и давайте начнем разработку контента. Начнем с того, что добавим div после указания нашего фонового изображения, а затем сделаем вставку нашего файла с шапкой, а закончим всё это дело внедрением небольшого пузырька. Когда все это будет выполнено, у вас должно получиться нечто вроде этого:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBG" data-speed="8" data-type="background">
<div id="container">
<header>
<?php include('header.php')?>
</header>
<div>
<h2>Allow us to take your idea and bring it to light</h2>
<p>Our team of creative thinking interactive developers
will establish your brand presence.</p>
</div>
</div>
<!--end div "container"-->
</div>
<!--end div "mainBG"-->
</body>
</html>Если вы сделаете предварительный просмотр проделанной работы, то у вас должно получиться нечто такое, что выглядит не очень опрятно.
Причиной того, почему все выглядит не очень опрятно, является тот факт, что мы пока еще не применяли к элементам стили. Как раз этим мы сейчас и займемся! Откройте свой файл main.css, и давайте начнем с тэга h2. Наш тэг мы оформили следующим образом.
h2 {
margin-left:-3.5%;
top:18%;
font-size:2.5em;
text-transform:uppercase;
text-align:center;
padding:0;
line-height:100%;
position:absolute;
width:107%;
}Далее мы собираемся установить id для контейнера, шапки и логотипа. В нашем примере мы использовали максимальную ширину равную 960 пикселям, чтобы большие элементы отображались на всю ширину, если сайт будет открываться на больших мониторах. В качестве минимальной ширины мы использовали 600 пикселей, что позволит контенту подстраиваться под разрешения меньших по размеру экранов. Для того чтобы центрировать контейнер, нам нужно установить параметр поля на 0 auto. То же касается и настроек ID шапки и логотипа.
#container {
max-width:960px;
min-width:770px;
margin:0 auto;
}
header
{
position:relative;
margin:0 auto;
top:25px;
}
#logo {
float:left;
}Вот разработка навигации будет немного сложнее, чем всё, что мы делали до этого, так как нам нужно равномерно расположить ссылки, применить стиль ко всему навигационному меню, а затем определить внешний вид списка. Мы предпочитаем начинать с самого большого, самого первого элемента. Другими словами, мы начнем работу с тэга nav, а потом перейдем к неупорядоченному списку ссылок внутри данного тэга.
Нам нужно применить кое-какие стили посредством тэга nav: ширину, расположение, поля, а затем применить нижнюю границу под навигационным меню.
nav {
border-bottom:3px solid #333;
width:642px;
float:right;
margin:26px 30px 0 30px;
font-weight:bold;
}Далее следуют пункты меню. Здесь мы определяем то, как нам нужно отображать список, отделяем ссылки друг от друга, а также применяем стиль, которым должны быть оформлены наши ссылки. В нашем случае, нам нужно, чтобы все пункты ссылок были выделены заглавными буквами.
nav ul li {
display:inline;
text-transform:uppercase;
list-style:none;
margin-right:4%;
}И, наконец, мы определяем то, как должны вести себя ссылки. Вы вероятно обратили внимание на класс «.last» в самом конце кода. Он исключает поле нашей последней ссылки и, таким образом, она больше не имеет нижней границы.
nav ul li a {
font-size:1.2em;
color:#333;
text-decoration:none;
}
nav ul li a:hover {
color:#C44F09;
}
.last {
margin-right:0;
}Если вы сейчас предварительно посмотрите на то, что у нас получилось, то поймете, что мы почти закончили. Все, что нам осталось, это оформить нашу аннотацию, и определить еще несколько атрибутов в media queries таким образом, чтобы наш сайт стал адаптивным.
В завершение нашей «большой» версии сайта нам нужно оформить класс blurb. Вместо того чтобы использовать изображение, мы решили применить закругленные углы CSS3, это позволит нам избежать необходимости загружать дополнительные PNG-изображения. У нас есть возможность установить высоту и ширину таким образом, чтобы окружность идеально масштабировалась вне зависимости от того, насколько будет уменьшено окошко браузера, но здесь важно учитывать необходимость сохранения пропорций. В противном случае ваша окружность превратится в овал или фигуру неопределенной формы.
.blurb {
position:absolute;
width:420px;
height:420px;
margin-left:3%;
background-color:#6BA5BD;
-moz-border-radius:210px;
border-radius:210px;
-webkit-border-radius:210px;
top:15%;
}
.blurb p {
position:absolute;
font-size:1.2em;
color:#fff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
bottom:28%;
width:89%;
margin-left:5%;
}Вот теперь, в предварительном просмотре, вы можете видеть плоды своего труда. Тем не менее, учтите то, что нам нужно проделать еще кое-какую работу с media queries для того, чтобы сайт стал адаптивным.
Для того чтобы охватить различия в различиях экранов разных планшетных ПК, мы решили так же использовать параметр CSS3 background-size:cover. Это позволит нам быть уверенными в том, что фоновое изображение заполнит весь экран, и не оставит никаких «просветов». Здесь также следует воспользоваться параметрами max-width и min-width, что означает, что наш логотип будет вытеснен в левую часть экрана. Мы можем исправить это за счет определения левого поля. Так как наш экран становится меньше, нам также нужно изменить размеры некоторых элементов типа тэга h2, размер аннотации и размер шрифта. Также нельзя забывать и про размер навигационных ссылок.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG {
background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG {
background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#container {
max-width:960px;
min-width:600px;
}
#logo {
margin-left:5%;
}
h2 {
font-size:2em;
}
.blurb {
width:320px;
height:320px;
top:20%;
}
.blurb p {
font-size:1em;
bottom:20%;
}
nav {
width:560px;
}
nav ul li a {
font-size:1em;
}
}Как только мы дойдем до мобильных устройств, нам необходимо будет немного сместить навигацию и шапку сайта, чтобы посетителям легче было найти ссылки и воспользоваться ими. Кроме этого, нам необходимо провести уже знакомую нам процедуру масштабирования. Но теперь уже таким образом, чтобы дизайн корректно отображался на экранах мобильных устройств.
@media only screen and (min-width: 0px) and (max-width: 767px) {
header {top:5px;}
#mainBG {
background: url(images/small.jpg) 50% 0 no-repeat scroll !important;
background-size: auto !important;
height:450px;
}
#container {
max-width:767px; min-width:0;
}
#logo {
margin:0 39%; padding:0;
}
h2 {font-size:1.1em;}
.blurb {width:180px; height:180px; top:130px; }
.blurb p { font-size:.6em; bottom:12%; }
nav {
width:91%;
float:left;
padding:0;
margin:0 4%;
text-align:center;
}
nav ul li { margin-right:2%; }
nav ul li a { font-size:.5em; }
}Теперь взгляните на результат своей работы в браузере, и не забудьте немного потягать окошко за уголок, чтобы увидеть, как сайт адаптируется под разрешение. Это и есть простенькая странички адаптивного веб-сайта. Не забывайте следить за новостями, так как мы будем рассказывать все новые и новые интересные вещи!
Скачать исходный код примера, разработанного в ходе руководства. Продолжение следует …
