Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Делаем правильную разметку css страницы с помощью div-блоков

Доброго времени суток, верные читатели и подписчики. Текущая публикация посвящается подробному разбору темы: «Блочная адаптивная разметка css-страницы». В этой статье я расскажу вам, что подразумевает под собой блочная верстка, в чем ее преимущества и какие инструменты для этого используются.

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

Кнуты и прянички

Блочная верстка веб-страниц – это метод разметки страниц блоками (слоями), которые создаются при помощи специального тега <div>.

Изначально разработчики использовали табличную верстку, однако она отошла на второй план после появления описываемого вида. Почему же так произошло? А все потому, что разметка страниц слоями обладает достаточно большим списком преимуществ и всего лишь парочкой недостатков. Давайте подробнее разберем каждый из них.

Вкусные пряники

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

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

<div class= “header”>…</div>

<div class= “content”>…</div>

<div class= “footer”>…</div>

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

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

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

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

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


Камни преткновения

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

В блочной разметке все может показаться несколько сложнее. Особенно для новичка. Потому что вам необходимо хорошо разбираться не только в html-коде, а еще и знать большинство свойств css. Однако трудности возникнут только вначале при изучении технологий, а вот после жизнь покажется сказкой.

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

Простые техники создания адаптивности

Ну а теперь перейдем непосредственно к разбору нескольких простых механизмов по созданию адаптивности сайта. Для этого сверстаем простой макет страницы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
body{
padding:0;
margin:0;
background: url('http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg');
font-size: 19px;
color: #fff;
text-align: center;
 }
.header{
  background: rgba(80, 80, 80, .8);
padding: 24px;
border-bottom: 3px solid #B5B5B5;
}
.menu{
background: rgba(80, 80, 80, .5);
float: left;
font-size:33px;
padding: 16px;
text-align: left;
line-height: 1.5;
 height: 331px;
}
li{ list-style-type: none;}
.container{
 text-decoration: underline;
padding: 29px;
background: rgba(0, 1, 0, .4);
}
img{
 height: 220px;
 width: 350px;
 outline: 6px solid #CFCFCF;
}
.photo{
display: inline-block;
}
.footer{ 
background: rgba(0, 1, 0, .8);
padding: 11px;}
</style>
</head>
<body>
 
<div class="header">
  <h1>Сайт СуперАвто</h1>
  <p>Здесь вы найдете изображения и видео, связанные с автомобильной тематикой</p>
</div>
 
<div class="menu">
  <menu>
<li>Фотогалерея</li>
<li>Видео</li>
<li>Контакты</li>
   </menu>
</div>
<div class="container">
  <h2>Tesla</h2>
<div class="photo"><img src="http://www.ixbt.com/short/images/2015/Sep/30-09-2015%2015-41-25.jpg" alt="Avto"/></div>
<div class="photo"><img src="http://utmagazine.ru/uploads/content/tesla-model-s-P85D-5.jpg" alt="Avto"/></div>
<div class="photo"><img src="http://autotesla.ru/wp-content/uploads/2013/12/tesla-model-s.jpg" alt="Avto"/></div>
</div>
 
<div class="footer">
  Все права защищены!
</div>
</body>
</html>

Как видите, внешний вид созданного интернет-ресурса корректно отображается до тех пор, пока размер экрана не станет слишком маленьким. Поэтому дополним свойства css некоторыми параметрами.

Для начала к блокам с классами .header, .container и .footer добавьте свойство min-width: 355px. Теперь ваша страница с контентом будет уменьшаться только до указанного размера, а после появится скролл.

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

max-width: 100%;

height: auto;

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

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

А я прощаюсь с вами. Жду ваших заявок на подписку. Если вам понравилась статья, то делитесь ссылкой на нее с друзьями. До скорых встреч! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 13 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: