Главная > Руководства > Разработка адаптивного веб-сайта – часть 7: внутренняя страница

Разработка адаптивного веб-сайта – часть 7: внутренняя страница


9 июля 2012, 12:25. Разместил: Design FactoRy
Сегодня мы собираемся приступить к завершению нашей серии статей о разработке адаптивного веб-сайта, рассказав вам о том, как сделать внутренние страницы, на которых можно будет разместить важный контент. Очень важно, чтобы структура и дизайн сайта оставались привлекательными и опрятными, так как на это посетитель смотрит в первую очередь.

Если вы не читали 6 наших предыдущих статей из этой серии, то мы настоятельно рекомендуем вам ознакомиться с ними:

Разработка адаптивного веб-сайта: фоновые изображения
Разработка адаптивного веб-сайта – часть 2: навигация и контент
Разработка адаптивного веб-сайта – часть 3: слайдер работ на главной странице
Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице
Разработка адаптивного веб-сайта – часть 5: подвал
Разработка адаптивного веб-сайта – часть 6: подвал – продолжение

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

Для начала давайте ознакомимся с тем, над чем мы сегодня будем работать. Вы также можете скачать предыдущие исходники материалов.

Разработка адаптивного веб-сайта – часть 7: внутренняя страница

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

Открывайте файл index.php и сохраняйте его под именем services.php. Как только вы сохраните ее под новым именем, нам нужно будет удалить некоторое ее наполнение. Начнем с головной секции нашего документа – удалим большую часть Java-скриптов и ссылок, за исключением 2 строк кода, следующих за указателем нашего файла стилей. Эти две строки подгружают jQuery и javascript, необходимые для корректной работы (да и вообще для работы) нашей рассылки из Twitter, расположенной в подвале. Остальные ссылки на Java можно удалить, они нужны были лишь для того, что используется на главной странице.

Теперь наш раздел «head» выглядит следующим образом:

<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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
</head>

Мы переименуем наш div «mainBG» в «services». Далее мы изменим класс «homeContent» на «servContent». Также не забудьте переименовать указатель, который закрывается наш div services из «mainBG» в «services».

Далее нам нужно исключить наш класс blurb, а затем, наконец, уберем целую секцию «mainBG2», которая содержала информацию для слайдера портфолио на главной странице.

На данном этапе ваша страница должны выглядеть следующим образом.

<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script> </head>

<body>

<div id="services" class="servContent" data-type="background">

<div id="container">

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

</div><!--end div "container"-->

</div><!--end div "services"-->

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

Давайте добавим разделы, которые будут содержать и оформлять наш контент. Начнем с того, что обернем весь наш контент в id "servPageContent". Далее, внутри этого тэга мы разместим класс "whatWeDo", двойную дозу "servColumns" и четырехкратную помощь "servCats". В качестве контента нам понадобится любой текст-наполнитель, поэтому вы можете использовать любой материал.

Теперь наша страница услуг выглядит следующим образом:

<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
</head>

<body>

<div id="services" class="servContent" data-type="background">

<div id="container">

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

<div id="servPageContent">

<div class="whatWeDo"><h4>What Can We Do For You?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue leo, imperdiet id molestie eu, volutpat sed eros. Praesent ut scelerisque augue. Proin ante nisl, consectetur ut venenatis nec, egestas quis massa. Nullam est sapien, mollis vitae tristique in, tristique eu elit. Mauris orci sem, tempus eu congue et, rutrum ut elit. Donec fringilla euismod varius. Proin quis purus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie, diam ac ultrices consectetur, justo orci egestas massa, vitae gravida eros tortor id tellus. Morbi in quam nec quam gravida rhoncus a at nulla.</p>
</div><!--end div "whatWeDo"-->

<div class="servColumns">
<ul>
<li><h5>Let us help you</h5></li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div><!--end div "servColumns"-->

<div class="servColumns">
<h4>Our Team</h4>
<p>Vivamus convallis, est vel gravida suscipit, risus urna aliquet lectus, nec bibendum sapien orci a elit. Aliquam pretium ipsum eu dui venenatis id viverra tellus dapibus. Mauris imperdiet ligula id odio consectetur eget lobortis orci elementum. Praesent commodo luctus ornare. Duis pharetra sollicitudin ante, id dictum diam placerat cursus. Ut rutrum eleifend nisl, vitae egestas dui consectetur eget. Aliquam erat volutpat. Mauris sed lorem ut nunc molestie imperdiet. Pellentesque vehicula ligula et felis mollis malesuada. Aliquam leo metus, ultrices rutrum tempor nec, eleifend ac velit.</p>
</div><!--end div "servColumns"-->

<div class="servCats">
<p><a href="#">Digital Media</a></p>
</div><!--end div "servCats"-->

<div class="servCats">
<p><a href="#">Print Media</a></p>
</div><!--end div "servCats"-->

<div class="bubbles34">
<div class="servCats">
<p><a href="#">Social Media</a></p>
</div><!--end div "servCats"-->

<div class="servCats">
<p><a href="#">Content & SEO</a></p>
</div><!--end div "servCats"-->
</div><!--end div "bubbles34"-->

</div><!--end div "servContent"-->

</div><!--end div "container"-->

</div><!--end div "services"-->

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

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

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

Начало нашего CSS-кода для страницы services следует сразу же за кодом основного шаблона для главной страницы, и представляет собой следующее:

/* -------------------Services Page ----------------------------------*/
#services {
background: url(images/servicesBig.jpg) no-repeat fixed;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

#servPageContent {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
}

.servContent {
width: 100%;
height:100%;
position: relative;
margin: 0 auto;
}

Next we’ll apply some basic styling and positioning to our text elements.

.whatWeDo {
margin:5% 10%;
width:85%;
float:left;
}

.servColumns {
float:left;
width:35%;
margin-left:10%;
}

.servColumns ul li {
list-style:none;
margin-left:10%;
border-right:3px solid #6BA5BD;
}

И наконец, мы обворачиваем контент блоками с закругленными углами, чтобы привлечь внимание посетителей страницы. Это поможет нам сконцентрировать их внимание на значимых элементах. Здесь нет ничего такого сверхъестественного, что потребовало бы дополнительного разъяснения. Вы сами можете регулировать градус окружности, просто не забывайте о том, что радиус окружности должен составлять половину указанной ширины окружности.

.servCats {
float:left;
width:150px;
height:150px;
margin-left:9%;
background-color:#6BA5BD;
-moz-border-radius:75px;
border-radius:75px;
-webkit-border-radius:75px;
}

.servCats p {
width:150px;
text-align:center;
margin-top:40px;
}

.servCats a {
color:#fff;
font-size:1.8em;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
}

.servCats a:hover {
color:#474e51;
}

Сохраните CSS-файл и проверьте результат работы! Похоже ли на пример, приведенный выше? Разделение блоков на три секции и отображение их в виде сетки позволяет нам привлечь внимание посетителей, так как текст представлен в более творческой манере. Представьте себе, насколько уныло выглядела бы страница, если бы текст был представлен сплошным полотном, занимающим весь экран?

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